From ffd2c519c8171d980ccf6e6eee348cff564b4d7a Mon Sep 17 00:00:00 2001
From: Emily Hunt <emily.hunt.physics@gmail.com>
Date: Thu, 10 Oct 2024 15:34:01 +0200
Subject: [PATCH] Add automatically updating page titles

---
 src/lib/config.js                    |  3 ++
 src/routes/+layout.svelte            | 68 +++++++++++++++++++++++++---
 src/routes/posts/[slug]/+page.js     |  7 ++-
 src/routes/posts/[slug]/+page.svelte |  3 +-
 4 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/lib/config.js b/src/lib/config.js
index fafc8ff..2f817d5 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -1,3 +1,6 @@
+/* SITE SETTINGS */
+export const siteTitle = 'Dr. Emily L. Hunt';
+
 /* SOCIAL SETTINGS */
 // Ensure that any icons are also in icons.js
 export const socials = {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9751831..2eaf905 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,26 +1,82 @@
 <script>
-	import Header from '../lib/components/Header.svelte';
-	import Footer from '../lib/components/Footer.svelte';
+	let { children, data } = $props();
+	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 
 	/* SITEWIDE CSS IMPORTS */
 	import '$lib/css/main.css';
 	import '$lib/css/variables.css';
 	import '$lib/css/fonts.css';
 	import '$lib/css/code.css';
+
+	/* DYNAMIC WEBSITE TITLE */
+	// From https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
+	import { page } from '$app/stores';
+	import { siteTitle } from '$lib/config.js';
+	let head = $state({});
+	let defaultKeywords = ['Astronomy', 'Machine Learning', 'Space', 'Science', 'Programming'];
+
+	function setHead() {
+		// Default settings
+		head.title = [
+			siteTitle,
+			...$page.url.pathname
+				.split('/')
+				.slice(1)
+				// TODO: could make it all upper case instead of just the first bit
+				.map((word) => (word.charAt(0).toUpperCase() + word.slice(1)).replaceAll('%20', ' '))
+		]
+			.reverse()
+			.filter(Boolean)
+			.join(' - ');
+		head.description = undefined;
+		head.keywords = defaultKeywords;
+		head.author = siteTitle;
+
+		// Custom settings
+		if ($page.data.pageMeta === undefined) {
+			return;
+		}
+		if ($page.data.pageMeta.title) {
+			head.title = $page.data.pageMeta.title + ' - ' + siteTitle;
+		}
+		if ($page.data.pageMeta.description) {
+			head.description = $page.data.pageMeta.description;
+		}
+		if ($page.data.pageMeta.keywords) {
+			head.keywords = [...defaultKeywords, ...($page.datapageMeta.keywords || [])];
+		}
+	}
+
+	setHead();
+	$effect(setHead);
 </script>
 
-<Header/>
+<svelte:head>
+	<title>{head.title}</title>
+	{#if head.description}
+		<meta name="description" content={head.description} />
+	{/if}
+	{#if head.keywords}
+		<meta name="keywords" content={head.keywords.join(' ')} />
+	{/if}
+	{#if head.author}
+		<meta name="author" content={head.author} />
+	{/if}
+</svelte:head>
+
+<Header />
 
 <div class="slot-container">
-	<slot />
+	{@render children()}
 </div>
 
-<Footer/>
+<Footer />
 
 <style>
 	.slot-container {
 		margin-left: auto;
 		margin-right: auto;
-		width: var(--content-width);  /* PAGE WIDTH */
+		width: var(--content-width); /* PAGE WIDTH */
 	}
 </style>
diff --git a/src/routes/posts/[slug]/+page.js b/src/routes/posts/[slug]/+page.js
index d0bc8a7..dd262ca 100644
--- a/src/routes/posts/[slug]/+page.js
+++ b/src/routes/posts/[slug]/+page.js
@@ -3,6 +3,11 @@ export async function load({ params }) {
 	const post = await import(`../${params.slug}.md`);
 	return {
 		content: post.default,
-		metadata: post.metadata
+		metadata: post.metadata,
+		pageMeta: {
+			title: post.metadata.title + ' - Blog',
+			description: post.metadata.description,
+			keywords: post.metadata.categories,
+		}
 	};
 }
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index cf557b2..9f0103d 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <!-- svelte-ignore non_reactive_update -->
 <script>
 	import Image from '$lib/blocks/Image.svelte';
+	import { siteTitle } from '$lib/config.js';
 	import { formatDate } from '$lib/js/dates';
 	let { data } = $props();
 
@@ -32,7 +33,7 @@
 		</div>
 	{/if}
 	<div class="info">
-		<h1 class="heading">{data.metadata.title}</h1>
+		<h1 class="heading">{metadata.title}</h1>
 		<p class="category">
 			{#each categories as category, i}
 				{#if i !== 0}
-- 
2.54.0