@hutusi/amytis 1.6.0 → 1.8.0

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/RecentNotesSection.tsx

@@ -6,7 +6,6 @@ import { useLanguage } from './LanguageProvider';
 export interface RecentNoteItem {
   slug: string;
   date: string;
-  title: string;
   excerpt: string;
 }
 
@@ -38,16 +37,12 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
         {notes.map(note => (
           <div key={note.slug} className="relative pl-6 pb-6 border-l-2 border-muted/20 last:pb-0">
             <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
-            <div className="flex items-baseline gap-3 mb-1">
-              <time className="text-xs font-mono text-accent shrink-0">{note.date}</time>
-              <Link
-                href={`/flows/${note.slug}`}
-                className="text-base font-serif font-bold text-heading hover:text-accent transition-colors no-underline truncate"
-              >
-                {note.title}
-              </Link>
-            </div>
-            <p className="text-sm text-muted line-clamp-2 pl-0">{note.excerpt}</p>
+            <Link href={`/flows/${note.slug}`} className="no-underline group">
+              <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{note.date}</time>
+            </Link>
+            {note.excerpt && (
+              <p className="mt-1.5 text-sm text-muted line-clamp-2">{note.excerpt}</p>
+            )}
           </div>
         ))}
       </div>

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,20 @@ 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] : []),
+  ...(siteConfig.features?.notes?.enabled !== false ? ['Note' as ContentType] : []),
+];
+
+const CONTENT_TYPE_FEATURE: Record<Exclude<ContentType, 'All'>, keyof typeof siteConfig.features> = {
+  Post: 'posts',
+  Flow: 'flows',
+  Book: 'books',
+  Note: 'notes',
+};
 const RECENT_KEY = 'amytis-recent-searches';
 const MAX_RECENT = 5;
 const MAX_RESULTS = 8;
@@ -29,12 +44,14 @@ const TYPE_LABEL_KEYS: Record<Exclude<ContentType, 'All'>, TranslationKey> = {
   Post: 'search_type_post',
   Flow: 'search_type_flow',
   Book: 'search_type_book',
+  Note: 'search_type_note',
 };
 
 const TYPE_STYLES: Record<string, string> = {
   Flow: 'border-accent/30 text-accent',
   Book: 'border-foreground/30 text-foreground/60',
   Post: 'border-muted/30 text-muted',
+  Note: 'border-emerald-400/30 text-emerald-600 dark:text-emerald-400',
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -101,7 +118,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;
@@ -172,7 +196,7 @@ export default function Search() {
 
   // Count per type for tab badges
   const typeCounts = useMemo(() => {
-    const counts: Record<ContentType, number> = { All: allResults.length, Post: 0, Flow: 0, Book: 0 };
+    const counts: Record<ContentType, number> = { All: allResults.length, Post: 0, Flow: 0, Book: 0, Note: 0 };
     for (const r of allResults) counts[r.type]++;
     return counts;
   }, [allResults]);
@@ -348,7 +372,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 +403,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">

package/src/components/SubscribePage.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useLanguage } from './LanguageProvider';
+import { siteConfig } from '../../site.config';
+import { LuCheck, LuCopy, LuExternalLink, LuGithub, LuMail } from 'react-icons/lu';
+
+// ─── Platform SVG icons ────────────────────────────────────────────────────────
+
+function RssIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20 4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z" />
+    </svg>
+  );
+}
+
+function TelegramIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+    </svg>
+  );
+}
+
+function WechatIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-3.518 3.507c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z" />
+    </svg>
+  );
+}
+
+function SubstackIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.742l7.775-8.906L2.003 2.25H8.08l4.261 5.628 5.903-5.628zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+// ─── Shared card wrapper ───────────────────────────────────────────────────────
+
+interface CardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  wide?: boolean;
+}
+
+function SubscribeCard({ icon, title, description, children, wide }: CardProps) {
+  return (
+    <div className={`rounded-2xl border border-muted/20 bg-muted/5 p-6 space-y-4${wide ? ' md:col-span-2' : ''}`}>
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center text-accent flex-shrink-0">
+          {icon}
+        </div>
+        <h2 className="font-serif font-bold text-xl text-heading">{title}</h2>
+      </div>
+      <p className="text-sm text-muted/70 leading-relaxed">{description}</p>
+      {children}
+    </div>
+  );
+}
+
+// ─── Main component ────────────────────────────────────────────────────────────
+
+export default function SubscribePage() {
+  const { t } = useLanguage();
+  const [copied, setCopied] = useState(false);
+
+  const { baseUrl, social, subscribe } = siteConfig;
+  const feedUrl = `${baseUrl}/feed.xml`;
+  const enc = encodeURIComponent(feedUrl);
+
+  const rssReaders = [
+    { name: 'Follow',     url: `https://app.follow.is/add?url=${enc}` },
+    { name: 'Feedly',     url: `https://feedly.com/i/subscription/feed/${enc}` },
+    { name: 'Inoreader',  url: `https://www.inoreader.com/?add_feed=${enc}` },
+    { name: 'NewsBlur',   url: `https://newsblur.com/?url=${enc}` },
+    { name: 'The Old Reader', url: `https://theoldreader.com/feeds/subscribe?url=${enc}` },
+  ];
+
+  const hasSubstack = !!subscribe?.substack;
+  const hasEmail    = !!subscribe?.email;
+  const hasTelegram = !!subscribe?.telegram;
+  const hasWechat   = !!subscribe?.wechat?.qrCode;
+  const hasNewsletter = hasSubstack || hasEmail;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(feedUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback: select text — clipboard API may not be available in all contexts
+    }
+  };
+
+  return (
+    <div className="max-w-3xl">
+      {/* Page header */}
+      <header className="page-header">
+        <h1 className="page-title">{t('subscribe')}</h1>
+        <p className="page-subtitle">{t('subscribe_subtitle')}</p>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+
+        {/* ── RSS Feed ── always visible */}
+        <SubscribeCard
+          wide
+          icon={<RssIcon />}
+          title={t('rss_readers')}
+          description={t('rss_description')}
+        >
+          {/* Reader quick-subscribe links */}
+          <div className="flex flex-wrap gap-2">
+            {rssReaders.map(({ name, url }) => (
+              <a
+                key={name}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+              >
+                {name}
+                <LuExternalLink className="w-3 h-3 opacity-50" />
+              </a>
+            ))}
+          </div>
+
+          {/* Feed URL with copy button */}
+          <div className="flex items-center gap-2 mt-1 px-3 py-2.5 rounded-lg bg-muted/5 border border-muted/15">
+            <code className="text-xs font-mono text-muted/60 flex-1 truncate">{feedUrl}</code>
+            <button
+              onClick={handleCopy}
+              className="flex-shrink-0 flex items-center gap-1.5 text-xs text-muted/60 hover:text-accent transition-colors"
+              aria-label={t('copy_feed_url')}
+            >
+              {copied
+                ? <><LuCheck className="w-3.5 h-3.5 text-accent" /><span className="text-accent">{t('feed_url_copied')}</span></>
+                : <><LuCopy className="w-3.5 h-3.5" /><span>{t('copy_feed_url')}</span></>
+              }
+            </button>
+          </div>
+        </SubscribeCard>
+
+        {/* ── Email / Substack ── conditional */}
+        {hasNewsletter && (
+          <SubscribeCard
+            icon={hasSubstack ? <SubstackIcon /> : <LuMail className="w-5 h-5" />}
+            title={t('email_newsletter')}
+            description={t('email_newsletter_description')}
+          >
+            {hasSubstack && (
+              <a
+                href={subscribe!.substack}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+              >
+                <SubstackIcon />
+                {t('subscribe_on_substack')}
+                <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+              </a>
+            )}
+            {!hasSubstack && hasEmail && (
+              <a
+                href={subscribe!.email}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+              >
+                <LuMail className="w-4 h-4" />
+                {t('subscribe_via_email')}
+                <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+              </a>
+            )}
+          </SubscribeCard>
+        )}
+
+        {/* ── Telegram ── conditional */}
+        {hasTelegram && (
+          <SubscribeCard
+            icon={<TelegramIcon />}
+            title={t('telegram_channel')}
+            description={t('telegram_channel_description')}
+          >
+            <a
+              href={subscribe!.telegram}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+            >
+              <TelegramIcon />
+              {t('join_channel')}
+              <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+            </a>
+          </SubscribeCard>
+        )}
+
+        {/* ── WeChat Official Account ── conditional */}
+        {hasWechat && (
+          <SubscribeCard
+            icon={<WechatIcon />}
+            title={t('wechat_official')}
+            description={t('wechat_description')}
+          >
+            <div className="flex flex-col items-start gap-3">
+              <div className="w-36 h-36 rounded-xl border border-muted/20 overflow-hidden bg-white flex items-center justify-center">
+                <Image
+                  src={subscribe!.wechat!.qrCode}
+                  alt={subscribe?.wechat?.account || 'WeChat QR Code'}
+                  width={144}
+                  height={144}
+                  className="object-contain"
+                />
+              </div>
+              {subscribe?.wechat?.account && (
+                <p className="text-sm font-mono text-muted/60">{subscribe.wechat.account}</p>
+              )}
+              <p className="text-xs text-muted/50 italic">{t('scan_qr_code')}</p>
+            </div>
+          </SubscribeCard>
+        )}
+
+        {/* ── Social connections ── always visible if social links exist */}
+        {(social?.twitter || social?.github || social?.email) && (
+          <SubscribeCard
+            wide={!hasNewsletter && !hasTelegram && !hasWechat}
+            icon={
+              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
+              </svg>
+            }
+            title={t('social_connections')}
+            description="Follow along on social platforms for updates, discussions, and more."
+          >
+            <div className="flex flex-wrap gap-2">
+              {social?.twitter && (
+                <a
+                  href={social.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <XIcon />
+                  Twitter / X
+                </a>
+              )}
+              {social?.github && (
+                <a
+                  href={social.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <LuGithub className="w-4 h-4" />
+                  GitHub
+                </a>
+              )}
+              {social?.email && (
+                <a
+                  href={social.email}
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <LuMail className="w-4 h-4" />
+                  Email
+                </a>
+              )}
+            </div>
+          </SubscribeCard>
+        )}
+
+      </div>
+
+      {/* Tip note about RSS */}
+      <p className="mt-10 text-xs text-muted/50 text-center">
+        RSS is an open standard — no account required. Copy the feed URL into any reader app.{' '}
+        <Link href="/feed.xml" className="hover:text-accent transition-colors" target="_blank">
+          View raw feed →
+        </Link>
+      </p>
+    </div>
+  );
+}