Merge fix
This commit is contained in:
parent
9584987150
commit
a2ee3564bc
GPG key ID:
3ACC61C8CEC83C20
26 changed files with 1125 additions and 1039 deletions
src/pages/blog
|
|
@ -2,9 +2,9 @@
|
|||
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"]
|
||||
description: 'Blog post talking about how Astro provides the basis for this website'
|
||||
author: 'Firq'
|
||||
tags: ['astro', 'coding']
|
||||
---
|
||||
|
||||
## What is Astro
|
||||
|
|
@ -17,36 +17,48 @@ For a fast overview of Astro, look no further than [Astro in 100 Seconds](https:
|
|||
|
||||
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)
|
||||
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
|
||||
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 seperately, I can just use a JSON file with all needed parameters and map it to the component.
|
||||
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");
|
||||
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
|
||||
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.
|
||||
|
|
@ -54,17 +66,16 @@ This imports all the markdown files from the `pages/blog` directory and then map
|
|||
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));
|
||||
|
||||
|
||||
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'
|
||||
|
|
@ -73,8 +84,6 @@ description: "Blog post talking about how Astro provides the basis for this webs
|
|||
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.
|
||||
|
|
@ -84,17 +93,14 @@ And for styling the markdown itself, you would use the `:global()` css property
|
|||
For example, the code blocks are styled like this:
|
||||
|
||||
```css
|
||||
|
||||
article :global(.astro-code) {
|
||||
padding-left: 2em;
|
||||
width: auto;
|
||||
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 developements I can achieve with this in the future.
|
||||
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*
|
||||
_next blog-post will probably be FGO-related_
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue