feat: add small header for blog posts

src/components/Divider.svelte

@@ -0,0 +1,9 @@
+<hr />
+
+<style>
+	hr {
+		background-color: var(--special-color);
+		border: none;
+		height: 1px;
+	}
+</style>

src/layouts/blog.svelte

@@ -1,22 +1,43 @@
 <script context="module">
 	// @ts-ignore
 	import components from './components';
-	const { a, table, code, li } = components;
-	export { a, table, code, li };
+	const { a, table, code, li, hr } = components;
+	export { a, table, code, li, hr };
 </script>
 
 <script>
 	// @ts-nocheck
-	// svelte-ignore unused-export-let
+	import { mdiCalendar } from '@mdi/js';
+	import { mdiPencil } from '@mdi/js';
+	import Icon from 'mdi-svelte';
+	import Divider from '$components/Divider.svelte';
+
 	export let title;
 	// svelte-ignore unused-export-let
 	export let description;
-	// svelte-ignore unused-export-let
-	export let date;
+	export let created;
+	export let updated;
 	// svelte-ignore unused-export-let
 	export let keywords;
 	// svelte-ignore unused-export-let
 	export let hidden = false;
 </script>
 
+<h1>{title}</h1>
+<aside role="note">
+	{#if updated}
+		<Icon path={mdiPencil} size="0.8rem" /> updated {new Date(updated).toLocaleDateString('en-GB')};
+	{/if}
+	<Icon path={mdiCalendar} size="0.8rem" /> created
+	{new Date(created).toLocaleDateString('en-GB')}
+</aside>
+<Divider />
 <slot />
+
+<style>
+	aside {
+		font-weight: 200;
+		font-size: 0.8rem;
+		margin-bottom: 1rem;
+	}
+</style>

src/layouts/components.js

@@ -2,12 +2,14 @@ import Link from '../components/Link.svelte';
 import Table from '../components/Table.svelte';
 import Code from '../components/Code.svelte';
 import ListItem from '../components/ListItem.svelte';
+import Divider from '../components/Divider.svelte';
 
 const components = {
 	a: Link,
 	table: Table,
 	code: Code,
 	li: ListItem,
+	hr: Divider,
 };
 
 export default components;

src/routes/blog/index.svelte

@@ -34,7 +34,9 @@
 <ul>
 	{#each posts as post}
 		<ListItem>
-			<Link href={post.href}>{post.date} - {post.title}</Link>
+			<Link href={post.href}
+				>{new Date(post.created).toLocaleDateString('en-GB')} - {post.title}</Link
+			>
 		</ListItem>
 	{/each}
 </ul>

src/routes/blog/redminote7-arrowos.svx

@@ -1,6 +1,6 @@
 ---
-date: '2022-05-08'
-title: 'Arrow OS on Redmi Note 7'
+created: '2022-05-08'
+title: 'How to: Arrow OS on Redmi Note 7, root, microG'
 description: 'Learn how to install ArrowOS, based on Android 12 on your Redmi Note 7 (lavender) phone! Also installs root and microG for a BigTech free phone.'
 keywords: 
   - ArrowOS
@@ -23,8 +23,6 @@ keywords:
 	}
 </script>
 
-# How to: Redmi Note 7 with ArrowOs (Android 12), root, microG
-
 This tutorial will show you how to flash ArrowOS, a nice android 12 rom, together with magisk to get root access to the phone and also microG, the google alternative to google play services. This tutorial is tailored for the Redmi Note 7, commonly referred to as lavender. Other phones might work differently due to not having a ramdisk, or being an A/B device, or ... something else. Proceed with caution. You can't blame me for bricked devices.
 
 Prerequisites:

src/routes/blog/software-recommendations.svx

@@ -1,6 +1,7 @@
 ---
-date: '2022-07-26'
-title: 'Software recommendations for a privacy conscious digital life'
+created: '2022-07-26'
+updated: '2022-07-27'
+title: 'Software recommendations for privacy conscious people'
 description: ''
 keywords:
   - privacy
@@ -19,8 +20,6 @@ hidden: false
 	}
 </script>
 
-# Useful software I like
-
 Moving away from BigTech is not an easy task. However, in these days, there are plenty polished
 alternatives out there. Over the years I tried out many different services and software. I will
 present what worked best for me here.

src/types.ts

@@ -1,5 +1,6 @@
 export interface BlogPostFrontmatter {
-	date: string;
+	created: string;
+	updated?: string;
 	title: string;
 	description: string;
 	keywords: string[];