@hutusi/amytis 1.14.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/series/[slug]/page/[page]/page.tsx

@@ -7,22 +7,74 @@ import { siteConfig } from '../../../../../../site.config';
 import CoverImage from '@/components/CoverImage';
 import Link from 'next/link';
 import { t, resolveLocale, tWith } from '@/lib/i18n';
+import { getSeriesListUrl } from '@/lib/urls';
+import RedirectPage from '@/components/RedirectPage';
+import { findSeriesByRedirectFrom, safeDecodeParam } from '@/lib/series-redirects';
 
 const PAGE_SIZE = siteConfig.pagination.series;
 
 export async function generateStaticParams() {
   const allSeries = getAllSeries();
+  const seriesBasePath = getSeriesListUrl();
+  const seen = new Set<string>();
+  const reservedSlugs = new Set(Object.keys(allSeries));
+  const claimedAliases = new Map<string, string>();
   const params: { slug: string; page: string }[] = [];
-  
+  const pushParam = (slug: string, page: string) => {
+    const key = `${slug}:${page}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    params.push({ slug, page });
+  };
+
   Object.keys(allSeries).forEach(slug => {
     const posts = allSeries[slug];
     const totalPages = Math.ceil(posts.length / PAGE_SIZE);
     if (totalPages > 1) {
-        for (let i = 2; i <= totalPages; i++) {
-            params.push({ slug, page: i.toString() });
-        }
+      for (let i = 2; i <= totalPages; i++) {
+        pushParam(slug, i.toString());
+      }
+    }
+
+    const data = getSeriesData(slug);
+    for (const from of data?.redirectFrom ?? []) {
+      const segments = from.split('/').filter(Boolean);
+      const expectedBase = seriesBasePath.replace(/^\/+|\/+$/g, '');
+      if (segments.length !== 2 || segments[0] !== expectedBase) continue;
+      const aliasSlug = segments[1];
+      if (aliasSlug === slug || totalPages <= 1) continue;
+      const claimedBy = claimedAliases.get(aliasSlug);
+      if (claimedBy && claimedBy !== slug) {
+        throw new Error(
+          `[amytis] series redirectFrom alias "${from}" is claimed by both "${claimedBy}" and "${slug}".`
+        );
+      }
+      if (!claimedBy && reservedSlugs.has(aliasSlug)) {
+        throw new Error(
+          `[amytis] series redirectFrom alias "${from}" for "${slug}" conflicts with an existing series slug.`
+        );
+      }
+      claimedAliases.set(aliasSlug, slug);
+      reservedSlugs.add(aliasSlug);
+      for (let i = 2; i <= totalPages; i++) {
+        pushParam(aliasSlug, i.toString());
+      }
     }
   });
+
+  if (process.env.NODE_ENV !== 'production') {
+    const encodedParams = params
+      .filter(param => encodeURIComponent(param.slug) !== param.slug)
+      .map(param => ({ ...param, slug: encodeURIComponent(param.slug) }))
+      .filter(param => {
+        const key = `${param.slug}:${param.page}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+    params.push(...encodedParams);
+  }
+
   if (params.length === 0) return [{ slug: '_', page: '2' }];
   return params;
 }
@@ -31,7 +83,17 @@ export const dynamicParams = false;
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string; page: string }> }): Promise<Metadata> {
   const { slug: rawSlug, page } = await params;
-  const slug = decodeURIComponent(rawSlug);
+  const slug = safeDecodeParam(rawSlug);
+  const currentPath = `${getSeriesListUrl()}/${slug}`;
+  const redirect = findSeriesByRedirectFrom(currentPath);
+  if (redirect) {
+    const siteUrl = siteConfig.baseUrl.replace(/\/+$/, '');
+    return {
+      title: redirect.data.title,
+      alternates: { canonical: `${siteUrl}${getSeriesListUrl()}/${redirect.slug}/page/${page}` },
+    };
+  }
+
   const seriesData = getSeriesData(slug);
   const title = seriesData?.title || slug;
   const allPosts = seriesData?.type === 'collection' ? getCollectionPosts(slug) : getSeriesPosts(slug);
@@ -43,8 +105,14 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function SeriesPage({ params }: { params: Promise<{ slug: string; page: string }> }) {
   const { slug: rawSlug, page: pageStr } = await params;
-  const slug = decodeURIComponent(rawSlug);
+  const slug = safeDecodeParam(rawSlug);
   const page = parseInt(pageStr);
+  const currentPath = `${getSeriesListUrl()}/${slug}`;
+  const redirect = findSeriesByRedirectFrom(currentPath);
+  if (redirect) {
+    return <RedirectPage to={`${getSeriesListUrl()}/${redirect.slug}/page/${page}`} />;
+  }
+
   const seriesData = getSeriesData(slug);
   const isCollection = seriesData?.type === 'collection';
   const allPosts = isCollection ? getCollectionPosts(slug) : getSeriesPosts(slug);

package/src/app/series/[slug]/page.tsx

@@ -9,20 +9,10 @@ import Link from 'next/link';
 import { t, resolveLocale } from '@/lib/i18n';
 import { getPostUrl, getPostUrlInCollection } from '@/lib/urls';
 import RedirectPage from '@/components/RedirectPage';
+import { findSeriesByRedirectFrom, safeDecodeParam } from '@/lib/series-redirects';
 
 const PAGE_SIZE = siteConfig.pagination.series;
 
-/** Returns the series whose index.mdx lists `path` in its redirectFrom array, or null. */
-function findSeriesByRedirectFrom(path: string) {
-  for (const seriesSlug of Object.keys(getAllSeries())) {
-    const data = getSeriesData(seriesSlug);
-    if (data?.redirectFrom?.includes(path)) {
-      return { slug: seriesSlug, data };
-    }
-  }
-  return null;
-}
-
 export async function generateStaticParams() {
   const allSeries = getAllSeries();
   const slugs = new Set(Object.keys(allSeries));
@@ -38,6 +28,14 @@ export async function generateStaticParams() {
     }
   }
 
+  // Work around Next dev static-param checks for percent-encoded Unicode paths
+  // under `output: "export"` — dev server may receive encoded forms of Unicode slugs.
+  if (process.env.NODE_ENV !== 'production') {
+    for (const slug of [...slugs]) {
+      slugs.add(encodeURIComponent(slug));
+    }
+  }
+
   if (slugs.size === 0) return [{ slug: '_' }];
   return Array.from(slugs).map((slug) => ({ slug }));
 }
@@ -46,7 +44,7 @@ export const dynamicParams = false;
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug: rawSlug } = await params;
-  const slug = decodeURIComponent(rawSlug);
+  const slug = safeDecodeParam(rawSlug);
   const currentPath = `/series/${slug}`;
 
   const redirect = findSeriesByRedirectFrom(currentPath);
@@ -98,7 +96,7 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function SeriesPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug: rawSlug } = await params;
-  const slug = decodeURIComponent(rawSlug);
+  const slug = safeDecodeParam(rawSlug);
   const currentPath = `/series/${slug}`;
 
   const redirect = findSeriesByRedirectFrom(currentPath);

package/src/app/series/page.tsx

@@ -1,4 +1,4 @@
-import { getAllSeries, getSeriesData, resolveSeriesAuthors } from '@/lib/markdown';
+import { getAllSeries, getSeriesData, getSeriesLatestPostDate, resolveSeriesAuthors } from '@/lib/markdown';
 import Link from 'next/link';
 import { siteConfig } from '../../../site.config';
 import { Metadata } from 'next';
@@ -20,8 +20,8 @@ export default function SeriesIndexPage() {
 
   // Sort by most recent post date (active series first)
   const seriesSlugs = Object.keys(allSeries).sort((a, b) => {
-    const latestA = allSeries[a][0]?.date || '';
-    const latestB = allSeries[b][0]?.date || '';
+    const latestA = getSeriesLatestPostDate(a);
+    const latestB = getSeriesLatestPostDate(b);
     return latestB.localeCompare(latestA);
   });
 

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/AuthorCard.tsx

@@ -3,6 +3,7 @@ import ExportedImage from 'next-image-export-optimizer';
 import { getAuthorSlug } from '@/lib/markdown';
 import { siteConfig } from '../../site.config';
 import { t } from '@/lib/i18n';
+import { shouldBypassImageOptimization } from '@/lib/image-utils';
 
 const isDev = process.env.NODE_ENV === 'development';
 const isExternal = (src: string) => src.startsWith('http') || src.startsWith('//');
@@ -16,6 +17,9 @@ export default function AuthorCard({ authors }: { authors: string[] }) {
         const slug = getAuthorSlug(author);
         const profile = siteConfig.authors?.[author];
         const hasSocial = profile?.social && profile.social.length > 0;
+        const avatarBypassOptimization = Boolean(
+          profile?.avatar && (isDev || isExternal(profile.avatar) || shouldBypassImageOptimization(profile.avatar))
+        );
 
         return (
           <div
@@ -31,7 +35,8 @@ export default function AuthorCard({ authors }: { authors: string[] }) {
                   width={56}
                   height={56}
                   className="w-14 h-14 rounded-full object-cover flex-shrink-0 ring-2 ring-muted/20"
-                  unoptimized={isDev || isExternal(profile.avatar)}
+                  unoptimized={avatarBypassOptimization}
+                  placeholder={avatarBypassOptimization ? 'empty' : 'blur'}
                 />
               ) : (
                 <div className="w-14 h-14 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 text-accent font-serif font-bold text-2xl select-none">
@@ -60,21 +65,25 @@ export default function AuthorCard({ authors }: { authors: string[] }) {
             {/* Right — social images (e.g. QR codes) */}
             {hasSocial && (
               <div className="flex justify-center gap-5 flex-shrink-0 border-t border-muted/15 pt-4 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-6 sm:justify-start">
-                {profile.social!.map((item, index) => (
-                  <figure key={index} className="flex flex-col items-center gap-1.5">
-                    <ExportedImage
-                      src={item.image}
-                      alt={item.description}
-                      width={72}
-                      height={72}
-                      className="w-[72px] h-[72px] object-contain rounded-lg bg-white p-0.5"
-                      unoptimized={isDev || isExternal(item.image)}
-                    />
-                    <figcaption className="text-[10px] font-sans text-muted text-center leading-tight max-w-[72px]">
-                      {item.description}
-                    </figcaption>
-                  </figure>
-                ))}
+                {profile.social!.map((item, index) => {
+                  const socialImageBypassOptimization = isDev || isExternal(item.image) || shouldBypassImageOptimization(item.image);
+                  return (
+                    <figure key={index} className="flex flex-col items-center gap-1.5">
+                      <ExportedImage
+                        src={item.image}
+                        alt={item.description}
+                        width={72}
+                        height={72}
+                        className="w-[72px] h-[72px] object-contain rounded-lg bg-white p-0.5"
+                        unoptimized={socialImageBypassOptimization}
+                        placeholder={socialImageBypassOptimization ? 'empty' : 'blur'}
+                      />
+                      <figcaption className="text-[10px] font-sans text-muted text-center leading-tight max-w-[72px]">
+                        {item.description}
+                      </figcaption>
+                    </figure>
+                  );
+                })}
               </div>
             )}
           </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");
   });
 });