@hutusi/amytis 1.5.6 → 1.7.0

package/src/components/TagSidebar.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { t, tWith } from '@/lib/i18n';
+import { LuTag, LuX, LuSearch } from 'react-icons/lu';
+
+const INITIAL_SHOW = 12;
+
+interface TagSidebarProps {
+  tags: Record<string, number>;
+  activeTag: string;
+}
+
+export default function TagSidebar({ tags, activeTag }: TagSidebarProps) {
+  const [filter, setFilter] = useState('');
+  const [expanded, setExpanded] = useState(false);
+
+  const totalCount = Object.keys(tags).length;
+
+  const sortedTags = Object.entries(tags)
+    .sort((a, b) => b[1] - a[1])
+    .filter(([tag]) => !filter || tag.toLowerCase().includes(filter.toLowerCase()));
+
+  const activeIndex = sortedTags.findIndex(([tag]) => tag === activeTag);
+
+  // Compute visible tags:
+  // - Filtering or expanded: show all
+  // - Default: show first INITIAL_SHOW, then append active tag (with a separator)
+  //   if it falls beyond the initial slice — keeps sidebar compact while
+  //   always making the selected tag visible
+  const getVisibleTags = (): { entries: [string, number][]; appendedAt: number | null } => {
+    if (filter || expanded) return { entries: sortedTags, appendedAt: null };
+    const initial = sortedTags.slice(0, INITIAL_SHOW);
+    if (activeIndex >= INITIAL_SHOW) {
+      return { entries: [...initial, sortedTags[activeIndex]], appendedAt: INITIAL_SHOW };
+    }
+    return { entries: initial, appendedAt: null };
+  };
+
+  const { entries: visibleTags, appendedAt } = getVisibleTags();
+  const remainingCount = sortedTags.length - visibleTags.length;
+  const showExpandButton = !filter && !expanded && remainingCount > 0;
+  // Only allow collapsing if it won't hide the active tag
+  const showCollapseButton = expanded && !filter && (activeIndex === -1 || activeIndex < INITIAL_SHOW);
+
+  return (
+    <aside className="hidden lg:block flex-shrink-0">
+      <div className="sticky top-24">
+
+        {/* Section heading → links to all tags, shows total count */}
+        <Link
+          href="/tags"
+          className="flex items-center gap-1.5 text-[10px] font-sans font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline mb-3"
+        >
+          <LuTag className="w-3 h-3" />
+          <span>{t('tags')}</span>
+          <span className="ml-auto font-mono font-normal normal-case tracking-normal text-muted/50">
+            {totalCount}
+          </span>
+        </Link>
+
+        {/* Filter input with clear button */}
+        <div className="relative mb-3">
+          <LuSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-muted/40 pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter…"
+            aria-label={t('filter_tags')}
+            className="w-full pl-8 pr-7 py-1.5 text-xs bg-muted/5 border border-muted/15 rounded-lg outline-none focus:border-accent/40 text-foreground placeholder:text-muted/40 transition-colors"
+          />
+          {filter && (
+            <button
+              onClick={() => setFilter('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted/40 hover:text-muted transition-colors p-0.5 rounded"
+              aria-label="Clear filter"
+            >
+              <LuX className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+
+        {/* Tag list — no overflow, no scrollbar */}
+        <nav className="space-y-0.5">
+          {visibleTags.map(([tag, count], index) => {
+            const isActive = tag === activeTag;
+            // Thin separator before the appended active tag
+            const showSeparator = appendedAt !== null && index === appendedAt;
+            return (
+              <div key={tag}>
+                {showSeparator && <div className="my-1.5 h-px bg-muted/10" />}
+                <Link
+                  href={`/tags/${encodeURIComponent(tag)}`}
+                  className={`flex items-center justify-between px-2.5 py-1.5 rounded-lg text-sm no-underline transition-colors ${
+                    isActive
+                      ? 'bg-accent/10 text-accent font-medium'
+                      : 'text-foreground/70 hover:text-foreground hover:bg-muted/10'
+                  }`}
+                >
+                  <span className="truncate">{tag}</span>
+                  <span className={`ml-2 text-xs font-mono flex-shrink-0 ${isActive ? 'text-accent/70' : 'text-muted/50'}`}>
+                    {count}
+                  </span>
+                </Link>
+              </div>
+            );
+          })}
+
+          {/* Expand button */}
+          {showExpandButton && (
+            <button
+              onClick={() => setExpanded(true)}
+              aria-expanded={false}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {tWith('more_tags', { count: remainingCount })}
+            </button>
+          )}
+
+          {/* Collapse button */}
+          {showCollapseButton && (
+            <button
+              onClick={() => setExpanded(false)}
+              aria-expanded={true}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {t('collapse_tags')}
+            </button>
+          )}
+
+          {/* Empty state */}
+          {visibleTags.length === 0 && (
+            <p className="text-xs text-muted/60 italic px-2.5 py-2">{t('no_tags_found')}</p>
+          )}
+        </nav>
+
+      </div>
+    </aside>
+  );
+}

package/src/components/TagsIndexClient.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { LuSearch, LuX } from 'react-icons/lu';
+import { useLanguage } from './LanguageProvider';
+
+interface TagsIndexClientProps {
+  tags: Record<string, number>;
+}
+
+type SortMode = 'popular' | 'alpha';
+
+function getTagClasses(count: number, min: number, max: number): string {
+  const ratio = max === min ? 0.5 : (count - min) / (max - min);
+  if (ratio >= 0.8) return 'text-xl font-bold px-5 py-2.5';
+  if (ratio >= 0.6) return 'text-lg font-semibold px-5 py-2';
+  if (ratio >= 0.4) return 'text-base font-medium px-4 py-2';
+  if (ratio >= 0.2) return 'text-sm px-3.5 py-1.5';
+  return 'text-xs px-3 py-1.5';
+}
+
+function TagLink({ tag, count, min, max }: { tag: string; count: number; min: number; max: number }) {
+  return (
+    <Link
+      href={`/tags/${encodeURIComponent(tag)}`}
+      className={`group inline-flex items-baseline gap-1.5 rounded-xl border border-muted/20 bg-muted/5 hover:bg-background hover:border-accent hover:shadow-md hover:shadow-accent/5 no-underline transition-all duration-200 ${getTagClasses(count, min, max)}`}
+    >
+      <span className="text-foreground group-hover:text-accent transition-colors">{tag}</span>
+      <span className="font-mono text-muted/50 group-hover:text-accent/50 transition-colors" style={{ fontSize: '0.7em' }}>{count}</span>
+    </Link>
+  );
+}
+
+export default function TagsIndexClient({ tags }: TagsIndexClientProps) {
+  const { t, tWith } = useLanguage();
+  const [filter, setFilter] = useState('');
+  const [sort, setSort] = useState<SortMode>('popular');
+
+  const total = Object.keys(tags).length;
+  const allEntries = Object.entries(tags);
+  const counts = allEntries.map(([, c]) => c);
+  const min = Math.min(...counts);
+  const max = Math.max(...counts);
+
+  const filtered = allEntries
+    .filter(([tag]) => !filter || tag.toLowerCase().includes(filter.toLowerCase()))
+    .sort((a, b) =>
+      sort === 'popular'
+        ? b[1] - a[1]
+        : a[0].localeCompare(b[0])
+    );
+
+  // Group by first letter for A-Z mode
+  const letterGroups = sort === 'alpha'
+    ? filtered.reduce<Record<string, [string, number][]>>((acc, entry) => {
+        const letter = /^[a-zA-Z]/.test(entry[0]) ? entry[0][0].toUpperCase() : '#';
+        if (!acc[letter]) acc[letter] = [];
+        acc[letter].push(entry);
+        return acc;
+      }, {})
+    : null;
+
+  const sortedLetters = letterGroups
+    ? Object.keys(letterGroups).sort((a, b) => a === '#' ? 1 : b === '#' ? -1 : a.localeCompare(b))
+    : null;
+
+  return (
+    <div>
+      {/* Controls */}
+      <div className="flex flex-col sm:flex-row gap-3 mb-10">
+        <div className="relative flex-1 max-w-sm">
+          <LuSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted/50 pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter tags…"
+            aria-label={t('filter_tags')}
+            className="w-full pl-9 pr-8 py-2 text-sm bg-muted/5 border border-muted/15 rounded-lg outline-none focus:border-accent/40 text-foreground placeholder:text-muted/40 transition-colors"
+          />
+          {filter && (
+            <button
+              onClick={() => setFilter('')}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted/40 hover:text-muted transition-colors p-0.5 rounded"
+              aria-label="Clear filter"
+            >
+              <LuX className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex rounded-lg border border-muted/15 overflow-hidden text-xs font-sans font-semibold self-start">
+          <button
+            type="button"
+            onClick={() => setSort('popular')}
+            aria-pressed={sort === 'popular'}
+            className={`px-4 py-2 transition-colors ${sort === 'popular' ? 'bg-accent/10 text-accent' : 'text-muted hover:text-foreground hover:bg-muted/5'}`}
+          >
+            {t('sort_popular')}
+          </button>
+          <button
+            type="button"
+            onClick={() => setSort('alpha')}
+            aria-pressed={sort === 'alpha'}
+            className={`px-4 py-2 border-l border-muted/15 transition-colors ${sort === 'alpha' ? 'bg-accent/10 text-accent' : 'text-muted hover:text-foreground hover:bg-muted/5'}`}
+          >
+            {t('sort_az')}
+          </button>
+        </div>
+      </div>
+
+      {/* Result count when filtering */}
+      {filter && (
+        <p className="text-xs font-mono text-muted mb-6">
+          {tWith('tags_count', { shown: filtered.length, total })}
+        </p>
+      )}
+
+      {/* Popular mode: flat size-scaled cloud */}
+      {sort === 'popular' && (
+        <div className="flex flex-wrap gap-3 items-baseline">
+          {filtered.map(([tag, count]) => (
+            <TagLink key={tag} tag={tag} count={count} min={min} max={max} />
+          ))}
+          {filtered.length === 0 && (
+            <p className="text-sm text-muted italic">{tWith('tags_no_match', { filter })}</p>
+          )}
+        </div>
+      )}
+
+      {/* A-Z mode: grouped under letter section headers */}
+      {sort === 'alpha' && sortedLetters && (
+        <div>
+          {sortedLetters.length === 0 ? (
+            <p className="text-sm text-muted italic">{tWith('tags_no_match', { filter })}</p>
+          ) : (
+            sortedLetters.map((letter, i) => (
+              <div key={letter} className={i > 0 ? 'mt-10' : ''}>
+                <div className="flex items-center gap-3 mb-4">
+                  <span className="text-xs font-mono font-bold text-muted/40 w-4">{letter}</span>
+                  <div className="flex-1 h-px bg-muted/10" />
+                </div>
+                <div className="flex flex-wrap gap-3 items-baseline">
+                  {letterGroups![letter].map(([tag, count]) => (
+                    <TagLink key={tag} tag={tag} count={count} min={min} max={max} />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/hooks/useScrollY.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Module-level subscriber set — only one DOM scroll listener exists
+ * regardless of how many components call this hook.
+ */
+const listeners = new Set<(y: number) => void>();
+
+function onScroll() {
+  const y = window.scrollY;
+  listeners.forEach(fn => fn(y));
+}
+
+/**
+ * Returns the current window.scrollY, updating on every scroll event.
+ * A single passive scroll listener is shared across all consumers.
+ */
+export function useScrollY(): number {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    if (listeners.size === 0) {
+      window.addEventListener('scroll', onScroll, { passive: true });
+    }
+    listeners.add(setScrollY);
+    // Sync on mount via RAF to avoid cascading render error
+    const rafId = requestAnimationFrame(() => setScrollY(window.scrollY));
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      listeners.delete(setScrollY);
+      if (listeners.size === 0) {
+        window.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, []);
+
+  return scrollY;
+}

package/src/i18n/translations.ts

@@ -6,7 +6,7 @@ export const translations = {
     tags: "Tags",
     about: "About",
     search: "Search...",
-    search_placeholder: "Search posts...",
+    search_placeholder: "Search...",
     no_results: "No results found.",
     latest_writing: "Latest Writing",
     curated_series: "Curated Series",
@@ -25,8 +25,12 @@ export const translations = {
     categories: "Categories",
     articles: "Articles",
     posts: "Posts",
+    links: "Links",
     explore: "Explore",
     connect: "Connect",
+    rss_feed: "RSS Feed",
+    privacy: "Privacy",
+    built_with: "Built with Amytis",
     on_this_page: "On this page",
     back_to_top: "Back to top",
     archive_subtitle: "{count} posts across {years} years.",
@@ -63,6 +67,56 @@ export const translations = {
     flows_in_month: "Notes in {month}",
     browse: "Browse",
     clear: "Clear",
+    search_all: "All",
+    recent_searches: "Recent",
+    search_showing: "Showing {shown} of {total} results",
+    search_results_found: "{total} results for \"{query}\"",
+    search_no_results_for: "No results for \"{query}\"",
+    search_type_post: "Post",
+    search_type_flow: "Flow",
+    search_type_book: "Book",
+    search_tips: "Tips",
+    search_tip_phrase: "Quoted string for exact matching (\" \" = Exact match)",
+    search_tip_and: "Use spaces to combine keywords (Space = AND)",
+    search_tip_exclude: "Exclude a term (- = Exclude)",
+    discuss_post: "Discuss this post",
+    share_post: "Share",
+    copy_link: "Copy link",
+    link_copied: "Copied!",
+    flow_notes: "Flow Notes",
+    tag_post_count: "{count} posts",
+    tag_post_count_one: "1 post",
+    tag_flow_count: "{count} flow notes",
+    tag_flow_count_one: "1 flow note",
+    subscribe: "Subscribe",
+    subscribe_subtitle: "Stay updated with new posts and notes via your preferred channel.",
+    rss_readers: "RSS Readers",
+    rss_description: "Subscribe with any RSS reader for automatic updates when new content is published.",
+    email_newsletter: "Email Newsletter",
+    email_newsletter_description: "Get new posts delivered directly to your inbox.",
+    telegram_channel: "Telegram",
+    telegram_channel_description: "Instant updates via Telegram channel.",
+    wechat_official: "WeChat Official Account",
+    wechat_description: "Follow on WeChat for updates.",
+    scan_qr_code: "Scan to follow",
+    copy_feed_url: "Copy feed URL",
+    feed_url_copied: "Copied!",
+    join_channel: "Join Channel",
+    subscribe_on_substack: "Subscribe on Substack",
+    subscribe_via_email: "Subscribe via Email",
+    social_connections: "Social",
+    older: "Older",
+    newer: "Newer",
+    tab_all: "All",
+    post_navigation: "Post navigation",
+    filter_tags: "Filter tags",
+    no_tags_found: "No tags found",
+    more_tags: "+ {count} more",
+    collapse_tags: "Show less",
+    sort_popular: "Popular",
+    sort_az: "A–Z",
+    tags_count: "{shown} / {total} tags",
+    tags_no_match: "No tags match \"{filter}\"",
   },
   zh: {
     home: "首页",
@@ -71,7 +125,7 @@ export const translations = {
     tags: "标签",
     about: "关于",
     search: "搜索...",
-    search_placeholder: "搜索文章...",
+    search_placeholder: "搜索...",
     no_results: "未找到结果。",
     latest_writing: "最新文章",
     curated_series: "精选系列",
@@ -90,8 +144,12 @@ export const translations = {
     categories: "分类",
     articles: "文章",
     posts: "文章",
+    links: "链接",
     explore: "探索",
     connect: "连接",
+    rss_feed: "RSS 订阅",
+    privacy: "隐私政策",
+    built_with: "基于 Amytis 构建",
     on_this_page: "本页目录",
     back_to_top: "返回顶部",
     archive_subtitle: "横跨 {years} 年，共 {count} 篇文章。",
@@ -128,6 +186,56 @@ export const translations = {
     flows_in_month: "{month} 随笔",
     browse: "浏览",
     clear: "清除",
+    search_all: "全部",
+    recent_searches: "最近",
+    search_showing: "显示 {shown} / {total} 条结果",
+    search_results_found: "找到 {total} 条\"{query}\"的结果",
+    search_no_results_for: "未找到\"{query}\"的相关结果",
+    search_type_post: "文章",
+    search_type_flow: "随笔",
+    search_type_book: "书籍",
+    search_tips: "搜索技巧",
+    search_tip_phrase: "加引号精确匹配短语（\" \" 表示精确匹配）",
+    search_tip_and: "使用空格组合关键词（空格表示 AND）",
+    search_tip_exclude: "排除关键词（- 表示排除）",
+    discuss_post: "讨论这篇文章",
+    share_post: "分享",
+    copy_link: "复制链接",
+    link_copied: "已复制",
+    flow_notes: "随笔",
+    tag_post_count: "{count} 篇文章",
+    tag_post_count_one: "1 篇文章",
+    tag_flow_count: "{count} 条随笔",
+    tag_flow_count_one: "1 条随笔",
+    subscribe: "订阅",
+    subscribe_subtitle: "通过您喜爱的方式订阅，及时获取新文章和随笔。",
+    rss_readers: "RSS 阅读器",
+    rss_description: "通过 RSS 阅读器订阅，发布新内容时自动获取更新。",
+    email_newsletter: "邮件订阅",
+    email_newsletter_description: "将新文章直接发送到您的邮箱。",
+    telegram_channel: "Telegram 频道",
+    telegram_channel_description: "通过 Telegram 频道获取即时更新。",
+    wechat_official: "微信公众号",
+    wechat_description: "关注微信公众号获取更新。",
+    scan_qr_code: "扫码关注",
+    copy_feed_url: "复制订阅链接",
+    feed_url_copied: "已复制！",
+    join_channel: "加入频道",
+    subscribe_on_substack: "在 Substack 订阅",
+    subscribe_via_email: "邮件订阅",
+    social_connections: "社交媒体",
+    older: "更早",
+    newer: "更新",
+    tab_all: "全部",
+    post_navigation: "文章导航",
+    filter_tags: "筛选标签",
+    no_tags_found: "未找到标签",
+    more_tags: "还有 {count} 个",
+    collapse_tags: "收起",
+    sort_popular: "热门",
+    sort_az: "A–Z",
+    tags_count: "{shown} / {total} 个标签",
+    tags_no_match: "未找到匹配\"{filter}\"的标签",
   },
 };
 

package/src/layouts/PostLayout.tsx

@@ -8,6 +8,9 @@ import Comments from '@/components/Comments';
 import ExternalLinks from '@/components/ExternalLinks';
 import Tag from '@/components/Tag';
 import ReadingProgressBar from '@/components/ReadingProgressBar';
+import PostNavigation from '@/components/PostNavigation';
+import AuthorCard from '@/components/AuthorCard';
+import ShareBar from '@/components/ShareBar';
 import { siteConfig } from '../../site.config';
 import { t } from '@/lib/i18n';
 
@@ -16,15 +19,18 @@ interface PostLayoutProps {
   relatedPosts?: PostData[];
   seriesPosts?: PostData[];
   seriesTitle?: string;
+  prevPost?: PostData | null;
+  nextPost?: PostData | null;
 }
 
-export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitle }: PostLayoutProps) {
-  const showToc = siteConfig.toc !== false && post.toc !== false && post.headings && post.headings.length > 0;
+export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitle, prevPost, nextPost }: PostLayoutProps) {
+  const showToc = siteConfig.posts?.toc !== false && post.toc !== false && post.headings && post.headings.length > 0;
   const hasSeries = !!(post.series && seriesPosts && seriesPosts.length > 0);
   const showSidebar = showToc || hasSeries;
+  const postUrl = `${siteConfig.baseUrl}/posts/${post.slug}`;
 
   return (
-    <div className={`layout-container ${showSidebar ? 'lg:max-w-7xl' : 'lg:max-w-6xl'}`}>
+    <div className="layout-container">
       <ReadingProgressBar />
       <div className={showSidebar
         ? 'grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start'
@@ -38,11 +44,13 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
             posts={hasSeries ? seriesPosts : undefined}
             currentSlug={post.slug}
             headings={showToc ? post.headings : []}
+            shareUrl={postUrl}
+            shareTitle={post.title}
           />
         )}
 
-        <article className="min-w-0 max-w-3xl">
-          <header className="mb-16 border-b border-muted/10 pb-12">
+        <article className="min-w-0 max-w-3xl mx-auto">
+          <header className="mb-16 border-b border-muted/10 pb-8">
             {post.draft && (
               <div className="mb-4">
                 <span className="text-xs font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded tracking-widest inline-block">
@@ -55,7 +63,7 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
                 {post.category}
               </span>
               <span className="w-1 h-1 rounded-full bg-muted/30" />
-              <time className="font-mono">{post.date}</time>
+              <time className="font-mono" data-pagefind-meta="date[content]">{post.date}</time>
               <span className="w-1 h-1 rounded-full bg-muted/30" />
               <span className="font-mono">{post.readingTime}</span>
             </div>
@@ -104,13 +112,32 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
 
           <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} />
 
+          {post.tags && post.tags.length > 0 && (
+            <div className="mt-12 pt-12 border-t border-muted/20 flex flex-wrap items-center gap-2">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mr-1">{t('tags')}</span>
+              {post.tags.map((tag) => (
+                <Tag key={tag} tag={tag} variant="default" />
+              ))}
+            </div>
+          )}
+
           {post.externalLinks && post.externalLinks.length > 0 && (
             <ExternalLinks links={post.externalLinks} />
           )}
 
-          <RelatedPosts posts={relatedPosts || []} />
+          <ShareBar
+            url={postUrl}
+            title={post.title}
+            className={showSidebar ? 'mt-8 lg:hidden' : 'mt-8'}
+          />
+
+          <AuthorCard authors={post.authors} />
+
+          <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} />
 
           <Comments slug={post.slug} />
+
+          <RelatedPosts posts={relatedPosts || []} />
         </article>
       </div>
     </div>

package/src/layouts/SimpleLayout.tsx

@@ -1,31 +1,69 @@
 import { PostData } from '@/lib/markdown';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
 import SimpleLayoutHeader from '@/components/SimpleLayoutHeader';
+import LocaleSwitch from '@/components/LocaleSwitch';
+import PostSidebar from '@/components/PostSidebar';
 import { TranslationKey } from '@/i18n/translations';
+import { siteConfig } from '../../site.config';
 
 interface SimpleLayoutProps {
   post: PostData;
   titleKey?: TranslationKey;
   subtitleKey?: TranslationKey;
-  titleOverride?: string | Record<string, string>;
-  subtitleOverride?: string | Record<string, string>;
 }
 
-export default function SimpleLayout({ post, titleKey, subtitleKey, titleOverride, subtitleOverride }: SimpleLayoutProps) {
-  return (
-    <div className="layout-main">
-      <article className="max-w-3xl mx-auto">
-        <SimpleLayoutHeader
-          title={post.title}
-          excerpt={post.excerpt}
-          titleKey={titleKey}
-          subtitleKey={subtitleKey}
-          titleOverride={titleOverride}
-          subtitleOverride={subtitleOverride}
-        />
+export default function SimpleLayout({ post, titleKey, subtitleKey }: SimpleLayoutProps) {
+  const defaultLocale = siteConfig.i18n.defaultLocale;
+  const localeEntries = Object.entries(post.contentLocales ?? {});
+  const showToc = siteConfig.posts?.toc !== false && post.toc !== false && post.headings?.length > 0;
+  const localeHeadings = post.contentLocales
+    ? Object.fromEntries(
+        Object.entries(post.contentLocales)
+          .filter(([, data]) => data.headings && data.headings.length > 0)
+          .map(([locale, data]) => [locale, data.headings!])
+      )
+    : undefined;
 
+  const articleContent = (
+    <>
+      <SimpleLayoutHeader
+        title={post.title}
+        excerpt={post.excerpt}
+        titleKey={titleKey}
+        subtitleKey={subtitleKey}
+        contentLocales={post.contentLocales}
+      />
+      {localeEntries.length > 0 ? (
+        <LocaleSwitch>
+          <div data-locale={defaultLocale}>
+            <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} />
+          </div>
+          {localeEntries.map(([locale, data]) => (
+            <div key={locale} data-locale={locale} style={{ display: 'none' }}>
+              <MarkdownRenderer content={data.content} latex={post.latex} slug={post.slug} />
+            </div>
+          ))}
+        </LocaleSwitch>
+      ) : (
         <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} />
-      </article>
+      )}
+    </>
+  );
+
+  return (
+    <div className="layout-main">
+      {showToc ? (
+        <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start">
+          <PostSidebar currentSlug={post.slug} headings={post.headings} localeHeadings={localeHeadings} />
+          <article className="min-w-0 max-w-3xl">
+            {articleContent}
+          </article>
+        </div>
+      ) : (
+        <article className="max-w-3xl mx-auto">
+          {articleContent}
+        </article>
+      )}
     </div>
   );
 }