feat(v2): add TOC to markdown pages #3529

packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts

@@ -14,6 +14,7 @@ declare module '@theme/MDXPage' {
         readonly title: string;
         readonly description: string;
         readonly wrapperClassName?: string;
+        readonly hide_table_of_contents?: string;
       };
       readonly metadata: {readonly permalink: string};
       readonly rightToc: readonly MarkdownRightTableOfContents[];

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -10,11 +10,18 @@ import Layout from '@theme/Layout';
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 import type {Props} from '@theme/MDXPage';
+import TOC from '@theme/TOC';
 
 function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {frontMatter, metadata} = MDXPageContent;
-  const {title, description, wrapperClassName} = frontMatter;
+
+  const {
+    title,
+    description,
+    wrapperClassName,
+    hide_table_of_contents: hideTableOfContents,
+  } = frontMatter;
   const {permalink} = metadata;
 
   return (
@@ -24,11 +31,24 @@ function MDXPage(props: Props): JSX.Element {
       permalink={permalink}
       wrapperClassName={wrapperClassName}>
       <main>
-        <div className="container margin-vert--lg padding-vert--lg">
+        <div className="container container--fluid">
+          <div className="margin-vert--lg padding-vert--lg">
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                <div className="container">
                   <MDXProvider components={MDXComponents}>
                     <MDXPageContent />
                   </MDXProvider>
                 </div>
+              </div>
+              {!hideTableOfContents && MDXPageContent.rightToc && (
+                <div className="col col--2">
+                  <TOC headings={MDXPageContent.rightToc} />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       </main>
     </Layout>
   );

website/docs/guides/creating-pages.md

@@ -58,6 +58,7 @@ Create a file `/src/pages/helloMarkdown.md`:
 ---
 title: my hello page title
 description: my hello page description
+hide_table_of_contents: true
 ---
 
 # Hello