---
import RootLayout from '../../layouts/RootLayout.astro';
import NotchedBox from '../../components/NotchedBox.astro';
import FormattedDate from '../../components/FormattedDate.astro';
import { type CollectionEntry, getCollection } from 'astro:content';
import { render } from 'astro:content';

export async function getStaticPaths() {
	const notes = await getCollection('notes');
	return notes.map((note) => ({
		params: { slug: note.id },
		props: note,
	}));
}
type Props = CollectionEntry<'notes'>;

const note = Astro.props;
const { Content } = await render(note);
---

<RootLayout>
  <NotchedBox fillNotches="left">
    <h1>{note.data.title}</h1>
    <div class="last-updated">
      Last updated <FormattedDate date={note.data.updated} />
    </div>
    <Content />
  </NotchedBox>
</RootLayout>

<style>
.last-updated {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}
</style>
