And just like that...

… I started on yet another rewrite.

Stargazing

I’ve had my eye on Astro for a while now. One of the things that caught my eye was just how much it looked like Svelte.

Consider the following examples:

---
import BlogPost from "../components/BlogPost.astro";

const allBlogPosts = await fetch("https://blog.lofjard.se/api/blogposts/all", data => {
   return await data.json();
});
---

<div class="blog-list">
{ allBlogPosts.map(item => (
   <BlogPost item={item} />
))}
</div>

<style>
.blog-list {
   width: 600px;
   margin: 0 auto;
}
</style>

vs

<script>
import BlogPost from "../components/BlogPost.svelte";

const allBlogPosts = await fetch("https://blog.lofjard.se/api/blogposts/all", data => {
   return await data.json();
});
</script>

<div class="blog-list">
{#each allBlogPosts as item}
   <BlogPost {item} />
{/each}
</div>

<style>
.blog-list {
   width: 600px;
   margin: 0 auto;
}
</style>

They both fetch some blogpost from an api and passes each post along to another component that renders them. The general structure is the same, e.g. there is some script code up top, some basic templating in the middle and some CSS at the bottom.

The difference

Well the difference is in how they handle things. While both Svelte and Astro can be configured for SSR (Server Side Rendering), the default in Svelte is to work as a SPA framework while the default in Astro is to render everything at build time into static files.

Astro has a “zero client-side javascript” policy by default, but certain areas can be “hydrated” with scripts from other frameworks such as React, or in my case Svelte. These areas are called “islands” in Astro-lingo and I plan on using this both for the commenting system and for my admin area.

Will it ever stop?

I honestly don’t know. I’m having a lot of fun learning the ins and outs of different frameworks, and this blog always seem like the perfect victim for my latest whim.

There is still some stuff to be done with the design. Not all functionality is done yet. I mentioned which parts in the last blog post. I plan on releasing a first version of this before my summer vacation is over, and since this blog post is written as Astro markdown content, if you are reading this then I have already released it in its current form.

tl;dr

• It’s a neverending cycle of rewrites.
• All public facing sites are now static, generated by Astro.
• Admin area, and comments section will include Svelte “islands”.