From 637fe0087d29ec59dee5f8f15c1efa8c0d01ca24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Sat, 3 Oct 2020 17:33:36 +0200
Subject: [PATCH] feat(v2): add TOC to markdown pages #3529

---
 .../src/plugin-content-pages.d.ts             |  1 +
 .../src/theme/MDXPage/index.tsx               | 30 +++++++++++++++----
 website/docs/guides/creating-pages.md         |  1 +
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts b/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts
index 7f5dc3fd57..57ef441323 100644
--- a/packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts
+++ b/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[];
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
index 4b960949e7..00dd4a7bf3 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
+++ b/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,10 +31,23 @@ function MDXPage(props: Props): JSX.Element {
       permalink={permalink}
       wrapperClassName={wrapperClassName}>
       <main>
-        <div className="container margin-vert--lg padding-vert--lg">
-          <MDXProvider components={MDXComponents}>
-            <MDXPageContent />
-          </MDXProvider>
+        <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>
diff --git a/website/docs/guides/creating-pages.md b/website/docs/guides/creating-pages.md
index 7eb77ab5b9..4c25f49327 100644
--- a/website/docs/guides/creating-pages.md
+++ b/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