turbopack and app router; very annoying to work with!

src/app/posts/[post]/page.tsx

@@ -0,0 +1,85 @@
+import ReactMarkdown from 'react-markdown';
+import style from '../../styles/post.module.css';
+import PostsInfo from '../../../../public/posts.json';
+import readMarkdown from '../../lib/read-markdown';
+import DateTool, { toLocaleString } from '../../lib/date';
+
+interface IPost {
+	title: string;
+	mtime: string;
+	otime?: string;
+}
+
+function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
+	const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
+
+	const mdate = new Date(mtime);
+	const odate = new Date(otime);
+
+	const format = (date: Date) => {
+		const day = date.getDay();
+		const ord = <sup>{DateTool.getOrdinalDaySuffix(date.getDay())}</sup>;
+		const month = DateTool.getFullMonth(date.getMonth());
+		const year = date.getFullYear();
+		const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
+		const minPrefix = date.getMinutes() < 10 ? '0' : '';
+		const minutes = date.getMinutes();
+		const twelveSfx = ampm(date.getHours());
+		return <>{day}{ord} {month} {year} at {hours}:{minPrefix}{minutes} {twelveSfx}</>
+	};
+
+	return (
+		<div style={{ textAlign: 'right', fontSize: '16px', fontFamily: 'Cantarell', fontStyle: 'italic' }}>
+			{
+				mtime ?
+					<div className='mtime' data-text={mdate.toISOString()}>
+						Last updated: {format(mdate)}
+					</div>
+					:
+					<></>
+			}
+			<div className='otime'>
+				{format(odate)}
+			</div>
+		</div>
+	);
+}
+// post: IPost & { content: string, cover?: string, otime: string, mtime?: string }
+export default async function Post({ params }: { params: {post: string} }) {
+	const post = await getPost((await params).post);
+	if (!post)
+		return <></>;
+	return (<>
+			<div className='container'>
+			   { post.otime !== post.mtime && post.mtime &&
+				   <span className={style.time}>
+				   Last updated: {toLocaleString(post.mtime)}
+				   </span>
+			   }
+				<span className={style.time}>
+					{toLocaleString(post.otime)}
+				</span>
+			</div>
+			{<div className={style.imageBlock}
+				style={{
+					backgroundImage:
+						post.cover ?
+							`url(/assets/images/${post.cover})` :
+							'linear-gradient(to bottom right, rgb(5, 51, 11), rgb(5, 45, 13) 15%, rgb(5, 39,15) 40%, rgb(0, 30, 16) 80%)'
+				}}></div>}
+			<div className={`${style.spacer} ${post.cover ? style.background : ''}`}></div>
+			<section className={`${style.block} block`}>
+				<div className='container'>
+					<ReactMarkdown>{post.content}</ReactMarkdown>
+				</div>
+			</section>
+			<div className={style.spacer}></div>
+
+	</>
+	);
+}
+
+export async function getPost(n: string) {
+	const postsInfo: Record<string, (IPost & { cover?: string, otime: string, mtime?: string })> = PostsInfo;
+	return {...postsInfo[n], content: await readMarkdown('posts', n, true)};
+}