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:
Sébastien Lorber 2020-12-11 16:30:53 +01:00 committed by GitHub
parent b11c24b752
commit 41ef333e47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 206 additions and 36 deletions

View file

@ -0,0 +1,85 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inline code should be escaped 1`] = `
"export const toc = [
{
value: '<code>&lt;Head /&gt;</code>',
id: 'head-',
children: [
{
value: '<code>&lt;Head&gt;Test&lt;/Head&gt;</code>',
id: 'headtesthead',
children: []
}
]
},
{
value: '<code>&lt;div /&gt;</code>',
id: 'div-',
children: []
},
{
value: '<code>&lt;div&gt; Test &lt;/div&gt;</code>',
id: 'div-test-div',
children: []
},
{
value: '<code>&lt;div&gt;&lt;i&gt;Test&lt;/i&gt;&lt;/div&gt;</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()\`
"
`;

View file

@ -0,0 +1,5 @@
# Ignore this
##
## ![](an-image.svg)

View file

@ -0,0 +1,9 @@
## `<Head />`
### `<Head>Test</Head>`
## `<div />`
## `<div> Test </div>`
## `<div><i>Test</i></div>`

View file

@ -0,0 +1,11 @@
import something from 'something';
import somethingElse from 'something-else';
## Title
## Test
### Again
Content.

View file

@ -0,0 +1,15 @@
### Endi
```md
## This is ignored
```
## Endi
Lorem ipsum
### Yangshun
Some content here
## I ♥ unicode.

View file

@ -0,0 +1,7 @@
export const toc = ['replaceMe'];
## Thanos
## Tony Stark
### Avengers

View file

@ -0,0 +1,9 @@
## _Emphasis_
### **Importance**
## ~~Strikethrough~~
## <i>HTML</i>
## `inline.code()`

View file

@ -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
##
## ![](an-image.svg)
"
`);
});