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

feat: details/summary theme / MDX component (#5216)

Browse source 
* Details component

* polish arrow animation

* fix text selection bug

* fix some edge cases + polish

* example of overriding baseClassName

* Move Details component to theme-common

* make component work even when JS is disabled or failed to load

* update arrow transform

* Details component: better handling of no-JS fallback mode: avoid delaying arrow navigation when JS (see review)

* prefix css vars with --docusaurus

* improve css arrow styling

* slightly change details/summary design

* better md doc + include quotes and details in doc
This commit is contained in:
Sébastien Lorber 2021-07-27 18:45:12 +02:00 • committed by GitHub
parent 798f634007
commit dc4664b489
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 378 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

34
website/docs/guides/markdown-features/markdown-features-react.mdx
View file

@ -1,11 +1,13 @@
---
id: react
title: Using React
title: MDX and React
description: Using the power of React in Docusaurus Markdown documents, thanks to MDX
slug: /markdown-features/react
---
```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';
```
## Using JSX in Markdown {#using-jsx-in-markdown}
@ -17,6 +19,14 @@ While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are t
:::
:::caution
MDX is not [100% compatible with CommonMark](https://github.com/facebook/docusaurus/issues/3018).
Use the **[MDX playground](https://mdxjs.com/playground)** to ensure that your syntax is valid MDX.
:::
Try this block here:
```jsx
@ -126,21 +136,27 @@ This feature is experimental and might be subject to API breaking changes in the
## Importing Markdown {#importing-markdown}
You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages. Below we are importing from [another file](./markdown-features-intro.mdx) and inserting it as a component.
You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages.
```jsx
import Intro from './markdown-features-intro.mdx';
By convention, using the **`_` filename prefix** will not create any doc page and means the markdown file is a **"partial"**, to be imported by other files.
<Intro />;
```md title="_markdown-partial-example.mdx"
<span>Hello {props.name}</span>
This is text some content from `_markdown-partial-example.mdx`.
```
```jsx title="someOtherDoc.mdx"
import PartialExample from './_markdown-partial-example.mdx';
<PartialExample name="Sebastien" />;
```
```mdx-code-block
import Intro from './markdown-features-intro.mdx';
import PartialExample from './_markdown-partial-example.mdx';
<BrowserWindow url="http://localhost:3000">
<Intro />
<PartialExample name="Sebastien" />
</BrowserWindow>
<br />