@docusaurus/theme-classic 0.0.0-5091 → 0.0.0-5094

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 +139 -57
  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 +162 -58
  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,178 @@
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 {ThemeClassNames} from '@docusaurus/theme-common';
10
+ import Translate from '@docusaurus/Translate';
11
+ import styles from './styles.module.css';
12
+ function NoteIcon() {
13
+ return (
14
+ <svg viewBox="0 0 14 16">
16
15
  <path
17
16
  fillRule="evenodd"
18
17
  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
18
  />
20
19
  </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">
20
+ );
21
+ }
22
+ function TipIcon() {
23
+ return (
24
+ <svg viewBox="0 0 12 16">
28
25
  <path
29
26
  fillRule="evenodd"
30
27
  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
28
  />
32
29
  </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">
30
+ );
31
+ }
32
+ function DangerIcon() {
33
+ return (
34
+ <svg viewBox="0 0 12 16">
40
35
  <path
41
36
  fillRule="evenodd"
42
37
  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
38
  />
44
39
  </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">
40
+ );
41
+ }
42
+ function InfoIcon() {
43
+ return (
44
+ <svg viewBox="0 0 14 16">
52
45
  <path
53
46
  fillRule="evenodd"
54
47
  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
48
  />
56
49
  </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">
50
+ );
51
+ }
52
+ function CautionIcon() {
53
+ return (
54
+ <svg viewBox="0 0 16 16">
64
55
  <path
65
56
  fillRule="evenodd"
66
57
  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
58
  />
68
59
  </svg>
69
- ),
60
+ );
61
+ }
62
+ // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
63
+ const AdmonitionConfigs = {
64
+ note: {
65
+ infimaClassName: 'secondary',
66
+ iconComponent: NoteIcon,
67
+ label: (
68
+ <Translate
69
+ id="theme.admonition.note"
70
+ description="The default label used for the Note admonition (:::note)">
71
+ note
72
+ </Translate>
73
+ ),
74
+ },
75
+ tip: {
76
+ infimaClassName: 'success',
77
+ iconComponent: TipIcon,
78
+ label: (
79
+ <Translate
80
+ id="theme.admonition.tip"
81
+ description="The default label used for the Tip admonition (:::tip)">
82
+ tip
83
+ </Translate>
84
+ ),
85
+ },
86
+ danger: {
87
+ infimaClassName: 'danger',
88
+ iconComponent: DangerIcon,
89
+ label: (
90
+ <Translate
91
+ id="theme.admonition.danger"
92
+ description="The default label used for the Danger admonition (:::danger)">
93
+ danger
94
+ </Translate>
95
+ ),
96
+ },
97
+ info: {
98
+ infimaClassName: 'info',
99
+ iconComponent: InfoIcon,
100
+ label: (
101
+ <Translate
102
+ id="theme.admonition.info"
103
+ description="The default label used for the Info admonition (:::info)">
104
+ info
105
+ </Translate>
106
+ ),
107
+ },
108
+ caution: {
109
+ infimaClassName: 'warning',
110
+ iconComponent: CautionIcon,
111
+ label: (
112
+ <Translate
113
+ id="theme.admonition.caution"
114
+ description="The default label used for the Caution admonition (:::caution)">
115
+ caution
116
+ </Translate>
117
+ ),
118
+ },
70
119
  };
71
- const ifmClassNames = {
72
- note: 'secondary',
73
- tip: 'success',
74
- danger: 'danger',
75
- info: 'info',
76
- caution: 'warning',
120
+ // Legacy aliases, undocumented but kept for retro-compatibility
121
+ const aliases = {
122
+ secondary: 'note',
123
+ important: 'info',
124
+ success: 'tip',
125
+ warning: 'danger',
77
126
  };
78
- export default function Admonition({
79
- children,
80
- type,
81
- title = type,
82
- icon = icons[type],
83
- }) {
127
+ function getAdmonitionConfig(unsafeType) {
128
+ const type = aliases[unsafeType] ?? unsafeType;
129
+ const config = AdmonitionConfigs[type];
130
+ if (config) {
131
+ return config;
132
+ }
133
+ console.warn(
134
+ `No admonition config found for admonition type "${type}". Using Info as fallback.`,
135
+ );
136
+ return AdmonitionConfigs.info;
137
+ }
138
+ // Workaround because it's difficult in MDX v1 to provide a MDX title as props
139
+ // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
140
+ function extractMDXAdmonitionTitle(children) {
141
+ const items = React.Children.toArray(children);
142
+ const mdxAdmonitionTitle = items.find(
143
+ (item) =>
144
+ React.isValidElement(item) &&
145
+ item.props?.mdxType === 'mdxAdmonitionTitle',
146
+ );
147
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
148
+ return {
149
+ mdxAdmonitionTitle,
150
+ rest,
151
+ };
152
+ }
153
+ function processAdmonitionProps(props) {
154
+ const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
155
+ return {
156
+ ...props,
157
+ title: props.title ?? mdxAdmonitionTitle,
158
+ children: rest,
159
+ };
160
+ }
161
+ export default function Admonition(props) {
162
+ const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
163
+ const typeConfig = getAdmonitionConfig(type);
164
+ const titleLabel = title ?? typeConfig.label;
165
+ const {iconComponent: IconComponent} = typeConfig;
166
+ const icon = iconProp ?? <IconComponent />;
84
167
  return (
85
168
  <div
86
169
  className={clsx(
87
- 'admonition',
88
- `admonition-${type}`,
170
+ ThemeClassNames.common.admonition,
171
+ ThemeClassNames.common.admonitionType(props.type),
89
172
  'alert',
90
- `alert--${ifmClassNames[type]}`,
173
+ `alert--${typeConfig.infimaClassName}`,
174
+ styles.admonition,
91
175
  )}>
92
- <div className="admonition-heading">
93
- <h5>
94
- <span className="admonition-icon">{icon}</span>
95
- {title}
96
- </h5>
176
+ <div className={styles.admonitionHeading}>
177
+ <span className={styles.admonitionIcon}>{icon}</span>
178
+ {titleLabel}
97
179
  </div>
98
- <div className="admonition-content">{children}</div>
180
+ <div className={styles.admonitionContent}>{children}</div>
99
181
  </div>
100
182
  );
101
183
  }
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-5091",
3
+ "version": "0.0.0-5094",
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-5091",
24
- "@docusaurus/mdx-loader": "0.0.0-5091",
25
- "@docusaurus/module-type-aliases": "0.0.0-5091",
26
- "@docusaurus/plugin-content-blog": "0.0.0-5091",
27
- "@docusaurus/plugin-content-docs": "0.0.0-5091",
28
- "@docusaurus/plugin-content-pages": "0.0.0-5091",
29
- "@docusaurus/theme-common": "0.0.0-5091",
30
- "@docusaurus/theme-translations": "0.0.0-5091",
31
- "@docusaurus/types": "0.0.0-5091",
32
- "@docusaurus/utils": "0.0.0-5091",
33
- "@docusaurus/utils-common": "0.0.0-5091",
34
- "@docusaurus/utils-validation": "0.0.0-5091",
23
+ "@docusaurus/core": "0.0.0-5094",
24
+ "@docusaurus/mdx-loader": "0.0.0-5094",
25
+ "@docusaurus/module-type-aliases": "0.0.0-5094",
26
+ "@docusaurus/plugin-content-blog": "0.0.0-5094",
27
+ "@docusaurus/plugin-content-docs": "0.0.0-5094",
28
+ "@docusaurus/plugin-content-pages": "0.0.0-5094",
29
+ "@docusaurus/theme-common": "0.0.0-5094",
30
+ "@docusaurus/theme-translations": "0.0.0-5094",
31
+ "@docusaurus/types": "0.0.0-5094",
32
+ "@docusaurus/utils": "0.0.0-5094",
33
+ "@docusaurus/utils-common": "0.0.0-5094",
34
+ "@docusaurus/utils-validation": "0.0.0-5094",
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": "9f79f0eb7547d40c08306a72a3617806f2e6f2bd"
67
+ "gitHead": "5ed0ed8f0a5918441c8b83093fd1975bfe7e0cfd"
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,206 @@
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
+ import {ThemeClassNames} from '@docusaurus/theme-common';
11
+ import Translate from '@docusaurus/Translate';
10
12
  import type {Props} from '@theme/Admonition';
11
13
 
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">
14
+ import styles from './styles.module.css';
15
+
16
+ function NoteIcon() {
17
+ return (
18
+ <svg viewBox="0 0 14 16">
19
19
  <path
20
20
  fillRule="evenodd"
21
21
  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
22
  />
23
23
  </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">
24
+ );
25
+ }
26
+
27
+ function TipIcon() {
28
+ return (
29
+ <svg viewBox="0 0 12 16">
31
30
  <path
32
31
  fillRule="evenodd"
33
32
  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
33
  />
35
34
  </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">
35
+ );
36
+ }
37
+
38
+ function DangerIcon() {
39
+ return (
40
+ <svg viewBox="0 0 12 16">
43
41
  <path
44
42
  fillRule="evenodd"
45
43
  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
44
  />
47
45
  </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">
46
+ );
47
+ }
48
+
49
+ function InfoIcon() {
50
+ return (
51
+ <svg viewBox="0 0 14 16">
55
52
  <path
56
53
  fillRule="evenodd"
57
54
  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
55
  />
59
56
  </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">
57
+ );
58
+ }
59
+
60
+ function CautionIcon() {
61
+ return (
62
+ <svg viewBox="0 0 16 16">
67
63
  <path
68
64
  fillRule="evenodd"
69
65
  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
66
  />
71
67
  </svg>
72
- ),
68
+ );
69
+ }
70
+
71
+ type AdmonitionConfig = {
72
+ iconComponent: React.ComponentType;
73
+ infimaClassName: string;
74
+ label: ReactNode;
73
75
  };
74
76
 
75
- const ifmClassNames = {
76
- note: 'secondary',
77
- tip: 'success',
78
- danger: 'danger',
79
- info: 'info',
80
- caution: 'warning',
77
+ // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
78
+ const AdmonitionConfigs: Record<Props['type'], AdmonitionConfig> = {
79
+ note: {
80
+ infimaClassName: 'secondary',
81
+ iconComponent: NoteIcon,
82
+ label: (
83
+ <Translate
84
+ id="theme.admonition.note"
85
+ description="The default label used for the Note admonition (:::note)">
86
+ note
87
+ </Translate>
88
+ ),
89
+ },
90
+ tip: {
91
+ infimaClassName: 'success',
92
+ iconComponent: TipIcon,
93
+ label: (
94
+ <Translate
95
+ id="theme.admonition.tip"
96
+ description="The default label used for the Tip admonition (:::tip)">
97
+ tip
98
+ </Translate>
99
+ ),
100
+ },
101
+ danger: {
102
+ infimaClassName: 'danger',
103
+ iconComponent: DangerIcon,
104
+ label: (
105
+ <Translate
106
+ id="theme.admonition.danger"
107
+ description="The default label used for the Danger admonition (:::danger)">
108
+ danger
109
+ </Translate>
110
+ ),
111
+ },
112
+ info: {
113
+ infimaClassName: 'info',
114
+ iconComponent: InfoIcon,
115
+ label: (
116
+ <Translate
117
+ id="theme.admonition.info"
118
+ description="The default label used for the Info admonition (:::info)">
119
+ info
120
+ </Translate>
121
+ ),
122
+ },
123
+ caution: {
124
+ infimaClassName: 'warning',
125
+ iconComponent: CautionIcon,
126
+ label: (
127
+ <Translate
128
+ id="theme.admonition.caution"
129
+ description="The default label used for the Caution admonition (:::caution)">
130
+ caution
131
+ </Translate>
132
+ ),
133
+ },
81
134
  };
82
135
 
83
- export default function Admonition({
84
- children,
85
- type,
86
- title = type,
87
- icon = icons[type],
88
- }: Props): JSX.Element {
136
+ // Legacy aliases, undocumented but kept for retro-compatibility
137
+ const aliases = {
138
+ secondary: 'note',
139
+ important: 'info',
140
+ success: 'tip',
141
+ warning: 'danger',
142
+ } as const;
143
+
144
+ function getAdmonitionConfig(
145
+ unsafeType: Props['type'] | keyof typeof aliases,
146
+ ): AdmonitionConfig {
147
+ const type = aliases[unsafeType as keyof typeof aliases] ?? unsafeType;
148
+ const config = AdmonitionConfigs[type];
149
+ if (config) {
150
+ return config;
151
+ }
152
+ console.warn(
153
+ `No admonition config found for admonition type "${type}". Using Info as fallback.`,
154
+ );
155
+ return AdmonitionConfigs.info as AdmonitionConfig;
156
+ }
157
+
158
+ // Workaround because it's difficult in MDX v1 to provide a MDX title as props
159
+ // See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
160
+ function extractMDXAdmonitionTitle(children: ReactNode): {
161
+ mdxAdmonitionTitle: ReactNode | undefined;
162
+ rest: ReactNode;
163
+ } {
164
+ const items = React.Children.toArray(children);
165
+ const mdxAdmonitionTitle = items.find(
166
+ (item) =>
167
+ React.isValidElement(item) &&
168
+ (item.props as {mdxType: string} | null)?.mdxType ===
169
+ 'mdxAdmonitionTitle',
170
+ );
171
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
172
+ return {
173
+ mdxAdmonitionTitle,
174
+ rest,
175
+ };
176
+ }
177
+
178
+ function processAdmonitionProps(props: Props): Props {
179
+ const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
180
+ return {
181
+ ...props,
182
+ title: props.title ?? mdxAdmonitionTitle,
183
+ children: rest,
184
+ };
185
+ }
186
+
187
+ export default function Admonition(props: Props): JSX.Element {
188
+ const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
189
+
190
+ const typeConfig = getAdmonitionConfig(type);
191
+ const titleLabel = title ?? typeConfig.label;
192
+ const {iconComponent: IconComponent} = typeConfig;
193
+ const icon = iconProp ?? <IconComponent />;
89
194
  return (
90
195
  <div
91
196
  className={clsx(
92
- 'admonition',
93
- `admonition-${type}`,
197
+ ThemeClassNames.common.admonition,
198
+ ThemeClassNames.common.admonitionType(props.type),
94
199
  'alert',
95
- `alert--${ifmClassNames[type]}`,
200
+ `alert--${typeConfig.infimaClassName}`,
201
+ styles.admonition,
96
202
  )}>
97
- <div className="admonition-heading">
98
- <h5>
99
- <span className="admonition-icon">{icon}</span>
100
- {title}
101
- </h5>
203
+ <div className={styles.admonitionHeading}>
204
+ <span className={styles.admonitionIcon}>{icon}</span>
205
+ {titleLabel}
102
206
  </div>
103
- <div className="admonition-content">{children}</div>
207
+ <div className={styles.admonitionContent}>{children}</div>
104
208
  </div>
105
209
  );
106
210
  }
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
  };