3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-30 02:37:59 +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 = {
readonly Head: typeof Head;
readonly details: typeof MDXDetails;
readonly Details: typeof MDXDetails;
readonly code: typeof MDXCode;
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 = {
Head,
details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
Details: MDXDetails,
code: MDXCode,
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
## 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
Html comment: <!-- comment -->
Html comment multi-line:
<!--
comment
-->
<!-- prettier-ignore -->
MDX comment: {/* comment */}
MDX comment multi-line:
<!-- prettier-ignore -->
{/*
comment
*/}
## JSX syntax
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}
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';
<Tabs
defaultValue="apple"
values={[
{label: 'Apple', value: 'apple'},
{label: 'Orange', value: 'orange'},
{label: 'Banana', value: 'banana'},
]}>
<TabItem value="apple">This is an apple 🍎</TabItem>
<TabItem value="orange">This is an orange 🍊</TabItem>
<TabItem value="banana">This is a banana 🍌</TabItem>
<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>
## Comments
MDX comments can be used with
Html comment: <!-- comment -->
```mdx
{/* My comment */}
```
Html comment multi-line:
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
@ -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}
### Weird heading {#你好}

3
website/docusaurus.config.js
View file

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