mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-20 12:37:01 +02:00
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
GitHub
parent
24156efcfb
commit
083037d7a5
8 changed files with 104 additions and 47 deletions
|
|
@ -101,16 +101,6 @@ export default function pluginContentBlog(
|
|||
);
|
||||
},
|
||||
|
||||
getClientModules() {
|
||||
const modules = [];
|
||||
|
||||
if (options.admonitions) {
|
||||
modules.push(require.resolve('remark-admonitions/styles/infima.css'));
|
||||
}
|
||||
|
||||
return modules;
|
||||
},
|
||||
|
||||
// Fetches blog contents and returns metadata for the necessary routes.
|
||||
async loadContent() {
|
||||
const {postsPerPage, routeBasePath} = options;
|
||||
|
|
|
|||
|
|
@ -110,14 +110,6 @@ export default function pluginContentDocs(
|
|||
return getLoadedContentTranslationFiles(content);
|
||||
},
|
||||
|
||||
getClientModules() {
|
||||
const modules = [];
|
||||
if (options.admonitions) {
|
||||
modules.push(require.resolve('remark-admonitions/styles/infima.css'));
|
||||
}
|
||||
return modules;
|
||||
},
|
||||
|
||||
getPathsToWatch() {
|
||||
function getVersionPathsToWatch(version: VersionMetadata): string[] {
|
||||
const result = [
|
||||
|
|
|
|||
|
|
@ -93,16 +93,6 @@ export default function pluginContentPages(
|
|||
);
|
||||
},
|
||||
|
||||
getClientModules() {
|
||||
const modules = [];
|
||||
|
||||
if (options.admonitions) {
|
||||
modules.push(require.resolve('remark-admonitions/styles/infima.css'));
|
||||
}
|
||||
|
||||
return modules;
|
||||
},
|
||||
|
||||
async loadContent() {
|
||||
const {include} = options;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
"copy-text-to-clipboard": "^3.0.1",
|
||||
"fs-extra": "^10.0.0",
|
||||
"globby": "^11.0.2",
|
||||
"infima": "0.2.0-alpha.26",
|
||||
"infima": "0.2.0-alpha.27",
|
||||
"lodash": "^4.17.20",
|
||||
"parse-numeric-range": "^1.2.0",
|
||||
"postcss": "^8.2.15",
|
||||
|
|
|
|||
35
packages/docusaurus-theme-classic/src/admonitions.css
Normal file
35
packages/docusaurus-theme-classic/src/admonitions.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.admonition h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.admonition-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.admonition-icon svg {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
stroke-width: 0;
|
||||
fill: var(--ifm-alert-emphasis-color);
|
||||
stroke: var(--ifm-alert-emphasis-color);
|
||||
}
|
||||
|
||||
.admonition-content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.admonition {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -145,6 +145,7 @@ export default function docusaurusThemeClassic(
|
|||
const modules = [
|
||||
require.resolve(getInfimaCSSFile(direction)),
|
||||
path.resolve(__dirname, './prism-include-languages'),
|
||||
path.resolve(__dirname, './admonitions.css'),
|
||||
];
|
||||
|
||||
if (customCss) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
```
|
||||
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -11062,10 +11062,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
|
|||
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
|
||||
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
|
||||
|
||||
infima@0.2.0-alpha.26:
|
||||
version "0.2.0-alpha.26"
|
||||
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.26.tgz#8582d40ef01a09dbbde8f0e574f8c61d6bc0992b"
|
||||
integrity sha512-0/Dt+89mf8xW+9/hKGmynK+WOAsiy0QydVJL0qie6WK57yGIQv+SjJrhMybKndnmkZBQ+Vlt0tWPnTakx8X2Qw==
|
||||
infima@0.2.0-alpha.27:
|
||||
version "0.2.0-alpha.27"
|
||||
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.27.tgz#f61bfee412640cebb4c867e11d2e53af4f36f9d5"
|
||||
integrity sha512-3wzGnP8glFhxCSK0xLMtOoT0M/8fQGScu7yPmgGEMjTdw392GzEwaZW5FOH13z1qC1N57NBia+CVnKKw86kSMg==
|
||||
|
||||
inflight@^1.0.4:
|
||||
version "1.0.6"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue