jeffreygaydos / te-custom-mods Goto Github PK
View Code? Open in Web Editor NEWA wordpress plugin that performs various customizations for the website https://tanks-encyclopedia.com/
A wordpress plugin that performs various customizations for the website https://tanks-encyclopedia.com/
In the earlier years of development, back when the child theme was used, I decided to go against the recommendations of various stack overflow articles and simply inline my HTML by concatenating strings to an .innerHTML
of an element. While this usually works, it's not best practice and has created some issues. Most features are already switched to using JS DOM objects, but some (that are not currently causing issues) remain, and should be cleaned up, namely:
tec_index.js
tec_gallery.js
tec_mobile_comp.js
tec_mobile_comp_init.js
Additionally, these files occasionally set the style of an element using the style
property directly in JS. This used to be a requirement when a dedicated CSS stylesheet was not set up for the plugin. Change any code that sets styles in CSS to set them using class/ids/names and the stylesheet. This should also hopefully reduce JS code focused on dark mode considerations. See tec_default.css
and tec_darkMode.css
.
To comply with Amazon's Associate Program, we need to mark our affiliate links as such, explaining that we get a commission for sales.
It appears that our affiliate links are primarily in the sources for articles, sometimes shown directly and sometimes shown through the href
only.
Add something like “(paid link)”, “#ad” or “#CommissionsEarned”
(direct quote from Amazon) to each link
With a little bit of JS/CSS all things are possible...
Look for entries in the slideshow that have images, and if they do, take their respective title link and add it to the image as a click event. The image stuff will still trigger unless you preventDefault
or something like that, but it should open the article in a new tab (for SEO purposes I guess)
Try not to spend too much time on this; if we get the gallery perfected, we might just be able to use that here...
Use github actions to update a file with contents similar to the below on a schedule:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>Tank Encyclopedia RSS Feed - Hand Built over at by JeffreyGaydos.github.io!</title>
<link>https://www.makeuseof.com/</link>
<description>Pings when new articles are added!</description>
<lastBuildDate>Wed, October 11 2023</lastBuildDate>
<item>
<title>Italian big gun</title>
<link>https://tanks-encyclopedia.com/category/ww2-italian-at-weapon/</link>
<guid>https://tanks-encyclopedia.com/category/ww2-italian-at-weapon/</guid>
<description>Idk some big Italian gun or something...</description>
<pubDate>Wed, October 11 2023</pubDate>
</item>
</channel>
</rss>
Of course, add data based on what is currently on TE (make a really small webscraper)
Finally, link up a view of the raw source (from github) to the MonioRSS bot. Hopefully it works better than what we have!
We have given up on Ex.Co (and reasonably so, it doesn't really add much to videos...) primarily because ad-blockers commonly block the video, even though it is technically in-house content. Direct YouTube embeds are less likely to get blocked so we will revert to that. There were a few features that were desirable from Ex.Co that need copied to our regular YouTube embeds:
In addition to these added features, remove all Ex.Co-related mechanics
At some point, we dropped the contents feature on Nation Pages. Add it back to Nation pages.
With the discovery of this @container
query, this should simplify the way we handle mobile styling, specifically in the header and will hopefully make that part of the site more consistent and safer. Might want to wrap this in with the other changes we intend to make to the header
Due to differences in browsers, the dark mode button displays with text on one line in some browsers and 2 lines on others. Rather than fixing the CSS padding & font size, just separate the 2 words into divs so that they display on separate lines. Additionally, fix the vertical positioning of the dontation links
Edge and Firefox work as expected
We have a shorttened version for the author page, but not for the categories page
It appears that many of the old images that are broken are from the german pages where the images were moved from the same path as the article to a new, known path. We've fixed some of them already but we can fix this common issue until we get full control of the backend.
document.location.href
and look for nazi_germany
document.querySelectorAll('img:not([src^="http"]):not([src^="/wp"])');
to find links that might need updated.src
and replace nazi_germany
with germany
.src
attribute is already converted to an absolute link after selecting it via querySelector
despite being able to select it as a relative linkAfter recreating the index feature, the indentations for h2 vs h3 headings were lost. Add this feature back
I think a lot of issues with the Dark Mode state saving between sessions revolves around the checks we have to make sure users are ok with cookies before we use them to add features to our website. Seeing as the cookies we are using for our own purposes have nothing to do with Ads, revenue, or anything else morally ambiguous, I don't see any reason why we need to ask users if it's ok for us to attach something to make the Dark Mode feature work. Cookie laws are in place to inform users about how companies use data to generate revenue. We are not generating revenue from the Dark Mode cookie, so hopefully this means we can just not ask permission.
Research to determine if this is the case, and if so remove the checks we have that rely heavily on specific plugins we use.
Does this trigger an RSS feed update?
Not sure if this is any different than cookies, but it could be more reliable. It's how some providers authenticate so it seems a bit more robust than something usually used for ad tracking purposes. If this is a viable solution, create a version of the dark mode system that runs alongside the existing one, with a toggle in the admin panel to switch between methods. Make sure that we still insert cookies even when we are on "local-storage" mode
We previously integrated with an existing plugin to allow 2 writers to be credited on an article. With upcoming articles, it is likely that we will need the ability to add 3 authors on 1 article. Expand the existing functionality to do this
Specifically for mobile devices, the recent tank encyclopedia video embed does not look great. The library that we use for video embeds forces the video to the top of the screen in a small box that cannot be maximized or minimized.\
This should be resolved by:
Add a feature to the gallery that allows the user to specify the max height of the gallery. Default the value to something reasonable, something like 768px. Do some calculations (or just make the max height based on the height of the images rather than the whole gallery) to prevent the gallery from getting too large.
Essentially, wrap the createGallery
function in a try catch so that if an error occurs, we move on to the next gallery and attempt to construct that one. Also, change the names of the global level functions to have a tec_
prefix
Something brought up by Harold
ww1-belgium and ww1/belgium.php are valid, but ww1/belgium gives the error
We suspect it has something to do with the security rules David has in place. Investigate once we have full control
See Release 2.0.2:
- Changed donation link for PayPal
- mobile formatting updated within Wordpress
I'd like to know where this is exactly. Could integrate it into my plugin or know which things I'm "allowed" to touch in WP
It works on desktop with screens of similar size. My guess is that there is something different with the way that the 3rd party embed detects mobile use, and uses a different way to insert the video
Possible Solutions
The authors.php
page in the primary theme was removed during our migration to a new host. This file (created by Roshindow) needs to be added back to the main theme, added to a child theme, or added to the tec-custom-mods
plugin in some way
For Development:
This is funny. Here's the bug:
I don't know why it's happening and don't really have any guesses other than maybe we are "resizing" the window or something, causing some JS triggers. This also seems to break the x button on the video. If the content box is clicked before the x button has time to appear, the process that makes the x appear will also crash.
Or maybe just devise a web scraper that points out words that maybe could be linked
I'm thinking this should be separate somehow, maybe I could use AI???
Consider a scheduled GHA webscraper
First, you will need a list of all the articles from TE. Not sure how you'd find that out. Then you could webscrape the most recent article according to the RSS feed.
Currently the category pages only display the top 10 articles, with no pagination. Roshindow mentioned this was due to some issues where uncategorized articles would cause all articles on the website to appear. See if this is still the case or if there is a workaround for this so we can have all the articles present on category archives.
Make sure you disable category page generation for categories that are large/not really supposed to be used (like "Has Own Video")
With the addition of a different carousel plugin, the Dark Mode no longer looks that great with it:
Change the background color of each box with text in it to be the --te-darkgreen
color or something similar.
Implement this in a way that is easily removable if we end up not sticking with this carousel plugin.
We appear to be setting the innerText
of the captions rather than the innerHTML
of the captions. This means that any raw HTML in the captions will show up as raw HTML, rather than parsed HTML.
During some kind of update, the usual PHP code we had for the author was removed, and with no source control around some of the WordPress code, it was lost to the sands of time.
Recreate it in the plugin please
The gallery feature is lacking in consistent behavior. Namely:
Using the same thing as dark mode, save users' decision to close the TE Video embed, but reset this decision if:
Look into optimizing the WP_query call
Get the server logs from our host to investigate
Now that we have real access to the backend, we just need to hook it up to some crons on our server. The backup schedule should be something like this:
On second thought, a full backup takes around 24 hours and takes over 130GB of storage. We can do weekly downloads
For Deployment:
Looks like we need to decode some of the titles we get form the HTML so that they have accents and such. For example, LeoBot outputs:
Schwere Gel\xc3\xa4ndeg\xc3\xa4ngiger Lastkraftwagen 4.5t Mercedes-Benz L4500A als FlaKwagen
When it should output
Schwere Geländegängiger Lastkraftwagen 4.5t Mercedes-Benz L4500A als FlaKwagen
Somehow, the second time the RSS was sent, MonitoRSS decoded the text properly. See the local server for details
Since adding the recent video automatic embed, the articles with actual videos have different styles. Bring them closer to being the same by:
Originally brought up here: https://discord.com/channels/278658898230116352/282182583146774528/1117852819668615178
Referencing this article: https://tanks-encyclopedia.com/ww2/soviet/soviet_bt-2.php
There are random empty tags throughout the headers of the WW2 page article
The Modern American Tanks page (https://tanks-encyclopedia.com/modern/usa) has some galleries that wrapped around images which have <p>
tags surrounding them. This seems to be preventing the galleries from being created. While it should partially be the responsibility of the gallery placer to know when this is the case, the gallery feature should be robust enough to handle this.
Scaling tables down might make the text really small. We are ok with this and assume mobile users will just zoom in when needed. Do this via additional CSS.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.