Implementing Blog
This commit is contained in:
parent
2b0fd9f13a
commit
0dad47a6ab
GPG key ID:
3ACC61C8CEC83C20
6 changed files with 228 additions and 7 deletions
68
src/components/blogCard.astro
Normal file
68
src/components/blogCard.astro
Normal 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>
|
||||||
66
src/layouts/blogPost.astro
Normal file
66
src/layouts/blogPost.astro
Normal 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>
|
||||||
33
src/layouts/blogSection.astro
Normal file
33
src/layouts/blogSection.astro
Normal 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>
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import BlogCard from '../components/blogCard.astro';
|
||||||
import BasicSection from '../layouts/basicSection.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}>
|
<Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
|
||||||
<BasicSection title="Work in Progress">
|
<BasicSection title="Blog Articles">
|
||||||
Nothing to see here (yet)<br>
|
{allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
|
||||||
Topics will range from FGO to technologies and programming.
|
|
||||||
</BasicSection>
|
</BasicSection>
|
||||||
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
54
src/pages/blog/hello-world.md
Normal file
54
src/pages/blog/hello-world.md
Normal 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
|
||||||
Loading…
Reference in a new issue