turbopack and app router; very annoying to work with!

2025-05-31 22:06:24 -04:00
parent 43229c4c47
commit 1cca454a75
35 changed files with 125 additions and 310 deletions
--- a/src/app/posts/[post]/page.tsx
+++ b/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)};
+}
--- a/src/app/posts/page.tsx
+++ b/src/app/posts/page.tsx
@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import date from '../lib/date';
+import PostsInfo from '../../../public/posts.json';
+
+function PostsPage() {
+	return (<>
+			{Object.keys(PostsInfo).length && <Posts /> || <NoPosts />}
+		</>
+	)
+}
+
+function NoPosts() {
+	return (<div className='text center'>
+		<div>**crickets**</div>
+		<div>No posts found...</div>
+		<div><Link href='/' className='link button green back'>Go Home</Link></div>
+	</div>);
+}
+
+function Posts() {
+	const posts = Object.entries(PostsInfo);
+	return (
+			<table>
+				<tbody>
+					{
+						posts.map(([slug, post]: [string, any]) => {
+							return (<tr key={slug} style={{ alignItems: 'center' }}>
+								<td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
+									<div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
+										post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
+									}</div>
+									<div>{date.toRelativeDate(new Date(post.otime))}</div>
+								</td>
+								<td style={{
+									fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`
+									, fontSize: '1.25rem'
+								}}>
+									<Link href={`/posts/${slug}`} style={{ textDecoration: 'none' }}>{post.title}</Link>
+								</td>
+							</tr>)
+						})
+					}
+				</tbody>
+			</table>
+	)
+}
+
+
+export default PostsPage;