Improve layout with hero, cards, typography, TOC and reading progress

app/blog/[slug]/page.tsx

@@ -1,8 +1,10 @@
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { allPosts } from 'contentlayer/generated';
-import { getPostBySlug } from '@/lib/posts';
+import { getPostBySlug } from '@/lib.posts';
 import { siteConfig } from '@/lib/config';
+import { ReadingProgress } from '@/components/reading-progress';
+import { PostToc } from '@/components/post-toc';
 
 export function generateStaticParams() {
   return allPosts.map((post) => ({
@@ -32,37 +34,45 @@ export default function BlogPostPage({ params }: Props) {
   if (!post) return notFound();
 
   return (
-    <article className="prose dark:prose-invert max-w-none">
-      <h1>{post.title}</h1>
-      {post.feature_image && (
-        // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={post.feature_image.replace('../assets', '/assets')}
-          alt={post.title}
-          className="my-4 rounded"
-        />
-      )}
-      {post.published_at && (
-        <p className="text-xs text-gray-500">
-          {new Date(post.published_at).toLocaleDateString(
-            siteConfig.defaultLocale
+    <>
+      <ReadingProgress />
+      <div className="mx-auto flex max-w-5xl gap-8 pt-4">
+        <aside className="hidden w-56 shrink-0 lg:block">
+          <PostToc />
+        </aside>
+        <article className="prose dark:prose-invert max-w-none flex-1">
+          <h1>{post.title}</h1>
+          {post.feature_image && (
+            // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={post.feature_image.replace('../assets', '/assets')}
+              alt={post.title}
+              className="my-4 rounded"
+            />
           )}
-        </p>
-      )}
-      {post.tags && (
-        <p className="mt-1 text-xs">
-          {post.tags.map((t) => (
-            <span
-              key={t}
-              className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
-            >
-              #{t}
-            </span>
-          ))}
-        </p>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
-    </article>
+          {post.published_at && (
+            <p className="text-xs text-gray-500">
+              {new Date(post.published_at).toLocaleDateString(
+                siteConfig.defaultLocale
+              )}
+            </p>
+          )}
+          {post.tags && (
+            <p className="mt-1 text-xs">
+              {post.tags.map((t) => (
+                <span
+                  key={t}
+                  className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
+                >
+                  #{t}
+                </span>
+              ))}
+            </p>
+          )}
+          <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+        </article>
+      </div>
+    </>
   );
 }