@hutusi/amytis 1.14.0 → 1.15.0

package/src/components/RstRenderer.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import RstRenderer from './RstRenderer';
+
+describe('RstRenderer', () => {
+  test('renders pre-rendered html when available', () => {
+    const html = renderToStaticMarkup(
+      <RstRenderer
+        content="Fallback body"
+        html={
+          '<section><h2 id="intro">Intro</h2><figure class="docutils"><img src="/posts/demo/test.png" alt="Test" onerror="alert(2)" /><figcaption>Caption</figcaption></figure><aside class="admonition note"><p class="admonition-title">Note</p><p>Keep me</p></aside><p><a href="/demo" onclick="alert(3)">Link</a></p><p><a href="javascript:alert(4)">Bad link</a></p><script>alert(1)</script><iframe src="https://example.com/embed"></iframe></section>'
+        }
+      />
+    );
+
+    expect(html).toContain('rst-rendered');
+    expect(html).toContain('id="intro"');
+    expect(html).toContain('<figure');
+    expect(html).toContain('<figcaption>Caption</figcaption>');
+    expect(html).toContain('admonition-title');
+    expect(html).toContain('/posts/demo/test.png');
+    expect(html).toContain('href="/demo"');
+    expect(html).not.toContain('alert(1)');
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('<iframe');
+    expect(html).not.toContain('onclick');
+    expect(html).not.toContain('onerror');
+    expect(html).not.toContain('javascript:alert(4)');
+  });
+
+  test('blocks data urls on images', () => {
+    const html = renderToStaticMarkup(
+      <RstRenderer
+        content="Fallback body"
+        html={'<p><img src="data:image/svg+xml,<svg onload=alert(1)>" alt="Bad" /></p>'}
+      />
+    );
+
+    expect(html).toContain('<img');
+    expect(html).not.toContain('data:image');
+  });
+
+  test('preserves MathML elements', () => {
+    const html = renderToStaticMarkup(
+      <RstRenderer
+        content="Fallback body"
+        html={'<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>x</mi><mo>=</mo><mn>2</mn></mrow></math>'}
+      />
+    );
+
+    expect(html).toContain('<math');
+    expect(html).toContain('<mrow');
+    expect(html).toContain('<mi>x</mi>');
+  });
+
+  test('wraps rendered rst tables with the same scroll container pattern as markdown', () => {
+    const html = renderToStaticMarkup(
+      <RstRenderer
+        content="Fallback body"
+        html={'<table><thead><tr><th>A</th></tr></thead><tbody><tr><td>B</td></tr></tbody></table>'}
+      />
+    );
+
+    expect(html).toContain('class="rst-table-wrapper"');
+    expect(html).toContain('<table>');
+    expect(html).toContain('<th>A</th>');
+    expect(html).toContain('<td>B</td>');
+  });
+
+  test('renders converted headings, links, and code blocks through the markdown renderer', () => {
+    const html = renderToStaticMarkup(
+      <RstRenderer
+        content={[
+          'Section',
+          '-------',
+          '',
+          'Paragraph with `Example <https://example.com>`_.',
+          '',
+          '.. code-block:: ts',
+          '',
+          '  export const value = 1;',
+        ].join('\n')}
+      />
+    );
+
+    expect(html).toContain('Section');
+    expect(html).toContain('https://example.com');
+    expect(html).toContain('language-ts');
+    expect(html).toContain('<code class="language-ts"');
+    expect(html).toContain('token keyword');
+    expect(html).toContain('token number');
+  });
+});

package/src/components/RstRenderer.tsx

@@ -0,0 +1,122 @@
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import KatexStyles from '@/components/KatexStyles';
+import type { SlugRegistryEntry } from '@/lib/markdown';
+import { rstToMarkdown } from '@/lib/rst';
+import sanitizeHtml from 'sanitize-html';
+
+interface RstRendererProps {
+  content: string;
+  html?: string;
+  latex?: boolean;
+  slug?: string;
+  slugRegistry?: Map<string, SlugRegistryEntry>;
+}
+
+const proseClasses = `prose prose-lg max-w-none min-w-0 overflow-x-hidden text-foreground
+      prose-headings:font-serif prose-headings:text-heading
+      prose-p:text-foreground prose-p:leading-loose
+      prose-strong:text-heading prose-strong:font-semibold
+      prose-code:bg-muted/15 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:border prose-code:border-muted/20 prose-code:text-[0.9em] prose-code:font-medium
+      prose-code:before:content-none prose-code:after:content-none
+      prose-blockquote:italic
+      prose-th:text-heading prose-td:text-foreground
+      dark:prose-invert`;
+
+const allowedTags = [
+  ...(sanitizeHtml.defaults.allowedTags ?? []),
+  'section',
+  'img',
+  'source',
+  'figure',
+  'figcaption',
+  'aside',
+  'math',
+  'annotation',
+  'annotation-xml',
+  'maction',
+  'menclose',
+  'merror',
+  'mfenced',
+  'mfrac',
+  'mi',
+  'mmultiscripts',
+  'mn',
+  'mo',
+  'mover',
+  'mpadded',
+  'mphantom',
+  'mprescripts',
+  'mroot',
+  'mrow',
+  'ms',
+  'mspace',
+  'msqrt',
+  'mstyle',
+  'msub',
+  'msubsup',
+  'msup',
+  'mtable',
+  'mtd',
+  'mtext',
+  'mtr',
+  'munder',
+  'munderover',
+  'semantics',
+];
+
+const allowedAttributes: sanitizeHtml.IOptions['allowedAttributes'] = {
+  ...sanitizeHtml.defaults.allowedAttributes,
+  '*': ['id', 'class', 'title', 'lang', 'dir', 'role', 'aria-label', 'aria-hidden'],
+  a: ['href', 'name', 'target', 'rel', 'id', 'class', 'title'],
+  img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading', 'decoding', 'class', 'id'],
+  source: ['src', 'srcset', 'type'],
+  td: ['colspan', 'rowspan', 'align'],
+  th: ['colspan', 'rowspan', 'align', 'scope'],
+  ol: ['start', 'reversed', 'type'],
+  li: ['value'],
+  math: ['display', 'xmlns'],
+  annotation: ['encoding'],
+  'annotation-xml': ['encoding'],
+};
+
+function sanitizeRenderedHtml(html: string): string {
+  return sanitizeHtml(html, {
+    allowedTags,
+    allowedAttributes,
+    allowedSchemes: ['http', 'https', 'mailto'],
+    allowedSchemesByTag: {
+      img: ['http', 'https'],
+    },
+    allowProtocolRelative: false,
+  });
+}
+
+export default function RstRenderer({ content, html, latex = false, slug, slugRegistry }: RstRendererProps) {
+  if (html) {
+    const sanitizedHtml = sanitizeRenderedHtml(html).replace(
+      /<table\b([^>]*)>/g,
+      '<div class="rst-table-wrapper"><table$1>'
+    ).replace(/<\/table>/g, '</table></div>');
+
+    return (
+      <>
+        {latex && <KatexStyles />}
+        <div className="bg-background">
+          <div
+            className={`${proseClasses} rst-rendered`}
+            dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <MarkdownRenderer
+      content={rstToMarkdown(content)}
+      latex={latex}
+      slug={slug}
+      slugRegistry={slugRegistry}
+    />
+  );
+}

package/src/layouts/PostLayout.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { Suspense } from 'react';
 import { getAuthorSlug, PostData, BacklinkSource, SlugRegistryEntry, CollectionContext } from '@/lib/markdown';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
+import RstRenderer from '@/components/RstRenderer';
 import RelatedPosts from '@/components/RelatedPosts';
 import SeriesList from '@/components/SeriesList';
 import PostSidebar from '@/components/PostSidebar';
@@ -41,6 +42,9 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
     ? `${siteConfig.baseUrl.replace(/\/+$/, '')}${getStaticPageUrl(post.slug)}`
     : `${siteConfig.baseUrl}${getPostUrl(post)}`;
   const commentSlug = isStaticPage ? `pages/${post.slug}` : post.slug;
+  const bodyRenderer = post.sourceFormat === 'rst'
+    ? <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">
@@ -136,7 +140,7 @@ export default function PostLayout({ post, relatedPosts, seriesPosts, seriesTitl
             </div>
           )}
 
-          <MarkdownRenderer content={post.content} latex={post.latex} slug={post.imageBaseSlug} slugRegistry={slugRegistry} />
+          {bodyRenderer}
 
           {siteConfig.posts?.authors?.showAuthorCard !== false && (
             <AuthorCard authors={post.authors} />

package/src/layouts/SimpleLayout.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from 'react';
 import { PostData } from '@/lib/markdown';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
+import RstRenderer from '@/components/RstRenderer';
 import SimpleLayoutHeader from '@/components/SimpleLayoutHeader';
 import LocaleSwitch from '@/components/LocaleSwitch';
 import PostSidebar from '@/components/PostSidebar';
@@ -28,6 +29,12 @@ export default function SimpleLayout({ post, titleKey, subtitleKey }: SimpleLayo
       )
     : undefined;
 
+  const renderContent = (content: string) => (
+    post.sourceFormat === 'rst'
+      ? <RstRenderer content={content} html={content === post.content ? post.renderedHtml : undefined} latex={post.latex} slug={post.imageBaseSlug} />
+      : <MarkdownRenderer content={content} latex={post.latex} slug={post.imageBaseSlug} />
+  );
+
   const articleContent = (
     <>
       <SimpleLayoutHeader
@@ -40,16 +47,16 @@ export default function SimpleLayout({ post, titleKey, subtitleKey }: SimpleLayo
       {localeEntries.length > 0 ? (
         <LocaleSwitch>
           <div data-locale={defaultLocale}>
-            <MarkdownRenderer content={post.content} latex={post.latex} slug={post.imageBaseSlug} />
+            {renderContent(post.content)}
           </div>
           {localeEntries.map(([locale, data]) => (
             <div key={locale} data-locale={locale} style={{ display: 'none' }}>
-              <MarkdownRenderer content={data.content} latex={post.latex} slug={post.imageBaseSlug} />
+              {renderContent(data.content)}
             </div>
           ))}
         </LocaleSwitch>
       ) : (
-        <MarkdownRenderer content={post.content} latex={post.latex} slug={post.imageBaseSlug} />
+        renderContent(post.content)
       )}
     </>
   );

package/src/lib/image-utils.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from "bun:test";
+import { getCdnImageUrl, shouldBypassImageOptimization } from "./image-utils";
+
+describe("image-utils", () => {
+  test("getCdnImageUrl leaves external and special URLs unchanged", () => {
+    expect(getCdnImageUrl("https://example.com/image.jpg", "https://cdn.example.com")).toBe("https://example.com/image.jpg");
+    expect(getCdnImageUrl("text:Cover", "https://cdn.example.com")).toBe("text:Cover");
+    expect(getCdnImageUrl("data:image/png;base64,abc", "https://cdn.example.com")).toBe("data:image/png;base64,abc");
+  });
+
+  test("shouldBypassImageOptimization skips avif and webp sources", () => {
+    expect(shouldBypassImageOptimization("/images/background-new-wave.avif")).toBe(true);
+    expect(shouldBypassImageOptimization("/images/already-optimized.webp")).toBe(true);
+    expect(shouldBypassImageOptimization("/images/already-optimized.WEBP?version=1")).toBe(true);
+    expect(shouldBypassImageOptimization("/images/already-optimized.webp?version=1#hero")).toBe(true);
+    expect(shouldBypassImageOptimization("/images/photo.jpg")).toBe(false);
+    expect(shouldBypassImageOptimization("/images/photo.png#fragment")).toBe(false);
+  });
+});

package/src/lib/image-utils.ts

@@ -10,3 +10,14 @@ export function getCdnImageUrl(src: string, cdnBaseUrl: string): string {
   const path = src.startsWith('/') ? src : `/${src}`;
   return `${base}${path}`;
 }
+
+/**
+ * Certain source formats should bypass next-image-export-optimizer entirely.
+ * AVIF currently has an upstream path-generation bug when WEBP output is enabled,
+ * and user-supplied WEBP files are often already optimized enough to serve directly.
+ */
+export function shouldBypassImageOptimization(src: string): boolean {
+  if (!src) return false;
+  const pathWithoutQuery = src.split('#')[0]?.split('?')[0] ?? src;
+  return /\.(avif|webp)$/i.test(pathWithoutQuery);
+}

package/src/lib/markdown.test.ts

@@ -1,5 +1,37 @@
-import { describe, expect, test } from "bun:test";
-import { generateExcerpt, calculateReadingTime, getHeadings, getAuthorSlug } from "./markdown";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { afterEach, describe, expect, test } from "bun:test";
+import { RstParseError } from "./rst";
+import {
+  generateExcerpt,
+  calculateReadingTime,
+  getHeadings,
+  getAuthorSlug,
+  getPythonRstRendererAvailabilityForTests,
+  parseMarkdownFileForTests,
+  parseRstFileForTests,
+  resetPythonRstRendererAvailabilityForTests,
+} from "./markdown";
+
+const previousEnablePythonRst = process.env.AMYTIS_ENABLE_PYTHON_RST;
+const previousRstPython = process.env.AMYTIS_RST_PYTHON;
+
+afterEach(() => {
+  if (previousEnablePythonRst === undefined) {
+    delete process.env.AMYTIS_ENABLE_PYTHON_RST;
+  } else {
+    process.env.AMYTIS_ENABLE_PYTHON_RST = previousEnablePythonRst;
+  }
+
+  if (previousRstPython === undefined) {
+    delete process.env.AMYTIS_RST_PYTHON;
+  } else {
+    process.env.AMYTIS_RST_PYTHON = previousRstPython;
+  }
+
+  resetPythonRstRendererAvailabilityForTests();
+});
 
 describe("markdown utils", () => {
   describe("generateExcerpt", () => {
@@ -124,4 +156,110 @@ describe("markdown utils", () => {
       expect(getAuthorSlug(" John Hu ")).toBe("john-hu");
     });
   });
+
+  describe("rST parsing fallbacks", () => {
+    test("uses markdown file mtime when frontmatter date and slug date are missing", () => {
+      const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "amytis-md-"));
+      const filePath = path.join(tempDir, "legacy.mdx");
+      fs.writeFileSync(
+        filePath,
+        [
+          "---",
+          'title: "Legacy Markdown"',
+          "---",
+          "",
+          "Body",
+          "",
+        ].join("\n"),
+        "utf8",
+      );
+
+      const expectedDate = "2021-03-17";
+      const expectedTime = new Date(`${expectedDate}T12:00:00Z`);
+      fs.utimesSync(filePath, expectedTime, expectedTime);
+
+      try {
+        const post = parseMarkdownFileForTests(filePath, "legacy");
+        expect(post.date).toBe(expectedDate);
+      } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("includes the source file path in rst parse errors", () => {
+      process.env.AMYTIS_ENABLE_PYTHON_RST = "0";
+
+      const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "amytis-rst-"));
+      const filePath = path.join(tempDir, "broken.rst");
+      fs.writeFileSync(
+        filePath,
+        [
+          ":Date: 2021-16-15",
+          "",
+          "Broken Title",
+          "************",
+          "",
+          "Body",
+          "",
+        ].join("\n"),
+        "utf8",
+      );
+
+      try {
+        expect(() => parseRstFileForTests(filePath, "broken")).toThrow(
+          new RstParseError(`Invalid date: 2021-16-15 (${filePath})`)
+        );
+      } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("falls back to the legacy rst parser when python runtime is unavailable", () => {
+      process.env.AMYTIS_ENABLE_PYTHON_RST = "1";
+      process.env.AMYTIS_RST_PYTHON = "python-does-not-exist";
+      resetPythonRstRendererAvailabilityForTests();
+
+      const post = parseRstFileForTests(
+        path.join(process.cwd(), "content/series/rst-legacy/getting-started.rst"),
+        "getting-started",
+        undefined,
+        "rst-legacy",
+      );
+
+      expect(post.title).toBe("Getting Started With rST");
+      expect(post.renderedHtml).toBeUndefined();
+      expect(post.content).toContain("Overview\n--------");
+      expect(post.content).toContain(".. code-block:: ts");
+      expect(getPythonRstRendererAvailabilityForTests()).toBe(false);
+    });
+
+    test("uses rst file mtime when metadata date and slug date are missing", () => {
+      process.env.AMYTIS_ENABLE_PYTHON_RST = "0";
+
+      const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "amytis-rst-"));
+      const filePath = path.join(tempDir, "legacy.rst");
+      fs.writeFileSync(
+        filePath,
+        [
+          "Legacy rST",
+          "**********",
+          "",
+          "Body",
+          "",
+        ].join("\n"),
+        "utf8",
+      );
+
+      const expectedDate = "2020-04-09";
+      const expectedTime = new Date(`${expectedDate}T12:00:00Z`);
+      fs.utimesSync(filePath, expectedTime, expectedTime);
+
+      try {
+        const post = parseRstFileForTests(filePath, "legacy");
+        expect(post.date).toBe(expectedDate);
+      } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      }
+    });
+  });
 });