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

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;

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 = [

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;
 

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",

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;
+}

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) {

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
+
+<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>
+```
 
 :::

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:
+infima@0.2.0-alpha.27:
-  version "0.2.0-alpha.26"
+  version "0.2.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.26.tgz#8582d40ef01a09dbbde8f0e574f8c61d6bc0992b"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.27.tgz#f61bfee412640cebb4c867e11d2e53af4f36f9d5"
-  integrity sha512-0/Dt+89mf8xW+9/hKGmynK+WOAsiy0QydVJL0qie6WK57yGIQv+SjJrhMybKndnmkZBQ+Vlt0tWPnTakx8X2Qw==
+  integrity sha512-3wzGnP8glFhxCSK0xLMtOoT0M/8fQGScu7yPmgGEMjTdw392GzEwaZW5FOH13z1qC1N57NBia+CVnKKw86kSMg==
 
 inflight@^1.0.4:
   version "1.0.6"