@hutusi/amytis 1.9.0 → 1.11.0

package/src/components/BookSidebar.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { BookTocItem, BookChapterEntry, Heading } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { useSidebarAutoScroll } from '@/hooks/useSidebarAutoScroll';
+import InlineBookToc from './InlineBookToc';
+import { getBookChapterUrl } from '@/lib/urls';
 
 interface BookSidebarProps {
   bookSlug: string;
@@ -17,10 +20,8 @@ interface BookSidebarProps {
 export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, currentChapter, headings = [] }: BookSidebarProps) {
   const { t } = useLanguage();
   const currentIndex = chapters.findIndex(ch => ch.id === currentChapter);
-  const [headingsCollapsed, setHeadingsCollapsed] = useState(false);
   const currentItemRef = useRef<HTMLLIElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
-  const [activeHeadingId, setActiveHeadingId] = useState<string>('');
 
   // Track which parts are collapsed
   const [collapsedParts, setCollapsedParts] = useState<Record<string, boolean>>(() => {
@@ -38,60 +39,16 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
     setCollapsedParts(prev => ({ ...prev, [part]: !prev[part] }));
   };
 
-  // Scroll tracking for page headings
-  const handleScroll = useCallback(() => {
-    if (headings.length === 0) return;
-
-    const headingElements = headings
-      .map(h => document.getElementById(h.id))
-      .filter(Boolean) as HTMLElement[];
-
-    if (headingElements.length === 0) return;
-
-    const scrollPosition = window.scrollY + 100;
-    let current = headingElements[0];
-    for (const el of headingElements) {
-      if (el.offsetTop <= scrollPosition) {
-        current = el;
-      } else {
-        break;
-      }
-    }
-
-    if (current) {
-      setActiveHeadingId(current.id);
-    }
-  }, [headings]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-    handleScroll();
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [handleScroll, headings.length]);
-
-  // Smooth scroll to heading
-  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}`);
-    }
-  };
-
-  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;
-    }
-  }, [currentChapter]);
+  // Re-run auto-scroll when the chapter changes AND when its part becomes visible.
+  // Without the visibility check, navigating into a collapsed part would trigger
+  // the expansion effect but the chapter DOM element wouldn't exist yet, so scroll
+  // would silently do nothing.
+  const isCurrentChapterVisible = toc.some(item =>
+    'part' in item
+      ? !collapsedParts[item.part] && item.chapters.some(ch => ch.id === currentChapter)
+      : item.id === currentChapter
+  );
+  useSidebarAutoScroll(sidebarRef, currentItemRef, `${currentChapter}:${isCurrentChapterVisible}`);
 
   // Expand part containing current chapter when it changes
   useEffect(() => {
@@ -102,53 +59,6 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
     }
   }, [currentChapter, toc]);
 
-  // Render the inline headings sub-list for the current chapter
-  const renderHeadings = () => {
-    if (headings.length === 0) return null;
-
-    return (
-      <div className="mt-1.5 mb-1 ml-3">
-        <button
-          onClick={() => setHeadingsCollapsed(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 ${headingsCollapsed ? '' : '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>
-        {!headingsCollapsed && (
-          <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-            {headings.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>
-        )}
-      </div>
-    );
-  };
 
   // Pre-calculate chapter global indices to avoid reassignment during render
   const chapterIndices = new Map<string, number>();
@@ -172,7 +82,7 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
     return (
       <li key={ch.id} ref={isCurrent ? currentItemRef : undefined}>
         <Link
-          href={`/books/${bookSlug}/${ch.id}`}
+          href={getBookChapterUrl(bookSlug, ch.id)}
           className={`block py-2 px-3 rounded-lg text-sm no-underline transition-all duration-200 ${
             isCurrent
               ? 'bg-accent/10 text-accent font-semibold border-l-2 border-accent'
@@ -184,7 +94,7 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
         >
           {ch.title}
         </Link>
-        {isCurrent && renderHeadings()}
+        {isCurrent && <InlineBookToc headings={headings} />}
       </li>
     );
   };
@@ -253,7 +163,7 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
       {/* Footer */}
       <div className="mt-6 pt-4 border-t border-muted/10">
         <Link
-          href={`/books/${bookSlug}`}
+          href="/books"
           className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
         >
           {t('all_books')}

package/src/components/CodeBlock.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import CodeBlock from "./CodeBlock";
+
+describe("CodeBlock", () => {
+  test("keeps code scrolling inside its own container", () => {
+    const html = renderToStaticMarkup(
+      <CodeBlock language="typescript">
+        {"const veryLongLine = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';"}
+      </CodeBlock>
+    );
+
+    expect(html).toContain("relative my-6 w-full min-w-0 max-w-full");
+    expect(html).toContain("overflow-x-auto");
+    expect(html).toContain("overflow-y-hidden");
+    expect(html).toContain("max-width:100%");
+    expect(html).toContain("box-sizing:border-box");
+  });
+});

package/src/components/CodeBlock.tsx

@@ -67,7 +67,7 @@ export default function CodeBlock({ language, children, ...props }: CodeBlockPro
   };
 
   return (
-    <div className="relative my-6 rounded-lg border border-muted/20 bg-background/50 overflow-hidden shadow-sm">
+    <div className="relative my-6 w-full min-w-0 max-w-full rounded-lg border border-muted/20 bg-background/50 overflow-hidden shadow-sm">
       <div className="flex items-center justify-between px-4 py-2 border-b border-muted/10 bg-muted/5">
         <span className="text-xs font-mono text-muted uppercase tracking-wider">
           {language || 'text'}
@@ -90,21 +90,25 @@ export default function CodeBlock({ language, children, ...props }: CodeBlockPro
           )}
         </button>
       </div>
-      <SyntaxHighlighter
-        language={language || 'text'}
-        PreTag="div"
-        useInlineStyles={false}
-        customStyle={{
-          margin: 0,
-          padding: '1.5rem',
-          background: 'transparent',
-          fontSize: '0.9rem',
-          lineHeight: '1.6',
-        }}
-        {...props}
-      >
-        {children}
-      </SyntaxHighlighter>
+      <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden">
+        <SyntaxHighlighter
+          language={language || 'text'}
+          PreTag="div"
+          useInlineStyles={false}
+          customStyle={{
+            margin: 0,
+            padding: '1.5rem',
+            background: 'transparent',
+            fontSize: '0.9rem',
+            lineHeight: '1.6',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
+          }}
+          {...props}
+        >
+          {children}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 }

package/src/components/Comments.tsx

@@ -3,6 +3,7 @@
 import Giscus from '@giscus/react';
 import { siteConfig } from '../../site.config';
 import { useTheme } from 'next-themes';
+import { getPostsBasePath } from '@/lib/urls';
 
 // Maps site locale codes to Giscus-supported language codes.
 // Full list: https://github.com/giscus/giscus/tree/main/locales
@@ -19,7 +20,7 @@ const GISCUS_LANG: Record<string, string> = {
   ru: 'ru',
 };
 
-export default function Comments({ slug }: { slug: string }) {
+export default function Comments({ slug, postUrl }: { slug: string; postUrl?: string }) {
   const { provider, giscus, disqus } = siteConfig.comments;
   const { theme, systemTheme } = useTheme();
 
@@ -56,8 +57,8 @@ export default function Comments({ slug }: { slug: string }) {
           dangerouslySetInnerHTML={{
             __html: `
               var disqus_config = function () {
-                this.page.url = '${siteConfig.baseUrl}/posts/${slug}';
-                this.page.identifier = '${slug}';
+                this.page.url = ${JSON.stringify(postUrl ?? `${siteConfig.baseUrl.replace(/\/+$/, '')}/${getPostsBasePath()}/${slug}`)};
+                this.page.identifier = ${JSON.stringify(slug)};
               };
               (function() {
                 var d = document, s = d.createElement('script');

package/src/components/CoverImage.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import ExportedImage from 'next-image-export-optimizer';
+import { siteConfig } from '../../site.config';
+import { getCdnImageUrl } from '@/lib/image-utils';
 
 // Each palette defines a gradient background and text color for light/dark modes
 const palettes = [
@@ -81,13 +83,19 @@ export default function CoverImage({ title, slug, src, className = "h-full w-ful
     );
   }
 
+  const cdnBaseUrl = siteConfig.images?.cdnBaseUrl ?? '';
+  const imageSrc = getCdnImageUrl(src!, cdnBaseUrl);
+  const isCdn = cdnBaseUrl && imageSrc !== src;
+  const isDev = process.env.NODE_ENV === 'development';
+
   return (
-    <ExportedImage 
-      src={src}
-      alt={title} 
+    <ExportedImage
+      src={imageSrc}
+      alt={title}
       className={className}
       fill
       sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      unoptimized={isDev || !!isCdn}
     />
   );
 }

package/src/components/CuratedSeriesSection.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import Link from 'next/link';
 import HorizontalScroll from './HorizontalScroll';
 import CoverImage from './CoverImage';
 import { useLanguage } from './LanguageProvider';
-import { shuffle } from '@/lib/shuffle';
+import { shuffle, shuffleSeeded } from '@/lib/shuffle';
+import { getPostUrl } from '@/lib/urls';
 
 export interface SeriesItem {
   name: string;
@@ -25,11 +26,12 @@ interface CuratedSeriesSectionProps {
 
 export default function CuratedSeriesSection({ allSeries, maxItems, scrollThreshold }: CuratedSeriesSectionProps) {
   const { t } = useLanguage();
-  const [displayed, setDisplayed] = useState(() => allSeries.slice(0, maxItems));
-
-  useEffect(() => {
-    setDisplayed(shuffle(allSeries).slice(0, maxItems));
-  }, [allSeries, maxItems]);
+  // Use a daily seed so SSR and client hydration agree on the initial order,
+  // preventing a visible reshuffle flash on page load.
+  const [displayed, setDisplayed] = useState(() => {
+    const dailySeed = Math.floor(Date.now() / 86400000);
+    return shuffleSeeded(allSeries, dailySeed).slice(0, maxItems);
+  });
 
   const handleShuffle = useCallback(() => {
     setDisplayed(shuffle(allSeries).slice(0, maxItems));
@@ -38,16 +40,16 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
   if (allSeries.length === 0) return null;
 
   return (
-    <section className="mb-24">
-      <div className="flex items-center justify-between mb-12">
+    <section id="featured-series" className="mb-24">
+      <div className="flex items-center justify-between mb-8">
         <h2 className="text-3xl font-serif font-bold text-heading">{t('curated_series')}</h2>
         <div className="flex items-center gap-4">
           {allSeries.length > maxItems && (
             <button
               onClick={handleShuffle}
               className="text-sm text-muted hover:text-accent transition-colors focus:outline-none"
-              aria-label="Shuffle series"
-              title="Show different series"
+              aria-label={t('shuffle_series')}
+              title={t('shuffle_series')}
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
@@ -70,10 +72,10 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
               className={`card-base group flex flex-col p-0 overflow-hidden snap-start ${
                 displayed.length > scrollThreshold
                   ? 'w-[85vw] md:w-[calc(50%-1rem)] flex-shrink-0'
-                  : 'flex-1'
+                  : 'flex-1 md:max-w-[calc(50%-1rem)]'
               }`}
             >
-              <Link href={series.url} className="relative h-56 w-full overflow-hidden bg-muted/10 block focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-inset">
+              <Link href={series.url} className="relative h-44 w-full overflow-hidden bg-muted/10 block focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-inset">
                 <CoverImage
                   src={series.coverImage}
                   title={series.title}
@@ -82,7 +84,7 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
                 />
                 <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500" />
               </Link>
-              <div className="p-8 flex flex-col flex-1 relative z-10">
+              <div className="p-6 flex flex-col flex-1 relative z-10">
                 <div className="mb-4">
                   <span className="badge-accent">
                     {series.postCount} {t('parts')}
@@ -101,7 +103,7 @@ export default function CuratedSeriesSection({ allSeries, maxItems, scrollThresh
                     {series.topPosts.map((p, idx) => (
                       <Link
                         key={p.slug}
-                        href={`/posts/${p.slug}`}
+                        href={getPostUrl({ slug: p.slug, series: series.name })}
                         className="flex items-center gap-3 group/link no-underline"
                       >
                         <span className="flex-shrink-0 w-6 h-6 rounded-full bg-muted/10 text-[10px] flex items-center justify-center font-mono text-muted group-hover/link:bg-accent/10 group-hover/link:text-accent transition-colors">

package/src/components/ExternalLinks.tsx

@@ -14,7 +14,7 @@ export default function ExternalLinks({ links }: ExternalLinksProps) {
   }
 
   return (
-    <div className="mt-12 pt-12 border-t border-muted/20">
+    <div className="mt-8">
       <h3 className="text-sm font-sans font-semibold uppercase tracking-widest text-muted mb-4">
         {t('discuss_post')}
       </h3>

package/src/components/FeaturedStoriesSection.tsx

@@ -1,52 +1,88 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import Link from 'next/link';
-import HorizontalScroll from './HorizontalScroll';
 import CoverImage from './CoverImage';
 import { useLanguage } from './LanguageProvider';
-import { shuffle } from '@/lib/shuffle';
+import { shuffle, shuffleSeeded } from '@/lib/shuffle';
+import { getPostUrl } from '@/lib/urls';
 
 export interface FeaturedPost {
   slug: string;
   title: string;
+  subtitle?: string;
   excerpt: string;
   date: string;
   category: string;
   readingTime: string;
   coverImage?: string;
+  series?: string;
+  pinned?: boolean;
 }
 
 interface FeaturedStoriesSectionProps {
   allFeatured: FeaturedPost[];
   maxItems: number;
-  scrollThreshold: number;
 }
 
-export default function FeaturedStoriesSection({ allFeatured, maxItems, scrollThreshold }: FeaturedStoriesSectionProps) {
+function buildDisplayed(allFeatured: FeaturedPost[], maxItems: number, shuffledNonPinned: FeaturedPost[]): FeaturedPost[] {
+  const pinned = allFeatured.filter(p => p.pinned);
+  const nonPinned = allFeatured.filter(p => !p.pinned);
+
+  const hero = pinned[0] ?? nonPinned[0];
+  if (!hero) return [];
+
+  const maxSecondaries = maxItems - 1;
+  const fixedSecondaries = pinned.slice(1, maxSecondaries + 1); // cap to available secondary slots
+  const shuffleSlots = Math.max(0, maxSecondaries - fixedSecondaries.length);
+
+  // Non-pinned pool excludes the hero if the hero is non-pinned
+  const heroIsNonPinned = !hero.pinned;
+  const shufflePool = heroIsNonPinned ? nonPinned.filter(p => p.slug !== hero.slug) : nonPinned;
+  const shuffledSlice = shuffledNonPinned.filter(p => shufflePool.some(q => q.slug === p.slug)).slice(0, shuffleSlots);
+
+  return [hero, ...fixedSecondaries, ...shuffledSlice];
+}
+
+export default function FeaturedStoriesSection({ allFeatured, maxItems }: FeaturedStoriesSectionProps) {
   const { t } = useLanguage();
-  const [displayed, setDisplayed] = useState(() => allFeatured.slice(0, maxItems));
 
-  useEffect(() => {
-    setDisplayed(shuffle(allFeatured).slice(0, maxItems));
-  }, [allFeatured, maxItems]);
+  const nonPinned = allFeatured.filter(p => !p.pinned);
+
+  // Use a daily seed so SSR and client hydration agree on the initial order,
+  // preventing a visible reshuffle flash on page load.
+  const [shuffledNonPinned, setShuffledNonPinned] = useState<FeaturedPost[]>(() => {
+    const dailySeed = Math.floor(Date.now() / 86400000);
+    return shuffleSeeded(nonPinned, dailySeed);
+  });
 
   const handleShuffle = useCallback(() => {
-    setDisplayed(shuffle(allFeatured).slice(0, maxItems));
-  }, [allFeatured, maxItems]);
+    setShuffledNonPinned(shuffle(nonPinned));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allFeatured]);
 
-  if (allFeatured.length === 0) return null;
+  const displayed = buildDisplayed(allFeatured, maxItems, shuffledNonPinned);
+
+  if (displayed.length === 0) return null;
+
+  // Show shuffle button only when there are more non-pinned posts than available shuffle slots
+  const pinned = allFeatured.filter(p => p.pinned);
+  const fixedCount = 1 + Math.min(pinned.slice(1).length, maxItems - 1);
+  const shuffleSlots = Math.max(0, maxItems - fixedCount);
+  const canShuffle = nonPinned.length > shuffleSlots + (pinned.length === 0 ? 1 : 0);
+
+  const [hero, ...secondary] = displayed;
 
   return (
-    <section className="mb-24">
-      <div className="flex items-center justify-between mb-12">
+    <section id="featured-posts" className="mb-24">
+      <div className="flex items-center justify-between mb-8">
         <h2 className="text-3xl font-serif font-bold text-heading">{t('featured_articles')}</h2>
-        {allFeatured.length > maxItems && (
+        {canShuffle && (
           <button
             onClick={handleShuffle}
             className="text-sm text-muted hover:text-accent transition-colors focus:outline-none"
-            aria-label="Shuffle featured stories"
-            title="Show different stories"
+            aria-label={t('shuffle_posts')}
+            title={t('shuffle_posts')}
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
@@ -54,53 +90,83 @@ export default function FeaturedStoriesSection({ allFeatured, maxItems, scrollTh
           </button>
         )}
       </div>
-      <HorizontalScroll
-        itemCount={displayed.length}
-        scrollThreshold={scrollThreshold}
-      >
-        <div className={`flex gap-8 ${displayed.length > scrollThreshold ? 'pb-4' : 'flex-col'}`}>
-          {displayed.map(post => (
-            <div
-              key={post.slug}
-              className={`group snap-start ${
-                displayed.length > scrollThreshold
-                  ? 'w-[90vw] md:w-[70vw] lg:w-[60vw] flex-shrink-0'
-                  : 'w-full'
-              }`}
-            >
-              <div className={`grid grid-cols-1 ${displayed.length > scrollThreshold ? 'md:grid-cols-1 lg:grid-cols-12' : 'md:grid-cols-12'} gap-8 items-center`}>
-                <Link href={`/posts/${post.slug}`} className={`${displayed.length > scrollThreshold ? 'lg:col-span-7' : 'md:col-span-7'} relative aspect-[16/9] overflow-hidden rounded-2xl bg-muted/10 block focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-2 focus:ring-offset-background`}>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
+        {/* Hero card — full image with obi (belly band) text overlay */}
+        <div className={secondary.length > 0 ? 'lg:col-span-7' : 'lg:col-span-12'}>
+          <Link href={getPostUrl(hero)} className={`group block no-underline${secondary.length > 0 ? ' h-full' : ''}`}>
+            <div className={`relative overflow-hidden rounded-2xl bg-muted/10 ${secondary.length > 0 ? 'aspect-[16/9] lg:aspect-auto lg:h-full' : 'aspect-[16/9]'}`}>
+              <CoverImage
+                src={hero.coverImage}
+                title={hero.title}
+                slug={hero.slug}
+                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
+              />
+              {/* Gradient overlay */}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/20 to-transparent" />
+              {/* Obi text band */}
+              <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8">
+                <div className="flex items-center gap-2 text-xs font-mono text-white/60 mb-3">
+                  <span className="text-accent uppercase tracking-wider">{hero.category}</span>
+                  <span>·</span>
+                  <span>{hero.readingTime}</span>
+                  <span>·</span>
+                  <span>{hero.date}</span>
+                </div>
+                <h3 className="text-2xl md:text-3xl font-serif font-bold text-white mb-3 leading-snug group-hover:text-accent/90 transition-colors line-clamp-2">
+                  {hero.title}
+                </h3>
+                {(hero.subtitle || hero.excerpt) && (
+                  <p className="text-white/65 text-sm leading-relaxed line-clamp-1">
+                    {hero.subtitle || hero.excerpt}
+                  </p>
+                )}
+              </div>
+            </div>
+          </Link>
+        </div>
+
+        {/* Secondary cards — box style with flush right image */}
+        {secondary.length > 0 && (
+          <div className="lg:col-span-5 flex flex-col gap-4">
+            {secondary.map(post => (
+              <Link
+                key={post.slug}
+                href={getPostUrl(post)}
+                className="group flex no-underline rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden hover:border-accent/30 hover:bg-muted/10 hover:shadow-lg hover:shadow-accent/5 transition-all duration-300 h-32"
+              >
+                {/* Text content */}
+                <div className="flex-1 p-4 flex flex-col min-w-0">
+                  <div className="flex items-center gap-2 text-xs font-mono text-muted mb-2">
+                    <span className="text-accent uppercase tracking-wider truncate max-w-[5rem]">{post.category}</span>
+                    <span className="shrink-0">·</span>
+                    <span className="shrink-0">{post.readingTime}</span>
+                    <span className="shrink-0">·</span>
+                    <span className="shrink-0">{post.date}</span>
+                  </div>
+                  <h4 className="font-serif font-bold text-heading group-hover:text-accent transition-colors line-clamp-2 text-base leading-snug">
+                    {post.title}
+                  </h4>
+                  {(post.subtitle || post.excerpt) && (
+                    <p className="text-xs text-muted leading-relaxed line-clamp-1 mt-1">
+                      {post.subtitle || post.excerpt}
+                    </p>
+                  )}
+                </div>
+                {/* Cover image — flush to right edge, full card height */}
+                <div className="relative w-32 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-700 group-hover:scale-105"
+                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                   />
-                  <div className="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500" />
-                </Link>
-                <div className={`${displayed.length > scrollThreshold ? 'lg:col-span-5' : 'md:col-span-5'} flex flex-col justify-center`}>
-                  <div className="flex items-center gap-3 text-xs font-mono text-muted mb-6">
-                    <span className="text-accent uppercase tracking-wider">{post.category}</span>
-                    <span>•</span>
-                    <span>{post.readingTime}</span>
-                  </div>
-                  <h3 className="text-2xl md:text-3xl font-serif font-bold text-heading mb-4 leading-snug group-hover:text-accent transition-colors line-clamp-2">
-                    <Link href={`/posts/${post.slug}`} className="no-underline focus:outline-none focus:text-accent">
-                      {post.title}
-                    </Link>
-                  </h3>
-                  <p className="text-muted text-base leading-relaxed mb-6 line-clamp-2">
-                    {post.excerpt}
-                  </p>
-                  <div className="flex items-center gap-4 text-xs font-mono text-muted/80">
-                    <span>{post.date}</span>
-                  </div>
                 </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </HorizontalScroll>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
     </section>
   );
 }