From 559bb72b915f71bc9388dafa108a9d519266e4ed Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Wed, 27 Jul 2022 08:17:45 +0200
Subject: [PATCH] feat: add small header for blog posts

---
 src/components/Divider.svelte                |  9 ++++++
 src/layouts/blog.svelte                      | 31 ++++++++++++++++----
 src/layouts/components.js                    |  2 ++
 src/routes/blog/index.svelte                 |  4 ++-
 src/routes/blog/redminote7-arrowos.svx       |  6 ++--
 src/routes/blog/software-recommendations.svx |  7 ++---
 src/types.ts                                 |  3 +-
 7 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Divider.svelte

diff --git a/src/components/Divider.svelte b/src/components/Divider.svelte
new file mode 100644
index 0000000..5341531
--- /dev/null
+++ b/src/components/Divider.svelte
@@ -0,0 +1,9 @@
+<hr />
+
+<style>
+	hr {
+		background-color: var(--special-color);
+		border: none;
+		height: 1px;
+	}
+</style>
diff --git a/src/layouts/blog.svelte b/src/layouts/blog.svelte
index b81c4f7..96db292 100644
--- a/src/layouts/blog.svelte
+++ b/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>
diff --git a/src/layouts/components.js b/src/layouts/components.js
index bd4cb15..8299cea 100644
--- a/src/layouts/components.js
+++ b/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;
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
index 724b126..d963297 100644
--- a/src/routes/blog/index.svelte
+++ b/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>
diff --git a/src/routes/blog/redminote7-arrowos.svx b/src/routes/blog/redminote7-arrowos.svx
index cab1a1f..19b63d2 100644
--- a/src/routes/blog/redminote7-arrowos.svx
+++ b/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:
diff --git a/src/routes/blog/software-recommendations.svx b/src/routes/blog/software-recommendations.svx
index 1d9b763..47ae44f 100644
--- a/src/routes/blog/software-recommendations.svx
+++ b/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.
diff --git a/src/types.ts b/src/types.ts
index 415dba0..bc39e5c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 export interface BlogPostFrontmatter {
-	date: string;
+	created: string;
+	updated?: string;
 	title: string;
 	description: string;
 	keywords: string[];