@hutusi/amytis 1.6.0 → 1.7.0

package/src/components/PostSidebar.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { PostData, Heading } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { useScrollY } from '@/hooks/useScrollY';
+import ShareBar from './ShareBar';
+import { siteConfig } from '../../site.config';
 
 interface PostSidebarProps {
   seriesSlug?: string;
@@ -11,28 +14,52 @@ interface PostSidebarProps {
   posts?: PostData[];
   currentSlug: string;
   headings: Heading[];
+  localeHeadings?: Record<string, Heading[]>;
+  shareUrl?: string;
+  shareTitle?: string;
 }
 
-export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings }: PostSidebarProps) {
-  const { t } = useLanguage();
+function getVisibleIndices(total: number, current: number): (number | 'ellipsis')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+  const result: (number | 'ellipsis')[] = [];
+  result.push(0);
+  const windowStart = Math.max(1, current - 2);
+  const windowEnd = Math.min(total - 2, current + 2);
+  if (windowStart > 1) result.push('ellipsis');
+  for (let i = windowStart; i <= windowEnd; i++) result.push(i);
+  if (windowEnd < total - 2) result.push('ellipsis');
+  result.push(total - 1);
+  return result;
+}
+
+export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings, localeHeadings, shareUrl, shareTitle }: PostSidebarProps) {
+  const { t, language } = useLanguage();
+  const activeHeadings = localeHeadings?.[language] ?? headings;
   const hasSeries = !!(seriesSlug && posts && posts.length > 0);
   const currentIndex = hasSeries ? posts!.findIndex(p => p.slug === currentSlug) : -1;
+  // Chronological sort (ascending date) — used for both progress counter and isPast styling
+  const sortedPosts = hasSeries
+    ? [...posts!].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+    : null;
+  const progressIndex = hasSeries ? sortedPosts!.findIndex(p => p.slug === currentSlug) : -1;
   const currentItemRef = useRef<HTMLLIElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
   const [activeHeadingId, setActiveHeadingId] = useState<string>('');
   const [tocCollapsed, setTocCollapsed] = useState(false);
+  const [seriesCollapsed, setSeriesCollapsed] = useState(false);
+  const scrollY = useScrollY();
 
-  // Scroll tracking for page headings
-  const handleScroll = useCallback(() => {
-    if (headings.length === 0) return;
+  // Derive active heading from shared scroll position
+  useEffect(() => {
+    if (activeHeadings.length === 0) return;
 
-    const headingElements = headings
+    const headingElements = activeHeadings
       .map(h => document.getElementById(h.id))
       .filter(Boolean) as HTMLElement[];
 
     if (headingElements.length === 0) return;
 
-    const scrollPosition = window.scrollY + 100;
+    const scrollPosition = scrollY + 100;
     let current = headingElements[0];
     for (const el of headingElements) {
       if (el.offsetTop <= scrollPosition) {
@@ -42,23 +69,11 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       }
     }
 
-    if (current) {
-      setActiveHeadingId(current.id);
-    }
-  }, [headings]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-    
-    // Use requestAnimationFrame to avoid cascading render lint error on mount
-    const rafId = requestAnimationFrame(handleScroll);
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, headings.length]);
+    const rafId = requestAnimationFrame(() => {
+      if (current) setActiveHeadingId(current.id);
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [scrollY, activeHeadings]);
 
   const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
     e.preventDefault();
@@ -88,113 +103,33 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       ref={sidebarRef}
       className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin"
     >
-      {/* Series section */}
-      {hasSeries && (
-        <>
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link href={`/series/${seriesSlug}`} className="group block no-underline">
-              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent mb-2 block">
-                {t('series')}
-              </span>
-              <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
-                {seriesTitle}
-              </h3>
-            </Link>
-
-            {/* Progress */}
-            <div className="mt-3 flex items-center gap-3">
-              <div className="flex-1 h-1 bg-muted/10 rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-accent/60 rounded-full transition-all duration-500"
-                  style={{ width: `${((currentIndex + 1) / posts!.length) * 100}%` }}
-                />
-              </div>
-              <span className="text-xs font-mono text-muted whitespace-nowrap">
-                {currentIndex + 1}/{posts!.length}
-              </span>
-            </div>
-          </div>
-
-          {/* Series posts list */}
-          <nav aria-label="Series navigation" className="mb-6">
-            <ul className="space-y-1 relative">
-              <div className="absolute left-[11px] top-3 bottom-3 w-px bg-muted/15" />
-              {posts!.map((post, index) => {
-                const isCurrent = post.slug === currentSlug;
-                const isPast = index < currentIndex;
-
-                return (
-                  <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
-                    <Link
-                      href={`/posts/${post.slug}`}
-                      className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
-                        isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
-                      }`}
-                      aria-current={isCurrent ? 'page' : undefined}
-                    >
-                      <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
-                        isCurrent
-                          ? 'bg-accent text-white shadow-sm shadow-accent/30'
-                          : isPast
-                            ? 'bg-accent/20 text-accent'
-                            : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
-                      }`}>
-                        {String(index + 1).padStart(2, '0')}
-                      </div>
-                      <div className="flex-1 min-w-0 pt-0.5">
-                        <span className={`block text-sm leading-snug transition-colors ${
-                          isCurrent
-                            ? 'text-accent font-semibold'
-                            : isPast
-                              ? 'text-foreground/70 group-hover:text-foreground'
-                              : 'text-muted group-hover:text-foreground'
-                        }`}>
-                          {post.title}
-                        </span>
-                      </div>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-
-          {/* Footer link */}
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link
-              href={`/series/${seriesSlug}`}
-              className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+      {/* TOC — always at top */}
+      {activeHeadings.length > 0 && (
+        <nav
+          aria-label="Table of contents"
+          className={`mb-6 ${hasSeries ? 'pb-4 border-b border-muted/10' : ''}`}
+        >
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
+              {t('on_this_page')}
+            </span>
+            <button
+              onClick={() => setTocCollapsed(prev => !prev)}
+              className="text-muted hover:text-foreground transition-colors"
+              aria-label={tocCollapsed ? 'Expand table of contents' : 'Collapse table of contents'}
             >
-              {t('view_full_series')}
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              <svg
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
+                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
               </svg>
-            </Link>
+            </button>
           </div>
-        </>
-      )}
-
-      {/* Page TOC */}
-      {headings.length > 0 && (
-        <nav aria-label="Table of contents">
-          <button
-            onClick={() => setTocCollapsed(prev => !prev)}
-            className="w-full flex items-center justify-between gap-2 mb-3"
-          >
-            <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
-              {t('on_this_page')}
-            </h2>
-            <svg
-              className={`w-3.5 h-3.5 text-muted flex-shrink-0 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
-              fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
 
           {!tocCollapsed && (
             <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-              {headings.map(heading => {
+              {activeHeadings.map(heading => {
                 const isActive = heading.id === activeHeadingId;
                 const isH3 = heading.level === 3;
 
@@ -220,6 +155,117 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
           )}
         </nav>
       )}
+
+      {/* Series section — below TOC */}
+      {hasSeries && (
+        <div>
+          {/* Header — always visible */}
+          <div className="mb-3">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent">
+                {t('series')}
+              </span>
+              <span className="text-[10px] font-mono text-muted/60">
+                {progressIndex >= 0 ? progressIndex + 1 : '?'} / {posts!.length}
+              </span>
+            </div>
+            <div className="flex items-start justify-between gap-2">
+              <Link href={`/series/${seriesSlug}`} className="group block no-underline flex-1 min-w-0">
+                <h3 className="font-serif font-bold text-heading text-base leading-snug group-hover:text-accent transition-colors">
+                  {seriesTitle}
+                </h3>
+              </Link>
+              <button
+                onClick={() => setSeriesCollapsed(prev => !prev)}
+                className="flex-shrink-0 mt-0.5 text-muted hover:text-foreground transition-colors"
+                aria-label={seriesCollapsed ? 'Expand series' : 'Collapse series'}
+              >
+                <svg
+                  className={`w-3.5 h-3.5 transition-transform duration-200 ${seriesCollapsed ? '' : 'rotate-180'}`}
+                  fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Collapsible: post list + footer link */}
+          {!seriesCollapsed && (
+            <>
+              <nav aria-label="Series navigation" className="mb-4 animate-slide-down">
+                <ul className="space-y-1 relative before:absolute before:left-[11px] before:top-3 before:bottom-3 before:w-px before:bg-muted/15">
+                  {getVisibleIndices(posts!.length, currentIndex).map((item, i) => {
+                    if (item === 'ellipsis') {
+                      return (
+                        <li key={`ellipsis-${i}`} className="flex items-center py-1 pl-3">
+                          <span className="text-xs font-mono text-muted/40 tracking-widest">···</span>
+                        </li>
+                      );
+                    }
+                    const post = posts![item];
+                    const isCurrent = post.slug === currentSlug;
+                    const chronoIndex = sortedPosts ? sortedPosts.findIndex(p => p.slug === post.slug) : item;
+                    const isPast = chronoIndex < progressIndex;
+
+                    return (
+                      <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
+                        <Link
+                          href={`/posts/${post.slug}`}
+                          className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
+                            isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
+                          }`}
+                          aria-current={isCurrent ? 'page' : undefined}
+                        >
+                          <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
+                            isCurrent
+                              ? 'bg-accent text-white shadow-sm shadow-accent/30'
+                              : isPast
+                                ? 'bg-accent/20 text-accent'
+                                : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
+                          }`}>
+                            {String(item + 1).padStart(2, '0')}
+                          </div>
+                          <div className="flex-1 min-w-0 pt-0.5">
+                            <span className={`block text-sm leading-snug transition-colors ${
+                              isCurrent
+                                ? 'text-accent font-semibold'
+                                : isPast
+                                  ? 'text-foreground/70 group-hover:text-foreground'
+                                  : 'text-muted group-hover:text-foreground'
+                            }`}>
+                              {post.title}
+                            </span>
+                          </div>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </nav>
+
+              <Link
+                href={`/series/${seriesSlug}`}
+                className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+              >
+                {t('view_full_series')}
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </Link>
+            </>
+          )}
+        </div>
+      )}
+
+      {shareUrl && siteConfig.share?.enabled && (
+        <div className="mt-6 pt-6 border-t border-muted/10">
+          <p className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-3">
+            {t('share_post')}
+          </p>
+          <ShareBar url={shareUrl} title={shareTitle ?? ''} />
+        </div>
+      )}
     </aside>
   );
 }

package/src/components/ReadingProgressBar.tsx

@@ -1,28 +1,13 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useScrollY } from '@/hooks/useScrollY';
 
 export default function ReadingProgressBar() {
-  const [progress, setProgress] = useState(0);
-
-  const handleScroll = useCallback(() => {
-    const scrollTop = window.scrollY;
-    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-    if (docHeight > 0) {
-      setProgress(Math.min(100, Math.max(0, (scrollTop / docHeight) * 100)));
-    }
-  }, []);
-
-  useEffect(() => {
-    // Initial check on mount via animation frame to avoid cascading render error
-    const rafId = requestAnimationFrame(handleScroll);
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
+  const scrollY = useScrollY();
+  const docHeight = typeof document !== 'undefined'
+    ? document.documentElement.scrollHeight - window.innerHeight
+    : 0;
+  const progress = docHeight > 0 ? Math.min(100, Math.max(0, (scrollY / docHeight) * 100)) : 0;
 
   if (progress <= 0) return null;
 

package/src/components/RelatedPosts.tsx

@@ -6,7 +6,7 @@ export default function RelatedPosts({ posts }: { posts: PostData[] }) {
   if (!posts || posts.length === 0) return null;
 
   return (
-    <div className="mt-16 pt-12 border-t border-muted/20">
+    <div className="mt-12 pt-12 border-t border-muted/20">
       <h3 className="text-2xl font-serif font-bold text-heading mb-8">{t('related_posts')}</h3>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
         {posts.map(post => (

package/src/components/Search.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link';
 import { useLanguage } from '@/components/LanguageProvider';
 import { type ContentType, getResultType, getDateFromUrl, cleanTitle } from '@/lib/search-utils';
 import type { TranslationKey } from '@/i18n/translations';
+import { siteConfig } from '../../site.config';
+import { resolveLocaleValue } from '@/lib/i18n';
 // ─── Types ───────────────────────────────────────────────────────────────────
 
 interface DisplayResult {
@@ -18,7 +20,18 @@ interface DisplayResult {
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
-const CONTENT_TYPES: ContentType[] = ['All', 'Post', 'Flow', 'Book'];
+const CONTENT_TYPES: ContentType[] = [
+  'All',
+  ...(siteConfig.features?.posts?.enabled !== false ? ['Post' as ContentType] : []),
+  ...(siteConfig.features?.flows?.enabled !== false ? ['Flow' as ContentType] : []),
+  ...(siteConfig.features?.books?.enabled !== false ? ['Book' as ContentType] : []),
+];
+
+const CONTENT_TYPE_FEATURE: Record<Exclude<ContentType, 'All'>, keyof typeof siteConfig.features> = {
+  Post: 'posts',
+  Flow: 'flows',
+  Book: 'books',
+};
 const RECENT_KEY = 'amytis-recent-searches';
 const MAX_RECENT = 5;
 const MAX_RESULTS = 8;
@@ -101,7 +114,14 @@ export default function Search() {
   const [isUnavailable, setIsUnavailable] = useState(false);
   const searchRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const { t, tWith } = useLanguage();
+  const { t, tWith, language } = useLanguage();
+
+  const getTypeLabel = (type: Exclude<ContentType, 'All'>): string => {
+    const featureKey = CONTENT_TYPE_FEATURE[type];
+    const featureName = siteConfig.features?.[featureKey]?.name;
+    if (featureName) return resolveLocaleValue(featureName, language);
+    return t(TYPE_LABEL_KEYS[type]);
+  };
 
   // True while debounce is pending — suppress "no results" flash
   const isTyping = query.length > 0 && query !== debouncedQuery;
@@ -348,7 +368,7 @@ export default function Search() {
                         : 'text-muted hover:text-foreground hover:bg-muted/5'
                     }`}
                   >
-                    {type === 'All' ? t('search_all') : t(TYPE_LABEL_KEYS[type])}
+                    {type === 'All' ? t('search_all') : getTypeLabel(type)}
                     <span className="ml-1 text-[10px] opacity-60">{typeCounts[type]}</span>
                     <span className="hidden sm:inline ml-1 text-[9px] opacity-30">⌥{i + 1}</span>
                   </button>
@@ -379,7 +399,7 @@ export default function Search() {
                               <span className="text-[10px] font-mono text-muted/60">{result.date}</span>
                             )}
                             <span className={`text-[10px] px-1.5 py-0.5 rounded-full border font-medium ${TYPE_STYLES[result.type]}`}>
-                              {t(TYPE_LABEL_KEYS[result.type])}
+                              {getTypeLabel(result.type)}
                             </span>
                           </div>
                         </div>

package/src/components/SelectedBooksSection.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import CoverImage from './CoverImage';
+import HorizontalScroll from './HorizontalScroll';
 import { useLanguage } from './LanguageProvider';
 
 export interface BookItem {
@@ -16,12 +17,15 @@ export interface BookItem {
 
 interface SelectedBooksSectionProps {
   books: BookItem[];
+  maxItems?: number;
+  scrollThreshold?: number;
 }
 
-export default function SelectedBooksSection({ books }: SelectedBooksSectionProps) {
+export default function SelectedBooksSection({ books, maxItems = 4, scrollThreshold = 2 }: SelectedBooksSectionProps) {
   const { t } = useLanguage();
+  const displayed = books.slice(0, maxItems);
 
-  if (books.length === 0) return null;
+  if (displayed.length === 0) return null;
 
   return (
     <section className="mb-24">
@@ -31,9 +35,10 @@ export default function SelectedBooksSection({ books }: SelectedBooksSectionProp
           {t('all_books')} →
         </Link>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        {books.map(book => (
-          <Link key={book.slug} href={`/books/${book.slug}`} className="group block no-underline">
+      <HorizontalScroll itemCount={displayed.length} scrollThreshold={scrollThreshold}>
+        <div className={`flex gap-8 ${displayed.length > scrollThreshold ? 'pb-4' : ''}`}>
+        {displayed.map(book => (
+          <Link key={book.slug} href={`/books/${book.slug}`} className={`group block no-underline ${displayed.length > scrollThreshold ? 'w-[85vw] md:w-[calc(50%-1rem)] flex-shrink-0 snap-start' : 'flex-1'}`}>
             <div className="card-base h-full group flex flex-col p-0 overflow-hidden">
               <div className="relative h-48 w-full overflow-hidden bg-muted/10">
                 <CoverImage
@@ -74,7 +79,8 @@ export default function SelectedBooksSection({ books }: SelectedBooksSectionProp
             </div>
           </Link>
         ))}
-      </div>
+        </div>
+      </HorizontalScroll>
     </section>
   );
 }

package/src/components/ShareBar.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState } from 'react';
+import { IconType } from 'react-icons';
+import { FaXTwitter, FaFacebook, FaLinkedin, FaWeibo, FaRedditAlien, FaTelegram, FaMastodon, FaHackerNews } from 'react-icons/fa6';
+import { SiBluesky, SiDouban, SiZhihu } from 'react-icons/si';
+import { LuLink, LuCheck } from 'react-icons/lu';
+import { siteConfig } from '../../site.config';
+import { useLanguage } from './LanguageProvider';
+
+interface ShareBarProps {
+  url: string;
+  title: string;
+  className?: string;
+}
+
+type Platform =
+  | 'twitter' | 'facebook' | 'linkedin' | 'weibo'
+  | 'reddit' | 'hackernews' | 'telegram' | 'bluesky' | 'mastodon'
+  | 'douban' | 'zhihu'
+  | 'copy';
+
+const PLATFORM_META: Record<Platform, { label: string; Icon: IconType }> = {
+  twitter:    { label: 'X / Twitter', Icon: FaXTwitter },
+  facebook:   { label: 'Facebook',    Icon: FaFacebook },
+  linkedin:   { label: 'LinkedIn',    Icon: FaLinkedin },
+  weibo:      { label: '微博',         Icon: FaWeibo },
+  reddit:     { label: 'Reddit',      Icon: FaRedditAlien },
+  hackernews: { label: 'Hacker News', Icon: FaHackerNews },
+  telegram:   { label: 'Telegram',    Icon: FaTelegram },
+  bluesky:    { label: 'Bluesky',     Icon: SiBluesky },
+  mastodon:   { label: 'Mastodon',    Icon: FaMastodon },
+  douban:     { label: '豆瓣',         Icon: SiDouban },
+  zhihu:      { label: '知乎',         Icon: SiZhihu },
+  copy:       { label: 'Copy link',   Icon: LuLink },
+};
+
+function getShareUrl(platform: Platform, url: string, title: string): string {
+  const eu = encodeURIComponent(url);
+  const et = encodeURIComponent(title);
+  const combined = encodeURIComponent(`${title} ${url}`);
+  switch (platform) {
+    case 'twitter':    return `https://twitter.com/intent/tweet?text=${et}&url=${eu}`;
+    case 'facebook':   return `https://www.facebook.com/sharer/sharer.php?u=${eu}`;
+    case 'linkedin':   return `https://www.linkedin.com/sharing/share-offsite/?url=${eu}`;
+    case 'weibo':      return `https://service.weibo.com/share/share.php?url=${eu}&title=${et}`;
+    case 'reddit':     return `https://www.reddit.com/submit?url=${eu}&title=${et}`;
+    case 'hackernews': return `https://news.ycombinator.com/submitlink?u=${eu}&t=${et}`;
+    case 'telegram':   return `https://t.me/share/url?url=${eu}&text=${et}`;
+    case 'bluesky':    return `https://bsky.app/intent/compose?text=${combined}`;
+    case 'mastodon':   return `https://mastodon.social/share?text=${combined}`;
+    case 'douban':     return `https://www.douban.com/share/service?href=${eu}&name=${et}`;
+    case 'zhihu':      return `https://www.zhihu.com/share?href=${eu}&type=text&title=${et}`;
+    case 'copy':       return '';
+  }
+}
+
+export default function ShareBar({ url, title, className = '' }: ShareBarProps) {
+  const { t } = useLanguage();
+  const [copied, setCopied] = useState(false);
+
+  if (!siteConfig.share?.enabled) return null;
+  const configured = siteConfig.share?.platforms ?? [];
+  const platforms = configured.filter((p): p is Platform => p in PLATFORM_META);
+  if (platforms.length === 0) return null;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard not available
+    }
+  };
+
+  const btnClass = 'inline-flex items-center justify-center w-8 h-8 rounded text-muted hover:text-accent hover:bg-muted/10 transition-colors';
+
+  return (
+    <div className={`flex flex-row flex-wrap gap-1 ${className}`}>
+      {platforms.map((platform) => {
+        const { label, Icon } = PLATFORM_META[platform];
+
+        if (platform === 'copy') {
+          const copyLabel = copied ? t('link_copied') : t('copy_link');
+          return (
+            <button
+              key={platform}
+              onClick={handleCopy}
+              title={copyLabel}
+              aria-label={copyLabel}
+              className={`${btnClass} ${copied ? 'text-accent' : ''}`}
+            >
+              {copied ? <LuCheck size={16} /> : <Icon size={16} />}
+            </button>
+          );
+        }
+
+        return (
+          <a
+            key={platform}
+            href={getShareUrl(platform, url, title)}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={label}
+            aria-label={`Share on ${label}`}
+            className={`${btnClass} no-underline`}
+          >
+            <Icon size={16} />
+          </a>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/SimpleLayoutHeader.tsx

@@ -2,30 +2,21 @@
 
 import { useLanguage } from './LanguageProvider';
 import { TranslationKey } from '@/i18n/translations';
-import { resolveLocaleValue } from '@/lib/i18n';
 
 interface SimpleLayoutHeaderProps {
   title: string;
   excerpt?: string;
   titleKey?: TranslationKey;
   subtitleKey?: TranslationKey;
-  titleOverride?: string | Record<string, string>;
-  subtitleOverride?: string | Record<string, string>;
+  contentLocales?: Record<string, { content: string; title?: string; excerpt?: string }>;
 }
 
-export default function SimpleLayoutHeader({ title, excerpt, titleKey, subtitleKey, titleOverride, subtitleOverride }: SimpleLayoutHeaderProps) {
+export default function SimpleLayoutHeader({ title, excerpt, titleKey, subtitleKey, contentLocales }: SimpleLayoutHeaderProps) {
   const { t, language } = useLanguage();
 
-  const displayTitle = titleOverride
-    ? resolveLocaleValue(titleOverride, language)
-    : titleKey
-      ? t(titleKey)
-      : title;
-  const displaySubtitle = subtitleOverride
-    ? resolveLocaleValue(subtitleOverride, language)
-    : subtitleKey
-      ? t(subtitleKey)
-      : excerpt;
+  const localeData = contentLocales?.[language];
+  const displayTitle = localeData?.title ?? (titleKey ? t(titleKey) : title);
+  const displaySubtitle = localeData?.excerpt ?? (subtitleKey ? t(subtitleKey) : excerpt);
 
   return (
     <header className="page-header">