feat(ssg-md): add SSG-MD support to OverviewGroup and FallbackHeading components (Vibe Kanban) (#2966)

SoonIter · web-flow · commit 6f272df7d8cf · 2026-01-09T14:29:59.000+08:00
diff --git a/packages/core/src/theme/components/FallbackHeading/index.tsx b/packages/core/src/theme/components/FallbackHeading/index.tsx
@@ -28,6 +28,10 @@ export function FallbackHeading({
   level: 1 | 2 | 3 | 4 | 5 | 6;
   title: string;
 }) {
+  if (process.env.__SSR_MD__) {
+    return <>{`${'#'.repeat(level)} ${title}\n\n`}</>;
+  }
+
   const titleSlug = title && slug(title.trim());
 
   const Element = useMemo(() => {
diff --git a/packages/core/src/theme/components/Overview/index.tsx b/packages/core/src/theme/components/Overview/index.tsx
@@ -6,7 +6,6 @@ import type {
 } from '@rspress/core';
 import {
   isEqualPath,
-  routePathToMdPath,
   useI18n,
   usePageData,
   useSidebar,
@@ -26,58 +25,6 @@ import {
 import './index.scss';
 import { findItemByRoutePath } from './utils';
 
-function OverviewMarkdown({
-  title,
-  groups,
-}: {
-  title: string;
-  groups: Group[];
-}) {
-  const lines: string[] = [];
-
-  lines.push(`# ${title}`);
-  lines.push('');
-
-  for (const group of groups) {
-    if (group.name) {
-      lines.push(`## ${group.name}`);
-      lines.push('');
-    }
-
-    for (const item of group.items) {
-      const itemTitle = item.link
-        ? `[${item.text}](${routePathToMdPath(item.link)})`
-        : `**${item.text}**`;
-      lines.push(`### ${itemTitle}`);
-      lines.push('');
-
-      // Render headers as a list
-      if (item.headers && item.headers.length > 0) {
-        for (const header of item.headers) {
-          const headerLink = item.link
-            ? `[${header.text}](${routePathToMdPath(item.link)}#${header.id})`
-            : header.text;
-          lines.push(`- ${headerLink}`);
-        }
-        lines.push('');
-      }
-
-      // Render custom items as a list
-      if (item.items && item.items.length > 0) {
-        for (const subItem of item.items) {
-          const subItemLink = subItem.link
-            ? `[${subItem.text}](${routePathToMdPath(subItem.link)})`
-            : subItem.text;
-          lines.push(`- ${subItemLink}`);
-        }
-        lines.push('');
-      }
-    }
-  }
-
-  return <>{lines.join('\n')}</>;
-}
-
 // Utility function to normalize text for search
 const normalizeText = (s: string) => s.toLowerCase().replace(/-/g, ' ');
 
@@ -294,7 +241,14 @@ export function Overview(props: {
   const overviewTitle = title || 'Overview';
 
   if (process.env.__SSR_MD__) {
-    return <OverviewMarkdown title={overviewTitle} groups={groups} />;
+    return (
+      <>
+        <FallbackHeading level={1} title={overviewTitle} />
+        {groups.map(group => (
+          <OverviewGroup key={group?.name} group={group} />
+        ))}
+      </>
+    );
   }
 
   return (
diff --git a/packages/core/src/theme/components/OverviewGroup/index.tsx b/packages/core/src/theme/components/OverviewGroup/index.tsx
@@ -1,10 +1,52 @@
 import { Link, renderInlineMarkdown } from '@theme';
 import './index.scss';
 import type { Header } from '@rspress/core';
+import { routePathToMdPath } from '@rspress/core/runtime';
 import { FallbackHeading, SvgWrapper } from '@theme';
 import { useMemo } from 'react';
 import IconPlugin from './icons/plugin.svg';
 
+function OverviewGroupMarkdown({ group }: { group: Group }) {
+  const lines: string[] = [];
+
+  if (group.name) {
+    lines.push(`## ${group.name}`);
+    lines.push('');
+  }
+
+  for (const item of group.items) {
+    const itemTitle = item.link
+      ? `[${item.text}](${routePathToMdPath(item.link)})`
+      : `**${item.text}**`;
+    lines.push(`### ${itemTitle}`);
+    lines.push('');
+
+    // Render headers as a list
+    if (item.headers && item.headers.length > 0) {
+      for (const header of item.headers) {
+        const headerLink = item.link
+          ? `[${header.text}](${routePathToMdPath(item.link)}#${header.id})`
+          : header.text;
+        lines.push(`- ${headerLink}`);
+      }
+      lines.push('');
+    }
+
+    // Render custom items as a list
+    if (item.items && item.items.length > 0) {
+      for (const subItem of item.items) {
+        const subItemLink = subItem.link
+          ? `[${subItem.text}](${routePathToMdPath(subItem.link)})`
+          : subItem.text;
+        lines.push(`- ${subItemLink}`);
+      }
+      lines.push('');
+    }
+  }
+
+  return <>{lines.join('\n')}</>;
+}
+
 export interface GroupItem {
   text: string;
   link: string;
@@ -20,6 +62,10 @@ export interface Group {
 }
 
 export const OverviewGroup = ({ group }: { group: Group }) => {
+  if (process.env.__SSR_MD__) {
+    return <OverviewGroupMarkdown group={group} />;
+  }
+
   const { itemsWithContent, itemsWithoutContent } = useMemo(() => {
     // Separate items into those with content and those without
     const itemsWithContent = group.items.filter(
