@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/lib/mock-api/data.ts

@@ -0,0 +1,998 @@
+const now = new Date()
+const daysAgo = (days: number) => {
+  const date = new Date(now)
+  date.setDate(date.getDate() - days)
+  return date.toISOString()
+}
+
+const REACTPRESS_GITHUB = 'https://github.com/fecommunity/reactpress'
+const REACTPRESS_SITE = 'https://reactpress.surge.sh/'
+const REACTPRESS_DEMO = 'https://reactpress-theme-starter.vercel.app'
+const REACTPRESS_NPM = 'https://www.npmjs.com/package/@fecommunity/reactpress'
+const THEME_STARTER_GITHUB = 'https://github.com/fecommunity/reactpress-theme-starter'
+
+const mockImages = {
+  logo: '/logo-400.png',
+  logoFull: '/logo.png',
+  icon: '/icon-512.png',
+  iconSmall: '/icon-192.png',
+} as const
+
+const mockFigure = (src: string, alt: string, caption?: string) =>
+  `<figure><img src="${src}" alt="${alt}" loading="lazy" />${
+    caption ? `<figcaption>${caption}</figcaption>` : ''
+  }</figure>`
+
+const mockSearchCategoriesEn = {
+  categories: [
+    { label: 'Site', key: 'local' },
+    { label: 'Web', key: 'search' },
+    { label: 'GitHub', key: 'github' },
+    { label: 'Packages', key: 'packages' },
+  ],
+  subCategories: {
+    search: [
+      {
+        label: 'Google',
+        key: 'search-google',
+        url: 'https://www.google.com/search?q=',
+      },
+      {
+        label: 'Bing',
+        key: 'search-bing',
+        url: 'https://www.bing.com/search?q=',
+      },
+    ],
+    github: [
+      {
+        label: 'Repositories',
+        key: 'github-repos',
+        url: 'https://github.com/search?type=repositories&q=',
+      },
+      {
+        label: 'Code',
+        key: 'github-code',
+        url: 'https://github.com/search?type=code&q=',
+      },
+      {
+        label: 'Issues',
+        key: 'github-issues',
+        url: 'https://github.com/search?type=issues&q=',
+      },
+    ],
+    packages: [
+      {
+        label: 'npm',
+        key: 'npm-search',
+        url: 'https://www.npmjs.com/search?q=',
+      },
+    ],
+  },
+}
+
+const mockSearchCategoriesZh = {
+  categories: [
+    { label: '站内', key: 'local' },
+    { label: '搜索', key: 'search' },
+    { label: 'GitHub', key: 'github' },
+    { label: '包管理', key: 'packages' },
+  ],
+  subCategories: {
+    search: [
+      {
+        label: 'Google',
+        key: 'search-google',
+        url: 'https://www.google.com/search?q=',
+      },
+      {
+        label: 'Bing',
+        key: 'search-bing',
+        url: 'https://www.bing.com/search?q=',
+      },
+    ],
+    github: [
+      {
+        label: '仓库',
+        key: 'github-repos',
+        url: 'https://github.com/search?type=repositories&q=',
+      },
+      {
+        label: '代码',
+        key: 'github-code',
+        url: 'https://github.com/search?type=code&q=',
+      },
+      {
+        label: 'Issues',
+        key: 'github-issues',
+        url: 'https://github.com/search?type=issues&q=',
+      },
+    ],
+    packages: [
+      {
+        label: 'npm',
+        key: 'npm-search',
+        url: 'https://www.npmjs.com/search?q=',
+      },
+    ],
+  },
+}
+
+const mockUrlConfigEn = [
+  {
+    key: 'reactpress',
+    label: 'ReactPress',
+    icon: 'GlobalOutlined',
+    children: [
+      {
+        key: 'rp-github',
+        label: 'GitHub',
+        description:
+          'Official open-source repository — CLI, admin console, API, templates, and toolkit.',
+        url: REACTPRESS_GITHUB,
+      },
+      {
+        key: 'rp-site',
+        label: 'Official Site',
+        description:
+          'Product overview, 3.0 highlights, platform capabilities, and documentation links.',
+        url: REACTPRESS_SITE,
+      },
+      {
+        key: 'rp-demo',
+        label: 'Live Demo',
+        description: 'See a running ReactPress public site and admin dashboard in action.',
+        url: REACTPRESS_DEMO,
+      },
+      {
+        key: 'rp-npm',
+        label: 'npm CLI',
+        description: 'Install @fecommunity/reactpress globally and launch your CMS in minutes.',
+        url: REACTPRESS_NPM,
+      },
+    ],
+  },
+  {
+    key: 'docs-community',
+    label: 'Docs & Community',
+    icon: 'BookOutlined',
+    children: [
+      {
+        key: 'rp-tutorial',
+        label: 'Tutorial',
+        description: 'Step-by-step guides to install, initialize, and publish with ReactPress.',
+        url: `${REACTPRESS_SITE}docs/tutorial`,
+      },
+      {
+        key: 'rp-blog',
+        label: 'Blog',
+        description: 'Product updates, release notes, and publishing best practices.',
+        url: `${REACTPRESS_SITE}blog`,
+      },
+      {
+        key: 'stackoverflow',
+        label: 'Stack Overflow',
+        description: 'Community Q&A for ReactPress developers.',
+        url: 'https://stackoverflow.com/questions/tagged/reactpress',
+      },
+      {
+        key: 'fecommunity',
+        label: 'FECommunity',
+        description: 'The open-source organization behind ReactPress on GitHub.',
+        url: 'https://github.com/fecommunity',
+      },
+    ],
+  },
+  {
+    key: 'tech-stack',
+    label: 'Tech Stack',
+    icon: 'CodeOutlined',
+    children: [
+      {
+        key: 'nextjs',
+        label: 'Next.js',
+        description: 'The React framework powering ReactPress public sites and themes.',
+        url: 'https://nextjs.org/',
+      },
+      {
+        key: 'nestjs',
+        label: 'NestJS',
+        description: 'The backend framework behind the ReactPress REST API.',
+        url: 'https://nestjs.com/',
+      },
+      {
+        key: 'antd',
+        label: 'Ant Design',
+        description: 'UI components used in the ReactPress admin console.',
+        url: 'https://ant.design/',
+      },
+      {
+        key: 'theme-starter',
+        label: 'Theme Starter',
+        description: 'Official Next.js App Router theme starter for ReactPress visitor sites.',
+        url: 'https://github.com/fecommunity/reactpress-theme-starter',
+      },
+    ],
+  },
+]
+
+const mockUrlConfigZh = [
+  {
+    key: 'reactpress',
+    label: 'ReactPress',
+    icon: 'GlobalOutlined',
+    children: [
+      {
+        key: 'rp-github',
+        label: 'GitHub',
+        description: '官方开源仓库 — CLI、管理端、API、模板与工具包。',
+        url: REACTPRESS_GITHUB,
+      },
+      {
+        key: 'rp-site',
+        label: '官方网站',
+        description: '产品概览、3.0 亮点、平台能力与文档入口。',
+        url: REACTPRESS_SITE,
+      },
+      {
+        key: 'rp-demo',
+        label: '在线演示',
+        description: '查看正在运行的 ReactPress 访客站与管理后台。',
+        url: REACTPRESS_DEMO,
+      },
+      {
+        key: 'rp-npm',
+        label: 'npm CLI',
+        description: '全局安装 @fecommunity/reactpress，几分钟内启动 CMS。',
+        url: REACTPRESS_NPM,
+      },
+    ],
+  },
+  {
+    key: 'docs-community',
+    label: '文档与社区',
+    icon: 'BookOutlined',
+    children: [
+      {
+        key: 'rp-tutorial',
+        label: '教程',
+        description: '安装、初始化与发布的分步指南。',
+        url: `${REACTPRESS_SITE}docs/tutorial`,
+      },
+      {
+        key: 'rp-blog',
+        label: '博客',
+        description: '产品更新、版本说明与内容发布实践。',
+        url: `${REACTPRESS_SITE}blog`,
+      },
+      {
+        key: 'stackoverflow',
+        label: 'Stack Overflow',
+        description: 'ReactPress 开发者社区问答。',
+        url: 'https://stackoverflow.com/questions/tagged/reactpress',
+      },
+      {
+        key: 'fecommunity',
+        label: 'FECommunity',
+        description: 'GitHub 上的 ReactPress 开源组织。',
+        url: 'https://github.com/fecommunity',
+      },
+    ],
+  },
+  {
+    key: 'tech-stack',
+    label: '技术栈',
+    icon: 'CodeOutlined',
+    children: [
+      {
+        key: 'nextjs',
+        label: 'Next.js',
+        description: '驱动 ReactPress 访客站与主题的 React 框架。',
+        url: 'https://nextjs.org/',
+      },
+      {
+        key: 'nestjs',
+        label: 'NestJS',
+        description: 'ReactPress REST API 的后端框架。',
+        url: 'https://nestjs.com/',
+      },
+      {
+        key: 'antd',
+        label: 'Ant Design',
+        description: 'ReactPress 管理端使用的 UI 组件库。',
+        url: 'https://ant.design/',
+      },
+      {
+        key: 'theme-starter',
+        label: '主题模板',
+        description: '官方 Next.js App Router 访客站主题 Starter。',
+        url: 'https://github.com/fecommunity/reactpress-theme-starter',
+      },
+    ],
+  },
+]
+
+const mockThemeConfig = {
+  header: {
+    navLinks: [
+      { path: '/', locale: 'home', icon: 'HomeOutlined', visible: true },
+      { path: '/archives', locale: 'archives', icon: 'HistoryOutlined', visible: true },
+      { path: '/search', locale: 'search', icon: 'SearchOutlined', visible: true },
+    ],
+  },
+}
+
+const mockGlobalConfigBundleEn = {
+  globalConfig: {
+    navConfig: mockSearchCategoriesEn,
+    urlConfig: mockUrlConfigEn,
+  },
+}
+
+const mockGlobalConfigBundleZh = {
+  globalConfig: {
+    navConfig: mockSearchCategoriesZh,
+    urlConfig: mockUrlConfigZh,
+  },
+}
+
+export const mockSetting = {
+  systemTitle: 'ReactPress',
+  systemSubTitle: 'One package. Your CMS in about a minute.',
+  systemUrl: REACTPRESS_SITE,
+  aboutUsGithubUrl: REACTPRESS_GITHUB,
+  seoDesc:
+    'ReactPress is a modern publishing platform for blogs, company sites, and content-driven products. Install the CLI once, run init and dev, and get a public site, admin console, and API.',
+  seoKeyword: 'reactpress,cms,blog,nextjs,nestjs,headless,cli,mysql,vercel,open source,publishing',
+  systemFooterInfo:
+    '<p>ReactPress — a modern publishing platform built with Next.js, NestJS, and Ant Design. <a href="https://github.com/fecommunity/reactpress" rel="noopener noreferrer">Star us on GitHub</a> · <a href="https://reactpress.surge.sh/" rel="noopener noreferrer">Official site</a></p>',
+  i18n: JSON.stringify({
+    en: {
+      suggestions: 'Suggestions',
+      archives: 'Archives',
+      tags: 'Tags',
+      search: 'Search',
+      tagTitle: 'Tags',
+      empty: 'No data',
+      homeTitle: 'Home',
+      comment: 'Comments',
+      recommendToReading: 'Recommended Readings',
+      articleCover: 'Cover',
+      totalSearch: 'Found',
+      piece: 'results',
+      searchArticle: 'Search Articles',
+      searchArticlePlaceholder: 'Search ReactPress articles…',
+      gettingArticle: 'Fetching articles…',
+      aboutUsFallback:
+        'ReactPress — one package, one minute to your own CMS. Public site, admin, and API ready to go.',
+    },
+    zh: {
+      suggestions: '建议反馈',
+      archives: '归档',
+      tags: '标签',
+      search: '搜索',
+      tagTitle: '标签',
+      empty: '暂无数据',
+      homeTitle: '首页',
+      comment: '评论',
+      recommendToReading: '推荐阅读',
+      articleCover: '封面',
+      totalSearch: '共找到',
+      piece: '条结果',
+      searchArticle: '搜索文章',
+      searchArticlePlaceholder: '搜索 ReactPress 相关文章…',
+      gettingArticle: '正在获取文章…',
+      nav: '网址导航',
+      aboutUsFallback:
+        'ReactPress — 一个包，一分钟搭建属于你的 CMS。访客站、管理端与 API 开箱即用。',
+    },
+  }),
+  globalSetting: JSON.stringify({
+    en: mockGlobalConfigBundleEn,
+    zh: mockGlobalConfigBundleZh,
+    theme: {
+      activeTheme: 'reactpress-theme-starter',
+      installedThemes: ['reactpress-theme-starter'],
+      mods: {},
+    },
+    config: {
+      'reactpress-theme-starter': mockThemeConfig,
+    },
+  }),
+}
+
+export const mockCategories = [
+  {
+    id: 'quick-start',
+    value: 'quick-start',
+    label: 'Quick Start',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(1),
+  },
+  {
+    id: 'platform',
+    value: 'platform',
+    label: 'Platform',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(2),
+  },
+  {
+    id: 'cli-deploy',
+    value: 'cli-deploy',
+    label: 'CLI & Deploy',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(3),
+  },
+]
+
+export const mockTags = [
+  {
+    value: 'reactpress',
+    label: 'ReactPress',
+    articleCount: 6,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(1),
+  },
+  {
+    value: 'cli',
+    label: 'CLI',
+    articleCount: 3,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(1),
+  },
+  {
+    value: 'nextjs',
+    label: 'Next.js',
+    articleCount: 4,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(1),
+  },
+  {
+    value: 'nestjs',
+    label: 'NestJS',
+    articleCount: 3,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(2),
+  },
+  {
+    value: 'headless-cms',
+    label: 'Headless CMS',
+    articleCount: 4,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(2),
+  },
+  {
+    value: 'cms',
+    label: 'CMS',
+    articleCount: 5,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(2),
+  },
+  {
+    value: 'mysql',
+    label: 'MySQL',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(3),
+  },
+  {
+    value: 'docker',
+    label: 'Docker',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(3),
+  },
+  {
+    value: 'vercel',
+    label: 'Vercel',
+    articleCount: 2,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(4),
+  },
+  {
+    value: 'open-source',
+    label: 'Open Source',
+    articleCount: 3,
+    articles: [],
+    createAt: daysAgo(30),
+    updateAt: daysAgo(4),
+  },
+]
+
+const tag = (value: string) => mockTags.find((item) => item.value === value) ?? mockTags[0]
+
+const whatIsReactPressHtml = `
+${mockFigure(mockImages.logo, 'ReactPress technical architecture — CLI, NestJS API, MySQL, admin, and headless themes', 'Official architecture overview · reactpress.surge.sh')}
+<h2>ReactPress Technical Architecture</h2>
+<p><strong>ReactPress</strong> is a monolithic-yet-modular publishing platform: one CLI bootstraps a NestJS API, MySQL database, built-in admin console, and optional headless visitor themes. Content is authored once in the admin and consumed everywhere through a stable REST envelope <code>{ "success": true, "data": ... }</code>.</p>
+<p><img src="${mockImages.logo}" alt="ReactPress logo — atom mark with letter P" width="200" loading="lazy" /></p>
+<blockquote><p><strong>One backend, many presentation layers.</strong> The same API powers the bundled admin UI, official themes, and your custom Next.js frontends.</p></blockquote>
+<h3>Core layers</h3>
+<table>
+  <thead><tr><th>Layer</th><th>Technology</th><th>Role</th></tr></thead>
+  <tbody>
+    <tr><td>CLI</td><td><code>@fecommunity/reactpress</code></td><td><code>init</code>, <code>dev</code>, <code>build</code>, <code>doctor</code>, <code>status</code></td></tr>
+    <tr><td>API Server</td><td>NestJS</td><td>REST on <code>:3002/api</code> — articles, pages, media, settings</td></tr>
+    <tr><td>Database</td><td>MySQL</td><td>Persistent content store (Docker by default)</td></tr>
+    <tr><td>Admin</td><td>Next.js + Ant Design</td><td>Authoring UI at <code>/admin</code></td></tr>
+    <tr><td>Visitor theme</td><td>Next.js App Router</td><td>Headless SSR via <code>@fecommunity/reactpress-toolkit</code></td></tr>
+  </tbody>
+</table>
+${mockFigure(mockImages.logoFull, 'ReactPress architecture stack diagram', 'From CLI to NestJS API, admin console, and Theme Starter')}
+<h3>Learn more</h3>
+<ul>
+  <li><a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a> — product overview and documentation</li>
+  <li><a href="${REACTPRESS_GITHUB}" rel="noopener noreferrer">GitHub repository</a> — CLI, server, client, toolkit, templates</li>
+  <li><a href="${THEME_STARTER_GITHUB}" rel="noopener noreferrer">Theme Starter</a> — official headless visitor theme (this repo)</li>
+</ul>
+`.trim()
+
+const quickStartHtml = `
+${mockFigure(mockImages.logo, 'Quick Start with ReactPress CLI', 'Three commands to spin up visitor site, admin, and API')}
+<h2>Quick Start</h2>
+<p>The CLI orchestrates every service in the ReactPress architecture. After a global install, <code>init</code> writes project config and <code>dev</code> starts the API, admin, and default visitor site together.</p>
+<h3>Prerequisites</h3>
+<ul>
+  <li><strong>Node.js 18+</strong> — required for the CLI</li>
+  <li><strong>Docker</strong> — recommended; default bundled MySQL runs in a container</li>
+  <li><strong>MySQL</strong> — optional; use your own instance instead of Docker</li>
+</ul>
+<h3>Install and run</h3>
+<pre><code>npm i -g @fecommunity/reactpress@3
+mkdir reactpress-theme-starter &amp;&amp; cd reactpress-theme-starter
+reactpress init
+reactpress dev</code></pre>
+<p>When <code>dev</code> is ready, open the URLs printed in the terminal:</p>
+<table>
+  <thead><tr><th>Service</th><th>Typical URL</th></tr></thead>
+  <tbody>
+    <tr><td>Public site</td><td>http://localhost:3001</td></tr>
+    <tr><td>Admin</td><td>http://localhost:3001/admin</td></tr>
+    <tr><td>API health</td><td>http://localhost:3002/api/health</td></tr>
+  </tbody>
+</table>
+<h3>Tips</h3>
+<ul>
+  <li>Run <code>reactpress</code> with no arguments for the interactive menu.</li>
+  <li>Run <code>reactpress doctor</code> or <code>reactpress status</code> if something does not look right.</li>
+</ul>
+`.trim()
+
+const platformCapabilitiesHtml = `
+${mockFigure(mockImages.logoFull, 'ReactPress architecture stack', 'CLI → NestJS + MySQL → Admin UI + headless Theme Starter')}
+<h2>Architecture in Detail</h2>
+<p>ReactPress separates <strong>content management</strong> (NestJS + MySQL + admin) from <strong>presentation</strong> (visitor themes). The REST API is the contract between both sides.</p>
+<h3>Request flow (headless mode)</h3>
+<ol>
+  <li>Editor publishes an article in the admin console.</li>
+  <li>NestJS persists content to MySQL and exposes it at <code>GET /api/article/:id</code>.</li>
+  <li>Theme Starter fetches via <code>themeApi</code> during SSR and renders App Router pages with ISR.</li>
+  <li>Browser receives HTML; subsequent navigations hydrate client components from the toolkit.</li>
+</ol>
+<h3>Monorepo packages</h3>
+<ul>
+  <li><strong>CLI</strong> — project lifecycle and local orchestration</li>
+  <li><strong>Server</strong> — NestJS modules for articles, categories, tags, pages, comments, knowledge, media</li>
+  <li><strong>Client</strong> — bundled admin and default visitor UI</li>
+  <li><strong>Toolkit</strong> — <code>@fecommunity/reactpress-toolkit</code> for third-party themes</li>
+  <li><strong>Theme Starter</strong> — reference headless implementation (this repository)</li>
+</ul>
+<h3>Headless entry point</h3>
+<p>Run <code>reactpress dev --api-only</code> when you only need the API and connect a custom theme such as Theme Starter with <code>pnpm dev</code>.</p>
+<p>Documentation: <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a></p>
+`.trim()
+
+const cliReferenceHtml = `
+${mockFigure(mockImages.logo, 'ReactPress CLI workflow', 'Every command starts from the terminal after a global install')}
+<h2>CLI Reference</h2>
+<p>After a global install, every workflow starts from the terminal.</p>
+<p><img src="${mockImages.logo}" alt="ReactPress" width="180" loading="lazy" /></p>
+<pre><code>npm i -g @fecommunity/reactpress@3</code></pre>
+<table>
+  <thead><tr><th>Command</th><th>Description</th></tr></thead>
+  <tbody>
+    <tr><td><code>reactpress</code></td><td>Interactive menu</td></tr>
+    <tr><td><code>reactpress init</code></td><td>Set up a new project (config + .env)</td></tr>
+    <tr><td><code>reactpress dev</code></td><td>Run site + admin + API locally</td></tr>
+    <tr><td><code>reactpress dev --api-only</code></td><td>API only — for custom frontends</td></tr>
+    <tr><td><code>reactpress doctor</code></td><td>Check your environment</td></tr>
+    <tr><td><code>reactpress status</code></td><td>See what is running</td></tr>
+    <tr><td><code>reactpress build</code></td><td>Production build</td></tr>
+    <tr><td><code>reactpress start</code></td><td>Run production build</td></tr>
+  </tbody>
+</table>
+<p>The monorepo on <a href="${REACTPRESS_GITHUB}" rel="noopener noreferrer">GitHub</a> contains the CLI, client, server, toolkit, and templates. Contributors use <code>pnpm install</code> and <code>pnpm run dev</code> to develop the platform itself.</p>
+`.trim()
+
+const deployHtml = `
+${mockFigure(mockImages.icon, 'Headless theme deployment', 'Theme Starter on Vercel · ReactPress API on your infrastructure')}
+<h2>Deploy ReactPress</h2>
+<p>Production deployment can be monolithic (CLI <code>build</code> + <code>start</code>) or split: NestJS API on your server, Theme Starter on Vercel.</p>
+<h3>Production commands</h3>
+<pre><code>npm i -g @fecommunity/reactpress@3
+reactpress build
+reactpress start</code></pre>
+<p>Deploy with Vercel, PM2, Docker, or your preferred hosting. The public site, admin console, and API can run together or split across services in headless mode.</p>
+<h3>Theme Starter on Vercel</h3>
+<p>This repository deploys as a headless frontend. Point <code>REACTPRESS_API_URL</code> and <code>CLIENT_SITE_URL</code> at your ReactPress instance, or use <code>build:mock</code> for a demo without a backend. See <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a> for deployment guides.</p>
+<h3>Resources</h3>
+<ul>
+  <li><a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a> — official documentation</li>
+  <li><a href="${REACTPRESS_GITHUB}/blob/master/README.md" rel="noopener noreferrer">README</a> — deployment details for Docker and monorepos</li>
+</ul>
+`.trim()
+
+const themeStarterHtml = `
+${mockFigure(mockImages.logoFull, 'ReactPress Theme Starter — official headless visitor theme', 'Next.js 15 · Tailwind 4 · toolkit · mock mode · Vercel')}
+<h2>ReactPress Theme Starter</h2>
+<p>This repository is the <strong>official headless visitor theme</strong> for ReactPress. It does not store content locally — every page is rendered from the ReactPress REST API (or built-in mock API during development).</p>
+<h3>Project structure</h3>
+<pre><code>app/              # App Router pages (home, article, category, search…)
+components/       # Layout, article, comment, search UI
+lib/reactpress/   # bootstrap, metadata, SEO, providers
+lib/mock-api/     # Offline mock data for pnpm dev:mock
+theme.json        # Template map + appearance panel schema</code></pre>
+<h3>Data integration</h3>
+<p>Server components call <code>fetch*PageProps(themeApi, …)</code> from <code>@fecommunity/reactpress-toolkit/theme/server</code>. Client islands use hooks and providers from <code>@fecommunity/reactpress-toolkit/ui</code>. All API responses follow <code>{ "success": true, "data": ... }</code>.</p>
+${mockFigure(mockImages.icon, 'Headless deployment — API and theme on separate hosts', 'Production: remote API + Vercel theme · Demo: REACTPRESS_MOCK_API=1')}
+<h3>Development modes</h3>
+<ul>
+  <li><code>pnpm dev:mock</code> — built-in mock API, no backend required (used by Vercel demo)</li>
+  <li><code>pnpm dev</code> — connect to local or remote ReactPress API</li>
+  <li><code>pnpm build:mock</code> — CI / demo production build with mock data</li>
+</ul>
+<h3>Appearance</h3>
+<p>Light/dark mode and primary colors are driven by <code>theme.json</code> appearance settings (defaults: rose primary <code>#e11d48</code>, white / dark gray backgrounds) and applied at runtime via CSS variables.</p>
+<p>Repository: <a href="${THEME_STARTER_GITHUB}" rel="noopener noreferrer">github.com/fecommunity/reactpress-theme-starter</a> · Docs: <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a></p>
+`.trim()
+
+const suggestionsHtml = `
+${mockFigure(mockImages.logo, 'ReactPress community feedback', 'Help us improve ReactPress and this theme starter')}
+<p>Thank you for using ReactPress. We welcome your ideas, bug reports, and documentation feedback.</p>
+<h2>Share your thoughts</h2>
+<ul>
+<li>Report bugs or UX issues on the <a href="${REACTPRESS_GITHUB}/issues" rel="noopener noreferrer">GitHub issue tracker</a>.</li>
+<li>Suggest features for the CLI, admin console, or theme toolkit.</li>
+<li>Share deployment guides for platforms beyond Vercel.</li>
+<li>Tell us which documentation topics need clearer examples.</li>
+</ul>
+<h2>Contributing</h2>
+<p>ReactPress is open source under the MIT license. Fork the repository, run <code>pnpm install</code> and <code>pnpm run dev</code>, and open a pull request. Meaningful contributions are credited in the README.</p>
+<h2>Related reading</h2>
+<ul>
+<li><a href="/article/what-is-reactpress/">ReactPress Technical Architecture</a></li>
+<li><a href="/article/quick-start/">Quick Start with ReactPress</a></li>
+<li><a href="${REACTPRESS_SITE}" rel="noopener noreferrer">Official documentation</a></li>
+<li><a href="${REACTPRESS_GITHUB}" rel="noopener noreferrer">GitHub repository</a></li>
+</ul>
+`.trim()
+
+export const mockArticles = [
+  {
+    id: 'what-is-reactpress',
+    title: 'ReactPress Technical Architecture',
+    summary:
+      'CLI, NestJS API, MySQL, admin console, and headless themes — how ReactPress splits content management from presentation.',
+    content: whatIsReactPressHtml.replace(/<[^>]+>/g, ' '),
+    html: whatIsReactPressHtml,
+    toc: '',
+    cover: mockImages.logo,
+    status: 'publish',
+    publishAt: daysAgo(1),
+    updateAt: daysAgo(1),
+    createAt: daysAgo(1),
+    category: mockCategories[0],
+    tags: [tag('reactpress'), tag('cms'), tag('open-source'), tag('headless-cms')],
+    views: 6890,
+    likes: 128,
+    isRecommended: true,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+  {
+    id: 'quick-start',
+    title: 'Quick Start with ReactPress',
+    summary:
+      'Install @fecommunity/reactpress@3 globally, run init and dev, and open your public site, admin, and API locally.',
+    content: quickStartHtml.replace(/<[^>]+>/g, ' '),
+    html: quickStartHtml,
+    toc: '',
+    cover: mockImages.logo,
+    status: 'publish',
+    publishAt: daysAgo(3),
+    updateAt: daysAgo(2),
+    createAt: daysAgo(10),
+    category: mockCategories[0],
+    tags: [tag('reactpress'), tag('cli'), tag('docker'), tag('mysql')],
+    views: 4520,
+    likes: 96,
+    isRecommended: true,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+  {
+    id: 'platform-capabilities',
+    title: 'ReactPress Architecture in Detail',
+    summary:
+      'Request flow from admin to REST API to Theme Starter SSR — monorepo packages and headless mode explained.',
+    content: platformCapabilitiesHtml.replace(/<[^>]+>/g, ' '),
+    html: platformCapabilitiesHtml,
+    toc: '',
+    cover: mockImages.logoFull,
+    status: 'publish',
+    publishAt: daysAgo(7),
+    updateAt: daysAgo(5),
+    createAt: daysAgo(14),
+    category: mockCategories[1],
+    tags: [tag('reactpress'), tag('cms'), tag('headless-cms'), tag('nextjs')],
+    views: 3180,
+    likes: 72,
+    isRecommended: true,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+  {
+    id: 'cli-reference',
+    title: 'ReactPress CLI Reference',
+    summary:
+      'Interactive menu, init, dev, doctor, status, build, and start — every command you need from the terminal.',
+    content: cliReferenceHtml.replace(/<[^>]+>/g, ' '),
+    html: cliReferenceHtml,
+    toc: '',
+    cover: mockImages.icon,
+    status: 'publish',
+    publishAt: daysAgo(12),
+    updateAt: daysAgo(8),
+    createAt: daysAgo(20),
+    category: mockCategories[2],
+    tags: [tag('cli'), tag('reactpress'), tag('open-source'), tag('nestjs')],
+    views: 2140,
+    likes: 54,
+    isRecommended: true,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+  {
+    id: 'deploy-reactpress',
+    title: 'Deploy ReactPress to Production',
+    summary:
+      'Build and start your CMS for production. Deploy with Vercel, Docker, or PM2 — monolithic or headless.',
+    content: deployHtml.replace(/<[^>]+>/g, ' '),
+    html: deployHtml,
+    toc: '',
+    cover: mockImages.icon,
+    status: 'publish',
+    publishAt: daysAgo(15),
+    updateAt: daysAgo(10),
+    createAt: daysAgo(22),
+    category: mockCategories[2],
+    tags: [tag('vercel'), tag('docker'), tag('reactpress'), tag('cli')],
+    views: 1680,
+    likes: 41,
+    isRecommended: true,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+  {
+    id: 'theme-starter',
+    title: 'ReactPress Theme Starter Guide',
+    summary:
+      'Official headless visitor theme — App Router, toolkit integration, theme.json, mock mode, and Vercel deployment.',
+    content: themeStarterHtml.replace(/<[^>]+>/g, ' '),
+    html: themeStarterHtml,
+    toc: '',
+    cover: mockImages.logoFull,
+    status: 'publish',
+    publishAt: daysAgo(18),
+    updateAt: daysAgo(12),
+    createAt: daysAgo(25),
+    category: mockCategories[1],
+    tags: [tag('nextjs'), tag('headless-cms'), tag('reactpress'), tag('vercel')],
+    views: 1240,
+    likes: 33,
+    isRecommended: false,
+    password: '',
+    needPassword: false,
+    isCommentable: true,
+  },
+]
+
+export const mockRecommendedArticles = mockArticles.filter((article) => article.isRecommended)
+
+export const mockArticle = mockArticles[0]
+export const mockCategory = mockCategories[0]
+export const mockTag = mockTags[0]
+
+export const mockPages = [
+  {
+    id: 'suggestions',
+    cover: mockImages.logoFull,
+    name: 'Suggestions',
+    path: 'suggestions',
+    order: 0,
+    content: suggestionsHtml.replace(/<[^>]+>/g, ' '),
+    html: suggestionsHtml,
+    toc: '',
+    status: 'publish',
+    publishAt: daysAgo(30),
+    views: 256,
+    createAt: daysAgo(30),
+    updateAt: daysAgo(2),
+  },
+]
+
+export const mockPage = mockPages[0]
+
+export const mockArchives = {
+  [String(new Date().getFullYear())]: {
+    [String(new Date().getMonth() + 1).padStart(2, '0')]: mockArticles.map(
+      ({ id, title, publishAt }) => ({ id, title, publishAt })
+    ),
+  },
+}
+
+export const mockKnowledgeChapters = [
+  {
+    id: 'cli-overview',
+    parentId: 'reactpress-handbook',
+    order: 0,
+    title: 'CLI Overview',
+    cover: mockImages.logo,
+    summary: 'Commands for init, dev, doctor, status, build, and start.',
+    content: 'ReactPress CLI overview for developers.',
+    html: `${mockFigure(mockImages.logo, 'ReactPress CLI quick start', 'Global install, init, and dev')}<p>Install <code>@fecommunity/reactpress@3</code> globally and use the interactive menu or run commands directly from your terminal.</p><pre><code>npm i -g @fecommunity/reactpress@3
+reactpress init
+reactpress dev</code></pre><p><img src="${mockImages.logo}" alt="ReactPress logo" width="160" loading="lazy" /></p>`,
+    toc: '',
+    status: 'publish',
+    views: 42,
+    likes: 0,
+    isCommentable: false,
+    publishAt: daysAgo(20),
+    createAt: daysAgo(20),
+    updateAt: daysAgo(20),
+  },
+  {
+    id: 'api-endpoints',
+    parentId: 'reactpress-handbook',
+    order: 1,
+    title: 'REST API Endpoints',
+    cover: mockImages.logoFull,
+    summary: 'Articles, pages, settings, categories, tags, and media via JSON API.',
+    content: 'Core API endpoints for theme and integration developers.',
+    html: `${mockFigure(mockImages.logoFull, 'ReactPress REST API in the architecture', 'NestJS exposes JSON resources consumed by Theme Starter')}<p>The API runs on port <strong>3002</strong> by default. Health check: <code>GET /api/health</code>. All responses use the <code>{ success, data }</code> envelope consumed by <code>@fecommunity/reactpress-toolkit</code>.</p><table><thead><tr><th>Resource</th><th>Theme Starter usage</th></tr></thead><tbody><tr><td>Articles</td><td><code>app/article/[id]</code> SSR detail pages</td></tr><tr><td>Pages</td><td><code>app/page/[id]</code> custom CMS pages</td></tr><tr><td>Settings</td><td>Site title, SEO, navigation via providers</td></tr></tbody></table><p>See <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a> for full API reference.</p>`,
+    toc: '',
+    status: 'publish',
+    views: 36,
+    likes: 0,
+    isCommentable: false,
+    publishAt: daysAgo(15),
+    createAt: daysAgo(15),
+    updateAt: daysAgo(15),
+  },
+  {
+    id: 'theme-development',
+    parentId: 'reactpress-handbook',
+    order: 2,
+    title: 'Theme Development',
+    cover: mockImages.logoFull,
+    summary: 'Build visitor sites with theme.json, App Router, and the toolkit.',
+    content: 'Guide to building custom ReactPress themes.',
+    html: `${mockFigure(mockImages.logoFull, 'ReactPress Theme Starter', 'Official headless visitor theme for ReactPress')}<p>Start from <a href="${THEME_STARTER_GITHUB}">reactpress-theme-starter</a>. Map routes in <code>theme.json</code> templates and fetch content via <code>themeApi</code> during SSR.</p><ul><li><code>pnpm dev:mock</code> — offline preview with built-in mock API</li><li><code>pnpm dev</code> — connect to a live ReactPress instance</li><li><code>pnpm build:mock</code> — CI-friendly production build</li></ul><p>Docs: <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a></p>`,
+    toc: '',
+    status: 'publish',
+    views: 28,
+    likes: 0,
+    isCommentable: false,
+    publishAt: daysAgo(10),
+    createAt: daysAgo(10),
+    updateAt: daysAgo(10),
+  },
+]
+
+export const mockKnowledgeBooks = [
+  {
+    id: 'reactpress-handbook',
+    parentId: '',
+    order: 0,
+    title: 'ReactPress Handbook',
+    cover: mockImages.logo,
+    summary: 'CLI, API, and theme development essentials for ReactPress.',
+    content: 'ReactPress handbook overview.',
+    html: `${mockFigure(mockImages.logo, 'ReactPress Handbook', 'Architecture, API, and Theme Starter essentials')}<p>Everything you need to publish with ReactPress — from <code>reactpress init</code> to headless Theme Starter deployment. Official site: <a href="${REACTPRESS_SITE}" rel="noopener noreferrer">reactpress.surge.sh</a></p>`,
+    toc: '',
+    status: 'publish',
+    views: 128,
+    likes: 0,
+    isCommentable: false,
+    publishAt: daysAgo(30),
+    createAt: daysAgo(30),
+    updateAt: daysAgo(30),
+    children: mockKnowledgeChapters,
+  },
+]
+
+export const mockKnowledgeItems = [...mockKnowledgeBooks, ...mockKnowledgeChapters]
+
+export function getMockKnowledgeById(id: string) {
+  const item = mockKnowledgeItems.find((entry) => entry.id === id)
+  if (!item) return mockKnowledgeBooks[0] ?? null
+  if (!item.parentId) {
+    return {
+      ...item,
+      children: mockKnowledgeChapters.filter((chapter) => chapter.parentId === item.id),
+    }
+  }
+  return item
+}
+
+export function getMockArticleById(id: string) {
+  return mockArticles.find((article) => article.id === id) ?? mockArticles[0]
+}
+
+export function getMockPageById(id: string) {
+  return mockPages.find((page) => page.id === id || page.path === id) ?? mockPage
+}
+
+export function getMockCategoryByValue(value: string) {
+  return mockCategories.find((category) => category.value === value) ?? mockCategories[0]
+}
+
+export function getMockTagByValue(value: string) {
+  return mockTags.find((item) => item.value === value) ?? mockTags[0]
+}
+
+export function filterMockArticlesByCategory(value: string) {
+  return mockArticles.filter((article) => article.category?.value === value)
+}
+
+export function filterMockArticlesByTag(value: string) {
+  return mockArticles.filter((article) =>
+    article.tags?.some((item: { value?: string }) => item.value === value)
+  )
+}
+
+export function searchMockArticles(keyword: string) {
+  const trimmed = keyword.trim().toLowerCase()
+  if (!trimmed) return []
+
+  const terms = trimmed.split(/\s+/).filter((term) => term.length >= 2)
+  if (!terms.length) return []
+
+  return mockArticles.filter((article) => {
+    const fields = [
+      article.title,
+      article.summary,
+      article.id,
+      article.category?.label,
+      article.category?.value,
+      ...(article.tags?.map((item: { label?: string; value?: string }) =>
+        [item.label, item.value].filter(Boolean).join(' ')
+      ) ?? []),
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+
+    return terms.every((term) => fields.includes(term))
+  })
+}