---
import { getEmDashEntry, decodeSlug } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "../../layouts/Base.astro";
import CiteLink from "../../components/CiteLink.astro";

const slug = decodeSlug(Astro.params.slug);
if (!slug) return Astro.redirect("/404");

const { entry: issue, cacheHint } = await getEmDashEntry("issues", slug);
if (!issue) return Astro.redirect("/404");

if (Astro.cache?.enabled) Astro.cache.set(cacheHint);

const published = issue.data.publishedAt;
---

<Base
	title={issue.data.title}
	description={issue.data.dek}
	type="article"
	publishedTime={published?.toISOString()}
	content={{ collection: "issues", id: issue.data.id, slug: issue.id }}
>
	<div class="column">
		<article class="issue h-entry">
			<header>
				<p class="week">
					<a class="u-url" href={`/issues/${issue.id}`}>{issue.data.week}</a>
					{published && <> · <time class="dt-published" datetime={published.toISOString()}>{published.toISOString().slice(0, 10)}</time></>}
				</p>
				<h1 class="p-name">{issue.data.title}</h1>
				{issue.data.dek && <p class="p-summary"><i>{issue.data.dek}</i></p>}
			</header>
			<div class="e-content">
				<PortableText value={issue.data.body ?? []} components={{ mark: { link: CiteLink } }} />
			</div>
			<footer><a href="/issues">all issues</a></footer>
		</article>
	</div>
</Base>

<style>
	.issue :global(h1),
	.issue :global(h2),
	.issue :global(p),
	.issue :global(ul) {
		margin-block: 0.75em;
	}
	.issue :global(h2) {
		margin-block-start: 1.5em;
	}
	.issue :global(ul) {
		padding-inline-start: 1.5em;
	}
	.week {
		font-family: var(--font-mono);
	}
</style>