@hutusi/amytis 1.14.0 → 1.15.0

package/scripts/run-with-rst-python.ts

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+
+const [command, ...args] = Bun.argv.slice(2);
+
+if (!command) {
+  console.error('Missing command to run.');
+  process.exit(1);
+}
+
+const env = { ...process.env };
+if (!env.AMYTIS_RST_PYTHON) {
+  const localPython = path.join(
+    process.cwd(),
+    '.venv-rst',
+    process.platform === 'win32' ? 'Scripts' : 'bin',
+    process.platform === 'win32' ? 'python.exe' : 'python',
+  );
+  if (fs.existsSync(localPython)) {
+    env.AMYTIS_RST_PYTHON = localPython;
+  }
+}
+
+const child = spawn(command, args, {
+  stdio: 'inherit',
+  env,
+  shell: process.platform === 'win32',
+});
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.kill(process.pid, signal);
+    return;
+  }
+  process.exit(code ?? 1);
+});
+
+child.on('error', (error) => {
+  console.error(error.message);
+  process.exit(1);
+});

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

@@ -67,17 +67,26 @@ export async function generateStaticParams() {
     }
   }
 
-  // Work around Next dev static-param checks for percent-encoded Unicode postSlugs
-  // under `output: "export"` — dev server may receive percent-encoded forms of Unicode paths.
+  // Work around Next dev static-param checks for percent-encoded Unicode slugs
+  // under `output: "export"` — dev server may receive encoded forms of either segment.
   // Include encoded variants in development only; production export keeps raw segment values.
   if (process.env.NODE_ENV !== 'production') {
     const existing = new Set(params.map(p => `${p.slug}/${p.postSlug}`));
     for (const p of [...params]) {
+      const encodedSlug = encodeURIComponent(p.slug);
       const encodedPostSlug = encodeURIComponent(p.postSlug);
-      const key = `${p.slug}/${encodedPostSlug}`;
-      if (!existing.has(key)) {
-        existing.add(key);
-        params.push({ slug: p.slug, postSlug: encodedPostSlug });
+      const variants = [
+        { slug: p.slug, postSlug: encodedPostSlug },
+        { slug: encodedSlug, postSlug: p.postSlug },
+        { slug: encodedSlug, postSlug: encodedPostSlug },
+      ];
+
+      for (const variant of variants) {
+        const key = `${variant.slug}/${variant.postSlug}`;
+        if (!existing.has(key)) {
+          existing.add(key);
+          params.push(variant);
+        }
       }
     }
   }
@@ -154,7 +163,8 @@ export default async function PrefixPostPage({
   params: Promise<{ slug: string; postSlug: string }>;
 }) {
   const { slug: prefix, postSlug: rawPostSlug } = await params;
-  const currentPath = `/${safeDecodeParam(prefix)}/${safeDecodeParam(rawPostSlug)}`;
+  const decodedPrefix = safeDecodeParam(prefix);
+  const currentPath = `/${decodedPrefix}/${safeDecodeParam(rawPostSlug)}`;
 
   // Resolve the post: first by slug, then fall back to redirectFrom lookup for renamed slugs.
   const post =
@@ -168,9 +178,9 @@ export default async function PrefixPostPage({
   // or a legacy redirectFrom path declared on the resolved post.
   const basePath = getPostsBasePath();
   const customPaths = getSeriesCustomPaths();
-  const isValidBasePath = prefix === basePath && basePath !== 'posts';
-  const matchedSeriesSlug = Object.entries(customPaths).find(([, path]) => path === prefix)?.[0];
-  const isAutoSeriesPath = getSeriesAutoPaths() && !Object.hasOwn(customPaths, prefix) && getSeriesData(prefix) !== null;
+  const isValidBasePath = decodedPrefix === basePath && basePath !== 'posts';
+  const matchedSeriesSlug = Object.entries(customPaths).find(([, path]) => path === decodedPrefix)?.[0];
+  const isAutoSeriesPath = getSeriesAutoPaths() && !Object.hasOwn(customPaths, decodedPrefix) && getSeriesData(decodedPrefix) !== null;
   const isLegacyRedirect = post.redirectFrom?.includes(currentPath) ?? false;
 
   if (!isValidBasePath && !matchedSeriesSlug && !isAutoSeriesPath && !isLegacyRedirect) {

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

@@ -57,6 +57,21 @@ export async function generateStaticParams() {
     }
   }
 
+  // Work around Next dev static-param checks for percent-encoded Unicode slugs
+  // under `output: "export"` — dev server may receive encoded forms of the
+  // prefix segment for paginated listings.
+  if (process.env.NODE_ENV !== 'production') {
+    const existing = new Set(params.map(p => `${p.slug}/${p.page}`));
+    for (const p of [...params]) {
+      const encodedSlug = encodeURIComponent(p.slug);
+      const key = `${encodedSlug}/${p.page}`;
+      if (!existing.has(key)) {
+        existing.add(key);
+        params.push({ slug: encodedSlug, page: p.page });
+      }
+    }
+  }
+
   // Placeholder keeps Next.js happy with output: export when no custom paths configured.
   // dynamicParams = false ensures any unrecognised slug/page combo returns 404.
   return params.length > 0 ? params : [{ slug: '_', page: '2' }];

package/src/app/globals.css

@@ -451,3 +451,168 @@ body {
 [id] {
   scroll-margin-top: 5rem;
 }
+
+.rst-rendered figure {
+  margin: 2rem 0;
+}
+
+.rst-rendered figure > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+}
+
+.rst-rendered figcaption {
+  margin-top: 0.75rem;
+  text-align: center;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--muted);
+  font-style: italic;
+}
+
+.rst-rendered aside.admonition {
+  margin: 2rem 0;
+  border-left: 4px solid var(--accent);
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: color-mix(in srgb, var(--accent) 8%, var(--background));
+}
+
+.rst-rendered aside.admonition > :first-child {
+  margin-top: 0;
+}
+
+.rst-rendered aside.admonition > :last-child {
+  margin-bottom: 0;
+}
+
+.rst-rendered .admonition-title {
+  margin-bottom: 0.5rem;
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--heading);
+}
+
+.rst-rendered .docutils.literal {
+  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--muted) 10%, var(--background));
+  padding: 0.1rem 0.35rem;
+  font-size: 0.9em;
+  color: var(--heading);
+}
+
+.rst-rendered .dtag {
+  display: inline-block;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 10%, var(--background));
+  padding: 0.1rem 0.55rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--accent);
+}
+
+.rst-rendered a[href]:not([role="doc-noteref"]) {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 160ms ease, text-decoration-color 160ms ease;
+}
+
+.rst-rendered a[href]:not([role="doc-noteref"]):hover,
+.rst-rendered a[href]:not([role="doc-noteref"]):focus-visible {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.rst-rendered .numref {
+  color: inherit;
+  font-weight: inherit;
+}
+
+.rst-rendered .rst-table-wrapper {
+  overflow-x: auto;
+  margin: 2rem 0;
+  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
+  border-radius: 0.5rem;
+}
+
+.rst-rendered .rst-table-wrapper > table {
+  min-width: 100%;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.rst-rendered math {
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  vertical-align: middle;
+}
+
+.rst-rendered pre.literal-block,
+.rst-rendered pre.code.literal-block {
+  overflow-x: auto;
+  border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
+  border-radius: 0.875rem;
+  background: color-mix(in srgb, var(--heading) 7%, var(--background));
+  padding: 1rem 1.25rem;
+  color: var(--heading);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
+}
+
+.dark .rst-rendered pre.literal-block,
+.dark .rst-rendered pre.code.literal-block {
+  border-color: color-mix(in srgb, var(--muted) 22%, transparent);
+  background: color-mix(in srgb, var(--foreground) 9%, var(--background));
+  color: var(--foreground);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
+}
+
+.rst-rendered pre.code.literal-block code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+.rst-rendered pre.code.literal-block .keyword,
+.rst-rendered pre.code.literal-block .name.function {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.rst-rendered pre.code.literal-block .literal.string,
+.rst-rendered pre.code.literal-block .literal.string.double {
+  color: color-mix(in srgb, var(--accent) 68%, var(--foreground));
+}
+
+.rst-rendered a[role="doc-noteref"] {
+  font-size: 0.82em;
+  vertical-align: super;
+}
+
+.rst-rendered .footnote-list {
+  margin: 1.5rem 0 2rem;
+  border-top: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
+  padding-top: 1rem;
+}
+
+.rst-rendered .footnote {
+  margin: 0.75rem 0;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.rst-rendered .footnote .label {
+  margin-right: 0.4rem;
+  font-weight: 600;
+  color: var(--heading);
+}

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/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/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", () => {

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