fix(blog-list): support ssg markdown output

Author: SoonIter

.prettierignore

@@ -1 +1,2 @@
 pnpm-lock.yaml
+.claude/

package.json

@@ -81,6 +81,7 @@
     "prepare": "rslib && simple-git-hooks",
     "build": "rslib",
     "build:watch": "rslib -w",
+    "test": "rstest",
     "lint": "rslint && prettier -c .",
     "lint:write": "rslint --fix && prettier -w .",
     "lint:fix": "pnpm lint:write",
@@ -96,6 +97,8 @@
     "@rslib/core": "^0.21.5",
     "@rslint/core": "^0.5.3",
     "@rstack-dev/doc-ui": "workspace:*",
+    "@rstest/adapter-rslib": "^0.2.2",
+    "@rstest/core": "^0.9.10",
     "@storybook/addon-themes": "^10.4.0",
     "@storybook/react": "^10.4.0",
     "@storybook/test": "9.0.0-alpha.2",
@@ -110,6 +113,7 @@
     "prettier": "~3.8.3",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-render-to-markdown": "^19.0.1",
     "rimraf": "~6.1.3",
     "semver": "7.8.0",
     "simple-git-hooks": "^2.13.1",

pnpm-lock.yaml

@@ -4,6 +4,11 @@ import { defineConfig, rspack } from '@rslib/core';
 
 export default defineConfig({
   plugins: [pluginReact(), pluginSass()],
+  source: {
+    define: {
+      'import.meta.env': 'import.meta.env',
+    },
+  },
   lib: [
     {
       syntax: 'es2018',

rslib.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@rstest/core';
+import { withRslibConfig } from '@rstest/adapter-rslib';
+
+export default defineConfig({
+  extends: withRslibConfig(),
+  include: ['src/**/*.test.{ts,tsx}'],
+  testEnvironment: 'node',
+  source: {
+    define: {
+      'import.meta.env.SSG_MD': true,
+    },
+  },
+});

rstest.config.ts

@@ -0,0 +1,67 @@
+import { expect, test } from '@rstest/core';
+import { renderToMarkdownString } from 'react-render-to-markdown';
+import { BlogList, type BlogListItem } from './index';
+
+const posts: BlogListItem[] = [
+  {
+    title: 'Announcing Rspack 2.0',
+    href: '/blog/announcing-2-0',
+    date: '2026-04-22',
+    description:
+      'Rspack 2.0 is out with modern defaults, API design, and build outputs.',
+    authors: [
+      {
+        name: 'Rspack Team',
+        avatar: 'https://rspack.rs/logo.png',
+      },
+    ],
+  },
+  {
+    title: 'Bundler tree shaking principles and differences',
+    href: '/blog/tree-shaking',
+    date: '2025-07-31',
+    description:
+      'A brief overview of tree shaking principles across different bundlers.',
+    authors: [
+      {
+        name: 'ahabhgk',
+        avatar: 'https://github.com/ahabhgk.png',
+      },
+    ],
+  },
+];
+
+test('renders blog list as markdown when SSG_MD is enabled', async () => {
+  const markdown = await renderToMarkdownString(
+    <BlogList
+      posts={posts}
+      lang="en"
+      title="Rspack blogs"
+      subtitle={
+        <>
+          Browse release notes and technical deep dives from{' '}
+          <a href="https://x.com/rspack_dev">@rspack_dev</a>.
+        </>
+      }
+    />,
+  );
+
+  expect(markdown).toMatchInlineSnapshot(`
+    "# Rspack blogs
+
+    Browse release notes and technical deep dives from @rspack_dev.
+
+    ## [Announcing Rspack 2.0](/blog/announcing-2-0)
+
+    > April 22, 2026 · Rspack Team
+
+    Rspack 2.0 is out with modern defaults, API design, and build outputs.
+
+    ## [Bundler tree shaking principles and differences](/blog/tree-shaking)
+
+    > July 31, 2025 · ahabhgk
+
+    A brief overview of tree shaking principles across different bundlers.
+    "
+  `);
+});

src/blog-list/index.test.tsx

@@ -8,6 +8,7 @@ import { useMemo, useState } from 'react';
 import { type BlogAvatarAuthor, BlogAvatarGroup } from '../blog-avatar';
 import { ALink, type LinkComp } from '../shared';
 import { BorderBeam } from './BorderBeam';
+import { isSsgMd, renderBlogListSsgMarkdown } from './ssg-md';
 import { useTiltEffect } from './useTiltEffect';
 
 import styles from './index.module.scss';
@@ -307,6 +308,20 @@ export function BlogList({
     lang === 'zh' ? 'zh-CN' : 'en-US',
     dateFormatOptions,
   );
+
+  if (isSsgMd()) {
+    return (
+      <>
+        {renderBlogListSsgMarkdown({
+          formatDate: value => formatBlogDate(value, dateFormatter),
+          posts,
+          subtitle,
+          title,
+        })}
+      </>
+    );
+  }
+
   const tiltDisabled = !interactive || isTouchDevice();
 
   const featuredPost = useMemo(() => {