Add gravatar hero with social icons to right sidebar

.env.local.example

@@ -10,6 +10,7 @@ NEXT_PUBLIC_SITE_AUTHOR="Your Name"
 NEXT_PUBLIC_SITE_TAGLINE="Short tagline for your blog."
 NEXT_PUBLIC_POSTS_PER_PAGE="5"
 NEXT_PUBLIC_DEFAULT_LOCALE="zh-TW"
+NEXT_PUBLIC_SITE_AVATAR_URL="https://www.gravatar.com/avatar/yourhash?s=160&d=identicon"
 
 # Social and profile
 NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle"

components/right-sidebar.tsx

@@ -1,14 +1,83 @@
 import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { siteConfig } from '@/lib/config';
 import { getAllPostsSorted, getAllTagsWithCount } from '@/lib/posts';
+import { allPages } from 'contentlayer/generated';
 
 export function RightSidebar() {
   const latest = getAllPostsSorted().slice(0, 5);
   const tags = getAllTagsWithCount().slice(0, 5);
 
+  const aboutPage =
+    allPages.find((p) => p.title.includes('關於作者')) ??
+    allPages.find((p) => p.slug === 'about-me');
+
+  const avatarSrc = siteConfig.avatar;
+
+  const socialItems = [
+    siteConfig.social.github && {
+      key: 'github',
+      href: siteConfig.social.github,
+      icon: faGithub,
+      label: 'GitHub'
+    },
+    siteConfig.social.mastodon && {
+      key: 'mastodon',
+      href: siteConfig.social.mastodon,
+      icon: faMastodon,
+      label: 'Mastodon'
+    },
+    siteConfig.social.linkedin && {
+      key: 'linkedin',
+      href: siteConfig.social.linkedin,
+      icon: faLinkedin,
+      label: 'LinkedIn'
+    }
+  ].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];
+
   return (
     <aside className="hidden lg:block">
       <div className="sticky top-20 flex flex-col gap-4">
+        <section className="rounded-xl border bg-white px-4 py-4 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
+          <div className="flex flex-col items-center">
+            <Link
+              href={aboutPage?.url || '/pages/關於作者'}
+              aria-label="關於作者"
+              className="mb-2 inline-block"
+            >
+              {avatarSrc ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={avatarSrc}
+                  alt={siteConfig.name}
+                  className="h-16 w-16 rounded-full border border-slate-200 object-cover dark:border-slate-700"
+                />
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-900 text-lg font-semibold text-slate-50 dark:bg-slate-100 dark:text-slate-900">
+                  {siteConfig.name.charAt(0).toUpperCase()}
+                </div>
+              )}
+            </Link>
+            {socialItems.length > 0 && (
+              <div className="flex items-center gap-3 text-base text-slate-500 dark:text-slate-400">
+                {socialItems.map((item) => (
+                  <a
+                    key={item.key}
+                    href={item.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={item.label}
+                    className="transition hover:text-slate-800 dark:hover:text-slate-100"
+                  >
+                    <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </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">
             關於本站

lib/config.ts

@@ -14,6 +14,7 @@ export const siteConfig = {
       ? Number(process.env.NEXT_PUBLIC_POSTS_PER_PAGE)
       : 5,
   defaultLocale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'zh-TW',
+  avatar: process.env.NEXT_PUBLIC_SITE_AVATAR_URL || '',
   social: {
     twitter: process.env.NEXT_PUBLIC_TWITTER_HANDLE || '',
     github: process.env.NEXT_PUBLIC_GITHUB_URL || '',