Tweak card images, dark mode text, social links, and add right sidebar

.env.local.example

@@ -16,6 +16,8 @@ NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle"
 NEXT_PUBLIC_GITHUB_URL="https://github.com/yourname"
 NEXT_PUBLIC_LINKEDIN_URL="https://www.linkedin.com/in/yourname/"
 NEXT_PUBLIC_EMAIL_CONTACT="you@example.com"
+NEXT_PUBLIC_MASTODON_URL="https://your.instance/@yourhandle"
+NEXT_PUBLIC_GITEA_URL="https://gitea.example/yourname"
 
 # SEO / Open Graph
 NEXT_PUBLIC_OG_DEFAULT_IMAGE="/assets/og-default.jpg"

components/hero.tsx

@@ -14,10 +14,15 @@ export function Hero() {
           <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
             {name}
           </h1>
-          <p className="mt-1 max-w-2xl text-sm text-slate-600 dark:text-slate-300">
+          <p className="mt-1 max-w-2xl text-sm text-slate-700 dark:text-slate-100">
             {tagline}
           </p>
-          {(social.github || social.twitter || social.linkedin || social.email) && (
+          {(social.github ||
+            social.twitter ||
+            social.linkedin ||
+            social.email ||
+            social.mastodon ||
+            social.gitea) && (
             <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-500">
               {social.github && (
                 <a
@@ -39,6 +44,26 @@ export function Hero() {
                   Twitter
                 </a>
               )}
+              {social.mastodon && (
+                <a
+                  href={social.mastodon}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
+                >
+                  Mastodon
+                </a>
+              )}
+              {social.gitea && (
+                <a
+                  href={social.gitea}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="rounded-full bg-white/70 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/60 dark:ring-slate-700"
+                >
+                  Gitea
+                </a>
+              )}
               {social.linkedin && (
                 <a
                   href={social.linkedin}
@@ -64,4 +89,3 @@ export function Hero() {
     </section>
   );
 }
-

components/layout-shell.tsx

@@ -1,11 +1,17 @@
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
+import { RightSidebar } from './right-sidebar';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="flex min-h-screen flex-col">
       <SiteHeader />
-      <main className="flex-1 container mx-auto px-4 py-6">{children}</main>
+      <main className="container mx-auto flex-1 px-4 py-6">
+        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
+          <div>{children}</div>
+          <RightSidebar />
+        </div>
+      </main>
       <SiteFooter />
     </div>
   );

components/post-card.tsx

@@ -15,12 +15,14 @@ export function PostCard({ post }: PostCardProps) {
   return (
     <article className="group overflow-hidden rounded-xl border bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900">
       {cover && (
-        // eslint-disable-next-line @next/next/no-img-element
+        <div className="w-full bg-slate-100 dark:bg-slate-800">
-        <img
+          {/* eslint-disable-next-line @next/next/no-img-element */}
-          src={cover}
+          <img
-          alt={post.title}
+            src={cover}
-          className="h-44 w-full object-cover"
+            alt={post.title}
-        />
+            className="mx-auto max-h-60 w-full object-contain"
+          />
+        </div>
       )}
       <div className="space-y-2 px-4 py-4">
         <h2 className="text-lg font-semibold leading-snug">
@@ -53,7 +55,7 @@ export function PostCard({ post }: PostCardProps) {
           )}
         </div>
         {post.description && (
-          <p className="line-clamp-3 text-sm text-slate-600 dark:text-slate-300">
+          <p className="line-clamp-3 text-sm text-slate-700 dark:text-slate-100">
             {post.description}
           </p>
         )}
@@ -61,4 +63,3 @@ export function PostCard({ post }: PostCardProps) {
     </article>
   );
 }
-

components/post-toc.tsx

@@ -28,7 +28,7 @@ export function PostToc() {
   if (items.length === 0) return null;
 
   return (
-    <nav className="sticky top-20 text-xs text-slate-500">
+    <nav className="sticky top-20 text-xs text-slate-500 dark:text-slate-400">
       <div className="mb-2 font-semibold text-slate-700 dark:text-slate-200">
         目錄
       </div>
@@ -47,4 +47,3 @@ export function PostToc() {
     </nav>
   );
 }
-

components/right-sidebar.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { siteConfig } from '@/lib/config';
+import { getAllPostsSorted } from '@/lib/posts';
+
+export function RightSidebar() {
+  const latest = getAllPostsSorted().slice(0, 5);
+
+  return (
+    <aside className="hidden flex-col gap-4 lg:flex">
+      <section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
+        <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+          關於本站
+        </h2>
+        <p className="mt-1 text-xs text-slate-600 dark:text-slate-200">
+          {siteConfig.description}
+        </p>
+      </section>
+
+      <section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
+        <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+          最新文章
+        </h2>
+        <ul className="mt-2 space-y-1">
+          {latest.map((post) => (
+            <li key={post._id}>
+              <Link
+                href={post.url}
+                className="line-clamp-2 text-xs text-slate-700 hover:text-blue-600 dark:text-slate-100 dark:hover:text-blue-400"
+              >
+                {post.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </aside>
+  );
+}
+

components/site-footer.tsx

@@ -4,11 +4,16 @@ export function SiteFooter() {
   const { social } = siteConfig;
 
   return (
-    <footer className="border-t py-4 text-center text-sm text-gray-500">
+    <footer className="border-t py-4 text-center text-sm text-gray-500 dark:text-slate-400">
       <div>
         © {new Date().getFullYear()} {siteConfig.author}
       </div>
-      {(social.github || social.twitter || social.linkedin || social.email) && (
+      {(social.github ||
+        social.twitter ||
+        social.linkedin ||
+        social.email ||
+        social.mastodon ||
+        social.gitea) && (
         <div className="mt-1 space-x-3">
           {social.github && (
             <a
@@ -40,6 +45,26 @@ export function SiteFooter() {
               LinkedIn
             </a>
           )}
+          {social.mastodon && (
+            <a
+              href={social.mastodon}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:underline"
+            >
+              Mastodon
+            </a>
+          )}
+          {social.gitea && (
+            <a
+              href={social.gitea}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:underline"
+            >
+              Gitea
+            </a>
+          )}
           {social.email && (
             <a
               href={`mailto:${social.email}`}

components/site-header.tsx

@@ -4,8 +4,8 @@ import { siteConfig } from '@/lib/config';
 
 export function SiteHeader() {
   return (
-    <header className="border-b bg-white/80 dark:bg-gray-950/80 backdrop-blur">
+    <header className="border-b bg-white/80 backdrop-blur dark:bg-gray-950/80">
-      <div className="container mx-auto flex items-center justify-between px-4 py-3">
+      <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
         <Link href="/" className="font-semibold">
           {siteConfig.title}
         </Link>

lib/config.ts

@@ -18,7 +18,9 @@ export const siteConfig = {
     twitter: process.env.NEXT_PUBLIC_TWITTER_HANDLE || '',
     github: process.env.NEXT_PUBLIC_GITHUB_URL || '',
     linkedin: process.env.NEXT_PUBLIC_LINKEDIN_URL || '',
-    email: process.env.NEXT_PUBLIC_EMAIL_CONTACT || ''
+    email: process.env.NEXT_PUBLIC_EMAIL_CONTACT || '',
+    mastodon: process.env.NEXT_PUBLIC_MASTODON_URL || '',
+    gitea: process.env.NEXT_PUBLIC_GITEA_URL || ''
   },
   ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.jpg',
   twitterCard: