---
import { getCollection, render } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import { formatDate, formatListItem } from '../../lib/format';
import { getSlug, enrichPostWithDates, enrichPostsWithDates, resolveRelatedPosts } from '../../lib/md';

export async function getStaticPaths() {
  const rawPosts = await getCollection('md');
  const allPosts = enrichPostsWithDates(rawPosts);
  return allPosts.map(post => ({
    params: { slug: getSlug(post.id) },
    props: { post, allPosts }
  }));
}

const { post, allPosts } = Astro.props;
const { Content } = await render(post);
const related = post.data.related ? resolveRelatedPosts(post.data.related, allPosts) : [];
---
<Layout title={`${post.data.title} - lewis m.w.`}>

<article>
<h1>{post.data.title}</h1>
<p class="muted" style="margin-top: 0;">{formatDate(post.dates.created)}{post.dates.updated && ` (updated ${formatDate(post.dates.updated)})`}</p>
<Content />
</article>
{related.length > 0 && (
  <details open>
    <summary>related</summary>
    <pre set:html={related.map(p => formatListItem(p.dates.created, `/md/${getSlug(p.id)}`, p.data.title)).join('\n')} />
  </details>
)}
</Layout>