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

refactor: make MDX export a flat TOC list instead of tree (#6729)

Browse source
This commit is contained in:
Joshua Chen 2022-02-23 22:12:04 +08:00 • committed by GitHub
parent 2d93750caf
commit c3370be64d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 312 additions and 445 deletions
Download patch file Download diff file Expand all files Collapse all files

67
website/docs/guides/markdown-features/markdown-features-inline-toc.mdx
View file

@ -35,33 +35,30 @@ import TOCInline from '@theme/TOCInline';
## Custom table of contents {#custom-table-of-contents}
The `toc` props is just a list of table of contents items:
The `toc` prop is just a list of heading items:
```ts
type TOCItem = {
value: string;
id: string;
children: TOCItem[];
level: number;
};
```
You can create this TOC tree manually, or derive a new TOC tree from the `toc` variable:
Note that the `toc` global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree.
```jsx
import TOCInline from '@theme/TOCInline';
<TOCInline
toc={
// Only show 3th and 5th top-level heading
[toc[2], toc[4]]
}
// Only show h2 and h4 headings
toc={toc.filter((node) => node.level === 2 || node.level === 4)}
/>;
```
```mdx-code-block
<BrowserWindow>
<TOCInline toc={[toc[2], toc[4]]} />
<TOCInline toc={toc.filter((node) => node.level === 2 || node.level === 4)} />
</BrowserWindow>
```
@ -81,14 +78,32 @@ Lorem ipsum
Lorem ipsum
#### Example subsubsection 1 a I
#### Example subsubsection 1 a II
#### Example subsubsection 1 a III
### Example Subsection 1 b {#example-subsection-1-b}
Lorem ipsum
#### Example subsubsection 1 b I
#### Example subsubsection 1 b II
#### Example subsubsection 1 b III
### Example Subsection 1 c {#example-subsection-1-c}
Lorem ipsum
#### Example subsubsection 1 c I
#### Example subsubsection 1 c II
#### Example subsubsection 1 c III
## Example Section 2 {#example-section-2}
Lorem ipsum
@ -97,14 +112,32 @@ Lorem ipsum
Lorem ipsum
#### Example subsubsection 2 a I
#### Example subsubsection 2 a II
#### Example subsubsection 2 a III
### Example Subsection 2 b {#example-subsection-2-b}
Lorem ipsum
#### Example subsubsection 2 b I
#### Example subsubsection 2 b II
#### Example subsubsection 2 b III
### Example Subsection 2 c {#example-subsection-2-c}
Lorem ipsum
#### Example subsubsection 2 c I
#### Example subsubsection 2 c II
#### Example subsubsection 2 c III
## Example Section 3 {#example-section-3}
Lorem ipsum
@ -113,10 +146,28 @@ Lorem ipsum
Lorem ipsum
#### Example subsubsection 3 a I
#### Example subsubsection 3 a II
#### Example subsubsection 3 a III
### Example Subsection 3 b {#example-subsection-3-b}
Lorem ipsum
#### Example subsubsection 3 b I
#### Example subsubsection 3 b II
#### Example subsubsection 3 b III
### Example Subsection 3 c {#example-subsection-3-c}
Lorem ipsum
#### Example subsubsection 3 c I
#### Example subsubsection 3 c II
#### Example subsubsection 3 c III