Align static page layout and typography with blog posts

app/pages/[slug]/page.tsx

@@ -1,7 +1,11 @@
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { allPages } from 'contentlayer/generated';
 import { getPageBySlug } from '@/lib/posts';
+import { siteConfig } from '@/lib/config';
+import { ReadingProgress } from '@/components/reading-progress';
+import { PostToc } from '@/components/post-toc';
 
 export function generateStaticParams() {
   return allPages.map((page) => ({
@@ -31,18 +35,65 @@ export default function StaticPage({ params }: Props) {
   if (!page) return notFound();
 
   return (
-    <article className="prose dark:prose-invert max-w-none">
+    <>
-      <h1>{page.title}</h1>
+      <ReadingProgress />
-      {page.feature_image && (
+      <div className="mx-auto flex max-w-5xl gap-8 pt-4">
-        // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
+        <aside className="hidden w-56 shrink-0 lg:block">
-        // eslint-disable-next-line @next/next/no-img-element
+          <PostToc />
-        <img
+        </aside>
-          src={page.feature_image.replace('../assets', '/assets')}
+        <div className="flex-1">
-          alt={page.title}
+          <header className="mb-6 space-y-2">
-          className="my-4 rounded"
+            {page.published_at && (
-        />
+              <p className="text-xs text-slate-500 dark:text-slate-500">
-      )}
+                {new Date(page.published_at).toLocaleDateString(
-      <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
+                  siteConfig.defaultLocale
-    </article>
+                )}
+              </p>
+            )}
+            <h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
+              {page.title}
+            </h1>
+            {page.tags && (
+              <div className="flex flex-wrap gap-2 pt-1">
+                {page.tags.map((t, i) => {
+                  const tagColorClasses = [
+                    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
+                    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
+                    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
+                    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
+                    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
+                  ];
+                  const color =
+                    tagColorClasses[i % tagColorClasses.length];
+                  return (
+                    <Link
+                      key={t}
+                      href={`/tags/${encodeURIComponent(
+                        t.toLowerCase().replace(/\s+/g, '-')
+                      )}`}
+                      className={`rounded-full px-2 py-0.5 text-xs transition ${color}`}
+                    >
+                      #{t}
+                    </Link>
+                  );
+                })}
+              </div>
+            )}
+          </header>
+          <article className="prose prose-slate max-w-none dark:prose-dark">
+            {page.feature_image && (
+              // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={page.feature_image.replace('../assets', '/assets')}
+                alt={page.title}
+                className="my-4 rounded"
+              />
+            )}
+            <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
+          </article>
+        </div>
+      </div>
+    </>
   );
 }