turbopack and app router; very annoying to work with!

src/app/notes/[note]/note.module.css

@@ -0,0 +1,7 @@
+.last-updated {
+    text-align: right;
+    display: block;
+    font-style: italic;
+    font-size: 1rem;
+    margin: 0.5rem 0.75rem;
+}

src/app/notes/[note]/page.tsx

@@ -0,0 +1,66 @@
+import ReactMarkdown from 'react-markdown';
+import { PluggableList } from 'unified';
+
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeHighlightCodeLines, { type HighlightLinesOptions } from 'rehype-highlight-code-lines';
+
+import readMarkdown from '../../lib/read-markdown';
+import { toLocaleString } from '../../lib/date';
+import NotesInfo from '../../../../public/notes.json';
+
+import style from './note.module.css';
+import 'highlight.js/styles/monokai-sublime.css';
+import 'katex/dist/katex.min.css';
+
+interface Note {
+	title: string,
+	mtime: string,
+	content?: string,
+}
+
+interface Notes {
+	[slug: string]: Note;
+}
+
+function Markdown({ content }: any) {
+	const remarkPlugins: PluggableList = [
+		remarkGfm,
+		remarkMath,
+	];
+	const rehypePlugins: PluggableList = [
+		rehypeSlug,
+		rehypeAutolinkHeadings,
+		rehypeRaw,
+		rehypeHighlight,
+		rehypeKatex,
+	];
+	return <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins}>
+		{content}
+	</ReactMarkdown>
+}
+
+export default async function Note({params}: {params: { note: string}}) {
+	const note = params.note
+	const n = await getNotes(note)
+	return (<>
+			<span className={style['last-updated']}>
+				Last updated: {toLocaleString(n.mtime)}
+			</span>
+			<section className='block'>
+				<Markdown content={n.content} />
+			</section>
+	</>
+	);
+}
+
+async function getNotes(name: string) {
+	const notesInfo: Notes = NotesInfo;
+	return {...notesInfo[name], content: await readMarkdown('notes', name, true)}
+}

src/app/notes/page.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link';
+
+import { toRelativeDate } from '../lib/date';
+import NotesInfo from '../../../public/notes.json';
+
+function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
+	return (
+		<tr>
+			<td style={{ flex: '1 0 50%' }}>
+				<Link href={`/notes/${note.slug}`}>
+					{note.title}
+				</Link>
+			</td>
+			<td style={{ fontStyle: 'italic' }}>
+				{note.mtime && toRelativeDate(note.mtime)}
+			</td>
+		</tr>
+	);
+}
+
+function NotesPage() {
+	const notes = Object.entries(NotesInfo)
+		.map(([slug, note]) => {
+			return {
+				slug,
+				title: note.title,
+				mtime: new Date(note.mtime)
+			}
+		})
+		.sort(
+			(a, b) => {
+				return b.mtime.getTime() - a.mtime.getTime();
+			}
+		);
+
+	return (
+		<>
+			{
+				!notes || notes.length === 0
+				&& <>No notes found</>
+				|| <table>
+					<tbody>
+						{notes.map(
+							(note: any) => {
+								return (<NoteEntry note={note} key={note.slug} />);
+							}
+						)}
+					</tbody>
+				</table>
+			}
+		</>
+	)
+}
+
+
+export default NotesPage;