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

.gitlab-ci.yml

@@ -29,3 +29,4 @@ deploy-site:
   script:
   - echo "Connecting to proxmox machine"
   - ssh $DEPLOY_USER@$DEPLOY_HOST -o StrictHostKeyChecking=no IdentitiesOnly=yes "screen -X -S website-firq-npx kill; rm -r -f public/*; cd build; git reset --hard; git pull; rm -r -f node_modules; npm install; npm run build; cp -R public ~; cd ~; screen -S website-firq-npx -dm npx serve public/ -p 9000"
+  

src/components/blogCard.astro

@@ -16,7 +16,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
 ---
 
 <a href={url} rel="noopener noreferrer">
-    <article class="contact do-hover">
+    <article>
         <h2>{title}</h2>
         <h3>{date}</h3>
         <p>{description}</p>
@@ -26,6 +26,8 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
 <style>
     a {
         text-decoration: none;
+        height: auto;
+        margin: 0.5rem;
     }
     p {
         color: white;
@@ -50,17 +52,18 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
     }
     article {
         display: flex;
+        flex: 1;
         flex-wrap: wrap;
-        flex-direction: row;
+        flex-direction: column;
-        align-items: baseline;
+        align-items: center;
         align-content: flex-start;
-        justify-content: center;
+        justify-content: baseline;
         background-color: var(--c-darkergray);
         padding: 10px;
         text-align: center;
         transition: transform var(--speed) var(--ease);
-        height: auto;
+        min-height: 100%;
-        width: 172px;
+        width: 11rem;
     }
     a:hover {
         transform: scale(var(--hover-scale));

src/layouts/Layout.astro

@@ -18,7 +18,7 @@ if(descriptionOverride === undefined) {
 	description = descriptionOverride;
 }
 
-let currPage = "https://firq.pages.neshweb.net/"
+let currPage = "https://firq.dev/"
 if (currentpage !== "home") {
 	currPage += currentpage;
 }

src/layouts/basicSection.astro

@@ -29,15 +29,13 @@ const { title } = Astro.props;
         display: flex;
         flex-flow: row wrap;
         padding: 1em;
+        color: white;
+        font-size: 1em;
     }
     @media (min-width: 512px) {
         div {
             justify-content: left;
         }
     }
-    div {
-        color: white;
-        font-size: 1em;
-    }
     
 </style>

src/layouts/blogSection.astro

@@ -14,7 +14,7 @@ const { title } = Astro.props;
 </section>
 
 <style>
-    h1 {
+     h1 {
         color: white;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
@@ -22,12 +22,21 @@ const { title } = Astro.props;
         background-color: var(--c-darkgray);
     }
     div {
-        display: block;
+        display: flex;
+        flex-flow: row wrap;
         row-gap: 1em;
         column-gap: 1em;
+        align-self: center;
+        align-items: stretch;
+        justify-content: space-around;
         padding: 1em;
         color: white;
         font-size: 1em;
     }
+    @media (min-width: 512px) {
+        div {
+            justify-content: left;
+        }
+    }
     
 </style>

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*