@hutusi/amytis 1.9.0 → 1.11.0

package/src/components/SeriesList.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { getPostUrl } from '@/lib/urls';
+import PrevNextNav from './PrevNextNav';
+import { padNumber } from '@/lib/format-utils';
 
 interface SeriesListProps {
   seriesSlug: string;
@@ -52,39 +55,11 @@ export default function SeriesList({ seriesSlug, seriesTitle, posts, currentSlug
       </div>
 
       {/* Prev / Next navigation */}
-      <div className="flex gap-3 mb-3">
-        {prevPost ? (
-          <Link
-            href={`/posts/${prevPost.slug}`}
-            className="flex-1 flex items-center gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group"
-          >
-            <svg className="w-4 h-4 flex-shrink-0 text-muted group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-            </svg>
-            <div className="min-w-0">
-              <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-0.5">{t('prev')}</span>
-              <span className="block text-sm text-foreground/80 group-hover:text-foreground truncate transition-colors">{prevPost.title}</span>
-            </div>
-          </Link>
-        ) : (
-          <div className="flex-1" />
-        )}
-        {nextPost ? (
-          <Link
-            href={`/posts/${nextPost.slug}`}
-            className="flex-1 flex items-center justify-end gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group text-right"
-          >
-            <div className="min-w-0">
-              <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-0.5">{t('next')}</span>
-              <span className="block text-sm text-foreground/80 group-hover:text-foreground truncate transition-colors">{nextPost.title}</span>
-            </div>
-            <svg className="w-4 h-4 flex-shrink-0 text-muted group-hover:text-accent transition-colors" 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 className="flex-1" />
-        )}
+      <div className="mb-3">
+        <PrevNextNav
+          prev={prevPost ? { href: getPostUrl(prevPost), title: prevPost.title } : null}
+          next={nextPost ? { href: getPostUrl(nextPost), title: nextPost.title } : null}
+        />
       </div>
 
       {/* Toggle to expand full list */}
@@ -117,7 +92,7 @@ export default function SeriesList({ seriesSlug, seriesTitle, posts, currentSlug
                 {isCurrent ? (
                   <div className="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-lg bg-accent/5">
                     <span className="flex-shrink-0 w-5 h-5 rounded-full bg-accent text-white text-[10px] font-mono font-bold flex items-center justify-center">
-                      {String(index + 1).padStart(2, '0')}
+                      {padNumber(index + 1)}
                     </span>
                     <span className="text-sm font-semibold text-accent truncate">
                       {post.title}
@@ -125,7 +100,7 @@ export default function SeriesList({ seriesSlug, seriesTitle, posts, currentSlug
                   </div>
                 ) : (
                   <Link
-                    href={`/posts/${post.slug}`}
+                    href={getPostUrl(post)}
                     className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-lg hover:bg-muted/5 no-underline transition-colors"
                   >
                     <span className={`flex-shrink-0 w-5 h-5 rounded-full text-[10px] font-mono font-bold flex items-center justify-center transition-colors ${
@@ -133,7 +108,7 @@ export default function SeriesList({ seriesSlug, seriesTitle, posts, currentSlug
                         ? 'bg-accent/20 text-accent'
                         : 'bg-muted/10 text-muted group-hover:bg-muted/20'
                     }`}>
-                      {String(index + 1).padStart(2, '0')}
+                      {padNumber(index + 1)}
                     </span>
                     <span className={`text-sm truncate transition-colors ${
                       isPast

package/src/components/SeriesSidebar.tsx

@@ -4,6 +4,8 @@ import { useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { getPostUrl } from '@/lib/urls';
+import { padNumber } from '@/lib/format-utils';
 
 interface SeriesSidebarProps {
   seriesSlug: string;
@@ -77,7 +79,7 @@ export default function SeriesSidebar({ seriesSlug, seriesTitle, posts, currentS
             return (
               <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
                 <Link
-                  href={`/posts/${post.slug}`}
+                  href={getPostUrl(post)}
                   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'
@@ -93,7 +95,7 @@ export default function SeriesSidebar({ seriesSlug, seriesTitle, posts, currentS
                         ? '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')}
+                    {padNumber(index + 1)}
                   </div>
 
                   {/* Content */}

package/src/components/TagContentTabs.tsx

@@ -25,6 +25,7 @@ export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
   const { t } = useLanguage();
   const hasBoth = posts.length > 0 && flows.length > 0;
   const [activeTab, setActiveTab] = useState<Tab>('all');
+  const showSectionHeaders = hasBoth && activeTab === 'all';
 
   const showPosts = activeTab === 'all' || activeTab === 'posts';
   const showFlows = activeTab === 'all' || activeTab === 'flows';
@@ -65,12 +66,14 @@ export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
       {/* Posts section */}
       {showPosts && posts.length > 0 && (
         <div>
-          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-6">
-            {t('posts')}
-            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
-              {posts.length}
-            </span>
-          </h2>
+          {showSectionHeaders && (
+            <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-6">
+              {t('posts')}
+              <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+                {posts.length}
+              </span>
+            </h2>
+          )}
           <PostList posts={posts} />
         </div>
       )}
@@ -78,12 +81,14 @@ export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
       {/* Flows section */}
       {showFlows && flows.length > 0 && (
         <div className={showPosts && posts.length > 0 ? 'mt-12' : ''}>
-          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-4">
-            {t('flow_notes')}
-            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
-              {flows.length}
-            </span>
-          </h2>
+          {showSectionHeaders && (
+            <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-4">
+              {t('flow_notes')}
+              <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+                {flows.length}
+              </span>
+            </h2>
+          )}
           <div>
             {flows.map(flow => (
               <FlowTimelineEntry

package/src/components/TagPageHeader.tsx

@@ -5,10 +5,17 @@ import { useLanguage } from './LanguageProvider';
 
 interface TagPageHeaderProps {
   tag: string;
+  postCount?: number;
+  flowCount?: number;
 }
 
-export default function TagPageHeader({ tag }: TagPageHeaderProps) {
-  const { t } = useLanguage();
+export default function TagPageHeader({ tag, postCount = 0, flowCount = 0 }: TagPageHeaderProps) {
+  const { t, tWith } = useLanguage();
+
+  const parts: string[] = [];
+  if (postCount > 0) parts.push(tWith(postCount === 1 ? 'tag_post_count_one' : 'tag_post_count', { count: postCount }));
+  if (flowCount > 0) parts.push(tWith(flowCount === 1 ? 'tag_flow_count_one' : 'tag_flow_count', { count: flowCount }));
+  const subtitle = parts.join(' · ');
 
   return (
     <>
@@ -26,6 +33,9 @@ export default function TagPageHeader({ tag }: TagPageHeaderProps) {
         <h1 className="text-3xl md:text-4xl font-serif font-bold text-heading">
           <span className="text-accent/50 mr-1">#</span>{tag}
         </h1>
+        {subtitle && (
+          <p className="mt-2 text-sm text-muted">{subtitle}</p>
+        )}
       </header>
     </>
   );

package/src/components/TagSidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useState } from 'react';
-import { t, tWith } from '@/lib/i18n';
+import { useLanguage } from './LanguageProvider';
 import { LuTag, LuX, LuSearch } from 'react-icons/lu';
 
 const INITIAL_SHOW = 12;
@@ -13,6 +13,7 @@ interface TagSidebarProps {
 }
 
 export default function TagSidebar({ tags, activeTag }: TagSidebarProps) {
+  const { t, tWith } = useLanguage();
   const [filter, setFilter] = useState('');
   const [expanded, setExpanded] = useState(false);
 
@@ -67,7 +68,7 @@ export default function TagSidebar({ tags, activeTag }: TagSidebarProps) {
             type="text"
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            placeholder="Filter…"
+            placeholder={t('filter_tags')}
             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"
           />

package/src/components/TagsIndexClient.tsx

@@ -75,7 +75,7 @@ export default function TagsIndexClient({ tags }: TagsIndexClientProps) {
             type="text"
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            placeholder="Filter tags…"
+            placeholder={t('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"
           />

package/src/components/TocPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useState } from 'react';
+import type { Heading } from '@/lib/markdown';
+import { useLanguage } from './LanguageProvider';
+import { useActiveHeading } from '@/hooks/useActiveHeading';
+import { scrollToHeading } from '@/lib/scroll-utils';
+
+interface TocPanelProps {
+  headings: Heading[];
+  className?: string;
+}
+
+export default function TocPanel({ headings, className = '' }: TocPanelProps) {
+  const { t } = useLanguage();
+  const [collapsed, setCollapsed] = useState(false);
+  const activeHeadingId = useActiveHeading(headings);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <nav aria-label={t('on_this_page')} className={className}>
+      <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
+          type="button"
+          onClick={() => setCollapsed(prev => !prev)}
+          className="text-muted hover:text-foreground transition-colors"
+          aria-expanded={!collapsed}
+          aria-label={collapsed ? t('toc_expand') : t('toc_collapse')}
+        >
+          <svg
+            className={`w-3.5 h-3.5 transition-transform duration-200 ${collapsed ? '' : '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>
+      {!collapsed && (
+        <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
+          {headings.map(h => {
+            const isActive = h.id === activeHeadingId;
+            return (
+              <li key={h.id}>
+                <a
+                  href={`#${h.id}`}
+                  onClick={e => scrollToHeading(e, h.id)}
+                  className={`block py-1 text-[13px] leading-snug no-underline transition-colors duration-200 ${
+                    isActive
+                      ? 'text-accent font-medium border-l-2 border-accent -ml-px'
+                      : 'text-foreground/70 hover:text-foreground'
+                  }`}
+                  style={{ paddingLeft: `${(h.level - 1) * 0.75}rem` }}
+                >
+                  {h.text}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </nav>
+  );
+}

package/src/hooks/useActiveHeading.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { Heading } from '@/lib/markdown';
+import { useScrollY } from './useScrollY';
+
+export function useActiveHeading(headings: Heading[], enabled = true): string {
+  const [activeId, setActiveId] = useState('');
+  const scrollY = useScrollY();
+
+  useEffect(() => {
+    if (!enabled || headings.length === 0) return;
+
+    const elements = headings
+      .map(h => document.getElementById(h.id))
+      .filter(Boolean) as HTMLElement[];
+
+    if (elements.length === 0) return;
+
+    const scrollPosition = scrollY + 100;
+    let current = elements[0];
+    for (const el of elements) {
+      if (el.offsetTop <= scrollPosition) current = el;
+      else break;
+    }
+
+    const rafId = requestAnimationFrame(() => { if (current) setActiveId(current.id); });
+    return () => cancelAnimationFrame(rafId);
+  }, [scrollY, headings, enabled]);
+
+  return activeId;
+}

package/src/hooks/useSidebarAutoScroll.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, type RefObject } from 'react';
+
+export function useSidebarAutoScroll(
+  sidebarRef: RefObject<HTMLElement | null>,
+  itemRef: RefObject<HTMLElement | null>,
+  dep: unknown,
+): void {
+  useEffect(() => {
+    if (itemRef.current && sidebarRef.current) {
+      const item = itemRef.current;
+      const sidebar = sidebarRef.current;
+      sidebar.scrollTop = item.offsetTop - sidebar.clientHeight / 2 + item.offsetHeight / 2;
+    }
+  // refs are stable; only re-run when dep changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dep]);
+}

package/src/i18n/translations.ts

@@ -39,8 +39,13 @@ export const translations = {
     page_of_total: "Page {page} of {total}",
     series_subtitle: "{count} collections of curated knowledge.",
     series_subtitle_one: "1 collection of curated knowledge.",
-    tags_subtitle: "{count} topics cultivated in this garden.",
-    tags_subtitle_one: "1 topic cultivated in this garden.",
+    series_default_excerpt: "A growing collection of related thoughts.",
+    shuffle_series: "Shuffle series",
+    shuffle_posts: "Shuffle featured stories",
+    books_subtitle: "{count} long-form books and structured guides.",
+    books_subtitle_one: "1 long-form book and structured guide.",
+    tags_subtitle: "{count} topics spanning all articles and notes.",
+    tags_subtitle_one: "1 topic spanning all articles and notes.",
     tag_posts_found: "{count} articles found.",
     tag_posts_found_one: "1 article found.",
     about_title: "About Amytis",
@@ -61,6 +66,7 @@ export const translations = {
     flow: "Flow",
     recent_notes: "Recent Notes",
     all_flows: "All Flows",
+    no_posts: "No posts found.",
     no_flows: "No notes yet.",
     flow_subtitle: "{count} daily notes.",
     flows_in_year: "Notes in {year}",
@@ -130,6 +136,11 @@ export const translations = {
     browser_outdated: "Your browser is outdated and may not display this site correctly.",
     browser_update: "Update your browser",
     browser_dismiss: "Dismiss",
+    toc_expand: "Expand table of contents",
+    toc_collapse: "Collapse table of contents",
+    archive_description: "A complete chronological archive of all articles.",
+    tags_description: "Explore topics spanning all articles and flow notes.",
+    posts_description: "Browse all articles.",
   },
   zh: {
     home: "首页",
@@ -171,8 +182,13 @@ export const translations = {
     page_of_total: "第 {page} 页，共 {total} 页",
     series_subtitle: "{count} 个精选知识合集。",
     series_subtitle_one: "1 个精选知识合集。",
-    tags_subtitle: "花园中培育了 {count} 个主题。",
-    tags_subtitle_one: "花园中培育了 1 个主题。",
+    series_default_excerpt: "一个持续更新的文章合集。",
+    shuffle_series: "随机排列系列",
+    shuffle_posts: "随机排列精选文章",
+    books_subtitle: "共 {count} 部长篇书籍与结构化指南。",
+    books_subtitle_one: "1 部长篇书籍与结构化指南。",
+    tags_subtitle: "共 {count} 个主题，横跨全部文章与随笔。",
+    tags_subtitle_one: "1 个主题，横跨全部文章与随笔。",
     tag_posts_found: "找到 {count} 篇文章。",
     tag_posts_found_one: "找到 1 篇文章。",
     about_title: "关于 Amytis",
@@ -193,6 +209,7 @@ export const translations = {
     flow: "随笔",
     recent_notes: "近期随笔",
     all_flows: "全部随笔",
+    no_posts: "暂无文章。",
     no_flows: "暂无随笔。",
     flow_subtitle: "共 {count} 条随笔。",
     flows_in_year: "{year} 年随笔",
@@ -262,6 +279,11 @@ export const translations = {
     browser_outdated: "您的浏览器版本过旧，可能无法正常显示本站内容。",
     browser_update: "更新浏览器",
     browser_dismiss: "关闭",
+    toc_expand: "展开目录",
+    toc_collapse: "收起目录",
+    archive_description: "全部文章的时间轴归档。",
+    tags_description: "浏览全部文章与随笔的主题标签。",
+    posts_description: "浏览全部文章。",
   },
 };
 

package/src/layouts/BookLayout.tsx

@@ -1,10 +1,11 @@
-import Link from 'next/link';
 import { BookData, BookChapterData } from '@/lib/markdown';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
 import BookSidebar from '@/components/BookSidebar';
 import BookMobileNav from '@/components/BookMobileNav';
+import PrevNextNav from '@/components/PrevNextNav';
 import ReadingProgressBar from '@/components/ReadingProgressBar';
 import { t } from '@/lib/i18n';
+import { getBookChapterUrl } from '@/lib/urls';
 
 interface BookLayoutProps {
   book: BookData;
@@ -27,7 +28,7 @@ export default function BookLayout({ book, chapter }: BookLayoutProps) {
         />
 
         {/* Main content */}
-        <article className="min-w-0 max-w-3xl">
+        <article className="min-w-0 w-full max-w-3xl overflow-x-hidden">
           {/* Mobile nav */}
           <div className="lg:hidden mb-8">
             <BookMobileNav
@@ -64,44 +65,13 @@ export default function BookLayout({ book, chapter }: BookLayoutProps) {
           <MarkdownRenderer content={chapter.content} latex={chapter.latex} slug={chapter.isFolder ? `books/${book.slug}/${chapter.slug}` : `books/${book.slug}`} />
 
           {/* Prev/Next navigation */}
-          <nav className="mt-16 pt-8 border-t border-muted/10 flex gap-4">
-            {chapter.prevChapter ? (
-              <Link
-                href={`/books/${book.slug}/${chapter.prevChapter.id}`}
-                className="flex-1 group flex items-center gap-3 py-4 px-5 rounded-xl bg-muted/5 hover:bg-muted/10 no-underline transition-colors"
-              >
-                <svg className="w-5 h-5 flex-shrink-0 text-muted group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                </svg>
-                <div className="min-w-0">
-                  <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-1">{t('prev')}</span>
-                  <span className="block text-sm font-medium text-foreground/80 group-hover:text-foreground truncate transition-colors">
-                    {chapter.prevChapter.title}
-                  </span>
-                </div>
-              </Link>
-            ) : (
-              <div className="flex-1" />
-            )}
-            {chapter.nextChapter ? (
-              <Link
-                href={`/books/${book.slug}/${chapter.nextChapter.id}`}
-                className="flex-1 group flex items-center justify-end gap-3 py-4 px-5 rounded-xl bg-muted/5 hover:bg-muted/10 no-underline transition-colors text-right"
-              >
-                <div className="min-w-0">
-                  <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-1">{t('next')}</span>
-                  <span className="block text-sm font-medium text-foreground/80 group-hover:text-foreground truncate transition-colors">
-                    {chapter.nextChapter.title}
-                  </span>
-                </div>
-                <svg className="w-5 h-5 flex-shrink-0 text-muted group-hover:text-accent transition-colors" 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 className="flex-1" />
-            )}
-          </nav>
+          <div className="mt-16 pt-8 border-t border-muted/10">
+            <PrevNextNav
+              prev={chapter.prevChapter ? { href: getBookChapterUrl(book.slug, chapter.prevChapter.id), title: chapter.prevChapter.title } : null}
+              next={chapter.nextChapter ? { href: getBookChapterUrl(book.slug, chapter.nextChapter.id), title: chapter.nextChapter.title } : null}
+              size="lg"
+            />
+          </div>
         </article>
       </div>
     </div>

package/src/layouts/PostLayout.tsx

@@ -14,6 +14,7 @@ import AuthorCard from '@/components/AuthorCard';
 import ShareBar from '@/components/ShareBar';
 import { siteConfig } from '../../site.config';
 import { t } from '@/lib/i18n';
+import { getPostUrl } from '@/lib/urls';
 
 interface PostLayoutProps {
   post: PostData;
@@ -30,7 +31,7 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
   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}`;
+  const postUrl = `${siteConfig.baseUrl}${getPostUrl(post)}`;
 
   return (
     <div className="layout-container">
@@ -52,7 +53,7 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
           />
         )}
 
-        <article className="min-w-0 max-w-3xl mx-auto">
+        <article className="min-w-0 w-full max-w-3xl mx-auto overflow-x-hidden">
           <header className="mb-16 border-b border-muted/10 pb-8">
             {post.draft && (
               <div className="mb-4">
@@ -71,26 +72,34 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
               <span className="font-mono">{post.readingTime}</span>
             </div>
 
-            <h1 className="text-4xl md:text-5xl font-serif font-bold text-heading leading-tight mb-6">
+            <h1 className="text-4xl md:text-5xl font-serif font-bold text-heading leading-tight mb-4">
               {post.title}
             </h1>
 
-            <div className="flex items-center gap-2 mb-8 text-sm font-serif italic text-muted">
-              <span>{t('written_by')}</span>
-              <div className="flex items-center gap-1">
-                {post.authors.map((author, index) => (
-                  <span key={author} className="flex items-center">
-                    <Link
-                      href={`/authors/${getAuthorSlug(author)}`}
-                      className="text-foreground hover:text-accent no-underline transition-colors duration-200"
-                    >
-                      {author}
-                    </Link>
-                    {index < post.authors.length - 1 && <span className="mr-1">,</span>}
-                  </span>
-                ))}
+            {post.subtitle && (
+              <p className="text-xl md:text-2xl font-serif italic text-muted leading-snug mb-6">
+                {post.subtitle}
+              </p>
+            )}
+
+            {siteConfig.posts?.authors?.showInHeader !== false && post.authors.length > 0 && (
+              <div className="flex items-center gap-2 mb-8 text-sm font-serif italic text-muted">
+                <span>{t('written_by')}</span>
+                <div className="flex items-center gap-1">
+                  {post.authors.map((author, index) => (
+                    <span key={author} className="flex items-center">
+                      <Link
+                        href={`/authors/${getAuthorSlug(author)}`}
+                        className="text-foreground hover:text-accent no-underline transition-colors duration-200"
+                      >
+                        {author}
+                      </Link>
+                      {index < post.authors.length - 1 && <span className="mr-1">,</span>}
+                    </span>
+                  ))}
+                </div>
               </div>
-            </div>
+            )}
 
             {post.excerpt && (
               <p className="text-xl text-foreground font-serif italic leading-relaxed mb-8">
@@ -113,7 +122,11 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
             </div>
           )}
 
-          <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} slugRegistry={slugRegistry} />
+          <MarkdownRenderer content={post.content} latex={post.latex} slug={`posts/${post.slug}`} slugRegistry={slugRegistry} />
+
+          {siteConfig.posts?.authors?.showAuthorCard !== false && (
+            <AuthorCard authors={post.authors} />
+          )}
 
           {post.tags && post.tags.length > 0 && (
             <div className="mt-12 pt-12 border-t border-muted/20 flex flex-wrap items-center gap-2">
@@ -124,10 +137,6 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
             </div>
           )}
 
-          {post.externalLinks && post.externalLinks.length > 0 && (
-            <ExternalLinks links={post.externalLinks} />
-          )}
-
           <Backlinks backlinks={backlinks ?? []} />
 
           <ShareBar
@@ -136,11 +145,13 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
             className={showSidebar ? 'mt-8 lg:hidden' : 'mt-8'}
           />
 
-          <AuthorCard authors={post.authors} />
+          <Comments slug={post.slug} postUrl={postUrl} />
 
-          <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} />
+          {post.externalLinks && post.externalLinks.length > 0 && (
+            <ExternalLinks links={post.externalLinks} />
+          )}
 
-          <Comments slug={post.slug} />
+          <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} />
 
           <RelatedPosts posts={relatedPosts || []} />
         </article>

package/src/layouts/SimpleLayout.tsx

@@ -36,16 +36,16 @@ export default function SimpleLayout({ post, titleKey, subtitleKey }: SimpleLayo
       {localeEntries.length > 0 ? (
         <LocaleSwitch>
           <div data-locale={defaultLocale}>
-            <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} />
+            <MarkdownRenderer content={post.content} latex={post.latex} slug={`posts/${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} />
+              <MarkdownRenderer content={data.content} latex={post.latex} slug={`posts/${post.slug}`} />
             </div>
           ))}
         </LocaleSwitch>
       ) : (
-        <MarkdownRenderer content={post.content} latex={post.latex} slug={post.slug} />
+        <MarkdownRenderer content={post.content} latex={post.latex} slug={`posts/${post.slug}`} />
       )}
     </>
   );
@@ -55,12 +55,12 @@ export default function SimpleLayout({ post, titleKey, subtitleKey }: SimpleLayo
       {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">
+          <article className="min-w-0 w-full max-w-3xl overflow-x-hidden">
             {articleContent}
           </article>
         </div>
       ) : (
-        <article className="max-w-3xl mx-auto">
+        <article className="w-full max-w-3xl mx-auto overflow-x-hidden">
           {articleContent}
         </article>
       )}