106 lines
3.7 KiB
Markdown
106 lines
3.7 KiB
Markdown
---
|
|
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_
|