diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index c3d1639901..5bce9142dd 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -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; diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index a539931fa9..30125c5dbe 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -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 = [ diff --git a/packages/docusaurus-plugin-content-pages/src/index.ts b/packages/docusaurus-plugin-content-pages/src/index.ts index 53e9dd27d6..a58b66b8cd 100644 --- a/packages/docusaurus-plugin-content-pages/src/index.ts +++ b/packages/docusaurus-plugin-content-pages/src/index.ts @@ -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; diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 99bcd14d3a..5487feb762 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -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", diff --git a/packages/docusaurus-theme-classic/src/admonitions.css b/packages/docusaurus-theme-classic/src/admonitions.css new file mode 100644 index 0000000000..bd002fb53f --- /dev/null +++ b/packages/docusaurus-theme-classic/src/admonitions.css @@ -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; +} diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts index 9b9fc4347f..af700484d8 100644 --- a/packages/docusaurus-theme-classic/src/index.ts +++ b/packages/docusaurus-theme-classic/src/index.ts @@ -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) { diff --git a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx index 886b518559..ccd7ae68ff 100644 --- a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx +++ b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx @@ -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 + + + This is an apple 🍎 + This is an orange 🍊 + This is a banana 🍌 + + +::: +``` + +```mdx-code-block +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +``` + +:::tip Use tabs in admonitions + +```mdx-code-block + + This is an apple 🍎 + This is an orange 🍊 + This is a banana 🍌 + +``` ::: diff --git a/yarn.lock b/yarn.lock index 2a69a5e0c1..786e7496f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"