From 0dad47a6ab29afa76f8d17545e09f684b8372911 Mon Sep 17 00:00:00 2001
From: Firq <firelp42@gmail.com>
Date: Wed, 8 Mar 2023 20:53:38 +0100
Subject: [PATCH] Implementing Blog

---
 .gitlab-ci.yml                |  4 +--
 src/components/blogCard.astro | 68 +++++++++++++++++++++++++++++++++++
 src/layouts/blogPost.astro    | 66 ++++++++++++++++++++++++++++++++++
 src/layouts/blogSection.astro | 33 +++++++++++++++++
 src/pages/blog.astro          | 10 +++---
 src/pages/blog/hello-world.md | 54 ++++++++++++++++++++++++++++
 6 files changed, 228 insertions(+), 7 deletions(-)
 create mode 100644 src/components/blogCard.astro
 create mode 100644 src/layouts/blogPost.astro
 create mode 100644 src/layouts/blogSection.astro
 create mode 100644 src/pages/blog/hello-world.md

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 3e21d9d..dbe7007 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -27,5 +27,5 @@ deploy-site:
   - chmod 644 ~/.ssh/known_hosts
 
   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 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"
\ No newline at end of file
+  - 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 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"
\ No newline at end of file
diff --git a/src/components/blogCard.astro b/src/components/blogCard.astro
new file mode 100644
index 0000000..8286454
--- /dev/null
+++ b/src/components/blogCard.astro
@@ -0,0 +1,68 @@
+---
+export interface Props {
+	url: string | undefined;
+	title: string;
+    pubdate: string;
+    description: string;
+}
+
+const options_date: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+}
+const { description, pubdate, url, title } = Astro.props;
+const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
+---
+
+<a href={url} rel="noopener noreferrer">
+    <article class="contact do-hover">
+        <h2>{title}</h2>
+        <h3>{date}</h3>
+        <p>{description}</p>
+    </article>
+</a>
+
+<style>
+    a {
+        text-decoration: none;
+    }
+    p {
+        color: white;
+        padding: 0em 0.5em;
+        text-align: left;
+        font-size: 1.1em;
+        margin: 0.5em;
+    }
+    article>h2 {
+        margin: 0.3em 0px;
+        color: var(--c-darkpurple);
+        font-size: 1.3em;
+        line-height: normal;
+        text-decoration: none;
+    }
+    article>h3 {
+        margin: 0.2em;
+        color: white;
+        font-size: 0.8em;
+        line-height: normal;
+        text-decoration: none;
+    }
+    article {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-items: baseline;
+        align-content: flex-start;
+        justify-content: center;
+        background-color: var(--c-darkergray);
+        padding: 10px;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+        height: auto;
+        width: 172px;
+    }
+    a:hover {
+        transform: scale(var(--hover-scale));
+    }
+</style>
\ No newline at end of file
diff --git a/src/layouts/blogPost.astro b/src/layouts/blogPost.astro
new file mode 100644
index 0000000..0f581f7
--- /dev/null
+++ b/src/layouts/blogPost.astro
@@ -0,0 +1,66 @@
+---
+import Layout from "./Layout.astro";
+const { frontmatter } = Astro.props;
+
+const title = `${frontmatter.title} - Firq FGO Site`;
+const description = frontmatter.description;
+const options_date: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+}
+const date = new Date(frontmatter.pubDate).toLocaleDateString('en-GB', options_date);
+---
+
+<Layout title={title} currentpage="blog" descriptionOverride={description}>
+    <div>
+        <h1>
+            {frontmatter.title}
+        </h1>
+        <p>by {frontmatter.author} • Published on {date}</p>
+        <article>
+            <slot />
+        </article>
+    </div>
+</Layout>
+
+<style>
+    h1 {
+        color: white;
+        margin: 0.5rem 0px 0.5rem 15rem;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-darkgray);
+    }
+    p {
+        color: white;
+        margin: 0.5rem 0px 0.5rem 15rem;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-gray);
+    }
+    article :global(h2) {
+        color: white;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-darkgray);
+    }
+    article :global(a) {
+        color: var(--c-darkpurple);
+        text-decoration: none;
+    }
+    article {
+        color: white;
+        margin: 0.5rem 15em 0.5rem 15rem;
+        font-size: 1.1em;
+        padding-bottom: 5rem;
+    }
+    article :global(.astro-code) {
+        padding-left: 2em;
+        width: auto;
+    }
+    article :global(code) {
+        font-weight: bold;
+        color: orange;
+    }
+</style>
\ No newline at end of file
diff --git a/src/layouts/blogSection.astro b/src/layouts/blogSection.astro
new file mode 100644
index 0000000..d4630e8
--- /dev/null
+++ b/src/layouts/blogSection.astro
@@ -0,0 +1,33 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<section>
+    <h1>{title}</h1>
+    <div>
+        <slot />
+    </div>
+</section>
+
+<style>
+    h1 {
+        color: white;
+        margin: 0.5rem 0px 0.5rem 0.5em;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: var(--c-darkgray);
+    }
+    div {
+        display: block;
+        row-gap: 1em;
+        column-gap: 1em;
+        padding: 1em;
+        color: white;
+        font-size: 1em;
+    }
+    
+</style>
\ No newline at end of file
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index d53ec4d..372737c 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,16 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import BlogCard from '../components/blogCard.astro';
 import BasicSection from '../layouts/basicSection.astro';
 
-const description = "A placeholder until I get to designing the Blog pages. Future topics will include FGO, TA, Programming, web technologies and more!"
+const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
+const allPosts = await Astro.glob("../pages/blog/*.md");
 ---
 
 <Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
-    <BasicSection title="Work in Progress">
-        Nothing to see here (yet)<br>
-        Topics will range from FGO to technologies and programming.
+    <BasicSection title="Blog Articles">
+        {allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
     </BasicSection>
-    
 </Layout>
 
 <style>
diff --git a/src/pages/blog/hello-world.md b/src/pages/blog/hello-world.md
new file mode 100644
index 0000000..d66dad3
--- /dev/null
+++ b/src/pages/blog/hello-world.md
@@ -0,0 +1,54 @@
+---
+layout: ../../layouts/blogPost.astro
+title: 'Hello World!'
+pubDate: 2023-03-08
+description: "First blog post, talking a bit about the site, the technologies behind it and the future ideas"
+author: "Firq"
+tags: ["astro", "hello"]
+---
+
+Well ... that took some time to get up and running. But nonetheless, here we are, and my site is starting to work!
+
+## What is this whole thing?
+
+My own site! Well, I should explain a bit more ...
+
+Last year, someone asked me if I could provide them with a list of servants and CEs that I own and that are often used in FGO TA. At first, I started writing down
+the servants as markdown files (kinda ironic, this is a markdown file as well). But after a while, a good friend, [Neshura](https://mastodon.neshweb.net/@neshura)
+said to me: "Why don't you just create a small site with GitLab Pages? You can host that on my instance". And so, I started writing HTML and CSS by hand, getting the
+first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to [Mitsunee](https://www.mitsunee.com/) for helping me so much with the CSS).
+
+But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while. 
+
+But then came [Astro](https://astro.build). When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those. 
+Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
+```typescript
+
+<BaseSection title="Servants">
+	{servantdata.map((item) => (<ServantCard {...item}/>))}
+</BaseSection>
+
+
+```
+
+But still, the whole site felt odd. It was a single page, with everything just cramped in there. So around 2 weeks ago, I started to rewrite the whole thing as a multi-page website. GitLab made it sometimes pretty hard (because having a baseurl of `/fgosite` was forced), but it worked and felt a lot cooler.
+
+Still, I was a bit annoyed that I had this long-ish URL for the site (`firq.pages.neshweb.net/fgosite`), but the GitLab instance didn't offer to set a custom domain (because of how the server where it runs is set up). 
+
+So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution. 
+
+## But ... how does it work?
+
+In general, this whole site is an Astro project that is being built using GitLab Pipelines. For that, the project is copied onto an Alpine-Linux Proxmox instance where it then gets built. This is necessary so that once it is served to `localhost` using `npx serve`, it has it's own IP address and port. Using those in nginx, the site can be assigned the `firq.dev` domain and be made public.
+
+To prevent the `serve`-command from ending once the GitLab runner cuts the SSH connection the Proxmox instance, `screen` is being used to start a headless session where `serve` is then executed. This also makes it easy to reload the site after a finished build, as I can easily kill the running screen session with the specific tag.
+
+## So ... what can be expected here?
+
+I have some more blog topics that I want to write about in the future (FGO TA being the most prominent one, followed by a detailed explanation of this project). I also want to tackle the design in some cases, as I am not completely satisfied how some parts of the site look.
+
+But in general, this whole thing is a hobby-project which aims to enhance my web-dev skills and provide others with information.
+
+Thanks for reading, and until next time
+
+~ Firq