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>
+    </>
   );
 }

app/blog/page.tsx

@@ -1,6 +1,5 @@
-import Link from 'next/link';
 import { getAllPostsSorted } from '@/lib/posts';
-import { siteConfig } from '@/lib/config';
+import { PostCard } from '@/components/post-card';
 
 export const metadata = {
   title: 'Blog'
@@ -12,41 +11,11 @@ export default function BlogIndexPage() {
   return (
     <section className="space-y-6">
       <h1 className="text-2xl font-bold">Blog</h1>
-      <ul className="space-y-3">
+      <div className="space-y-4">
         {posts.map((post) => (
-          <li key={post._id}>
-            <Link
-              href={post.url}
-              className="text-lg font-medium hover:underline"
-            >
-              {post.title}
-            </Link>
-            <div className="text-xs text-gray-500">
-              {post.published_at &&
-                new Date(post.published_at).toLocaleDateString(
-                  siteConfig.defaultLocale
-                )}
-              {post.tags && post.tags.length > 0 && (
-                <span className="ml-2">
-                  {post.tags.map((t) => (
-                    <span
-                      key={t}
-                      className="mr-1 rounded bg-gray-200 px-1 dark:bg-gray-800"
-                    >
-                      #{t}
-                    </span>
-                  ))}
-                </span>
-              )}
-            </div>
-            {post.description && (
-              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
-                {post.description}
-              </p>
-            )}
-          </li>
+          <PostCard key={post._id} post={post} />
         ))}
-      </ul>
+      </div>
     </section>
   );
 }

app/page.tsx

@@ -1,45 +1,31 @@
 import Link from 'next/link';
 import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
+import { Hero } from '@/components/hero';
+import { PostCard } from '@/components/post-card';
 
 export default function HomePage() {
   const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
 
   return (
     <section className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">
-          你好，我是 {siteConfig.name}
-        </h1>
-        <p className="mt-2 text-gray-600 dark:text-gray-300">
-          {siteConfig.tagline}
-        </p>
-      </div>
+      <Hero />
 
       <div>
-        <h2 className="text-xl font-semibold">最新文章</h2>
-        <ul className="mt-3 space-y-2">
+        <div className="mb-3 flex items-baseline justify-between">
+          <h2 className="text-xl font-semibold">最新文章</h2>
+          <Link
+            href="/blog"
+            className="text-sm text-blue-600 hover:underline dark:text-blue-400"
+          >
+            所有文章 →
+          </Link>
+        </div>
+        <div className="space-y-4">
           {posts.map((post) => (
-            <li key={post._id}>
-              <Link href={post.url} className="hover:underline">
-                {post.title}
-              </Link>
-              {post.published_at && (
-                <span className="ml-2 text-xs text-gray-500">
-                  {new Date(post.published_at).toLocaleDateString(
-                    siteConfig.defaultLocale
-                  )}
-                </span>
-              )}
-            </li>
+            <PostCard key={post._id} post={post} />
           ))}
-        </ul>
-        <Link
-          href="/blog"
-          className="mt-4 inline-block text-sm text-blue-600 hover:underline"
-        >
-          所有文章 →
-        </Link>
+        </div>
       </div>
     </section>
   );