@hutusi/amytis 1.15.0 → 1.17.0

package/src/layouts/BookLayout.tsx

@@ -1,11 +1,7 @@
-import { BookData, BookChapterData } from '@/lib/markdown';
+import path from 'path';
+import { BookData, BookChapterData, getBookDirPath } from '@/lib/markdown';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
-import BookSidebar from '@/components/BookSidebar';
-import BookMobileNav from '@/components/BookMobileNav';
-import PrevNextNav from '@/components/PrevNextNav';
-import ReadingProgressBar from '@/components/ReadingProgressBar';
-import Comments from '@/components/Comments';
-import { t } from '@/lib/i18n';
+import BookReadingShell from '@/components/BookReadingShell';
 import { getBookChapterUrl } from '@/lib/urls';
 import { siteConfig } from '../../site.config';
 import { resolveCommentable } from '@/lib/comments';
@@ -16,75 +12,67 @@ interface BookLayoutProps {
 }
 
 export default function BookLayout({ book, chapter }: BookLayoutProps) {
-  return (
-    <div className="layout-container lg:max-w-7xl">
-      <ReadingProgressBar />
-      <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start">
-        {/* Left: Sidebar */}
-        <BookSidebar
-          bookSlug={book.slug}
-          bookTitle={book.title}
-          toc={book.toc}
-          chapters={book.chapters}
-          currentChapter={chapter.slug}
-          headings={chapter.headings}
-        />
-
-        {/* Main content */}
-        <article className="min-w-0 w-full max-w-3xl overflow-x-hidden">
-          {/* Mobile nav */}
-          <div className="lg:hidden mb-8">
-            <BookMobileNav
-              bookSlug={book.slug}
-              bookTitle={book.title}
-              toc={book.toc}
-              chapters={book.chapters}
-              currentChapter={chapter.slug}
-            />
-          </div>
-
-          {/* Chapter header */}
-          <header className="mb-12 pb-8 border-b border-muted/10">
-            <div className="flex items-center gap-3 text-xs font-sans text-muted mb-4">
-              <span className="uppercase tracking-widest font-semibold text-accent">
-                {t('chapter')}
-              </span>
-              <span className="w-1 h-1 rounded-full bg-muted/30" />
-              <span className="font-mono">{chapter.readingTime}</span>
-            </div>
+  const bookDir = getBookDirPath(book.slug);
+  const validChapterIds = new Set(book.chapters.map(c => c.id));
 
-            <h1 className="text-3xl md:text-4xl font-serif font-bold text-heading leading-tight mb-4">
-              {chapter.title}
-            </h1>
+  // `slug` is the public-relative directory used by rehype-image-metadata to
+  // resolve `![](./assets/...)`-style refs. For nested flat chapters
+  // (e.g. id `maths/linear/vectors`) the image's parent dir is the chapter's
+  // parent dir, not the book root — without this, all chapter images point
+  // at `/books/<slug>/assets/...` instead of `/books/<slug>/<dir>/assets/...`.
+  let imageSlug: string;
+  if (chapter.isFolder) {
+    imageSlug = `books/${book.slug}/${chapter.slug}`;
+  } else {
+    const parentDir = path.posix.dirname(chapter.slug);
+    imageSlug = parentDir === '.' ? `books/${book.slug}` : `books/${book.slug}/${parentDir}`;
+  }
 
-            {chapter.excerpt && (
-              <p className="text-lg text-muted font-serif italic leading-relaxed">
-                {chapter.excerpt}
-              </p>
-            )}
-          </header>
+  const prev = chapter.prevChapter
+    ? { href: getBookChapterUrl(book.slug, chapter.prevChapter.id), title: chapter.prevChapter.title }
+    : null;
+  const next = chapter.nextChapter
+    ? { href: getBookChapterUrl(book.slug, chapter.nextChapter.id), title: chapter.nextChapter.title }
+    : null;
+  const comments = resolveCommentable(chapter.commentable, 'bookChapters')
+    ? {
+        slug: `books/${book.slug}/${chapter.slug}`,
+        postUrl: `${siteConfig.baseUrl.replace(/\/+$/, '')}${getBookChapterUrl(book.slug, chapter.slug)}`,
+      }
+    : null;
 
-          {/* Content */}
-          <MarkdownRenderer content={chapter.content} latex={chapter.latex} slug={chapter.isFolder ? `books/${book.slug}/${chapter.slug}` : `books/${book.slug}`} />
-
-          {/* Comments */}
-          {resolveCommentable(chapter.commentable, 'bookChapters') && (
-            <Comments
-              slug={`books/${book.slug}/${chapter.slug}`}
-              postUrl={`${siteConfig.baseUrl.replace(/\/+$/, '')}${getBookChapterUrl(book.slug, chapter.slug)}`}
-            />
-          )}
-
-          {/* Prev/Next navigation */}
-          <div className="mt-16 pt-8 border-t border-muted/10">
-            <PrevNextNav
-              prev={chapter.prevChapter ? { href: getBookChapterUrl(book.slug, chapter.prevChapter.id), title: chapter.prevChapter.title } : null}
-              next={chapter.nextChapter ? { href: getBookChapterUrl(book.slug, chapter.nextChapter.id), title: chapter.nextChapter.title } : null}
-              size="lg"
-            />
-          </div>
-        </article>
-      </div>
-    </div>
+  return (
+    <BookReadingShell
+      book={{
+        slug: book.slug,
+        title: book.title,
+        toc: book.toc,
+        chapters: book.chapters,
+        showChapterExcerpt: book.showChapterExcerpt,
+      }}
+      chapter={{
+        slug: chapter.slug,
+        title: chapter.title,
+        wordCount: chapter.wordCount,
+        readingMinutes: chapter.readingMinutes,
+        excerpt: chapter.excerpt,
+        headings: chapter.headings,
+      }}
+      prev={prev}
+      next={next}
+      comments={comments}
+    >
+      <MarkdownRenderer
+        content={chapter.content}
+        latex={chapter.latex}
+        slug={imageSlug}
+        bookContext={{
+          bookSlug: book.slug,
+          bookDir,
+          chapterSourcePath: chapter.sourcePath,
+          validChapterIds,
+        }}
+      />
+    </BookReadingShell>
   );
 }

package/src/layouts/PostLayout.tsx

@@ -15,6 +15,8 @@ import ReadingProgressBar from '@/components/ReadingProgressBar';
 import PostNavigation from '@/components/PostNavigation';
 import AuthorCard from '@/components/AuthorCard';
 import ShareBar from '@/components/ShareBar';
+import ImmersiveToggleButton from '@/components/ImmersiveToggleButton';
+import PostReadingShell from '@/components/PostReadingShell';
 import { siteConfig } from '../../site.config';
 import { t } from '@/lib/i18n';
 import { getPostUrl, getStaticPageUrl } from '@/lib/urls';
@@ -46,138 +48,179 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
     ? <RstRenderer content={post.content} html={post.renderedHtml} latex={post.latex} slug={post.imageBaseSlug} slugRegistry={slugRegistry} />
     : <MarkdownRenderer content={post.content} latex={post.latex} slug={post.imageBaseSlug} slugRegistry={slugRegistry} />;
 
-  return (
-    <div className="layout-container">
-      <ReadingProgressBar />
-      <div className={showSidebar
-        ? 'grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start'
-        : 'max-w-6xl mx-auto'
-      }>
-        {/* Left sidebar: series nav + page TOC */}
-        {showSidebar && (
-          <Suspense fallback={null}>
-            <PostSidebar
-              seriesSlug={hasSeries ? post.series : undefined}
-              seriesTitle={hasSeries ? (seriesTitle || post.series) : undefined}
-              posts={hasSeries ? seriesPosts : undefined}
-              collectionContexts={collectionContexts}
-              currentSlug={post.slug}
-              headings={showToc ? post.headings : []}
-              shareUrl={postUrl}
-              shareTitle={post.title}
-            />
-          </Suspense>
+  // The article <header> is identical in both the normal and the immersive
+  // article subtrees — extracting it as a variable lets us reference it in
+  // both places (only one of the two trees ever mounts, so it renders once).
+  // Includes the immersive toggle when the post is in a series.
+  const articleHeader = (
+    <header className="mb-16 border-b border-muted/10 pb-8">
+      {post.draft && (
+        <div className="mb-4">
+          <span className="text-xs font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded tracking-widest inline-block">
+            DRAFT
+          </span>
+        </div>
+      )}
+      <div className="flex items-center gap-3 text-xs font-sans text-muted mb-6">
+        <span className="uppercase tracking-widest font-semibold text-accent">
+          {post.category}
+        </span>
+        <span className="w-1 h-1 rounded-full bg-muted/30" />
+        <time className="font-mono" data-pagefind-meta="date[content]">{post.date}</time>
+        <span className="w-1 h-1 rounded-full bg-muted/30" />
+        <span className="font-mono">
+          {post.wordCount.toLocaleString()} {t('words')}
+        </span>
+        <span className="w-1 h-1 rounded-full bg-muted/30" />
+        <span className="font-mono text-muted/70">{post.readingMinutes} {t('reading_time')}</span>
+        {hasSeries && (
+          <span className="ml-auto">
+            <ImmersiveToggleButton />
+          </span>
         )}
+      </div>
 
-        <article className="min-w-0 w-full max-w-3xl mx-auto overflow-x-hidden">
-          <header className="mb-16 border-b border-muted/10 pb-8">
-            {post.draft && (
-              <div className="mb-4">
-                <span className="text-xs font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded tracking-widest inline-block">
-                  DRAFT
-                </span>
-              </div>
-            )}
-            <div className="flex items-center gap-3 text-xs font-sans text-muted mb-6">
-              <span className="uppercase tracking-widest font-semibold text-accent">
-                {post.category}
+      <h1 className="text-4xl md:text-5xl font-serif font-bold text-heading leading-tight mb-4">
+        {post.title}
+      </h1>
+
+      {post.subtitle && (
+        <p className="text-xl md:text-2xl font-serif italic text-muted leading-snug mb-6">
+          {post.subtitle}
+        </p>
+      )}
+
+      {siteConfig.posts?.authors?.showInHeader !== false && post.authors.length > 0 && (
+        <div className="flex items-center gap-2 mb-8 text-sm font-serif italic text-muted">
+          <span>{t('written_by')}</span>
+          <div className="flex items-center gap-1">
+            {post.authors.map((author, index) => (
+              <span key={author} className="flex items-center">
+                <Link
+                  href={`/authors/${getAuthorSlug(author)}`}
+                  className="text-foreground hover:text-accent no-underline transition-colors duration-200"
+                >
+                  {author}
+                </Link>
+                {index < post.authors.length - 1 && <span className="mr-1">,</span>}
               </span>
-              <span className="w-1 h-1 rounded-full bg-muted/30" />
-              <time className="font-mono" data-pagefind-meta="date[content]">{post.date}</time>
-              <span className="w-1 h-1 rounded-full bg-muted/30" />
-              <span className="font-mono">{post.readingTime}</span>
-            </div>
-
-            <h1 className="text-4xl md:text-5xl font-serif font-bold text-heading leading-tight mb-4">
-              {post.title}
-            </h1>
-
-            {post.subtitle && (
-              <p className="text-xl md:text-2xl font-serif italic text-muted leading-snug mb-6">
-                {post.subtitle}
-              </p>
-            )}
+            ))}
+          </div>
+        </div>
+      )}
+
+      {post.excerpt && (
+        <p className="text-xl text-foreground font-serif italic leading-relaxed mb-8">
+          {post.excerpt}
+        </p>
+      )}
+
+      {post.tags && post.tags.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {post.tags.map((tag) => (
+            <Tag key={tag} tag={tag} variant="default" />
+          ))}
+        </div>
+      )}
+    </header>
+  );
+
+  // Slim subtree for the immersive overlay: header + body + prev/next nav. We
+  // deliberately skip AuthorCard / ShareBar / Comments / RelatedPosts here —
+  // the reader is focused on long-form reading; chrome lives in normal mode.
+  const overlayArticle = (
+    <>
+      {articleHeader}
+      {bodyRenderer}
+      <div className="mt-16 pt-8 border-t border-muted/10">
+        <Suspense fallback={null}>
+          <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} currentSlug={post.slug} collectionContexts={collectionContexts} />
+        </Suspense>
+      </div>
+    </>
+  );
+
+  return (
+    <PostReadingShell
+      post={post}
+      seriesSlug={hasSeries ? post.series : undefined}
+      seriesTitle={hasSeries ? (seriesTitle || post.series) : undefined}
+      seriesPosts={hasSeries ? seriesPosts : undefined}
+      collectionContexts={collectionContexts}
+      overlayArticle={overlayArticle}
+    >
+      <div className="layout-container">
+        <ReadingProgressBar />
+        <div className={showSidebar
+          ? 'grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start'
+          : 'max-w-6xl mx-auto'
+        }>
+          {/* Left sidebar: series nav + page TOC */}
+          {showSidebar && (
+            <Suspense fallback={null}>
+              <PostSidebar
+                seriesSlug={hasSeries ? post.series : undefined}
+                seriesTitle={hasSeries ? (seriesTitle || post.series) : undefined}
+                posts={hasSeries ? seriesPosts : undefined}
+                collectionContexts={collectionContexts}
+                currentSlug={post.slug}
+                headings={showToc ? post.headings : []}
+                shareUrl={postUrl}
+                shareTitle={post.title}
+              />
+            </Suspense>
+          )}
 
-            {siteConfig.posts?.authors?.showInHeader !== false && post.authors.length > 0 && (
-              <div className="flex items-center gap-2 mb-8 text-sm font-serif italic text-muted">
-                <span>{t('written_by')}</span>
-                <div className="flex items-center gap-1">
-                  {post.authors.map((author, index) => (
-                    <span key={author} className="flex items-center">
-                      <Link
-                        href={`/authors/${getAuthorSlug(author)}`}
-                        className="text-foreground hover:text-accent no-underline transition-colors duration-200"
-                      >
-                        {author}
-                      </Link>
-                      {index < post.authors.length - 1 && <span className="mr-1">,</span>}
-                    </span>
-                  ))}
-                </div>
+          <article className="min-w-0 w-full max-w-3xl mx-auto overflow-x-hidden">
+            {articleHeader}
+
+            {(hasSeries || (collectionContexts && collectionContexts.length > 0)) && (
+              <div className="lg:hidden mb-12">
+                <Suspense fallback={null}>
+                  <SeriesList seriesSlug={hasSeries ? post.series! : undefined} seriesTitle={hasSeries ? (seriesTitle || post.series!) : undefined} posts={hasSeries ? seriesPosts! : undefined} collectionContexts={collectionContexts} currentSlug={post.slug} />
+                </Suspense>
               </div>
             )}
 
-            {post.excerpt && (
-              <p className="text-xl text-foreground font-serif italic leading-relaxed mb-8">
-                {post.excerpt}
-              </p>
+            {bodyRenderer}
+
+            {siteConfig.posts?.authors?.showAuthorCard !== false && (
+              <AuthorCard authors={post.authors} />
             )}
 
             {post.tags && post.tags.length > 0 && (
-              <div className="flex flex-wrap gap-2">
+              <div className="mt-12 pt-12 border-t border-muted/20 flex flex-wrap items-center gap-2">
+                <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mr-1">{t('tags')}</span>
                 {post.tags.map((tag) => (
                   <Tag key={tag} tag={tag} variant="default" />
                 ))}
               </div>
             )}
-          </header>
-
-          {(hasSeries || (collectionContexts && collectionContexts.length > 0)) && (
-            <div className="lg:hidden mb-12">
-              <Suspense fallback={null}>
-                <SeriesList seriesSlug={hasSeries ? post.series! : undefined} seriesTitle={hasSeries ? (seriesTitle || post.series!) : undefined} posts={hasSeries ? seriesPosts! : undefined} collectionContexts={collectionContexts} currentSlug={post.slug} />
-              </Suspense>
-            </div>
-          )}
-
-          {bodyRenderer}
 
-          {siteConfig.posts?.authors?.showAuthorCard !== false && (
-            <AuthorCard authors={post.authors} />
-          )}
-
-          {post.tags && post.tags.length > 0 && (
-            <div className="mt-12 pt-12 border-t border-muted/20 flex flex-wrap items-center gap-2">
-              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mr-1">{t('tags')}</span>
-              {post.tags.map((tag) => (
-                <Tag key={tag} tag={tag} variant="default" />
-              ))}
-            </div>
-          )}
+            <Backlinks backlinks={backlinks ?? []} />
 
-          <Backlinks backlinks={backlinks ?? []} />
-
-          <ShareBar
-            url={postUrl}
-            title={post.title}
-            className={showSidebar ? 'mt-8 lg:hidden' : 'mt-8'}
-          />
+            <ShareBar
+              url={postUrl}
+              title={post.title}
+              className={showSidebar ? 'mt-8 lg:hidden' : 'mt-8'}
+            />
 
-          {resolveCommentable(post.commentable, commentCategory) && (
-            <Comments slug={commentSlug} postUrl={postUrl} />
-          )}
+            {resolveCommentable(post.commentable, commentCategory) && (
+              <Comments slug={commentSlug} postUrl={postUrl} />
+            )}
 
-          {post.externalLinks && post.externalLinks.length > 0 && (
-            <ExternalLinks links={post.externalLinks} />
-          )}
+            {post.externalLinks && post.externalLinks.length > 0 && (
+              <ExternalLinks links={post.externalLinks} />
+            )}
 
-          <Suspense fallback={null}>
-            <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} currentSlug={post.slug} collectionContexts={collectionContexts} />
-          </Suspense>
+            <Suspense fallback={null}>
+              <PostNavigation prev={prevPost ?? null} next={nextPost ?? null} currentSlug={post.slug} collectionContexts={collectionContexts} />
+            </Suspense>
 
-          <RelatedPosts posts={relatedPosts || []} />
-        </article>
+            <RelatedPosts posts={relatedPosts || []} />
+          </article>
+        </div>
       </div>
-    </div>
+    </PostReadingShell>
   );
 }

package/src/lib/code-group-icons.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, test } from 'bun:test';
+import { resolveCodeGroupIcon } from './code-group-icons';
+
+describe('resolveCodeGroupIcon', () => {
+  test('exact-label matches for package managers', () => {
+    expect(resolveCodeGroupIcon('npm')).toBe('npm');
+    expect(resolveCodeGroupIcon('yarn')).toBe('yarn');
+    expect(resolveCodeGroupIcon('pnpm')).toBe('pnpm');
+    expect(resolveCodeGroupIcon('bun')).toBe('bun');
+    expect(resolveCodeGroupIcon('deno')).toBe('deno');
+  });
+
+  test('exact-label matches are case-insensitive and trim whitespace', () => {
+    expect(resolveCodeGroupIcon('NPM')).toBe('npm');
+    expect(resolveCodeGroupIcon('  Yarn  ')).toBe('yarn');
+  });
+
+  test('exact-label matches for tools', () => {
+    expect(resolveCodeGroupIcon('docker')).toBe('docker');
+    expect(resolveCodeGroupIcon('vite')).toBe('vite');
+    expect(resolveCodeGroupIcon('next.js')).toBe('nextjs');
+    expect(resolveCodeGroupIcon('nodejs')).toBe('node');
+    expect(resolveCodeGroupIcon('tailwindcss')).toBe('tailwind');
+  });
+
+  test('filename matches win over extension matches', () => {
+    // tsconfig.json maps to typescript via the filename table; otherwise
+    // its `.json` extension would route it to the json icon.
+    expect(resolveCodeGroupIcon('tsconfig.json')).toBe('typescript');
+    expect(resolveCodeGroupIcon('package.json')).toBe('node');
+    expect(resolveCodeGroupIcon('Dockerfile')).toBe('docker');
+    expect(resolveCodeGroupIcon('vite.config.ts')).toBe('vite');
+    expect(resolveCodeGroupIcon('next.config.mjs')).toBe('nextjs');
+    expect(resolveCodeGroupIcon('tailwind.config.js')).toBe('tailwind');
+  });
+
+  test('filename match strips directory paths', () => {
+    expect(resolveCodeGroupIcon('src/app/Dockerfile')).toBe('docker');
+    expect(resolveCodeGroupIcon('apps/web/package.json')).toBe('node');
+  });
+
+  test('extension match for arbitrary file paths', () => {
+    expect(resolveCodeGroupIcon('foo.ts')).toBe('typescript');
+    expect(resolveCodeGroupIcon('src/index.tsx')).toBe('typescript');
+    expect(resolveCodeGroupIcon('hello.py')).toBe('python');
+    expect(resolveCodeGroupIcon('main.rs')).toBe('rust');
+    expect(resolveCodeGroupIcon('config.yml')).toBe('yaml');
+    expect(resolveCodeGroupIcon('README.md')).toBe('markdown');
+    expect(resolveCodeGroupIcon('install.sh')).toBe('bash');
+  });
+
+  test('language-name aliases resolve to a canonical icon key', () => {
+    expect(resolveCodeGroupIcon('TypeScript')).toBe('typescript');
+    expect(resolveCodeGroupIcon('ts')).toBe('typescript');
+    expect(resolveCodeGroupIcon('Python')).toBe('python');
+    expect(resolveCodeGroupIcon('Go')).toBe('go');
+    expect(resolveCodeGroupIcon('golang')).toBe('go');
+    expect(resolveCodeGroupIcon('c++')).toBe('cpp');
+  });
+
+  test('returns null for labels that do not match any rule', () => {
+    expect(resolveCodeGroupIcon('mystery')).toBeNull();
+    expect(resolveCodeGroupIcon('totally-fake-name')).toBeNull();
+    expect(resolveCodeGroupIcon('')).toBeNull();
+    expect(resolveCodeGroupIcon('   ')).toBeNull();
+  });
+
+  test('does not match Object.prototype keys via the `in` operator', () => {
+    // `'constructor' in {}` is true because of the prototype chain; using
+    // Object.hasOwn (instead of `in`) prevents the resolver from returning
+    // prototype values for crafted labels.
+    expect(resolveCodeGroupIcon('constructor')).toBeNull();
+    expect(resolveCodeGroupIcon('toString')).toBeNull();
+    expect(resolveCodeGroupIcon('hasOwnProperty')).toBeNull();
+    expect(resolveCodeGroupIcon('valueOf')).toBeNull();
+    expect(resolveCodeGroupIcon('__proto__')).toBeNull();
+  });
+});