refactor: redesign admonitions/callouts/quotes (#5193)

* prepare admonitions redesign

* Docusaurus admonition cleanup

* cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links

* cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links

* update Infima with new alerts
This commit is contained in:
Sébastien Lorber 2021-07-23 17:10:38 +02:00 committed by GitHub
parent 24156efcfb
commit 083037d7a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 104 additions and 47 deletions

View file

@ -11,61 +11,61 @@ Example:
:::note
The content and title *can* include markdown.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::tip You can specify an optional title
:::tip
Heads up! Here's a pro-tip.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::info
Useful information.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::caution
Warning! You better pay attention!
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::danger
Danger danger, mayday!
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::note
The content and title _can_ include markdown.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::tip You can specify an optional title
:::tip
Heads up! Here's a pro-tip.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::info
Useful information.
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::caution
Warning! You better pay attention!
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
:::danger
Danger danger, mayday!
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
:::
@ -75,12 +75,61 @@ You may also specify an optional title
:::note Your Title
The content and title *can* include markdown.
Some **content** with _markdown_ `syntax`.
:::
:::note Your Title
The content and title _can_ include Markdown.
Some **content** with _markdown_ `syntax`.
:::
## Admonitions with MDX
You can use MDX inside admonitions too!
```mdx
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
:::tip Use tabs in admonitions
<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>
:::
```
```mdx-code-block
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
```
:::tip Use tabs in admonitions
```mdx-code-block
<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>
```
:::