Implementing Blog

This commit is contained in:
Firq 2023-03-08 20:53:38 +01:00
parent 2b0fd9f13a
commit 0dad47a6ab
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 228 additions and 7 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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