@hutusi/amytis 1.15.0 → 1.16.0

package/src/app/page.tsx

@@ -109,7 +109,7 @@ export default function Home() {
         excerpt: p.excerpt,
         date: p.date,
         category: p.category,
-        readingTime: p.readingTime,
+        readingMinutes: p.readingMinutes,
         coverImage: p.coverImage,
         series: p.series,
         pinned: p.pinned,

package/src/app/sitemap.ts

@@ -1,7 +1,7 @@
 import { MetadataRoute } from 'next';
 import { getAllPosts, getAllPages, getAllBooks, getAllFlows } from '@/lib/markdown';
 import { siteConfig } from '../../site.config';
-import { getPostUrl } from '@/lib/urls';
+import { getPostUrl, getBookUrl, getBookChapterUrl } from '@/lib/urls';
 
 export const dynamic = 'force-static';
 
@@ -29,13 +29,13 @@ export default function sitemap(): MetadataRoute.Sitemap {
 
   const bookUrls = books.flatMap((book) => [
     {
-      url: `${baseUrl}/books/${book.slug}`,
+      url: `${baseUrl}${getBookUrl(book.slug)}`,
       lastModified: book.date,
       changeFrequency: 'monthly' as const,
       priority: 0.8,
     },
     ...book.chapters.map((ch) => ({
-      url: `${baseUrl}/books/${book.slug}/${ch.id}`,
+      url: `${baseUrl}${getBookChapterUrl(book.slug, ch.id)}`,
       lastModified: book.date,
       changeFrequency: 'monthly' as const,
       priority: 0.7,

package/src/components/ArticleCopyCleaner.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useEffect, useRef, type ReactNode } from 'react';
+
+const KEEP_BG_SELECTOR = 'pre, code, blockquote, .admonition, [class*="admonition"]';
+const STRIP_BG_SELECTOR = 'p, h1, h2, h3, h4, h5, h6, ul, ol, li, div, span, td, th, tr, article, section';
+
+function isMeaningfulBg(value: string): boolean {
+  if (!value) return false;
+  const v = value.trim().toLowerCase();
+  if (v === 'transparent' || v === 'rgba(0, 0, 0, 0)' || v === 'rgb(0, 0, 0, 0)') return false;
+  return true;
+}
+
+export default function ArticleCopyCleaner({ children }: { children: ReactNode }) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+
+    const handleCopy = (event: ClipboardEvent) => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+
+      const range = selection.getRangeAt(0);
+      const anchor = range.commonAncestorContainer;
+      if (!(anchor instanceof Node) || !root.contains(anchor)) return;
+
+      const sandbox = document.createElement('div');
+      sandbox.setAttribute('aria-hidden', 'true');
+      sandbox.style.cssText = 'position:fixed;left:-99999px;top:0;visibility:hidden;pointer-events:none;';
+      sandbox.appendChild(range.cloneContents());
+      root.appendChild(sandbox);
+
+      try {
+        sandbox.querySelectorAll<HTMLElement>(KEEP_BG_SELECTOR).forEach((el) => {
+          const bg = getComputedStyle(el).backgroundColor;
+          if (isMeaningfulBg(bg)) el.style.backgroundColor = bg;
+        });
+
+        sandbox.querySelectorAll<HTMLElement>(STRIP_BG_SELECTOR).forEach((el) => {
+          if (el.matches(KEEP_BG_SELECTOR)) return;
+          el.style.removeProperty('background-color');
+          el.style.removeProperty('background');
+        });
+
+        const clipboard = event.clipboardData;
+        if (!clipboard) return;
+
+        clipboard.setData('text/html', sandbox.innerHTML);
+        clipboard.setData('text/plain', selection.toString());
+        event.preventDefault();
+      } finally {
+        sandbox.remove();
+      }
+    };
+
+    root.addEventListener('copy', handleCopy);
+    return () => root.removeEventListener('copy', handleCopy);
+  }, []);
+
+  return <div ref={rootRef}>{children}</div>;
+}

package/src/components/BookMobileNav.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { BookTocItem, BookChapterEntry } from '@/lib/markdown';
+import { BookTocItem, BookTocSection, BookChapterRef, BookChapterEntry } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
 import PrevNextNav from './PrevNextNav';
 import { getBookChapterUrl } from '@/lib/urls';
@@ -23,6 +23,42 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
   const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
   const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
 
+  const renderChapterRow = (ch: BookChapterRef, key: string) => {
+    const isCurrent = ch.id === currentChapter;
+    const chIdx = chapters.findIndex(c => c.id === ch.id);
+    const isPast = chIdx >= 0 && chIdx < currentIndex;
+    return isCurrent ? (
+      <div key={key} className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-accent/5">
+        <span className="text-sm font-semibold text-accent truncate">{ch.title}</span>
+      </div>
+    ) : (
+      <Link
+        key={key}
+        href={getBookChapterUrl(bookSlug, ch.id)}
+        className={`block py-1.5 px-2 rounded-lg text-sm no-underline hover:bg-muted/5 transition-colors ${
+          isPast ? 'text-foreground/70 hover:text-foreground' : 'text-muted hover:text-foreground'
+        }`}
+      >
+        {ch.title}
+      </Link>
+    );
+  };
+
+  const renderSection = (section: BookTocSection, key: string) => (
+    <div key={key}>
+      <div className="text-[10px] font-sans font-bold uppercase tracking-wider text-muted px-2 py-1.5">
+        {section.section}
+      </div>
+      <div className="space-y-1 pl-2">
+        {section.items.map((child, idx) =>
+          'section' in child
+            ? renderSection(child, `${key}-${idx}`)
+            : renderChapterRow(child, `${key}-${child.id}`)
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <div className="lg:hidden p-5 bg-muted/5 rounded-xl border border-muted/20">
       {/* Header */}
@@ -85,58 +121,16 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
                   <div className="text-[10px] font-sans font-bold uppercase tracking-wider text-muted px-2 py-1.5">
                     {item.part}
                   </div>
-                  <ol className="space-y-1">
-                    {item.chapters.map(ch => {
-                      const isCurrent = ch.id === currentChapter;
-                      const chIdx = chapters.findIndex(c => c.id === ch.id);
-                      const isPast = chIdx < currentIndex;
-
-                      return (
-                        <li key={ch.id}>
-                          {isCurrent ? (
-                            <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-accent/5">
-                              <span className="text-sm font-semibold text-accent truncate">{ch.title}</span>
-                            </div>
-                          ) : (
-                            <Link
-                              href={getBookChapterUrl(bookSlug, ch.id)}
-                              className={`block py-1.5 px-2 rounded-lg text-sm no-underline hover:bg-muted/5 transition-colors ${
-                                isPast ? 'text-foreground/70 hover:text-foreground' : 'text-muted hover:text-foreground'
-                              }`}
-                            >
-                              {ch.title}
-                            </Link>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ol>
-                </div>
-              );
-            } else {
-              const isCurrent = item.id === currentChapter;
-              const chIdx = chapters.findIndex(c => c.id === item.id);
-              const isPast = chIdx < currentIndex;
-
-              return (
-                <div key={item.id}>
-                  {isCurrent ? (
-                    <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-accent/5">
-                      <span className="text-sm font-semibold text-accent truncate">{item.title}</span>
-                    </div>
-                  ) : (
-                    <Link
-                      href={`/books/${bookSlug}/${item.id}`}
-                      className={`block py-1.5 px-2 rounded-lg text-sm no-underline hover:bg-muted/5 transition-colors ${
-                        isPast ? 'text-foreground/70 hover:text-foreground' : 'text-muted hover:text-foreground'
-                      }`}
-                    >
-                      {item.title}
-                    </Link>
-                  )}
+                  <div className="space-y-1">
+                    {item.chapters.map(ch => renderChapterRow(ch, `part-${tocIdx}-${ch.id}`))}
+                  </div>
                 </div>
               );
             }
+            if ('section' in item) {
+              return renderSection(item, `section-${tocIdx}`);
+            }
+            return renderChapterRow(item, `chapter-${item.id}`);
           })}
         </div>
       )}

package/src/components/CodeBlock.test.tsx

@@ -2,18 +2,103 @@ import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
 import CodeBlock from "./CodeBlock";
 
+async function renderCodeBlock(element: Awaited<ReturnType<typeof CodeBlock>>): Promise<string> {
+  return renderToStaticMarkup(element);
+}
+
 describe("CodeBlock", () => {
-  test("keeps code scrolling inside its own container", () => {
-    const html = renderToStaticMarkup(
-      <CodeBlock language="typescript">
-        {"const veryLongLine = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';"}
-      </CodeBlock>
-    );
+  test("keeps code scrolling inside its own container", async () => {
+    const element = await CodeBlock({
+      language: "typescript",
+      children: "const veryLongLine = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';",
+    });
+    const html = await renderCodeBlock(element);
 
     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");
+    expect(html).toContain("cb-root");
+    expect(html).toContain('class="shiki');
+  });
+
+  test("renders title bar when title prop is set", async () => {
+    const element = await CodeBlock({
+      language: "ts",
+      title: "src/app.ts",
+      children: "export const x = 1;",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).toContain("cb-title");
+    expect(html).toContain("src/app.ts");
+  });
+
+  test("flags <pre> with data-line-numbers when showLineNumbers is true", async () => {
+    const element = await CodeBlock({
+      language: "js",
+      showLineNumbers: true,
+      children: "const x = 1;\nconst y = 2;",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).toContain('data-line-numbers="true"');
+  });
+
+  test("marks highlighted lines from highlightLines prop", async () => {
+    const element = await CodeBlock({
+      language: "ts",
+      highlightLines: [2, 4],
+      children: "const a = 1;\nconst b = 2;\nconst c = 3;\nconst d = 4;",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).toContain('data-highlighted-line="2"');
+    expect(html).toContain('data-highlighted-line="4"');
+    expect(html).not.toContain('data-highlighted-line="1"');
+    expect(html).not.toContain('data-highlighted-line="3"');
+  });
+
+  test("applies diff add/remove classes for +/- lines in diff fences", async () => {
+    const element = await CodeBlock({
+      language: "diff",
+      children: "-removed\n+added\n unchanged",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).toContain("diff add");
+    expect(html).toContain("diff remove");
+  });
+
+  test("renders unknown languages as plaintext + emits a warn (warn-and-degrade)", async () => {
+    // Production deploys can't fail on a single unknown fence — render as
+    // plaintext and emit a build-time warn instead. CLAUDE.md's strict-build
+    // principle still applies for frontmatter/slugs/redirects, but not here.
+    const element = await CodeBlock({ language: "totally-made-up", children: "x" });
+    const html = await renderCodeBlock(element);
+    expect(html).toContain('class="shiki');
+    expect(html).toContain("totally-made-up");
+  });
+
+  test("renders plaintext when explicitly requested via `plaintext`/`text` alias", async () => {
+    const element = await CodeBlock({
+      language: "plaintext",
+      children: "no highlighting wanted here",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).toContain('class="shiki');
+    expect(html).toContain("no highlighting wanted here");
+  });
+
+  test("emits no client highlighter script tags", async () => {
+    const element = await CodeBlock({
+      language: "javascript",
+      children: "const x = 1;",
+    });
+    const html = await renderCodeBlock(element);
+
+    expect(html).not.toContain("<script");
+    expect(html).not.toContain("react-syntax-highlighter");
+    expect(html).not.toContain("token keyword");
   });
 });

package/src/components/CodeBlock.tsx

@@ -1,114 +1,52 @@
-"use client";
-
-import React, { useState } from 'react';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import rust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
-import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
-import c from 'react-syntax-highlighter/dist/esm/languages/prism/c';
-import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
-import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
-import ruby from 'react-syntax-highlighter/dist/esm/languages/prism/ruby';
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
-import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
-
-SyntaxHighlighter.registerLanguage('tsx', tsx);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('js', javascript);
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('sh', bash);
-SyntaxHighlighter.registerLanguage('shell', bash);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
-SyntaxHighlighter.registerLanguage('md', markdown);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('css', css);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('py', python);
-SyntaxHighlighter.registerLanguage('rust', rust);
-SyntaxHighlighter.registerLanguage('go', go);
-SyntaxHighlighter.registerLanguage('golang', go);
-SyntaxHighlighter.registerLanguage('c', c);
-SyntaxHighlighter.registerLanguage('cpp', cpp);
-SyntaxHighlighter.registerLanguage('c++', cpp);
-SyntaxHighlighter.registerLanguage('java', java);
-SyntaxHighlighter.registerLanguage('ruby', ruby);
-SyntaxHighlighter.registerLanguage('rb', ruby);
-SyntaxHighlighter.registerLanguage('sql', sql);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('yml', yaml);
-SyntaxHighlighter.registerLanguage('diff', diff);
-SyntaxHighlighter.registerLanguage('html', markup);
-SyntaxHighlighter.registerLanguage('xml', markup);
-SyntaxHighlighter.registerLanguage('svg', markup);
+import { toHtml } from 'hast-util-to-html';
+import CodeBlockToolbar from './CodeBlockToolbar';
+import { getLanguageDisplayName, highlightToHast } from '@/lib/shiki';
 
 interface CodeBlockProps {
   language: string;
   children: string;
-  [key: string]: unknown;
+  title?: string;
+  showLineNumbers?: boolean;
+  highlightLines?: number[];
 }
 
-export default function CodeBlock({ language, children, ...props }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(children);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
+export default async function CodeBlock({
+  language,
+  children,
+  title,
+  showLineNumbers,
+  highlightLines,
+}: CodeBlockProps) {
+  const hast = await highlightToHast(children, language, {
+    showLineNumbers,
+    highlightLines,
+    title,
+  });
+  const html = toHtml(hast);
+  const displayLang = getLanguageDisplayName(language || 'text');
 
   return (
-    <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'}
-        </span>
-        <button
-          onClick={handleCopy}
-          className="text-xs text-muted hover:text-accent transition-colors duration-200 flex items-center gap-1"
-          aria-label="Copy code"
-        >
-          {copied ? (
-            <>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
-              <span>Copied</span>
-            </>
-          ) : (
-            <>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-              <span>Copy</span>
-            </>
+    <div
+      data-cb-root=""
+      className="cb-root 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="cb-header flex items-center justify-between px-4 py-2 border-b border-muted/10 bg-muted/5 gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <span className="cb-lang text-xs font-mono text-muted tracking-wider">
+            {displayLang}
+          </span>
+          {title && (
+            <span className="cb-title truncate text-xs text-foreground/80" title={title}>
+              {title}
+            </span>
           )}
-        </button>
-      </div>
-      <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>
+        <CodeBlockToolbar code={children} />
       </div>
+      <div
+        className="cb-scroll w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
     </div>
   );
 }

package/src/components/CodeBlockToolbar.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useRef, useState } from 'react';
+
+interface CodeBlockToolbarProps {
+  code: string;
+}
+
+export default function CodeBlockToolbar({ code }: CodeBlockToolbarProps) {
+  const [copied, setCopied] = useState(false);
+  const [wrapped, setWrapped] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard may be unavailable (e.g. insecure context); fail silently.
+    }
+  };
+
+  const handleToggleWrap = () => {
+    const next = !wrapped;
+    setWrapped(next);
+    const root = buttonRef.current?.closest('[data-cb-root]') as HTMLElement | null;
+    if (root) {
+      if (next) {
+        root.setAttribute('data-wrap', 'true');
+      } else {
+        root.removeAttribute('data-wrap');
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        ref={buttonRef}
+        onClick={handleToggleWrap}
+        className="text-xs text-muted hover:text-accent transition-colors duration-200 flex items-center gap-1"
+        aria-label={wrapped ? 'Disable word wrap' : 'Enable word wrap'}
+        aria-pressed={wrapped}
+        type="button"
+      >
+        {wrapped ? (
+          <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M3 6h18" />
+              <path d="M3 12h15a3 3 0 0 1 0 6h-4" />
+              <path d="m16 16-2 2 2 2" />
+              <path d="M3 18h7" />
+            </svg>
+            <span>Wrap</span>
+          </>
+        ) : (
+          <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M3 6h18" />
+              <path d="M3 12h18" />
+              <path d="M3 18h18" />
+            </svg>
+            <span>No wrap</span>
+          </>
+        )}
+      </button>
+      <button
+        onClick={handleCopy}
+        className="text-xs text-muted hover:text-accent transition-colors duration-200 flex items-center gap-1"
+        aria-label="Copy code"
+        type="button"
+      >
+        {copied ? (
+          <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
+            <span>Copied</span>
+          </>
+        ) : (
+          <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+            <span>Copy</span>
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

package/src/components/CodeGroup.tsx

@@ -0,0 +1,81 @@
+import { Children, type ReactNode } from 'react';
+import { resolveCodeGroupIcon } from '@/lib/code-group-icons';
+
+interface CodeGroupProps {
+  'data-labels'?: string;
+  'data-group-id'?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Tabbed code group widget. CSS-only — the radio + label sibling trick handles
+ * tab switching with zero JavaScript. The matching CSS in globals.css picks the
+ * checked input's matching panel via attribute selectors (input[data-idx=N] →
+ * .cg-panel[data-panel=N]).
+ *
+ * Children are already-highlighted CodeBlock server components from the
+ * outer MarkdownRenderer pipeline; this component just composes the tab UI
+ * around them.
+ */
+export default function CodeGroup(props: CodeGroupProps) {
+  const labelsRaw = props['data-labels'] ?? '[]';
+  const groupId = props['data-group-id'] ?? 'cg-default';
+  let labels: string[];
+  try {
+    const parsed = JSON.parse(labelsRaw);
+    labels = Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    labels = [];
+  }
+
+  // Drop whitespace text nodes that remark-rehype leaves between code children.
+  const panels = Children.toArray(props.children).filter((child) => {
+    if (typeof child === 'string') return child.trim().length > 0;
+    return true;
+  });
+  const tabs = labels.length > 0 ? labels : panels.map((_, i) => `Tab ${i + 1}`);
+
+  return (
+    <div className="code-group my-6" data-group-id={groupId}>
+      {tabs.map((_, i) => (
+        <input
+          key={`r-${i}`}
+          type="radio"
+          name={`cg-${groupId}`}
+          id={`cg-${groupId}-${i}`}
+          data-idx={String(i)}
+          defaultChecked={i === 0}
+          aria-controls={`cg-${groupId}-panel-${i}`}
+          tabIndex={i === 0 ? 0 : -1}
+        />
+      ))}
+      <div className="cg-tablist" role="tablist">
+        {tabs.map((label, i) => {
+          const icon = resolveCodeGroupIcon(label);
+          return (
+            <label
+              key={`l-${i}`}
+              htmlFor={`cg-${groupId}-${i}`}
+              className="cg-tab"
+              role="tab"
+              {...(icon ? { 'data-cg-icon': icon } : {})}
+            >
+              {label}
+            </label>
+          );
+        })}
+      </div>
+      {panels.map((child, i) => (
+        <div
+          key={`p-${i}`}
+          className="cg-panel"
+          data-panel={String(i)}
+          role="tabpanel"
+          id={`cg-${groupId}-panel-${i}`}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/CoverImage.tsx

@@ -101,6 +101,7 @@ export default function CoverImage({ title, slug, src, className = "h-full w-ful
       unoptimized={!useBlurPlaceholder}
       placeholder={useBlurPlaceholder ? 'blur' : 'empty'}
       loading={loading}
+      fetchPriority={loading === 'eager' ? 'high' : 'low'}
     />
   );
 }