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

fix(theme): support details/summary in CommonMark + add md dogfood test cases (#9093)

Browse source
This commit is contained in:
Sébastien Lorber 2023-06-22 18:33:07 +02:00 • committed by GitHub
parent 7225d80271
commit 3b85f0713a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 183 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/src/theme-classic.d.ts vendored
View file

@ -893,6 +893,8 @@ declare module '@theme/MDXComponents' {
export type MDXComponentsObject = { export type MDXComponentsObject = {
readonly Head: typeof Head; readonly Head: typeof Head;
readonly details: typeof MDXDetails;
readonly Details: typeof MDXDetails; readonly Details: typeof MDXDetails;
readonly code: typeof MDXCode; readonly code: typeof MDXCode;
readonly a: typeof MDXA; readonly a: typeof MDXA;

1
packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
View file

@ -21,6 +21,7 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
const MDXComponents: MDXComponentsObject = { const MDXComponents: MDXComponentsObject = {
Head, Head,
details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
Details: MDXDetails, Details: MDXDetails,
code: MDXCode, code: MDXCode,
a: MDXA, a: MDXA,

137
website/_dogfooding/_pages tests/markdown-tests-md.md
View file

@ -8,13 +8,46 @@ wrapperClassName: docusaurus-markdown-example
This file should be interpreted in a more CommonMark compliant way This file should be interpreted in a more CommonMark compliant way
## SEO
```md
<head>
<title>HEAD Markdown Page tests title</title>
<meta name="keywords" content="cooking, blog">
</head>
```
<head>
<title>HEAD Markdown Page tests title</title>
<meta name="keywords" content="cooking, blog">
</head>
:::danger
TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
:::
## Comment ## Comment
Html comment: <!-- comment --> Html comment: <!-- comment -->
Html comment multi-line:
<!--
comment
-->
<!-- prettier-ignore --> <!-- prettier-ignore -->
MDX comment: {/* comment */} MDX comment: {/* comment */}
MDX comment multi-line:
<!-- prettier-ignore -->
{/*
comment
*/}
## JSX syntax ## JSX syntax
import BrowserWindow from '@site/src/components/BrowserWindow'; import BrowserWindow from '@site/src/components/BrowserWindow';
@ -39,6 +72,110 @@ note
::: :::
## Details
<details>
<summary>MD Summary</summary>
Our custom Details/Summary also works in CommonMark mode
</details>
## Tab
<tabs>
<tabItem value="apple" label="Apple" default>
This is an apple 🍎
</tabItem>
<tabItem value="orange" label="Orange">
This is an orange 🍊
</tabItem>
<tabItem value="banana" label="Banana">
This is a banana 🍌
</tabItem>
</tabs>
:::danger
TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
:::
## Code block test
```js title="Title"
function Clock(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {
var timerID = setInterval(() => tick(), 1000);
return function cleanup() {
clearInterval(timerID);
};
});
function tick() {
setDate(new Date());
}
return (
<div>
<h2>It is {date.toLocaleTimeString()}.</h2>
// highlight-start
{/* prettier-ignore */}
long long long long long long long long long long long long line
{/* prettier-ignore */}
// highlight-end
</div>
);
}
```
```jsx live
function Clock(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {
var timerID = setInterval(() => tick(), 1000);
return function cleanup() {
clearInterval(timerID);
};
});
function tick() {
setDate(new Date());
}
return (
<div>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
```
:::danger
TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
:::
## Mermaid
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Heading Id {#custom-heading-id} ## Heading Id {#custom-heading-id}
Custom heading syntax `{#custom-heading-id}` still works Custom heading syntax `{#custom-heading-id}` still works

56
website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
View file

@ -36,29 +36,37 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem'; import TabItem from '@theme/TabItem';
<Tabs <Tabs>
defaultValue="apple" <TabItem value="apple" label="Apple" default>
values={[ This is an apple 🍎
{label: 'Apple', value: 'apple'}, </TabItem>
{label: 'Orange', value: 'orange'}, <TabItem value="orange" label="Orange">
{label: 'Banana', value: 'banana'}, This is an orange 🍊
]}> </TabItem>
<TabItem value="apple">This is an apple 🍎</TabItem> <TabItem value="banana" label="Banana">
<TabItem value="orange">This is an orange 🍊</TabItem> This is a banana 🍌
<TabItem value="banana">This is a banana 🍌</TabItem> </TabItem>
</Tabs> </Tabs>
## Comments ## Comments
MDX comments can be used with Html comment: <!-- comment -->
```mdx Html comment multi-line:
{/* My comment */}
```
See, nothing is displayed: <!--
comment
-->
{/* My comment */} <!-- prettier-ignore -->
MDX comment: {/* comment */}
MDX comment multi-line:
<!-- prettier-ignore -->
{/*
comment
*/}
## Import code block from source code file ## Import code block from source code file
@ -164,6 +172,22 @@ function Clock(props) {
} }
``` ```
## Mermaid
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
## Custom heading ID {#custom} ## Custom heading ID {#custom}
### Weird heading {#你好} ### Weird heading {#你好}

3
website/docusaurus.config.js
View file

@ -162,6 +162,9 @@ module.exports = async function createConfigAsync() {
// comments: false, // comments: false,
}, },
preprocessor: ({filePath, fileContent}) => { preprocessor: ({filePath, fileContent}) => {
// TODO temporary quick fix for https://github.com/facebook/docusaurus/issues/9084
fileContent = fileContent.replaceAll('<!--\n', '<!-- \n');
if (isDev) { if (isDev) {
// "vscode://file/${projectPath}${filePath}:${line}:${column}", // "vscode://file/${projectPath}${filePath}:${line}:${column}",
// "webstorm://open?file=${projectPath}${filePath}&line=${line}&column=${column}", // "webstorm://open?file=${projectPath}${filePath}&line=${line}&column=${column}",