@docusaurus/theme-classic 0.0.0-5089 → 0.0.0-5093

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/index.js +0 -1
  2. package/lib/theme/Admonition/index.d.ts +1 -1
  3. package/lib/theme/Admonition/index.js +102 -61
  4. package/lib/{admonitions.css → theme/Admonition/styles.module.css} +14 -15
  5. package/lib/theme/MDXComponents/index.js +2 -0
  6. package/package.json +14 -14
  7. package/src/index.ts +0 -1
  8. package/src/theme/Admonition/index.tsx +120 -61
  9. package/src/{admonitions.css → theme/Admonition/styles.module.css} +14 -15
  10. package/src/theme/MDXComponents/index.tsx +2 -0
  11. package/src/theme-classic.d.ts +3 -1
package/lib/index.js CHANGED
@@ -104,7 +104,6 @@ function themeClassic(context, options) {
104
104
  const modules = [
105
105
  require.resolve(getInfimaCSSFile(direction)),
106
106
  './prism-include-languages',
107
- './admonitions.css',
108
107
  './nprogress',
109
108
  ];
110
109
  if (customCss) {
package/lib/theme/Admonition/index.d.ts CHANGED
@@ -6,4 +6,4 @@
6
6
  */
7
7
  /// <reference types="react" />
8
8
  import type { Props } from '@theme/Admonition';
9
- export default function Admonition({ children, type, title, icon, }: Props): JSX.Element;
9
+ export default function Admonition(props: Props): JSX.Element;
package/lib/theme/Admonition/index.js CHANGED
@@ -6,96 +6,137 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import clsx from 'clsx';
9
- const icons = {
10
- note: (
11
- <svg
12
- xmlns="http://www.w3.org/2000/svg"
13
- width="14"
14
- height="16"
15
- viewBox="0 0 14 16">
9
+ import styles from './styles.module.css';
10
+ function NoteIcon() {
11
+ return (
12
+ <svg viewBox="0 0 14 16">
16
13
  <path
17
14
  fillRule="evenodd"
18
15
  d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
19
16
  />
20
17
  </svg>
21
- ),
22
- tip: (
23
- <svg
24
- xmlns="http://www.w3.org/2000/svg"
25
- width="12"
26
- height="16"
27
- viewBox="0 0 12 16">
18
+ );
19
+ }
20
+ function TipIcon() {
21
+ return (
22
+ <svg viewBox="0 0 12 16">
28
23
  <path
29
24
  fillRule="evenodd"
30
25
  d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
31
26
  />
32
27
  </svg>
33
- ),
34
- danger: (
35
- <svg
36
- xmlns="http://www.w3.org/2000/svg"
37
- width="12"
38
- height="16"
39
- viewBox="0 0 12 16">
28
+ );
29
+ }
30
+ function DangerIcon() {
31
+ return (
32
+ <svg viewBox="0 0 12 16">
40
33
  <path
41
34
  fillRule="evenodd"
42
35
  d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
43
36
  />
44
37
  </svg>
45
- ),
46
- info: (
47
- <svg
48
- xmlns="http://www.w3.org/2000/svg"
49
- width="14"
50
- height="16"
51
- viewBox="0 0 14 16">
38
+ );
39
+ }
40
+ function InfoIcon() {
41
+ return (
42
+ <svg viewBox="0 0 14 16">
52
43
  <path
53
44
  fillRule="evenodd"
54
45
  d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
55
46
  />
56
47
  </svg>
57
- ),
58
- caution: (
59
- <svg
60
- xmlns="http://www.w3.org/2000/svg"
61
- width="16"
62
- height="16"
63
- viewBox="0 0 16 16">
48
+ );
49
+ }
50
+ function CautionIcon() {
51
+ return (
52
+ <svg viewBox="0 0 16 16">
64
53
  <path
65
54
  fillRule="evenodd"
66
55
  d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
67
56
  />
68
57
  </svg>
69
- ),
70
- };
71
- const ifmClassNames = {
72
- note: 'secondary',
73
- tip: 'success',
74
- danger: 'danger',
75
- info: 'info',
76
- caution: 'warning',
58
+ );
59
+ }
60
+ const AdmonitionConfigs = {
61
+ note: {
62
+ infimaClassName: 'secondary',
63
+ iconComponent: NoteIcon,
64
+ },
65
+ tip: {
66
+ infimaClassName: 'success',
67
+ iconComponent: TipIcon,
68
+ },
69
+ danger: {
70
+ infimaClassName: 'danger',
71
+ iconComponent: DangerIcon,
72
+ },
73
+ info: {
74
+ infimaClassName: 'info',
75
+ iconComponent: InfoIcon,
76
+ },
77
+ caution: {
78
+ infimaClassName: 'warning',
79
+ iconComponent: CautionIcon,
80
+ },
81
+ secondary: 'note',
82
+ important: 'info',
83
+ success: 'tip',
84
+ warning: 'danger',
77
85
  };
78
- export default function Admonition({
79
- children,
80
- type,
81
- title = type,
82
- icon = icons[type],
83
- }) {
86
+ function getAdmonitionConfig(type) {
87
+ const config = AdmonitionConfigs[type];
88
+ if (config) {
89
+ if (typeof config === 'string') {
90
+ return AdmonitionConfigs[config];
91
+ }
92
+ return config;
93
+ }
94
+ console.warn(
95
+ `No admonition config found for admonition type "${type}". Using Info as fallback.`,
96
+ );
97
+ return AdmonitionConfigs.info;
98
+ }
99
+ // Workaround because it's difficult in MDX v1 to provide a MDX title as props
100
+ // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
101
+ function extractMDXAdmonitionTitle(children) {
102
+ const items = React.Children.toArray(children);
103
+ const mdxAdmonitionTitle = items.find(
104
+ (item) =>
105
+ React.isValidElement(item) &&
106
+ item.props?.mdxType === 'mdxAdmonitionTitle',
107
+ );
108
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
109
+ return {
110
+ mdxAdmonitionTitle,
111
+ rest,
112
+ };
113
+ }
114
+ function processAdmonitionProps(props) {
115
+ const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
116
+ return {
117
+ ...props,
118
+ title: props.title ?? mdxAdmonitionTitle ?? props.type,
119
+ children: rest,
120
+ };
121
+ }
122
+ export default function Admonition(props) {
123
+ const {
124
+ children,
125
+ type,
126
+ title = type,
127
+ icon: iconProp,
128
+ } = processAdmonitionProps(props);
129
+ const config = getAdmonitionConfig(type);
130
+ const {infimaClassName, iconComponent: IconComponent} = config;
131
+ const icon = iconProp ?? <IconComponent />;
84
132
  return (
85
133
  <div
86
- className={clsx(
87
- 'admonition',
88
- `admonition-${type}`,
89
- 'alert',
90
- `alert--${ifmClassNames[type]}`,
91
- )}>
92
- <div className="admonition-heading">
93
- <h5>
94
- <span className="admonition-icon">{icon}</span>
95
- {title}
96
- </h5>
134
+ className={clsx('alert', `alert--${infimaClassName}`, styles.admonition)}>
135
+ <div className={styles.admonitionHeading}>
136
+ <span className={styles.admonitionIcon}>{icon}</span>
137
+ {title}
97
138
  </div>
98
- <div className="admonition-content">{children}</div>
139
+ <div className={styles.admonitionContent}>{children}</div>
99
140
  </div>
100
141
  );
101
142
  }
package/lib/{admonitions.css → theme/Admonition/styles.module.css} RENAMED
@@ -5,35 +5,34 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- .admonition h5 {
9
- margin-top: 0;
10
- margin-bottom: 8px;
8
+ .admonition {
9
+ margin-bottom: 1em;
10
+ }
11
+
12
+ .admonitionHeading {
13
+ font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
14
+ var(--ifm-heading-line-height) var(--ifm-heading-font-family);
11
15
  text-transform: uppercase;
16
+ margin-bottom: 0.3rem;
12
17
  }
13
18
 
14
- .admonition h5 code {
19
+ .admonitionHeading code {
15
20
  text-transform: none;
16
21
  }
17
22
 
18
- .admonition-icon {
23
+ .admonitionIcon {
19
24
  display: inline-block;
20
25
  vertical-align: middle;
21
26
  margin-right: 0.4em;
22
27
  }
23
28
 
24
- .admonition-icon svg {
29
+ .admonitionIcon svg {
25
30
  display: inline-block;
26
- width: 22px;
27
- height: 22px;
28
- stroke-width: 0;
31
+ height: 1.6em;
32
+ width: 1.6em;
29
33
  fill: var(--ifm-alert-foreground-color);
30
- stroke: var(--ifm-alert-foreground-color);
31
34
  }
32
35
 
33
- .admonition-content > :last-child {
36
+ .admonitionContent > :last-child {
34
37
  margin-bottom: 0;
35
38
  }
36
-
37
- .admonition {
38
- margin-bottom: 1em;
39
- }
package/lib/theme/MDXComponents/index.js CHANGED
@@ -13,6 +13,7 @@ import MDXDetails from '@theme/MDXComponents/Details';
13
13
  import MDXHeading from '@theme/MDXComponents/Heading';
14
14
  import MDXUl from '@theme/MDXComponents/Ul';
15
15
  import MDXImg from '@theme/MDXComponents/Img';
16
+ import Admonition from '@theme/Admonition';
16
17
  const MDXComponents = {
17
18
  head: MDXHead,
18
19
  code: MDXCode,
@@ -27,5 +28,6 @@ const MDXComponents = {
27
28
  h4: (props) => <MDXHeading as="h4" {...props} />,
28
29
  h5: (props) => <MDXHeading as="h5" {...props} />,
29
30
  h6: (props) => <MDXHeading as="h6" {...props} />,
31
+ admonition: Admonition,
30
32
  };
31
33
  export default MDXComponents;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-5089",
3
+ "version": "0.0.0-5093",
4
4
  "description": "Classic theme for Docusaurus",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
20
20
  "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
21
21
  },
22
22
  "dependencies": {
23
- "@docusaurus/core": "0.0.0-5089",
24
- "@docusaurus/mdx-loader": "0.0.0-5089",
25
- "@docusaurus/module-type-aliases": "0.0.0-5089",
26
- "@docusaurus/plugin-content-blog": "0.0.0-5089",
27
- "@docusaurus/plugin-content-docs": "0.0.0-5089",
28
- "@docusaurus/plugin-content-pages": "0.0.0-5089",
29
- "@docusaurus/theme-common": "0.0.0-5089",
30
- "@docusaurus/theme-translations": "0.0.0-5089",
31
- "@docusaurus/types": "0.0.0-5089",
32
- "@docusaurus/utils": "0.0.0-5089",
33
- "@docusaurus/utils-common": "0.0.0-5089",
34
- "@docusaurus/utils-validation": "0.0.0-5089",
23
+ "@docusaurus/core": "0.0.0-5093",
24
+ "@docusaurus/mdx-loader": "0.0.0-5093",
25
+ "@docusaurus/module-type-aliases": "0.0.0-5093",
26
+ "@docusaurus/plugin-content-blog": "0.0.0-5093",
27
+ "@docusaurus/plugin-content-docs": "0.0.0-5093",
28
+ "@docusaurus/plugin-content-pages": "0.0.0-5093",
29
+ "@docusaurus/theme-common": "0.0.0-5093",
30
+ "@docusaurus/theme-translations": "0.0.0-5093",
31
+ "@docusaurus/types": "0.0.0-5093",
32
+ "@docusaurus/utils": "0.0.0-5093",
33
+ "@docusaurus/utils-common": "0.0.0-5093",
34
+ "@docusaurus/utils-validation": "0.0.0-5093",
35
35
  "@mdx-js/react": "^1.6.22",
36
36
  "clsx": "^1.1.1",
37
37
  "copy-text-to-clipboard": "^3.0.1",
@@ -64,5 +64,5 @@
64
64
  "engines": {
65
65
  "node": ">=16.14"
66
66
  },
67
- "gitHead": "f03215790788b609224a7d79e123fdfb3ecdb717"
67
+ "gitHead": "2aa3114f2c53ba37b785f22ac723059c7a4a75be"
68
68
  }
package/src/index.ts CHANGED
@@ -139,7 +139,6 @@ export default function themeClassic(
139
139
  const modules = [
140
140
  require.resolve(getInfimaCSSFile(direction)),
141
141
  './prism-include-languages',
142
- './admonitions.css',
143
142
  './nprogress',
144
143
  ];
145
144
 
package/src/theme/Admonition/index.tsx CHANGED
@@ -5,102 +5,161 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React from 'react';
8
+ import React, {type ReactNode} from 'react';
9
9
  import clsx from 'clsx';
10
10
  import type {Props} from '@theme/Admonition';
11
11
 
12
- const icons = {
13
- note: (
14
- <svg
15
- xmlns="http://www.w3.org/2000/svg"
16
- width="14"
17
- height="16"
18
- viewBox="0 0 14 16">
12
+ import styles from './styles.module.css';
13
+
14
+ function NoteIcon() {
15
+ return (
16
+ <svg viewBox="0 0 14 16">
19
17
  <path
20
18
  fillRule="evenodd"
21
19
  d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
22
20
  />
23
21
  </svg>
24
- ),
25
- tip: (
26
- <svg
27
- xmlns="http://www.w3.org/2000/svg"
28
- width="12"
29
- height="16"
30
- viewBox="0 0 12 16">
22
+ );
23
+ }
24
+
25
+ function TipIcon() {
26
+ return (
27
+ <svg viewBox="0 0 12 16">
31
28
  <path
32
29
  fillRule="evenodd"
33
30
  d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
34
31
  />
35
32
  </svg>
36
- ),
37
- danger: (
38
- <svg
39
- xmlns="http://www.w3.org/2000/svg"
40
- width="12"
41
- height="16"
42
- viewBox="0 0 12 16">
33
+ );
34
+ }
35
+
36
+ function DangerIcon() {
37
+ return (
38
+ <svg viewBox="0 0 12 16">
43
39
  <path
44
40
  fillRule="evenodd"
45
41
  d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
46
42
  />
47
43
  </svg>
48
- ),
49
- info: (
50
- <svg
51
- xmlns="http://www.w3.org/2000/svg"
52
- width="14"
53
- height="16"
54
- viewBox="0 0 14 16">
44
+ );
45
+ }
46
+
47
+ function InfoIcon() {
48
+ return (
49
+ <svg viewBox="0 0 14 16">
55
50
  <path
56
51
  fillRule="evenodd"
57
52
  d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
58
53
  />
59
54
  </svg>
60
- ),
61
- caution: (
62
- <svg
63
- xmlns="http://www.w3.org/2000/svg"
64
- width="16"
65
- height="16"
66
- viewBox="0 0 16 16">
55
+ );
56
+ }
57
+
58
+ function CautionIcon() {
59
+ return (
60
+ <svg viewBox="0 0 16 16">
67
61
  <path
68
62
  fillRule="evenodd"
69
63
  d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
70
64
  />
71
65
  </svg>
72
- ),
66
+ );
67
+ }
68
+
69
+ type AdmonitionConfig = {
70
+ iconComponent: React.ComponentType;
71
+ infimaClassName: string;
73
72
  };
74
73
 
75
- const ifmClassNames = {
76
- note: 'secondary',
77
- tip: 'success',
78
- danger: 'danger',
79
- info: 'info',
80
- caution: 'warning',
74
+ const AdmonitionConfigs: {[key: string]: AdmonitionConfig | string} = {
75
+ note: {
76
+ infimaClassName: 'secondary',
77
+ iconComponent: NoteIcon,
78
+ },
79
+ tip: {
80
+ infimaClassName: 'success',
81
+ iconComponent: TipIcon,
82
+ },
83
+ danger: {
84
+ infimaClassName: 'danger',
85
+ iconComponent: DangerIcon,
86
+ },
87
+ info: {
88
+ infimaClassName: 'info',
89
+ iconComponent: InfoIcon,
90
+ },
91
+ caution: {
92
+ infimaClassName: 'warning',
93
+ iconComponent: CautionIcon,
94
+ },
95
+ secondary: 'note',
96
+ important: 'info',
97
+ success: 'tip',
98
+ warning: 'danger',
81
99
  };
82
100
 
83
- export default function Admonition({
84
- children,
85
- type,
86
- title = type,
87
- icon = icons[type],
88
- }: Props): JSX.Element {
101
+ function getAdmonitionConfig(type: string): AdmonitionConfig {
102
+ const config = AdmonitionConfigs[type];
103
+ if (config) {
104
+ if (typeof config === 'string') {
105
+ return AdmonitionConfigs[config] as AdmonitionConfig;
106
+ }
107
+ return config;
108
+ }
109
+ console.warn(
110
+ `No admonition config found for admonition type "${type}". Using Info as fallback.`,
111
+ );
112
+ return AdmonitionConfigs.info as AdmonitionConfig;
113
+ }
114
+
115
+ // Workaround because it's difficult in MDX v1 to provide a MDX title as props
116
+ // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
117
+ function extractMDXAdmonitionTitle(children: ReactNode): {
118
+ mdxAdmonitionTitle: ReactNode | undefined;
119
+ rest: ReactNode;
120
+ } {
121
+ const items = React.Children.toArray(children);
122
+ const mdxAdmonitionTitle = items.find(
123
+ (item) =>
124
+ React.isValidElement(item) &&
125
+ (item.props as {mdxType: string} | null)?.mdxType ===
126
+ 'mdxAdmonitionTitle',
127
+ );
128
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
129
+ return {
130
+ mdxAdmonitionTitle,
131
+ rest,
132
+ };
133
+ }
134
+
135
+ function processAdmonitionProps(props: Props): Props {
136
+ const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
137
+ return {
138
+ ...props,
139
+ title: props.title ?? mdxAdmonitionTitle ?? props.type,
140
+ children: rest,
141
+ };
142
+ }
143
+
144
+ export default function Admonition(props: Props): JSX.Element {
145
+ const {
146
+ children,
147
+ type,
148
+ title = type,
149
+ icon: iconProp,
150
+ } = processAdmonitionProps(props);
151
+
152
+ const config = getAdmonitionConfig(type);
153
+ const {infimaClassName, iconComponent: IconComponent} = config;
154
+ const icon = iconProp ?? <IconComponent />;
89
155
  return (
90
156
  <div
91
- className={clsx(
92
- 'admonition',
93
- `admonition-${type}`,
94
- 'alert',
95
- `alert--${ifmClassNames[type]}`,
96
- )}>
97
- <div className="admonition-heading">
98
- <h5>
99
- <span className="admonition-icon">{icon}</span>
100
- {title}
101
- </h5>
157
+ className={clsx('alert', `alert--${infimaClassName}`, styles.admonition)}>
158
+ <div className={styles.admonitionHeading}>
159
+ <span className={styles.admonitionIcon}>{icon}</span>
160
+ {title}
102
161
  </div>
103
- <div className="admonition-content">{children}</div>
162
+ <div className={styles.admonitionContent}>{children}</div>
104
163
  </div>
105
164
  );
106
165
  }
package/src/{admonitions.css → theme/Admonition/styles.module.css} RENAMED
@@ -5,35 +5,34 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- .admonition h5 {
9
- margin-top: 0;
10
- margin-bottom: 8px;
8
+ .admonition {
9
+ margin-bottom: 1em;
10
+ }
11
+
12
+ .admonitionHeading {
13
+ font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
14
+ var(--ifm-heading-line-height) var(--ifm-heading-font-family);
11
15
  text-transform: uppercase;
16
+ margin-bottom: 0.3rem;
12
17
  }
13
18
 
14
- .admonition h5 code {
19
+ .admonitionHeading code {
15
20
  text-transform: none;
16
21
  }
17
22
 
18
- .admonition-icon {
23
+ .admonitionIcon {
19
24
  display: inline-block;
20
25
  vertical-align: middle;
21
26
  margin-right: 0.4em;
22
27
  }
23
28
 
24
- .admonition-icon svg {
29
+ .admonitionIcon svg {
25
30
  display: inline-block;
26
- width: 22px;
27
- height: 22px;
28
- stroke-width: 0;
31
+ height: 1.6em;
32
+ width: 1.6em;
29
33
  fill: var(--ifm-alert-foreground-color);
30
- stroke: var(--ifm-alert-foreground-color);
31
34
  }
32
35
 
33
- .admonition-content > :last-child {
36
+ .admonitionContent > :last-child {
34
37
  margin-bottom: 0;
35
38
  }
36
-
37
- .admonition {
38
- margin-bottom: 1em;
39
- }
package/src/theme/MDXComponents/index.tsx CHANGED
@@ -14,6 +14,7 @@ import MDXDetails from '@theme/MDXComponents/Details';
14
14
  import MDXHeading from '@theme/MDXComponents/Heading';
15
15
  import MDXUl from '@theme/MDXComponents/Ul';
16
16
  import MDXImg from '@theme/MDXComponents/Img';
17
+ import Admonition from '@theme/Admonition';
17
18
 
18
19
  import type {MDXComponentsObject} from '@theme/MDXComponents';
19
20
 
@@ -31,6 +32,7 @@ const MDXComponents: MDXComponentsObject = {
31
32
  h4: (props) => <MDXHeading as="h4" {...props} />,
32
33
  h5: (props) => <MDXHeading as="h5" {...props} />,
33
34
  h6: (props) => <MDXHeading as="h6" {...props} />,
35
+ admonition: Admonition,
34
36
  };
35
37
 
36
38
  export default MDXComponents;
package/src/theme-classic.d.ts CHANGED
@@ -42,7 +42,7 @@ declare module '@theme/Admonition' {
42
42
  readonly children: ReactNode;
43
43
  readonly type: 'note' | 'tip' | 'danger' | 'info' | 'caution';
44
44
  readonly icon?: ReactNode;
45
- readonly title?: string;
45
+ readonly title?: ReactNode;
46
46
  }
47
47
  export default function Admonition(props: Props): JSX.Element;
48
48
  }
@@ -675,6 +675,7 @@ declare module '@theme/MDXComponents' {
675
675
  import type MDXDetails from '@theme/MDXComponents/Details';
676
676
  import type MDXUl from '@theme/MDXComponents/Ul';
677
677
  import type MDXImg from '@theme/MDXComponents/Img';
678
+ import type Admonition from '@theme/Admonition';
678
679
 
679
680
  export type MDXComponentsObject = {
680
681
  readonly head: typeof MDXHead;
@@ -690,6 +691,7 @@ declare module '@theme/MDXComponents' {
690
691
  readonly h4: (props: ComponentProps<'h4'>) => JSX.Element;
691
692
  readonly h5: (props: ComponentProps<'h5'>) => JSX.Element;
692
693
  readonly h6: (props: ComponentProps<'h6'>) => JSX.Element;
694
+ readonly admonition: typeof Admonition;
693
695
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
694
696
  [tagName: string]: ComponentType<any>;
695
697
  };