tried to get working on gh pages, but only home page would load properly
Used react-snap to prebuild all routes of the website both for SEO and to make it work with GitHub pages, go into more details, need 404 page that routes to whatever
Used react-helmet to manage SEO metadata and improve search engine visibility
Migrated project to next.js to optimize loading times and improve SEO
automated building with github actions, first using a react-snap action someone else made then writing one manually for next.js building. Started by serving out of docs folder in master branch, now serving from gh-pages branch. Migrating to next.js let me decrease github action runtime/build time from 90-100 seconds to ~55 seconds.
everything is built statically to ensure it is served really fast an efficiently
lot of work into SEO, custom titles and descriptions for each page and making sure site embeds (is this the right term? ex. lil snippet discord will render) work properly
added sitemap generation using `next-sitemap`, to help with SEO and web crawlability. Would like to customize the priority values and find a way to automatically detect when pages were updated (maybe through git history, maybe file data is enough?) to keep it cleaner
added tailwind to make styling a lot easier, had used bootstrap professionally before but wanted to try something new. Resulted in 0.1 second increase in first contentful paint time and speed index :(
started working on finding a good color scheme, used realtimecolors.com to find initial color schemes.
Started looking into adding a light/dark mode toggle to let me do the "software engineer by day, game developer by night" thing. Initially found next-themes but that forces me to do client side rendering (no want). Decided to go the maybe harder route of just using CSS through tailwind, worried about how to fix potential flickers (maybe can just not store user preferences and be fine, but ideally would be able to remember what each user used (requires changing themes after website is somewhat loaded)). Need to make sure the transition is juicy and animated.
Making sure that no content moves during the transition, make sure no layout changes or anything happen to make sure site stays readable
really hard to get dark mode to work without FOUC (flash of unstyled content), finally fixed it by inlining a script in the head with normal script tag instead of next.js Script (next.js Script is run after next js is running locally, which is after the site has all loaded (double check this, but this is the jist)
maybe talk about trying to get it to work well with darkreader, maybe talk about how it always causes a flash of dark before showing real styles
initial attempt to get the site working well with dark reader was just disabling it with a meta tag (darkreader-lock), but I still want to make sure that if someone was using darkreader the website will definitely use dark mode
looking into the "color-scheme" meta tag, maybe this can let darkreader exist? This isn't actually what I want though, I don't want dark reader to affect my light mode site
unable to find any way to make dark reader trigger my actual stuff, maybe I just need to style my stuff to look good when using dark reader?