mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
feat(v2): inline table-of-contents + refactor TOC (#3904)
* Add TOCInline theme component * Add TOCInline theme component doc + migration guide * remove useless getPathsToWatch on classic theme * rename rightToc to toc * add temp theme-bootstrap TOCInline comp to fix build issue
This commit is contained in:
parent
b11c24b752
commit
41ef333e47
28 changed files with 206 additions and 36 deletions
|
@ -0,0 +1,85 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`inline code should be escaped 1`] = `
|
||||
"export const toc = [
|
||||
{
|
||||
value: '<code><Head /></code>',
|
||||
id: 'head-',
|
||||
children: [
|
||||
{
|
||||
value: '<code><Head>Test</Head></code>',
|
||||
id: 'headtesthead',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: '<code><div /></code>',
|
||||
id: 'div-',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: '<code><div> Test </div></code>',
|
||||
id: 'div-test-div',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: '<code><div><i>Test</i></div></code>',
|
||||
id: 'divitestidiv',
|
||||
children: []
|
||||
}
|
||||
];
|
||||
|
||||
## \`<Head />\`
|
||||
|
||||
### \`<Head>Test</Head>\`
|
||||
|
||||
## \`<div />\`
|
||||
|
||||
## \`<div> Test </div>\`
|
||||
|
||||
## \`<div><i>Test</i></div>\`
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`non text phrasing content 1`] = `
|
||||
"export const toc = [
|
||||
{
|
||||
value: '<em>Emphasis</em>',
|
||||
id: 'emphasis',
|
||||
children: [
|
||||
{
|
||||
value: '<strong>Importance</strong>',
|
||||
id: 'importance',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: '<del>Strikethrough</del>',
|
||||
id: 'strikethrough',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: '<i>HTML</i>',
|
||||
id: 'html',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: '<code>inline.code()</code>',
|
||||
id: 'inlinecode',
|
||||
children: []
|
||||
}
|
||||
];
|
||||
|
||||
## _Emphasis_
|
||||
|
||||
### **Importance**
|
||||
|
||||
## ~~Strikethrough~~
|
||||
|
||||
## <i>HTML</i>
|
||||
|
||||
## \`inline.code()\`
|
||||
"
|
||||
`;
|
|
@ -0,0 +1,5 @@
|
|||
# Ignore this
|
||||
|
||||
##
|
||||
|
||||
## 
|
|
@ -0,0 +1,9 @@
|
|||
## `<Head />`
|
||||
|
||||
### `<Head>Test</Head>`
|
||||
|
||||
## `<div />`
|
||||
|
||||
## `<div> Test </div>`
|
||||
|
||||
## `<div><i>Test</i></div>`
|
|
@ -0,0 +1,11 @@
|
|||
import something from 'something';
|
||||
|
||||
import somethingElse from 'something-else';
|
||||
|
||||
## Title
|
||||
|
||||
## Test
|
||||
|
||||
### Again
|
||||
|
||||
Content.
|
|
@ -0,0 +1,15 @@
|
|||
### Endi
|
||||
|
||||
```md
|
||||
## This is ignored
|
||||
```
|
||||
|
||||
## Endi
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Yangshun
|
||||
|
||||
Some content here
|
||||
|
||||
## I ♥ unicode.
|
|
@ -0,0 +1,7 @@
|
|||
export const toc = ['replaceMe'];
|
||||
|
||||
## Thanos
|
||||
|
||||
## Tony Stark
|
||||
|
||||
### Avengers
|
|
@ -0,0 +1,9 @@
|
|||
## _Emphasis_
|
||||
|
||||
### **Importance**
|
||||
|
||||
## ~~Strikethrough~~
|
||||
|
||||
## <i>HTML</i>
|
||||
|
||||
## `inline.code()`
|
|
@ -0,0 +1,212 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {join} from 'path';
|
||||
import remark from 'remark';
|
||||
import mdx from 'remark-mdx';
|
||||
import vfile from 'to-vfile';
|
||||
import plugin from '../index';
|
||||
import slug from '../../slug/index';
|
||||
|
||||
const processFixture = async (name, options) => {
|
||||
const path = join(__dirname, 'fixtures', `${name}.md`);
|
||||
const file = await vfile.read(path);
|
||||
const result = await remark()
|
||||
.use(slug)
|
||||
.use(mdx)
|
||||
.use(plugin, options)
|
||||
.process(file);
|
||||
|
||||
return result.toString();
|
||||
};
|
||||
|
||||
test('non text phrasing content', async () => {
|
||||
const result = await processFixture('non-text-content');
|
||||
expect(result).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('inline code should be escaped', async () => {
|
||||
const result = await processFixture('inline-code');
|
||||
expect(result).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('text content', async () => {
|
||||
const result = await processFixture('just-content');
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
"export const toc = [
|
||||
{
|
||||
value: 'Endi',
|
||||
id: 'endi',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: 'Endi',
|
||||
id: 'endi-1',
|
||||
children: [
|
||||
{
|
||||
value: 'Yangshun',
|
||||
id: 'yangshun',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'I ♥ unicode.',
|
||||
id: 'i--unicode',
|
||||
children: []
|
||||
}
|
||||
];
|
||||
|
||||
### Endi
|
||||
|
||||
\`\`\`md
|
||||
## This is ignored
|
||||
\`\`\`
|
||||
|
||||
## Endi
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Yangshun
|
||||
|
||||
Some content here
|
||||
|
||||
## I ♥ unicode.
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
test('should export even with existing name', async () => {
|
||||
const result = await processFixture('name-exist');
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
"export const toc = [
|
||||
{
|
||||
value: 'Thanos',
|
||||
id: 'thanos',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: 'Tony Stark',
|
||||
id: 'tony-stark',
|
||||
children: [
|
||||
{
|
||||
value: 'Avengers',
|
||||
id: 'avengers',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
## Thanos
|
||||
|
||||
## Tony Stark
|
||||
|
||||
### Avengers
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
test('should export with custom name', async () => {
|
||||
const options = {
|
||||
name: 'customName',
|
||||
};
|
||||
const result = await processFixture('just-content', options);
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
"export const customName = [
|
||||
{
|
||||
value: 'Endi',
|
||||
id: 'endi',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: 'Endi',
|
||||
id: 'endi-1',
|
||||
children: [
|
||||
{
|
||||
value: 'Yangshun',
|
||||
id: 'yangshun',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'I ♥ unicode.',
|
||||
id: 'i--unicode',
|
||||
children: []
|
||||
}
|
||||
];
|
||||
|
||||
### Endi
|
||||
|
||||
\`\`\`md
|
||||
## This is ignored
|
||||
\`\`\`
|
||||
|
||||
## Endi
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Yangshun
|
||||
|
||||
Some content here
|
||||
|
||||
## I ♥ unicode.
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
test('should insert below imports', async () => {
|
||||
const result = await processFixture('insert-below-imports');
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
"import something from 'something';
|
||||
|
||||
import somethingElse from 'something-else';
|
||||
|
||||
export const toc = [
|
||||
{
|
||||
value: 'Title',
|
||||
id: 'title',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
value: 'Test',
|
||||
id: 'test',
|
||||
children: [
|
||||
{
|
||||
value: 'Again',
|
||||
id: 'again',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
## Title
|
||||
|
||||
## Test
|
||||
|
||||
### Again
|
||||
|
||||
Content.
|
||||
"
|
||||
`);
|
||||
});
|
||||
|
||||
test('empty headings', async () => {
|
||||
const result = await processFixture('empty-headings');
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
"export const toc = [];
|
||||
|
||||
# Ignore this
|
||||
|
||||
##
|
||||
|
||||
## 
|
||||
"
|
||||
`);
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue