3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-14 09:37:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Sébastien Lorber 2020-10-03 17:33:36 +02:00 • committed by GitHub
parent 0951eef2d7
commit 637fe0087d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts vendored
View file

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

30
packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
View file

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

1
website/docs/guides/creating-pages.md
View file

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