1---
2import type { CollectionEntry } from 'astro:content';
3
4type Props = { post: CollectionEntry<'blog'> };
5
6const { post } = Astro.props;
7const { Content } = await post.render();
8import { format } from 'date-fns';
9---
10
11<article
12  class="prose max-w-none prose-headings:font-sans prose-headings:font-black prose-headings:text-slate-900 dark:prose-headings:text-gray-200 dark:text-gray-400 dark:prose-strong:text-gray-400 dark:prose-code:text-slate-400 dark:prose-a:text-gray-300 prose-a:text-slate-900 prose-blockquote:text-slate-800 dark:prose-blockquote:text-slate-400 border-b-4 border-lineHighlight pt-4"
13>
14  <div class="pb-2">
15    <div class="md:flex justify-between">
16      <h1 class="mb-4">{post.data.title}</h1>
17      <span id={post.slug} class="-mt-16"></span>
18    </div>
19    <p class="italic p-0 m-0">
20      <time datetime={post.data.date.toISOString()}>
21        {format(post.data.date, 'MMMM yyyy')} by {post.data.author}
22      </time>
23    </p>
24  </div>
25  <div>
26    <Content />
27  </div>
28</article>