@hutusi/amytis 1.13.0 → 1.15.0

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

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

package/src/components/FlowCalendarSidebar.tsx

@@ -79,7 +79,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
   }, [firstDay, daysInMonth]);
 
   return (
-    <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)]">
+    <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] select-none">
       {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
       <div className="border border-muted/20 rounded-lg p-4">
         {/* Month navigation */}

package/src/components/FlowContent.tsx

@@ -9,7 +9,7 @@ import Pagination from '@/components/Pagination';
 interface FlowItem {
   slug: string;
   date: string;
-  title: string;
+  title?: string;
   excerpt: string;
   tags: string[];
 }
@@ -102,6 +102,7 @@ export default function FlowContent({ flows, allFlows, entryDates, tags, current
               <FlowTimelineEntry
                 key={flow.slug}
                 date={flow.date}
+                title={flow.title}
                 excerpt={flow.excerpt}
                 tags={flow.tags}
                 slug={flow.slug}

package/src/components/FlowTimelineEntry.tsx

@@ -3,12 +3,15 @@ import Tag from './Tag';
 
 interface FlowTimelineEntryProps {
   date: string;
+  title?: string;
   excerpt: string;
   tags: string[];
   slug: string;
 }
 
-export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTimelineEntryProps) {
+export default function FlowTimelineEntry({ date, title, excerpt, tags, slug }: FlowTimelineEntryProps) {
+  const hasExplicitTitle = title && title !== date;
+
   return (
     <article className="relative pl-6 pb-8 border-l-2 border-muted/20 last:pb-0">
       {/* Timeline dot */}
@@ -16,6 +19,9 @@ export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTim
 
       <Link href={`/flows/${slug}`} className="no-underline group">
         <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{date}</time>
+        {hasExplicitTitle && (
+          <h3 className="mt-1 text-base font-semibold text-heading group-hover:text-accent transition-colors">{title}</h3>
+        )}
       </Link>
       {excerpt && (
         <p className="mt-1.5 text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>

package/src/components/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
   const { t, language } = useLanguage();
   
   return (
-    <footer className="bg-muted/5 border-t border-muted/10 mt-auto">
+    <footer className="bg-muted/5 border-t border-muted/10 mt-auto select-none">
       <div className="max-w-6xl mx-auto px-6 py-10 lg:py-16">
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-10 lg:mb-12">
           {/* Brand */}

package/src/components/MarkdownRenderer.test.tsx

@@ -24,6 +24,22 @@ describe("MarkdownRenderer", () => {
       // images as LCP candidates, avoiding "preloaded but not used" warnings
       expect(html).toContain('fetchPriority="low"');
     });
+
+    test("bypasses optimization for local avif images", () => {
+      const content = "![alt text](/images/background-new-wave.avif)";
+      const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+      expect(html).toContain('src="/images/background-new-wave.avif"');
+      expect(html).not.toContain('nextImageExportOptimizer');
+      expect(html).not.toContain('background-image:url');
+    });
+
+    test("bypasses optimization for local webp images", () => {
+      const content = "![alt text](/images/already-optimized.webp)";
+      const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+      expect(html).toContain('src="/images/already-optimized.webp"');
+      expect(html).not.toContain('nextImageExportOptimizer');
+      expect(html).not.toContain('background-image:url');
+    });
   });
 
   test("adds horizontal overflow containment while preserving code scrolling", () => {
@@ -41,4 +57,10 @@ describe("MarkdownRenderer", () => {
     expect(html).toContain("not-prose w-full min-w-0 max-w-full");
     expect(html).toContain("overflow-x-auto");
   });
+
+  test("wraps content in a background container for copy-paste fidelity", () => {
+    const content = "Hello world";
+    const html = renderToStaticMarkup(<MarkdownRenderer content={content} />);
+    expect(html).toMatch(/class="[^"]*\bbg-background\b[^"]*"/);
+  });
 });

package/src/components/MarkdownRenderer.tsx

@@ -14,6 +14,7 @@ import remarkWikilinks from '@/lib/remark-wikilinks';
 import ExportedImage from 'next-image-export-optimizer';
 import { PluggableList } from 'unified';
 import type { SlugRegistryEntry } from '@/lib/markdown';
+import { shouldBypassImageOptimization } from '@/lib/image-utils';
 
 
 interface MarkdownRendererProps {
@@ -139,6 +140,7 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
       const isExternal = imageSrc?.startsWith('http') || imageSrc?.startsWith('//');
 
       if (!isExternal) {
+        const shouldBypassOptimization = shouldBypassImageOptimization(imageSrc);
         return (
           <ExportedImage
             src={imageSrc || ''}
@@ -147,7 +149,8 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
             height={height ? Number(height) : 900}
             className="max-w-full h-auto rounded-lg my-4"
             sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
-            unoptimized={isDev}
+            unoptimized={isDev || shouldBypassOptimization}
+            placeholder={shouldBypassOptimization ? 'empty' : 'blur'}
             style={(!width || !height) ? { width: '100%', height: 'auto' } : undefined}
           />
         );
@@ -164,22 +167,24 @@ export default function MarkdownRenderer({ content, latex = false, slug, slugReg
   return (
     <>
     {latex && <KatexStyles />}
-    <div className="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">
-      <ReactMarkdown
-        remarkPlugins={remarkPlugins}
-        rehypePlugins={rehypePlugins}
-        components={allComponents}
-      >
-        {content}
-      </ReactMarkdown>
+    <div className="bg-background"> {/* Explicit background for better copy-paste fidelity */}
+      <div className="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">
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={allComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
     </div>
     </>
   );

package/src/components/Navbar.tsx

@@ -91,7 +91,7 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
   }, [isMenuOpen]);
 
   return (
-    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 ${
+    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 select-none ${
       isScrolled
         ? 'border-muted/10 bg-background/90 backdrop-blur-md shadow-sm'
         : 'border-transparent bg-transparent'

package/src/components/PostSidebar.tsx

@@ -73,7 +73,7 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, collection
     <aside
       ref={sidebarRef}
       data-testid="post-sidebar"
-      className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin"
+      className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin select-none"
     >
       {/* TOC — always at top */}
       <TocPanel

package/src/components/RecentNotesSection.tsx

@@ -6,6 +6,7 @@ import { useLanguage } from './LanguageProvider';
 export interface RecentNoteItem {
   slug: string;
   date: string;
+  title?: string;
   excerpt: string;
 }
 
@@ -36,6 +37,9 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
             <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
             <Link href={`/flows/${note.slug}`} className="no-underline group">
               <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{note.date}</time>
+              {note.title && note.title !== note.date && (
+                <h3 className="mt-0.5 text-sm font-semibold text-heading group-hover:text-accent transition-colors">{note.title}</h3>
+              )}
             </Link>
             {note.excerpt && (
               <p className="mt-1.5 text-sm text-muted line-clamp-2">{note.excerpt}</p>

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} />