---
import { getEmDashCollection } from "emdash";
import Base from "../../layouts/Base.astro";

const { entries: issues, cacheHint } = await getEmDashCollection("issues", {
	orderBy: { published_at: "desc" },
	limit: 52,
});

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

<Base title="Issues" description="potluck, week by week">
	<div class="column">
		<h1>Issues</h1>
		{
			issues.length === 0 ? (
				<p>No issues yet.</p>
			) : (
				<ul class="h-feed">
					{issues.map((issue) => (
						<li class="h-entry">
							<span class="week">{issue.data.week}</span>{" "}
							<a class="u-url p-name" href={`/issues/${issue.id}`}>{issue.data.title}</a>
							{issue.data.dek && <>: <span class="p-summary">{issue.data.dek}</span></>}
						</li>
					))}
				</ul>
			)
		}
	</div>
</Base>

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