Fixed layout issues, added blog post, added date sorting, changed embed file, fixed old link

src/pages/blog.astro

@@ -1,16 +1,17 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import BlogCard from '../components/blogCard.astro';
-import BasicSection from '../layouts/basicSection.astro';
+import BlogSection from '../layouts/blogSection.astro';
 
 const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
 const allPosts = await Astro.glob("../pages/blog/*.md");
+allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
 ---
 
 <Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
-    <BasicSection title="Blog Articles">
+    <BlogSection title="Blog Articles">
         {allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
-    </BasicSection>
+    </BlogSection>
 </Layout>
 
 <style>

src/pages/blog/astro-usage.md

@@ -0,0 +1,100 @@
+---
+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*