@hutusi/amytis 1.9.0 → 1.11.0

package/src/components/PostSidebar.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import Link from 'next/link';
 import { PostData, Heading } from '@/lib/markdown';
+import { getPostUrl } from '@/lib/urls';
 import { useLanguage } from './LanguageProvider';
-import { useScrollY } from '@/hooks/useScrollY';
+import { useSidebarAutoScroll } from '@/hooks/useSidebarAutoScroll';
+import { padNumber } from '@/lib/format-utils';
+import TocPanel from './TocPanel';
 import ShareBar from './ShareBar';
 import { siteConfig } from '../../site.config';
 
@@ -44,59 +47,8 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
   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();
-
-  // Derive active heading from shared scroll position
-  useEffect(() => {
-    if (activeHeadings.length === 0) return;
-
-    const headingElements = activeHeadings
-      .map(h => document.getElementById(h.id))
-      .filter(Boolean) as HTMLElement[];
-
-    if (headingElements.length === 0) return;
-
-    const scrollPosition = scrollY + 100;
-    let current = headingElements[0];
-    for (const el of headingElements) {
-      if (el.offsetTop <= scrollPosition) {
-        current = el;
-      } else {
-        break;
-      }
-    }
-
-    const rafId = requestAnimationFrame(() => {
-      if (current) setActiveHeadingId(current.id);
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [scrollY, activeHeadings]);
-
-  const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-    e.preventDefault();
-    const element = document.getElementById(id);
-    if (element) {
-      const offset = 80;
-      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
-      window.scrollTo({ top: elementPosition - offset, behavior: 'smooth' });
-      history.pushState(null, '', `#${id}`);
-    }
-  };
-
-  // Auto-scroll sidebar to current series item
-  useEffect(() => {
-    if (currentItemRef.current && sidebarRef.current) {
-      const sidebar = sidebarRef.current;
-      const item = currentItemRef.current;
-      const itemTop = item.offsetTop;
-      const itemHeight = item.offsetHeight;
-      const sidebarHeight = sidebar.clientHeight;
-      sidebar.scrollTop = itemTop - sidebarHeight / 2 + itemHeight / 2;
-    }
-  }, [currentSlug]);
+  useSidebarAutoScroll(sidebarRef, currentItemRef, currentSlug);
 
   return (
     <aside
@@ -104,57 +56,10 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       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"
     >
       {/* 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'}
-            >
-              <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>
-            </button>
-          </div>
-
-          {!tocCollapsed && (
-            <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-              {activeHeadings.map(heading => {
-                const isActive = heading.id === activeHeadingId;
-                const isH3 = heading.level === 3;
-
-                return (
-                  <li key={heading.id}>
-                    <a
-                      href={`#${heading.id}`}
-                      onClick={(e) => scrollToHeading(e, heading.id)}
-                      className={`block py-1 text-[13px] leading-snug no-underline transition-colors duration-200 ${
-                        isH3 ? 'pl-6' : 'pl-3'
-                      } ${
-                        isActive
-                          ? 'text-accent font-medium border-l-2 border-accent -ml-px'
-                          : 'text-foreground/70 hover:text-foreground'
-                      }`}
-                    >
-                      {heading.text}
-                    </a>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </nav>
-      )}
+      <TocPanel
+        headings={activeHeadings}
+        className={`mb-6 ${hasSeries ? 'pb-4 border-b border-muted/10' : ''}`}
+      />
 
       {/* Series section — below TOC */}
       {hasSeries && (
@@ -211,7 +116,7 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
                     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' : 'hover:bg-muted/5'
                           }`}
@@ -224,7 +129,7 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
                                 ? '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')}
+                            {padNumber(item + 1)}
                           </div>
                           <div className="flex-1 min-w-0 pt-0.5">
                             <span className={`block text-sm leading-snug transition-colors ${

package/src/components/PrevNextNav.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+import { useLanguage } from './LanguageProvider';
+
+interface NavItem {
+  href: string;
+  title: string;
+}
+
+interface PrevNextNavProps {
+  prev: NavItem | null;
+  next: NavItem | null;
+  size?: 'sm' | 'lg';
+}
+
+export default function PrevNextNav({ prev, next, size = 'sm' }: PrevNextNavProps) {
+  const { t } = useLanguage();
+  const isLg = size === 'lg';
+  const padding = isLg ? 'py-4 px-5' : 'py-2.5 px-3';
+  const rounding = isLg ? 'rounded-xl' : 'rounded-lg';
+  const iconSize = isLg ? 'w-5 h-5' : 'w-4 h-4';
+  const gap = isLg ? 'gap-3' : 'gap-2';
+  const titleClass = isLg ? 'text-sm font-medium text-foreground/80 group-hover:text-foreground truncate transition-colors' : 'text-sm text-foreground/80 group-hover:text-foreground truncate transition-colors';
+  const labelMargin = isLg ? 'mb-1' : 'mb-0.5';
+
+  return (
+    <div className={`flex ${isLg ? 'gap-4' : 'gap-3'}`}>
+      {prev ? (
+        <Link
+          href={prev.href}
+          className={`flex-1 flex items-center ${gap} ${padding} ${rounding} bg-muted/5 hover:bg-muted/10 no-underline transition-colors group`}
+        >
+          <svg className={`${iconSize} 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 ${labelMargin}`}>{t('prev')}</span>
+            <span className={`block ${titleClass}`}>{prev.title}</span>
+          </div>
+        </Link>
+      ) : (
+        <div className="flex-1" />
+      )}
+      {next ? (
+        <Link
+          href={next.href}
+          className={`flex-1 flex items-center justify-end ${gap} ${padding} ${rounding} 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 ${labelMargin}`}>{t('next')}</span>
+            <span className={`block ${titleClass}`}>{next.title}</span>
+          </div>
+          <svg className={`${iconSize} 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>
+  );
+}

package/src/components/RecentNotesSection.tsx

@@ -19,7 +19,7 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
   if (notes.length === 0) return null;
 
   return (
-    <section className="mt-16">
+    <section id="recent-flows">
       <div className="flex items-center justify-between mb-8">
         <h2 className="text-3xl font-serif font-bold text-heading">{t('recent_notes')}</h2>
         <Link
@@ -35,7 +35,7 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
 
       <div className="space-y-0">
         {notes.map(note => (
-          <div key={note.slug} className="relative pl-6 pb-6 border-l-2 border-muted/20 last:pb-0">
+          <div key={note.slug} className="relative pl-6 pb-6 border-l-2 border-muted/20 last:pb-0 last:border-l-transparent">
             <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
             <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>

package/src/components/RelatedPosts.tsx

@@ -1,16 +1,17 @@
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import { t } from '@/lib/i18n';
+import { getPostUrl } from '@/lib/urls';
 
 export default function RelatedPosts({ posts }: { posts: PostData[] }) {
   if (!posts || posts.length === 0) return null;
 
   return (
-    <div className="mt-12 pt-12 border-t border-muted/20">
+    <div className="mt-12">
       <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 => (
-          <Link key={post.slug} href={`/posts/${post.slug}`} className="group block no-underline">
+          <Link key={post.slug} href={getPostUrl(post)} className="group block no-underline">
             <article className="flex flex-col h-full">
                <div className="text-xs font-sans text-muted mb-2 flex items-center gap-2">
                  <time className="font-mono">{post.date}</time>

package/src/components/RssFeedWidget.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { siteConfig } from '../../site.config';
+import { useLanguage } from '@/components/LanguageProvider';
+import { LuCopy, LuCheck } from 'react-icons/lu';
+
+function FeedRow({ url, label }: { url: string; label?: string }) {
+  const { t } = useLanguage();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard API not available
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2.5 rounded-lg bg-muted/5 border border-muted/15 not-prose">
+      {label && <span className="text-xs font-medium text-muted/40 shrink-0 uppercase tracking-wide">{label}</span>}
+      <code className="text-xs font-mono text-muted/60 flex-1 truncate">{url}</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>
+  );
+}
+
+export default function RssFeedWidget() {
+  const base = siteConfig.baseUrl.replace(/\/+$/, '');
+  const { format } = siteConfig.feed;
+  const showBoth = format === 'both';
+
+  return (
+    <div className="my-4 flex flex-col gap-2">
+      {(format === 'rss' || format === 'both') && (
+        <FeedRow url={`${base}/feed.xml`} label={showBoth ? 'RSS' : undefined} />
+      )}
+      {(format === 'atom' || format === 'both') && (
+        <FeedRow url={`${base}/feed.atom`} label={showBoth ? 'Atom' : undefined} />
+      )}
+    </div>
+  );
+}

package/src/components/SectionLabel.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+interface SectionLabelProps {
+  children: ReactNode;
+  color?: 'muted' | 'accent';
+  className?: string;
+  as?: 'span' | 'p';
+}
+
+export default function SectionLabel({ children, color = 'muted', className = '', as: Tag = 'span' }: SectionLabelProps) {
+  return (
+    <Tag className={`text-[10px] font-sans font-bold uppercase tracking-widest ${color === 'accent' ? 'text-accent' : 'text-muted'} ${className}`.trim()}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/SelectedBooksSection.tsx

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 import CoverImage from './CoverImage';
-import HorizontalScroll from './HorizontalScroll';
 import { useLanguage } from './LanguageProvider';
+import { getBookUrl } from '@/lib/urls';
 
 export interface BookItem {
   slug: string;
@@ -18,27 +18,25 @@ export interface BookItem {
 interface SelectedBooksSectionProps {
   books: BookItem[];
   maxItems?: number;
-  scrollThreshold?: number;
 }
 
-export default function SelectedBooksSection({ books, maxItems = 4, scrollThreshold = 2 }: SelectedBooksSectionProps) {
+export default function SelectedBooksSection({ books, maxItems = 4 }: SelectedBooksSectionProps) {
   const { t } = useLanguage();
   const displayed = books.slice(0, maxItems);
 
   if (displayed.length === 0) return null;
 
   return (
-    <section className="mb-24">
-      <div className="flex items-center justify-between mb-12">
+    <section id="featured-books" className="mb-24">
+      <div className="flex items-center justify-between mb-8">
         <h2 className="text-3xl font-serif font-bold text-heading">{t('selected_books')}</h2>
         <Link href="/books" className="text-sm font-sans font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline hover:underline">
           {t('all_books')} →
         </Link>
       </div>
-      <HorizontalScroll itemCount={displayed.length} scrollThreshold={scrollThreshold}>
-        <div className={`flex gap-8 ${displayed.length > scrollThreshold ? 'pb-4' : ''}`}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         {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'}`}>
+          <Link key={book.slug} href={getBookUrl(book.slug)} className="group block no-underline">
             <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
@@ -48,11 +46,11 @@ export default function SelectedBooksSection({ books, maxItems = 4, scrollThresh
                   className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                 />
               </div>
-              <div className="p-8 flex flex-col flex-1">
-                <span className="badge-accent mb-4 inline-block">
+              <div className="p-6 flex flex-col flex-1">
+                <span className="badge-accent self-start">
                   {book.chapterCount} {t('chapters_count')}
                 </span>
-                <h3 className="mb-3 font-serif text-2xl font-bold text-heading group-hover:text-accent transition-colors">
+                <h3 className="mb-3 font-serif text-xl font-bold text-heading group-hover:text-accent transition-colors line-clamp-2">
                   {book.title}
                 </h3>
                 {book.authors.length > 0 && (
@@ -61,12 +59,12 @@ export default function SelectedBooksSection({ books, maxItems = 4, scrollThresh
                   </p>
                 )}
                 {book.excerpt && (
-                  <p className="text-muted font-serif italic leading-relaxed line-clamp-3">
+                  <p className="text-muted font-serif italic leading-relaxed line-clamp-3 text-sm mb-4">
                     {book.excerpt}
                   </p>
                 )}
                 {book.firstChapter && (
-                  <div className="mt-auto pt-6 border-t border-muted/10">
+                  <div className="mt-auto pt-4 border-t border-muted/10">
                     <span className="text-sm font-sans font-bold text-accent flex items-center gap-1.5">
                       {t('start_reading')}
                       <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -79,8 +77,7 @@ export default function SelectedBooksSection({ books, maxItems = 4, scrollThresh
             </div>
           </Link>
         ))}
-        </div>
-      </HorizontalScroll>
+      </div>
     </section>
   );
 }

package/src/components/SeriesCatalog.tsx

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import { PostData } from '@/lib/markdown';
 import CoverImage from './CoverImage';
+import { getPostUrl } from '@/lib/urls';
+import { padNumber } from '@/lib/format-utils';
+import { t } from '@/lib/i18n';
 
 interface SeriesCatalogProps {
   posts: PostData[];
@@ -18,84 +21,87 @@ export default function SeriesCatalog({ posts, startIndex = 0, totalPosts }: Ser
       <div className="space-y-6">
         {posts.map((post, index) => (
           <article key={post.slug} className="group relative">
+            {/* Cover link — sits above card content via z-index, tag links use z-10 to appear above it */}
             <Link
-              href={`/posts/${post.slug}`}
-              className="block no-underline"
-            >
-              <div className="flex gap-6 md:gap-8">
-                {/* Left side: Number indicator */}
-                <div className="hidden md:flex flex-col items-center">
-                  <div className="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background border-2 border-muted/20 group-hover:border-accent/50 transition-colors">
-                    <span className="text-sm font-mono font-bold text-muted group-hover:text-accent transition-colors">
-                      {String(startIndex + index + 1).padStart(2, '0')}
-                    </span>
-                  </div>
+              href={getPostUrl(post)}
+              className="absolute inset-0 z-0 rounded-2xl"
+              aria-label={post.title}
+            />
+
+            <div className="flex gap-6 md:gap-8">
+              {/* Left side: Number indicator */}
+              <div className="hidden md:flex flex-col items-center">
+                <div className="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background border-2 border-muted/20 group-hover:border-accent/50 transition-colors">
+                  <span className="text-sm font-mono font-bold text-muted group-hover:text-accent transition-colors">
+                    {padNumber(startIndex + index + 1)}
+                  </span>
                 </div>
+              </div>
 
-                {/* Right side: Content card */}
-                <div className="flex-1 rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden transition-all duration-300 group-hover:border-accent/30 group-hover:bg-muted/10 group-hover:shadow-lg group-hover:shadow-accent/5">
-                  <div className="flex flex-col sm:flex-row">
-                    {/* Thumbnail */}
-                    <div className="relative w-full sm:w-48 h-40 sm:h-auto flex-shrink-0 overflow-hidden bg-muted/10">
-                      <CoverImage
-                        src={post.coverImage}
-                        title={post.title}
-                        slug={post.slug}
-                        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-                      />
-                      {/* Mobile number badge */}
-                      <div className="absolute top-3 left-3 md:hidden flex h-8 w-8 items-center justify-center rounded-full bg-background/90 backdrop-blur border border-muted/20">
-                        <span className="text-xs font-mono font-bold text-muted">
-                          {String(startIndex + index + 1).padStart(2, '0')}
-                        </span>
-                      </div>
+              {/* Right side: Content card */}
+              <div className="flex-1 rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden transition-all duration-300 group-hover:border-accent/30 group-hover:bg-muted/10 group-hover:shadow-lg group-hover:shadow-accent/5">
+                <div className="flex flex-col sm:flex-row">
+                  {/* Thumbnail */}
+                  <div className="relative w-full sm:w-48 h-40 sm:h-auto flex-shrink-0 overflow-hidden bg-muted/10">
+                    <CoverImage
+                      src={post.coverImage}
+                      title={post.title}
+                      slug={post.slug}
+                      className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    />
+                    {/* Mobile number badge */}
+                    <div className="absolute top-3 left-3 md:hidden flex h-8 w-8 items-center justify-center rounded-full bg-background/90 backdrop-blur border border-muted/20">
+                      <span className="text-xs font-mono font-bold text-muted">
+                        {padNumber(startIndex + index + 1)}
+                      </span>
                     </div>
+                  </div>
 
-                    {/* Content */}
-                    <div className="flex-1 p-5 sm:p-6 flex flex-col">
-                      {/* Meta info */}
-                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted mb-3">
-                        <span>{post.date}</span>
-                        <span className="hidden sm:inline">•</span>
-                        <span className="text-accent/80">{post.readingTime}</span>
-                        {post.category && (
-                          <>
-                            <span className="hidden sm:inline">•</span>
-                            <span className="uppercase tracking-wider">{post.category}</span>
-                          </>
-                        )}
-                      </div>
+                  {/* Content */}
+                  <div className="flex-1 p-5 sm:p-6 flex flex-col">
+                    {/* Meta info */}
+                    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted mb-3">
+                      <span>{post.date}</span>
+                      <span className="hidden sm:inline">•</span>
+                      <span className="text-accent/80">{post.readingTime}</span>
+                      {post.category && (
+                        <>
+                          <span className="hidden sm:inline">•</span>
+                          <span className="uppercase tracking-wider">{post.category}</span>
+                        </>
+                      )}
+                    </div>
 
-                      {/* Title */}
-                      <h3 className="font-serif text-xl font-bold text-heading mb-2 leading-snug group-hover:text-accent transition-colors line-clamp-2">
-                        {post.title}
-                      </h3>
+                    {/* Title */}
+                    <h3 className="font-serif text-xl font-bold text-heading mb-2 leading-snug group-hover:text-accent transition-colors line-clamp-2">
+                      {post.title}
+                    </h3>
 
-                      {/* Excerpt */}
-                      {post.excerpt && (
-                        <p className="text-sm text-muted leading-relaxed line-clamp-2 mb-4">
-                          {post.excerpt}
-                        </p>
-                      )}
+                    {/* Excerpt */}
+                    {post.excerpt && (
+                      <p className="text-sm text-muted leading-relaxed line-clamp-2 mb-4">
+                        {post.excerpt}
+                      </p>
+                    )}
 
-                      {/* Tags */}
-                      {post.tags && post.tags.length > 0 && (
-                        <div className="mt-auto flex flex-wrap gap-2">
-                          {post.tags.slice(0, 3).map(tag => (
-                            <span
-                              key={tag}
-                              className="text-xs px-2 py-0.5 rounded-full bg-muted/10 text-muted/70"
-                            >
-                              {tag}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </div>
+                    {/* Tags */}
+                    {post.tags && post.tags.length > 0 && (
+                      <div className="mt-auto flex flex-wrap gap-2">
+                        {post.tags.slice(0, 3).map(tag => (
+                          <Link
+                            key={tag}
+                            href={`/tags/${encodeURIComponent(tag)}`}
+                            className="relative z-10 text-xs px-2 py-0.5 rounded-full bg-muted/10 text-muted/70 hover:bg-accent/10 hover:text-accent transition-colors no-underline"
+                          >
+                            {tag}
+                          </Link>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
-            </Link>
+            </div>
           </article>
         ))}
       </div>
@@ -103,8 +109,7 @@ export default function SeriesCatalog({ posts, startIndex = 0, totalPosts }: Ser
       {/* Series progress summary */}
       <div className="mt-10 pt-8 border-t border-muted/10 text-center">
         <p className="text-sm text-muted">
-          <span className="font-mono text-accent">{total}</span>
-          {total === 1 ? ' article' : ' articles'} in this series
+          <span className="font-mono text-accent">{total}</span> {t('parts')}
         </p>
       </div>
     </div>