update page structure

src/components/BlogHeader.astro

@@ -1,7 +1,7 @@
 ---
 import { format, add } from 'date-fns';
 
-import CalendarIcon from '../styles/svg/calendar.svg';
+import CalendarIcon from '../img/svg/calendar.svg';
 
 interface Props {
 	title: String;
@@ -14,7 +14,7 @@ const { title, date, slug } = Astro.props;
 
 <div class="blog-header">
 	<h2>
-		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
+		{slug ? <a href={`/blog/${slug}`}>{title}</a> : title}
 	</h2>
 	<div>
 		<CalendarIcon class="calendar-icon" size={24} />

src/components/Footer.astro

@@ -1,11 +1,11 @@
 ---
-import RssIcon from '../styles/svg/rss.svg';
+import RssIcon from '../img/svg/rss.svg';
 const year = new Date().getFullYear();
 ---
 
 <footer>
 	<p>
-		Copyright {year}, Graham Hall
+		Copyright 2022 - {year}, Graham Hall
 
 		<br />
 		Built with <a href="https://astro.build">Astro</a>

src/components/Header.astro

@@ -10,10 +10,12 @@ interface NavLink {
 }
 
 const navLinks: NavLink[] = [
-	{ label: 'Blog', icon: 'pen', path: '/' },
-	{ label: 'About', icon: 'person', path: '/about/' },
-	{ label: 'Now', icon: 'clock', path: '/now/' },
+	{ label: 'Home', icon: 'person', path: '' },
+	{ label: 'Blog', icon: 'pen', path: 'blog' },
+	{ label: 'Now', icon: 'clock', path: 'now' },
 ];
+
+const pathComponents = pathname.split('/').slice(1);
 ---
 
 <header>
@@ -23,8 +25,8 @@ const navLinks: NavLink[] = [
 			navLinks.map((link) => (
 				<li>
 					<a
-						href={link.path}
-						class={pathname === link.path ? 'selected' : null}
+						href={`/${link.path}`}
+						class={pathComponents[0] === link.path ? 'selected' : null}
 					>
 						<span>{link.label}</span>
 					</a>

src/components/LatestPost.astro

@@ -0,0 +1,49 @@
+<div
+	x-data="{
+  latestPost: null,
+  fetchPost() {
+    fetch('https://mastodon.social/@ghalldev.rss')
+      .then((response) => response.text())
+      .then((str) =>
+        new window.DOMParser().parseFromString(str, 'text/xml')
+      )
+      .then((data) => {
+        const item = data.querySelector('item');
+        this.latestPost = {
+          link: item.querySelector('link').textContent,
+          body: item.querySelector('description').textContent,
+          pubDate: item.querySelector('pubDate').textContent,
+        };
+      })
+      .catch((error) => {
+        console.error('Error fetching feed:', error);
+      });
+  },
+}"
+	x-init="fetchPost()"
+>
+	<template x-if="latestPost">
+		<div class="mastodon-post">
+			<h2>Latest Mastodon Post</h2>
+			<p x-html="latestPost.body"></p>
+			<a x-bind:href="latestPost.link" target="_blank">View Post</a>
+			<small x-text="latestPost.pubDate"></small>
+		</div>
+	</template>
+	<template x-if="!latestPost">
+		<p>Loading...</p>
+	</template>
+</div>
+
+<style>
+	.mastodon-post {
+		margin: 2rem auto;
+		padding: 1rem;
+		max-width: 600px;
+		border-radius: var(--radius);
+		border: var(--border);
+	}
+	.mastodon-post > h2 {
+		margin-top: 0;
+	}
+</style>

src/components/Tags.astro

@@ -9,7 +9,7 @@ const { tags } = Astro.props;
 <span>
 	{
 		tags.sort().map((tag: string, index: number) => (
-			<a class="tag" href={`/archive/${tag}`}>
+			<a class="tag" href={`/blog/archive/${tag}`}>
 				{`${tag}${index < tags.length - 1 ? ', ' : ''}`}
 			</a>
 		))