Astro 5
First of all I made the transition to Astro 5.
For the start I had to update the version with npx @astrojs/upgrade.
This version brought a lot of changes, TLDR; the main changes are:
- Content Layer
- Server Islands
- Simplified prerendering
- astro:env
- Vite 6
- and a lot of bug fixes and improvements
The Changes TL;DR
- Content Layer: The new Content Layer allows you to define your content schema and query your content using a simple API. This makes it easier to work with Markdown, JSON, and other content formats.
- Server Islands: Server Islands enable you to render parts of your site on the server, reducing the amount of JavaScript sent to the client and improving performance.
- Simplified Prerendering: Prerendering is now more straightforward, with improved support for static site generation and incremental static regeneration.
- astro:env: The new
astro:env API allows you to manage environment variables more effectively, making it easier to configure your project for different environments.
- Vite 6: Upgrading to Vite 6 brings performance improvements, better error handling, and new features that enhance the development experience.
My problems
My main problem was that I was using client:load on a layout which isn’t possible/recommend as it contains static information and thus doesn’t need
clientside loading.
Another problem I encountered with Vite and npm run build vs npm run dev. I was using await Astro.glob("./posts/**/*.md") to load all my blog posts,
this is now deprecated and you should use import.meta.glob("./posts/**/*.md") for the same purpose.
When using the new option tho you will have to await for everything to load in:
const content = import.meta.glob("path_to_markdown_files");
const contentPromises = Object.values(content).map((con) => con());
const loadedContent = await Promise.all(content);
Finally improving my light mode a bit
This a big point on my website I still don’t like how it is at the moment.
My inital goal was to create a paperlike look, as it should be relaxing for the eyes and not something
like a flashbang.
That is why I changed the colors like the following:
| Old | New |
|---|
| background | #ffffff | #f5f5f5 |
| primary | #a9da81 | #618b3c |
| secondary | #FADA7A | #79955f |
| accent | #c7f7b1 | #a9da81 |
After these changes in my opinion the website is a bit better for light theme, but still not perfect.
Loading blog posts based on their date and no longer on a static attribute
Something else I wanted to work on is how I release my posts.
When I started working on this problem I had the two folling attributes for my blogs:
I published my posts based on the value set in published, which isn’t the best decision I could make. That is why I’m now filtering all posts based on their release date.
So even if a post is finished and ready for release it won’t be shown until it’s pubDate is reached.
Organizing my work
I loved using TickTick to organize all my stuff and schedule it, but I always had a big problem when looking at my GitHub Issues.
That is why I went back to have a lookg at GitHub Projects.
I knew it existed, but I never had the motivation to actually use it and have a look at it. But I still wanted to give it a go and at the moment I love it.
I will write about this in future in more detail but for the moment it is perfect for me to order my tasks and have the visually prepared to have a look at them.
My future goals