How Astro powers this site

What is Astro

Astro is a new type of all-in-one web framework, generally designed for speed. It’s fascinating because it manages to integrate popular frameworks like react or vue while staying lightweight. It’s really nice to use, especially coming from plain HTML + CSS.

For a fast overview of Astro, look no further than Astro in 100 Seconds by Fireship

Why I like Astro

To be honest, the best way is to just show a bit of code:

With the following lines, I create the homepage of my website (I am omitting any imports)

<Layout
  title="Home - Firq FGO Site"
  currentpage="home"
  descriptionOverride={description}
>
  <Hero />
  <BaseSection title="Favourites">
    {favouritesdata.map((item) => <FavouriteCard {...item} />)}
  </BaseSection>
</Layout>

Instead of having a huge amount of HTML, I instead have only a layout and some components to put the page together. What’s also amazing is the fact that instead of declaring each of the favourites cards separately, I can just use a JSON file with all needed parameters and map it to the component.

In addition, managing blogposts is really convenient: instead of creating a page for each component, I can just use the following:

---
const allPosts = await Astro.glob('../pages/blog/*.md')
---

<Layout
  title="Blog - Firq FGO Site"
  currentpage="blog"
  descriptionOverride={description}
>
  <BlogSection title="Blog Articles">
    {
      allPosts.map((post) => (
        <BlogCard
          url={post.url}
          title={post.frontmatter.title}
          pubdate={post.frontmatter.pubDate}
          description={post.frontmatter.description}
        />
      ))
    }
  </BlogSection>
</Layout>

This imports all the markdown files from the pages/blog directory and then maps them to individual link cards. In the background, astro is formatting the markdown and creating a route under the /blog endpoint.

Also, since I want to have my blogposts sorted by date, the following line rearranged the post order before continuing:

allPosts.sort(
  (a, b) =>
    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
)

The frontmatter interface is a kind of header for the markdown files which provides astro with metadata like title, author and such. It is structured like this:

---
layout: ../../layouts/blogPost.astro
title: 'How Astro powers this site'
pubDate: 2023-03-09
description: "Blog post talking about how Astro provides the basis for this website"
author: "Firq"
tags: ["astro", "coding"]
---

This would for example be the frontmatter of this very post. The layout defines how the post will be rendered, which is also just an Astro layout.

And for styling the markdown itself, you would use the :global() css property that Astro introduces, since you have no structured HTML to refer to when creating the layout.

For example, the code blocks are styled like this:

article :global(.astro-code) {
  width: auto;
  padding: 1rem 1rem 1rem 2rem;
}

But that’s enough of me talking about how awesome I find Astro. I’m really looking forward what kind of developments I can achieve with this in the future.

~ Firq

next blog-post will probably be FGO-related