2 files changed, 64 insertions, 0 deletions
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..25f76e6
--- /dev/null
+++ b/src/layouts/BlogPost.astro
@@ -0,0 +1,47 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import BaseHead from '../components/BaseHead.astro';
+import FormattedDate from '../components/FormattedDate.astro';
+
+type Props = CollectionEntry<'blog'>['data'];
+
+const { title, description, pubDate, updatedDate } = Astro.props;
+
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+
+const pubDateStr = `${pubDate.year}-${pubDate.month}-${pubDate.day}`;
+const updatedDateStr = updatedDate ?
+	`${updatedDate.year}-${updatedDate.month}-${updatedDate.day}`
+	: pubDateStr;
+---
+
+<html lang="en">
+	<head>
+		<BaseHead title={`${title} | joeac’s blog`} description={description} />
+		<link rel="stylesheet" href="/css/blog.css">
+	</head>
+
+	<body>
+		<article class="h-entry">
+			<aside>
+				<p>This is a blog post by <a class="p-author h-card" href="/">Joe Carstairs</a></p>
+				{ updatedDate
+					? (
+						<p>Updated: <FormattedDate date={updatedDateStr} className="dt-updated"/></p>
+						<p>Originally published: <FormattedDate date={pubDateStr} className="dt-published"/></p>
+					) : <p>Published: <FormattedDate date={pubDateStr} className="dt-published"/></p>
+				}
+				<p>Go back to his <a href="/blog">blog</a> if you like.</p>
+				<p><a class="u-url uid" href={canonicalUrl}>Permalink</a></p>
+	  		</aside>
+
+			<h1 class="h-name">{title}</h1>
+
+			<p class="p-summary" set:html={description} />
+
+			<div class="e-content">
+			  <slot />
+			</div>
+		</article>
+	</body>
+</html>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
new file mode 100644
index 0000000..4e5f3bb
--- /dev/null
+++ b/src/layouts/Page.astro
@@ -0,0 +1,17 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+
+const { title, description } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en-GB">
+	<head>
+		<BaseHead title={title} description={description} />
+	</head>
+
+	<body>
+		<slot />
+	</body>
+</html>
+