Thingies

[HiDeoo]

This smaller PR follows the same format as the one from yesterday, so, it's Highlightin Time!

Move site to site-new

This feels like déjà vu, but bear with me. The previous PR introduced a move of the source of the website in site-new, the output of the website to dist-site-new. If we need to use the Astro public folder to serve unprocessed assets, we would have ended up with a public-site-new folder as site-new/public was not an option due to site-new already being the sources which Astro is supposed to process. This was already becoming madness and I think my choice in the previous PR was not good as I'm too used to work in monorepos.

This PR moves everything related to the new website to subfolders of site-new:

• site-new/src contains the source of the website.
• site-new/dist contains the output of the website.
• site-new/public contains the public folder of the website.
• site-new/astro.config.mjs contains the Astro config.

This makes way more sense and things are easier to understand.

Titles

I finished the task that was still indicated as a todo and not finished from yesterday where you tried to rename the frontmatter title of the markdown.md page to Examples to highlight the header link.

With this PR, navigating to http://localhost:3000/markdown and editing the frontmatter title of site-new/src/pages/markdown.md to Examples will properly highlight the Examples link in the header.

Icons

This PR ports SVG icons to Astro components. This is pretty much a copy/paste of the existing code adapted to Astro in order to make things not that different but it should be noted that it's not how icons are usually handled. Most of the time, some code or library would find svgs locally, automatically optimize them, and would serve them using a code like <Icon name="toto" />, e.g. a library like https://github.com/natemoo-re/astro-icon.

This felt a bit too much changes compared to the current solution so I decided to not go that way for now. We can always improve this later if needed.

Color modes

We're now properly loading the color modes JavaScript file. This is a temporary solution as the file will need to be moved to a proper location in the future.

While setting up the load this JS code, I refactored all script tags in the codebase to use is:inline, as most of them are external scripts and this is the recommended way of doing this. By not doing this, by default, Astro will build, optimize, and add these scripts to the page automatically. There are rules where this is not the case, but I prefer to be explicit regarding loading JS code in an Astro codebase.

Regarding the color modes JS code, we could technically let Astro handle this kind of code (and we will prolly let it do that for other pieces of code), altho, doing so for the color modes could potentially result in a FOUC by not inlining this code. I'm doing the exact same thing on my website.

Question

In the screenshot above (left current website, right new website), do you have any idea why the link are different (the underline). My current idea without not much investigation at all (like none at all ^^) is that this is due to the fact that this is added by the icon-link classes introduced in this PR (that only says added in 5.3 in the docs) and that is not included in the v5.3.0-alpha1 we are using from the CDN and should be in the next alpha. If this is correct, when we switch to properly using the local version of the styles, this would be automatically fixed.

Final thoughts

One of the next big thing is gonna be setting up dynamic routing, deciding to use collections or not, etc. to avoid going too far in the wrong direction. We should setup the conversation to talk about this soon.