@hutusi/amytis 1.9.0 → 1.11.0

package/src/components/FlowCalendarSidebar.tsx

@@ -3,6 +3,7 @@
 import { useState, useMemo, type ReactNode } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/components/LanguageProvider';
+import { padNumber } from '@/lib/format-utils';
 
 interface FlowCalendarSidebarProps {
   entryDates: string[];
@@ -14,6 +15,7 @@ interface FlowCalendarSidebarProps {
 }
 
 const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 export default function FlowCalendarSidebar({ entryDates, currentDate, tags, selectedTag, onTagSelect, breadcrumb }: FlowCalendarSidebarProps) {
   const { t } = useLanguage();
@@ -111,7 +113,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
           {days.map((day, i) => {
             if (day === null) return <div key={`empty-${i}`} />;
 
-            const dateStr = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+            const dateStr = `${viewYear}-${padNumber(viewMonth + 1)}-${padNumber(day)}`;
             const hasEntry = entrySet.has(dateStr);
             const isToday = dateStr === todayStr;
             const isCurrent = dateStr === currentDate;
@@ -122,7 +124,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
               return (
                 <Link
                   key={dateStr}
-                  href={`/flows/${viewYear}/${String(viewMonth + 1).padStart(2, '0')}/${String(day).padStart(2, '0')}`}
+                  href={`/flows/${viewYear}/${padNumber(viewMonth + 1)}/${padNumber(day)}`}
                   className={`${baseClasses} bg-accent text-white font-bold no-underline`}
                 >
                   {day}
@@ -134,7 +136,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
               return (
                 <Link
                   key={dateStr}
-                  href={`/flows/${viewYear}/${String(viewMonth + 1).padStart(2, '0')}/${String(day).padStart(2, '0')}`}
+                  href={`/flows/${viewYear}/${padNumber(viewMonth + 1)}/${padNumber(day)}`}
                   className={`${baseClasses} text-foreground hover:bg-accent/10 font-medium no-underline ${isToday ? 'ring-1 ring-accent' : ''}`}
                 >
                   {day}
@@ -203,12 +205,12 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
                           return (
                             <Link
                               key={m}
-                              href={`/flows/${year}/${String(m).padStart(2, '0')}`}
+                              href={`/flows/${year}/${padNumber(m)}`}
                               className={`flex items-center justify-between text-xs no-underline px-1 py-0.5 rounded hover:bg-accent/10 ${
                                 isCurrentMonth ? 'text-accent font-medium' : 'text-muted'
                               }`}
                             >
-                              <span>{String(m).padStart(2, '0')}</span>
+                              <span>{MONTH_NAMES[m - 1]}</span>
                               <span className="text-[10px]">{months[m]}</span>
                             </Link>
                           );
@@ -230,17 +232,18 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
           <div className="flex flex-wrap gap-1.5">
             {Object.entries(tags)
               .sort((a, b) => b[1] - a[1])
-              .map(([tag]) => (
+              .map(([tag, count]) => (
                 <button
                   key={tag}
                   onClick={() => onTagSelect?.(tag)}
-                  className={`inline-flex items-center px-2 py-0.5 text-xs rounded-full border transition-colors ${
+                  className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border transition-colors ${
                     selectedTag === tag
                       ? 'bg-accent text-white border-accent'
                       : 'border-muted/20 text-muted hover:border-accent hover:text-accent'
                   }`}
                 >
                   {tag}
+                  <span className={`text-[10px] ${selectedTag === tag ? 'opacity-80' : 'opacity-60'}`}>{count}</span>
                 </button>
               ))}
           </div>

package/src/components/FlowContent.tsx

@@ -16,6 +16,7 @@ interface FlowItem {
 
 interface FlowContentProps {
   flows: FlowItem[];
+  allFlows?: FlowItem[];
   entryDates: string[];
   tags: Record<string, number>;
   currentDate?: string;
@@ -27,19 +28,22 @@ interface FlowContentProps {
   breadcrumb?: ReactNode;
 }
 
-export default function FlowContent({ flows, entryDates, tags, currentDate, pagination, breadcrumb }: FlowContentProps) {
+export default function FlowContent({ flows, allFlows, entryDates, tags, currentDate, pagination, breadcrumb }: FlowContentProps) {
   const { t } = useLanguage();
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
   const filteredFlows = useMemo(() => {
     if (!selectedTag) return flows;
-    return flows.filter(f => f.tags.includes(selectedTag));
-  }, [flows, selectedTag]);
+    const source = allFlows ?? flows;
+    return source.filter(f => f.tags.includes(selectedTag));
+  }, [flows, allFlows, selectedTag]);
 
   function handleTagSelect(tag: string) {
     setSelectedTag(prev => (prev === tag ? null : tag));
   }
 
+  const hasTags = tags && Object.keys(tags).length > 0;
+
   return (
     <div className="flex gap-10">
       <FlowCalendarSidebar
@@ -52,10 +56,34 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
       />
 
       <div className="flex-1 min-w-0">
+        {/* Mobile tag filter strip */}
+        {hasTags && (
+          <div className="lg:hidden mb-4">
+            <div className="flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide">
+              {Object.entries(tags)
+                .sort((a, b) => b[1] - a[1])
+                .map(([tag, count]) => (
+                  <button
+                    key={tag}
+                    onClick={() => handleTagSelect(tag)}
+                    className={`shrink-0 inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-full border transition-colors ${
+                      selectedTag === tag
+                        ? 'bg-accent text-white border-accent'
+                        : 'border-muted/20 text-muted hover:border-accent hover:text-accent'
+                    }`}
+                  >
+                    {tag}
+                    <span className={`text-[10px] ${selectedTag === tag ? 'opacity-80' : 'opacity-60'}`}>{count}</span>
+                  </button>
+                ))}
+            </div>
+          </div>
+        )}
+
         {selectedTag && (
           <div className="flex items-center gap-2 mb-4 text-sm text-muted">
             <span>
-              {filteredFlows.length} / {flows.length}
+              {filteredFlows.length} / {(allFlows ?? flows).length}
             </span>
             <button
               onClick={() => setSelectedTag(null)}
@@ -82,7 +110,7 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
           </div>
         )}
 
-        {pagination && pagination.totalPages > 1 && (
+        {!selectedTag && pagination && pagination.totalPages > 1 && (
           <div className="mt-12">
             <Pagination
               currentPage={pagination.currentPage}

package/src/components/Footer.tsx

@@ -12,10 +12,10 @@ export default function Footer() {
   
   return (
     <footer className="bg-muted/5 border-t border-muted/10 mt-auto">
-      <div className="max-w-6xl mx-auto px-6 py-16">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-12">
+      <div className="max-w-6xl mx-auto px-6 py-10 lg:py-16">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-10 lg:mb-12">
           {/* Brand */}
-          <div className="lg:col-span-2">
+          <div className="col-span-2 lg:col-span-2">
             <Link href="/" className="flex items-center gap-2 mb-4 group no-underline">
               <svg
                 viewBox="0 0 32 32"
@@ -89,10 +89,32 @@ export default function Footer() {
         {/* Bottom Bar */}
         <div className="pt-8 border-t border-muted/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-muted">
           <span>{resolveLocaleValue(siteConfig.footerText, language)}</span>
-          <div className="flex items-center gap-6">
-             <LanguageSwitch variant="text" />
-             <span className="opacity-20">|</span>
+          <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
+             {siteConfig.i18n.enabled !== false && siteConfig.i18n.locales.length >= 2 && (
+               <>
+                 <LanguageSwitch variant="text" />
+                 <span className="opacity-20">|</span>
+               </>
+             )}
              <Link href="/privacy" className="hover:text-foreground transition-colors no-underline">{t('privacy')}</Link>
+             {siteConfig.footer?.bottomLinks?.map((item, index) => {
+               const label = resolveLocaleValue(item.text, language);
+               const isInternal = item.url?.startsWith('/');
+               return (
+                 <span key={`${index}:${item.url ?? label}`} className="flex items-center gap-x-6">
+                   <span className="opacity-20">|</span>
+                   {item.url ? (
+                     isInternal ? (
+                       <Link href={item.url} className="hover:text-foreground transition-colors no-underline">{label}</Link>
+                     ) : (
+                       <a href={item.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors no-underline">{label}</a>
+                     )
+                   ) : (
+                     <span>{label}</span>
+                   )}
+                 </span>
+               );
+             })}
              {siteConfig.footer?.builtWith?.show && (() => {
                const cfg = siteConfig.footer.builtWith;
                const label = cfg.text ? resolveLocaleValue(cfg.text, language) : t('built_with');

package/src/components/Hero.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
 import { useLanguage } from '@/components/LanguageProvider';
 import { resolveLocaleValue } from '@/lib/i18n';
 
@@ -10,92 +10,49 @@ interface HeroProps {
   tagline: LocaleValue;
   title: LocaleValue;
   subtitle: LocaleValue;
+  postCount?: number;
+  seriesCount?: number;
+  bookCount?: number;
+  flowCount?: number;
+  featureNames?: {
+    flow?: LocaleValue;
+    posts?: LocaleValue;
+    series?: LocaleValue;
+    books?: LocaleValue;
+  };
+}
+
+interface StatItem {
+  href: string;
+  count: number;
+  label: string;
 }
 
-export default function Hero({ tagline, title, subtitle }: HeroProps) {
+export default function Hero({ tagline, title, subtitle, postCount, seriesCount, bookCount, flowCount, featureNames }: HeroProps) {
   const { language } = useLanguage();
   const resolvedTagline = resolveLocaleValue(tagline, language);
   const resolvedTitle = resolveLocaleValue(title, language);
   const resolvedSubtitle = resolveLocaleValue(subtitle, language);
-  const [isVisible, setIsVisible] = useState<boolean | null>(null);
-  const visibleRef = useRef(false);
-
-  useEffect(() => {
-    const saved = localStorage.getItem('amytis-hero-visible');
-    const visible = saved !== 'false';
-    // Use requestAnimationFrame to avoid cascading render lint error
-    const rafId = requestAnimationFrame(() => {
-      setIsVisible(visible);
-      visibleRef.current = visible;
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, []);
-
-  // Auto-collapse on scroll or navigation away
-  useEffect(() => {
-    if (!isVisible) return;
-
-    const handleScroll = () => {
-      if (window.scrollY > 400) {
-        setIsVisible(false);
-        visibleRef.current = false;
-        localStorage.setItem('amytis-hero-visible', 'false');
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      // On unmount (navigation away), hide for next visit
-      if (visibleRef.current) {
-        localStorage.setItem('amytis-hero-visible', 'false');
-      }
-    };
-  }, [isVisible]);
 
-  const handleCollapse = () => {
-    setIsVisible(false);
-    visibleRef.current = false;
-    localStorage.setItem('amytis-hero-visible', 'false');
-  };
-
-  const handleExpand = () => {
-    setIsVisible(true);
-    visibleRef.current = true;
-    localStorage.setItem('amytis-hero-visible', 'true');
-  };
+  const label = (key: keyof NonNullable<typeof featureNames>, fallback: string) =>
+    featureNames?.[key] ? resolveLocaleValue(featureNames[key]!, language) : fallback;
 
-  // Avoid layout shift on first render
-  if (isVisible === null) {
-    return <div className="min-h-[60vh]" />;
-  }
-
-  if (!isVisible) {
-    return (
-      <div className="py-10">
-        <button
-          onClick={handleExpand}
-          className="mx-auto flex items-center justify-center gap-4 group cursor-pointer"
-        >
-          <span className="h-px w-12 bg-muted/20 group-hover:bg-accent/40 transition-colors" />
-          <span className="text-xs font-sans font-bold uppercase tracking-[0.3em] text-muted/40 group-hover:text-accent/80 transition-colors">
-            {resolvedTagline}
-          </span>
-          <span className="h-px w-12 bg-muted/20 group-hover:bg-accent/40 transition-colors" />
-        </button>
-      </div>
-    );
-  }
+  const stats = [
+    flowCount   != null ? { href: '#recent-flows',    count: flowCount,   label: label('flow',   'Flow')    } : null,
+    postCount   != null ? { href: '#featured-posts',  count: postCount,   label: label('posts',  'Posts')   } : null,
+    seriesCount != null ? { href: '#featured-series', count: seriesCount, label: label('series', 'Series')  } : null,
+    bookCount   != null ? { href: '#featured-books',  count: bookCount,   label: label('books',  'Books')   } : null,
+  ].filter((s): s is StatItem => s !== null);
 
   return (
-    <header className="relative py-24 md:py-40 flex flex-col items-center justify-center text-center max-w-6xl mx-auto min-h-[60vh] px-6">
+    <header className="relative py-12 md:py-20 flex flex-col items-center justify-center text-center max-w-6xl mx-auto min-h-[40vh] px-6">
       <div className="mb-8 flex items-center justify-center animate-fade-in">
-         <span className="h-px w-12 bg-accent/30 mr-4"></span>
-         <span className="text-xs font-sans font-bold uppercase tracking-[0.3em] text-accent/80">{resolvedTagline}</span>
-         <span className="h-px w-12 bg-accent/30 ml-4"></span>
+        <span className="h-px w-12 bg-accent/30 mr-4"></span>
+        <span className="text-xs font-sans font-bold uppercase tracking-[0.3em] text-accent/80">{resolvedTagline}</span>
+        <span className="h-px w-12 bg-accent/30 ml-4"></span>
       </div>
 
-      <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-medium text-heading leading-[1.1] tracking-tight mb-10 text-balance animate-slide-up">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-medium text-heading leading-[1.1] tracking-tight mb-6 text-balance animate-slide-up">
         {resolvedTitle}
       </h1>
 
@@ -103,24 +60,19 @@ export default function Hero({ tagline, title, subtitle }: HeroProps) {
         {resolvedSubtitle}
       </p>
 
-      {/* Collapse button */}
-      <button
-        onClick={handleCollapse}
-        className="absolute top-4 right-4 text-muted/30 hover:text-accent transition-colors p-2"
-        aria-label="Collapse intro"
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-
-      {/* Scroll Indicator */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-muted/30">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
-        </svg>
-      </div>
+      {stats.length > 0 && (
+        <div className="mt-8 flex flex-wrap justify-center items-center gap-x-1 gap-y-2 text-sm font-mono animate-slide-up animation-delay-200">
+          {stats.map((stat, i) => (
+            <span key={stat.href} className="inline-flex items-center gap-1">
+              {i > 0 && <span className="text-muted/30 mx-2" aria-hidden>·</span>}
+              <Link href={stat.href} className="group no-underline">
+                <span className="font-semibold text-heading group-hover:text-accent transition-colors duration-200">{stat.count}</span>
+                <span className="text-muted ml-1 group-hover:text-accent/70 transition-colors duration-200">{stat.label}</span>
+              </Link>
+            </span>
+          ))}
+        </div>
+      )}
     </header>
   );
 }

package/src/components/InlineBookToc.tsx

@@ -0,0 +1,56 @@
+'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';
+
+export default function InlineBookToc({ headings }: { headings: Heading[] }) {
+  const { t } = useLanguage();
+  const [collapsed, setCollapsed] = useState(false);
+  const activeHeadingId = useActiveHeading(headings);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <div className="mt-1.5 mb-1 ml-3">
+      <button
+        onClick={() => setCollapsed(prev => !prev)}
+        className="flex items-center gap-1.5 text-[11px] font-sans font-medium uppercase tracking-wider text-muted hover:text-foreground transition-colors mb-1.5 pl-3"
+      >
+        <svg
+          className={`w-3 h-3 flex-shrink-0 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>
+        {t('on_this_page')}
+      </button>
+      {!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 ${
+                    h.level === 3 ? 'pl-6' : 'pl-3'
+                  } ${
+                    isActive
+                      ? 'text-accent font-medium border-l-2 border-accent -ml-px'
+                      : 'text-foreground/70 hover:text-foreground'
+                  }`}
+                >
+                  {h.text}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/components/KnowledgeGraph.tsx

@@ -217,6 +217,32 @@ export default function KnowledgeGraph() {
       node.attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`);
     });
 
+    // After simulation cools, fit all nodes into view
+    simulation.on('end', () => {
+      let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+      filteredNodes.forEach(d => {
+        const r = nodeRadius(d.connections);
+        x0 = Math.min(x0, (d.x ?? 0) - r);
+        y0 = Math.min(y0, (d.y ?? 0) - r);
+        x1 = Math.max(x1, (d.x ?? 0) + r);
+        y1 = Math.max(y1, (d.y ?? 0) + r);
+      });
+      if (!isFinite(x0) || x1 <= x0 || y1 <= y0) return;
+
+      const padding = 40;
+      const scale = Math.min(
+        (width - padding * 2) / (x1 - x0),
+        (height - padding * 2) / (y1 - y0)
+      );
+      const cx = (x0 + x1) / 2;
+      const cy = (y0 + y1) / 2;
+      const tx = width / 2 - scale * cx;
+      const ty = height / 2 - scale * cy;
+
+      svgEl.transition().duration(600)
+        .call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    });
+
     return () => {
       simulation.stop();
       tooltip.remove();

package/src/components/LanguageProvider.tsx

@@ -15,15 +15,19 @@ interface LanguageContextType {
 
 const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
 
+const isI18nEnabled = siteConfig.i18n.enabled !== false && siteConfig.i18n.locales.length >= 2;
+
 export function LanguageProvider({ children }: { children: React.ReactNode }) {
   // Always initialize with site default to match server-side rendering
   const [language, setLanguageState] = useState<Language>(siteConfig.i18n.defaultLocale as Language);
-  const [isHydrated, setIsHydrated] = useState(false);
+  // When i18n is disabled there is nothing to hydrate — mark as ready immediately
+  const [isHydrated, setIsHydrated] = useState(!isI18nEnabled);
 
   useEffect(() => {
+    if (!isI18nEnabled) return;
     // Only access localStorage and browser language after component is mounted (client-side)
     const savedLang = localStorage.getItem('amytis-language') as Language;
-    
+
     // Use requestAnimationFrame to avoid cascading render lint error
     const rafId = requestAnimationFrame(() => {
       if (savedLang && translations[savedLang]) {
@@ -35,6 +39,7 @@ export function LanguageProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   const setLanguage = (lang: Language) => {
+    if (!isI18nEnabled) return;
     setLanguageState(lang);
     localStorage.setItem('amytis-language', lang);
   };

package/src/components/LanguageSwitch.tsx

@@ -25,7 +25,7 @@ export default function LanguageSwitch({ variant = 'pill' }: LanguageSwitchProps
   const { language, setLanguage, isHydrated } = useLanguage();
   const locales = siteConfig.i18n.locales;
 
-  if (locales.length < 2) return null;
+  if (siteConfig.i18n.enabled === false || locales.length < 2) return null;
 
   // SSR placeholder — reserve space to avoid layout shift
   if (!isHydrated) {

package/src/components/LatestWritingSection.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import PostList from './PostList';
 import { useLanguage } from './LanguageProvider';
 import { PostData } from '@/lib/markdown';
+import { getPostsListUrl } from '@/lib/urls';
 
 interface LatestWritingSectionProps {
   posts: PostData[];
@@ -14,32 +15,21 @@ export default function LatestWritingSection({ posts, totalCount }: LatestWritin
   const { t, tWith } = useLanguage();
 
   return (
-    <section>
+    <section id="latest-posts">
       <div className="flex items-center justify-between mb-8">
         <h2 className="text-3xl font-serif font-bold text-heading">{t('latest_writing')}</h2>
+        <Link
+          href={getPostsListUrl()}
+          className="text-sm text-muted hover:text-accent transition-colors no-underline inline-flex items-center gap-1"
+        >
+          {tWith('view_all_posts', { count: totalCount })}
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </Link>
       </div>
 
-      <PostList posts={posts} showTags={false} />
-
-      {totalCount > posts.length && (
-        <div className="mt-12 text-center">
-          <Link
-            href="/posts"
-            className="group inline-flex items-center gap-2 px-6 py-3 rounded-full border border-muted/20 bg-muted/5 text-sm font-medium text-muted hover:text-accent hover:border-accent/30 hover:bg-accent/5 transition-all duration-300 no-underline"
-          >
-            <span>{tWith('view_all_posts', { count: totalCount })}</span>
-            <svg
-              className="w-4 h-4 transform group-hover:translate-x-0.5 transition-transform"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-            </svg>
-          </Link>
-        </div>
-      )}
+      <PostList posts={posts} showTags={false} excerptLines={1} />
     </section>
   );
 }

package/src/components/MarkdownRenderer.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+describe("MarkdownRenderer", () => {
+  describe("image rendering", () => {
+    test("uses ExportedImage with fallback dimensions for local images without known dimensions", () => {
+      const content = "![alt text](/images/local.jpg)";
+      const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+      // ExportedImage is used with 1200x900 fallback when no dimensions are known
+      expect(html).toContain('width="1200"');
+      expect(html).toContain('height="900"');
+      // style override ensures the image renders at its natural size
+      expect(html).toContain('width:100%');
+    });
+
+    test("uses plain img for external images", () => {
+      const content = "![alt text](https://example.com/image.jpg)";
+      const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+      expect(html).toContain('src="https://example.com/image.jpg"');
+      // No fallback dimensions — external images are not processed by ExportedImage
+      expect(html).not.toContain('width="1200"');
+    });
+  });
+
+  test("adds horizontal overflow containment while preserving code scrolling", () => {
+    const content = [
+      "## Example",
+      "",
+      "```bash",
+      "echo this-is-a-very-long-line-that-should-scroll-inside-the-code-block",
+      "```",
+    ].join("\n");
+
+    const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+
+    expect(html).toContain("overflow-x-hidden");
+    expect(html).toContain("not-prose w-full min-w-0 max-w-full");
+    expect(html).toContain("overflow-x-auto");
+  });
+});