---
import { getCollection, render } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import { formatDate, formatListItem, excerpt } 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) : [];
const description = excerpt((post as any).body) || undefined;
---
<Layout title={`${post.data.title} - lewis m.w.`} description={description}>

<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 && (
  <section>
    <span class="section-label">related</span>
    <pre set:html={related.map(p => formatListItem(p.dates.created, `/${getSlug(p.id)}`, p.data.title)).join('\n')} />
  </section>
)}
</Layout>