jeffreygaydos / te-custom-mods Goto Github PK

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:

• Follow me panel when the video goes off screen
• Recent Videos Embed - but using YouTube instead of Ex.Co
  • Our previous implementation did not actually shuffle the playlist. If a shuffled embed is possible, use that. Otherwise attempt to shuffle the playlist manually if possible

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

Chrome

Opera

Duck Duck Go

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.

• Only do this on old german pages
  • So do this using document.location.href and look for nazi_germany
• Use document.querySelectorAll('img:not([src^="http"]):not([src^="/wp"])'); to find links that might need updated
• Update the .src and replace nazi_germany with germany
  • Note that the .src attribute is already converted to an absolute link after selecting it via querySelector despite being able to select it as a relative link

After recreating the index feature, the indentations for h2 vs h3 headings were lost. Add this feature back

• Something like a number of dots at the bottom
• Could be as simple as 2/5

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

• convert the tec_mobile_comp_init.js and related files to a "always active" CSS file with @media attributes in it

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:

• Adding the link to the TE YT channel
• Adding an "X" button to close the video
• Ensuring the maximize button works for mobile videos

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

• I think a folder with a bunch of files (and any readme-esc files to match) would be sufficient
• The benefits are twofold:
  • I get to understand where my code is coming from and can more easily maintain it
  • We have a nice fallback should something catastrophic happen to the website

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

See underlined text:

You may want to do this after the CSS refactor related to mobile and colors

• due to Cookie Law info bar updates

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

• Expand the Width limit to prevent the video from appearing on more screens
• Attempt to add the styling to hide the video inline, asynchronously, and with !importance just to make sure it sticks

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:

• automatically tick the version numbers in those php files on-save
  • I have tried to get it to only tick the modified files on demand, but honestly this seems even easier to me
  • A combination of VS code automation and python should do the trick

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:

• The thing that tracks which picture you are on out of the total number of images often goes straight to numeric, even when there is definitely enough space for the block method of tracking which image you are on
• When moving to the next picture, it often takes longer than the transition time (~0.5s) to load up, resulting in the previous image reappearing for a second, then getting replaced by the next image
  • Consider adding a loading gif that hides this until we know the new image has loaded
  • Figure out a way to detect if the image has actually loaded in all the way

Using the same thing as dark mode, save users' decision to close the TE Video embed, but reset this decision if:

• a new TE video comes out
• the user navigates to a page that has its own TE video in-article

• Due to differing file structures from the live site

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:

• Daily backups
• Keep daily backups for the past week (7)
• Keep weekly backups for the past 4 weeks, every Friday I guess (4)
• Keep monthly backups for the past year (first of the month) (12)
• Keep annual backups for 5 years (first of the year) (5)

On second thought, a full backup takes around 24 hours and takes over 130GB of storage. We can do weekly downloads

For Deployment:

• some way to handle versioning better
  • we could just rely on the dev versions and just blast the numbers to the moon over the years
  • create a file in the root of the repo that keeps track of all the versions of each file in production
    • We only update this when we trigger an automated release
    • This file should also keep track of CSS versions if at all possible
• speaking of which, automated releases via github actions
  • see https://github.com/marketplace/actions/create-release and the usual github actions docs
  • We want to create a release with the official plugin zip file being "production ready"
  • example workflow: code > PR > run build scripts (zippers) > Merge PR > Github action trigger
    • wouldn't it be cool if we could ask github to detect the change of the zip file to figure out if the PR is release worthy? ✨

• It does hide itself at the bottom of the page
• It does hide itself just after clicking it
• Still fully functional otherwise

• Cookies do not persist to keep dark mode on for certain people
• General inconsistency of dark mode persistence

• This is due to having to scroll to the top, and then back down to the spot where they used to be
• Consider re-working how the clone header handles buttons entirely

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

• Plugin is large enough that this now has a small impact on site performance

Since adding the recent video automatic embed, the articles with actual videos have different styles. Bring them closer to being the same by:

• Ensuring the X is visible on mobile devices
• Adding a maximize feature for both desktop and mobile devices

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.

• Donation buttons should be inline with dark mode button, not site description
• consider making them smaller or removing them earlier (in terms of smaller and smaller width screens)

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.