---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import FormattedDate from '../components/FormattedDate.astro';
import Navbar from '../components/Navbar.astro';

type Props = CollectionEntry<'blog'>['data'];

const { title, description, pubDate, updatedDate } = Astro.props;

const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
---

<html lang="en">
	<head>
		<BaseHead title={`${title} | joeac’s blog`} description={description} />
		<link rel="stylesheet" href="/css/blog.css">
	</head>

	<body>
		<Navbar />
		<article class="h-entry">
			<aside>
				<span>
					This is a blog post by
					<a class="p-author h-card" href="/">Joe Carstairs</a>.
				</span>
				{ updatedDate
					? (
						<span>Updated: <FormattedDate date={updatedDate} className="dt-updated"/>.</span>
						<span>Originally published: <FormattedDate date={pubDate} className="dt-published"/>.</span>
					) : <span>Published: <FormattedDate date={pubDate} className="dt-published"/>.</span>
				}
				<span hidden><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
	  		</aside>

			<header>
				<h1 class="h-name">{title}</h1>
				<p class="p-summary" set:html={description} />
			</header>

			<section class="e-content">
			  <slot />
			</section>
		</article>
	</body>
</html>
