firq-dev-website/src/content/blog/astro-usage.md

---
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']
---

## What is Astro

<a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> 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 <a href="https://www.youtube.com/watch?v=dsTXcSeAZq8" target="_blank" rel="noopener noreferrer">Astro in 100 Seconds</a> by <a href="https://www.youtube.com/@Fireship" target="_blank" rel="noopener noreferrer">Fireship</a>

## 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)

```astro
<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:

```astro
---
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:

```typescript
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:

```css
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_