100 lines
3.4 KiB
Markdown
100 lines
3.4 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
|
||
|
|
|
||
|
|
[Astro](https://astro.build/) 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](https://www.youtube.com/watch?v=dsTXcSeAZq8) by [Fireship](https://www.youtube.com/@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)
|
||
|
|
|
||
|
|
```astro
|
||
|
|
|
||
|
|
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
|
||
|
|
<Hero></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 seperately, 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) {
|
||
|
|
padding-left: 2em;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
But that's enough of me talking about how awesome I find Astro. I'm really looking forward what kind of developements I can achieve with this in the future.
|
||
|
|
|
||
|
|
**~ Firq**
|
||
|
|
|
||
|
|
*next blog-post will probably be FGO-related*
|