feat: correct toc

Author: xiaoyu2er

apps/docs/src/app/docs/[[...slug]]/page.tsx

@@ -2,7 +2,9 @@ import { DocsLayout } from '@/app/docs/[[...slug]]/docs.layout';
 import { getPage } from '@/lib/docs';
 import { createMetadata } from '@/lib/metadata';
 import { getPageTreePeers } from '@/lib/pageTree';
+import { getToc } from '@/lib/remark-plugins/toc';
 import { type DocsPage, type DocsSource, docs } from '@/lib/source';
+import { filterCotent } from '@/lib/toc';
 import { getDocId, getDocUrl, parseDocId } from '@/lib/utils';
 import { getMDXComponents } from '@/mdx-components';
 import { Identity } from '@/mdx/Identity';
@@ -25,25 +27,28 @@ export default async function Docs(props: {
   const page = getPage(docUrl);
   if (!page) notFound();
   const { isApp, isPages, isVLatest, version } = parseDocId(docId);
+  let content = page.data.content;
 
   let { body: MdxContent, toc } = await page.data.load();
-
-  // source: app/getting-started/installation
   const ref = page.data.source;
   if (ref) {
     const refUrl = getDocUrl(isVLatest ? ref : `${version}/${ref}`);
     const refPage = getPage(refUrl);
     if (!refPage) notFound();
-
     const { body: MdxContent2, toc: toc2 } = await refPage.data.load();
 
+    content = refPage.data.content;
     MdxContent = MdxContent2;
     toc = toc2;
   }
 
   const hasRelated = page.data.related;
   const isIndex = page.file.name === 'index';
 
+  if (isApp || isPages) {
+    toc = await getToc(filterCotent({ content, isApp, isPages }));
+  }
+
   return (
     <DocsLayout docId={docId} pageTree={docs.pageTree}>
       <UiDocsPage

apps/docs/src/lib/remark-plugins/toc.ts

@@ -0,0 +1,9 @@
+import { remarkHeading } from 'fumadocs-core/mdx-plugins';
+import type { TableOfContents } from 'fumadocs-core/server';
+import { remark } from 'remark';
+
+export async function getToc(content: string) {
+  const result = remark().use(remarkHeading).process(content);
+
+  return (await result).data.toc as TableOfContents;
+}

apps/docs/src/lib/toc.ts

@@ -0,0 +1,54 @@
+import type { TableOfContents } from 'fumadocs-core/server';
+
+export function filterCotent({
+  isApp,
+  isPages,
+  content,
+}: {
+  isApp: boolean;
+  isPages: boolean;
+  content: string;
+}) {
+  if (!isApp && !isPages) return content;
+  let finalContent = content;
+  if (isApp) {
+    finalContent = finalContent.replace(
+      /<PagesOnly>([\s\S]*?)<\/PagesOnly>/g,
+      '',
+    );
+  }
+  if (isPages) {
+    finalContent = finalContent.replace(/<AppOnly>([\s\S]*?)<\/AppOnly>/g, '');
+  }
+  return finalContent;
+}
+
+export function filterToc({
+  toc,
+  isApp,
+  isPages,
+  content,
+}: {
+  toc: TableOfContents;
+  isApp: boolean;
+  isPages: boolean;
+  content: string;
+}): TableOfContents {
+  if (!isApp && !isPages) return toc;
+  let finalContent = content;
+  if (isApp) {
+    finalContent = finalContent.replace(
+      /<PagesOnly>([\s\S]*?)<\/PagesOnly>/g,
+      '',
+    );
+  }
+  if (isPages) {
+    finalContent = finalContent.replace(/<AppOnly>([\s\S]*?)<\/AppOnly>/g, '');
+  }
+
+  console.log('filterToc finalContent', finalContent);
+  return toc.filter((item) => {
+    const heading = `${'#'.repeat(item.depth)} ${item.url.slice(1)}`;
+    return finalContent.includes(heading);
+  });
+}