@docusaurus/theme-classic 2.0.0-beta.21 → 2.0.0-beta.22

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 (240) hide show
  1. package/lib/getSwizzleConfig.js +5 -5
  2. package/lib/index.js +4 -2
  3. package/lib/theme/Admonition/index.d.ts +1 -1
  4. package/lib/theme/Admonition/index.js +139 -57
  5. package/lib/{admonitions.css → theme/Admonition/styles.module.css} +14 -15
  6. package/lib/theme/AnnouncementBar/index.js +3 -2
  7. package/lib/theme/BackToTopButton/index.js +2 -1
  8. package/lib/theme/BlogListPage/index.js +2 -11
  9. package/lib/theme/BlogPostItem/Container/index.d.ts +9 -0
  10. package/lib/theme/BlogPostItem/Container/index.js +26 -0
  11. package/lib/theme/BlogPostItem/Content/index.d.ts +9 -0
  12. package/lib/theme/BlogPostItem/Content/index.js +23 -0
  13. package/lib/theme/BlogPostItem/Footer/ReadMoreLink/index.d.ts +9 -0
  14. package/lib/theme/BlogPostItem/Footer/ReadMoreLink/index.js +38 -0
  15. package/lib/theme/BlogPostItem/Footer/index.d.ts +8 -0
  16. package/lib/theme/BlogPostItem/Footer/index.js +52 -0
  17. package/lib/theme/BlogPostItem/Footer/styles.module.css +10 -0
  18. package/lib/theme/BlogPostItem/Header/Author/index.d.ts +9 -0
  19. package/lib/theme/{BlogPostAuthor → BlogPostItem/Header/Author}/index.js +3 -2
  20. package/lib/theme/BlogPostItem/Header/Authors/index.d.ts +9 -0
  21. package/{src/theme/BlogPostAuthors/index.tsx → lib/theme/BlogPostItem/Header/Authors/index.js} +9 -10
  22. package/lib/theme/{BlogPostAuthors → BlogPostItem/Header/Authors}/styles.module.css +0 -0
  23. package/lib/theme/{BlogPostAuthors → BlogPostItem/Header/Info}/index.d.ts +2 -2
  24. package/lib/theme/BlogPostItem/Header/Info/index.js +60 -0
  25. package/lib/theme/BlogPostItem/Header/Info/styles.module.css +10 -0
  26. package/lib/theme/BlogPostItem/Header/Title/index.d.ts +9 -0
  27. package/lib/theme/BlogPostItem/Header/Title/index.js +27 -0
  28. package/{src/theme/BlogPostItem → lib/theme/BlogPostItem/Header/Title}/styles.module.css +2 -10
  29. package/lib/theme/BlogPostItem/Header/index.d.ts +8 -0
  30. package/lib/theme/BlogPostItem/Header/index.js +19 -0
  31. package/lib/theme/BlogPostItem/index.d.ts +1 -1
  32. package/lib/theme/BlogPostItem/index.js +16 -142
  33. package/lib/theme/BlogPostItems/index.d.ts +9 -0
  34. package/lib/theme/BlogPostItems/index.js +27 -0
  35. package/lib/theme/BlogPostPage/Metadata/index.d.ts +8 -0
  36. package/lib/theme/BlogPostPage/Metadata/index.js +41 -0
  37. package/lib/theme/BlogPostPage/index.js +21 -60
  38. package/lib/theme/BlogTagsListPage/index.js +1 -1
  39. package/lib/theme/BlogTagsPostsPage/index.d.ts +1 -1
  40. package/lib/theme/BlogTagsPostsPage/index.js +36 -30
  41. package/lib/theme/CodeBlock/Container/index.js +2 -5
  42. package/lib/theme/CodeBlock/Content/String.js +2 -3
  43. package/lib/theme/CodeBlock/CopyButton/index.js +1 -0
  44. package/lib/theme/CodeBlock/Line/styles.module.css +7 -7
  45. package/lib/theme/ColorModeToggle/index.js +2 -2
  46. package/lib/theme/DocBreadcrumbs/index.js +3 -3
  47. package/lib/theme/DocCard/index.js +4 -1
  48. package/lib/theme/DocCardList/index.js +2 -2
  49. package/lib/theme/DocItem/Content/index.d.ts +9 -0
  50. package/lib/theme/DocItem/Content/index.js +44 -0
  51. package/lib/theme/DocItem/Footer/index.d.ts +8 -0
  52. package/lib/theme/{DocItemFooter → DocItem/Footer}/index.js +3 -3
  53. package/lib/theme/{DocItemFooter → DocItem/Footer}/styles.module.css +0 -0
  54. package/lib/theme/{BlogPostAuthor → DocItem/Layout}/index.d.ts +2 -2
  55. package/lib/theme/DocItem/Layout/index.js +59 -0
  56. package/lib/theme/DocItem/Layout/styles.module.css +17 -0
  57. package/lib/theme/DocItem/Metadata/index.d.ts +8 -0
  58. package/lib/theme/DocItem/Metadata/index.js +20 -0
  59. package/lib/theme/{DocItemFooter → DocItem/Paginator}/index.d.ts +5 -3
  60. package/lib/theme/DocItem/Paginator/index.js +17 -0
  61. package/lib/theme/DocItem/TOC/Desktop/index.d.ts +8 -0
  62. package/lib/theme/DocItem/TOC/Desktop/index.js +21 -0
  63. package/lib/theme/DocItem/TOC/Mobile/index.d.ts +8 -0
  64. package/lib/theme/DocItem/TOC/Mobile/index.js +23 -0
  65. package/lib/theme/DocItem/{styles.module.css → TOC/Mobile/styles.module.css} +0 -9
  66. package/lib/theme/DocItem/index.js +13 -106
  67. package/lib/theme/DocPage/Layout/Main/index.js +1 -1
  68. package/lib/theme/DocPage/Layout/Sidebar/ExpandButton/index.js +1 -1
  69. package/lib/theme/DocPage/Layout/Sidebar/index.js +2 -1
  70. package/lib/theme/DocPage/Layout/index.js +1 -1
  71. package/lib/theme/DocPage/index.js +2 -3
  72. package/lib/theme/DocSidebar/Desktop/CollapseButton/index.js +1 -1
  73. package/lib/theme/DocSidebar/Desktop/Content/index.js +2 -2
  74. package/lib/theme/DocSidebar/Mobile/index.js +1 -1
  75. package/lib/theme/DocSidebarItem/Category/index.js +6 -4
  76. package/lib/theme/DocSidebarItem/Link/index.js +3 -2
  77. package/lib/theme/DocSidebarItems/index.js +1 -1
  78. package/lib/theme/DocVersionBadge/index.js +2 -1
  79. package/lib/theme/DocVersionBanner/index.js +2 -2
  80. package/lib/theme/EditThisPage/index.js +1 -1
  81. package/lib/theme/Footer/LinkItem/index.js +1 -1
  82. package/lib/theme/Footer/Logo/index.js +7 -2
  83. package/lib/theme/{IconArrow → Icon/Arrow}/index.d.ts +1 -1
  84. package/lib/theme/{IconArrow → Icon/Arrow}/index.js +0 -0
  85. package/lib/theme/{IconClose → Icon/Close}/index.d.ts +1 -1
  86. package/lib/theme/{IconClose → Icon/Close}/index.js +0 -0
  87. package/lib/theme/{IconDarkMode → Icon/DarkMode}/index.d.ts +1 -1
  88. package/lib/theme/{IconDarkMode → Icon/DarkMode}/index.js +0 -0
  89. package/lib/theme/{IconEdit → Icon/Edit}/index.d.ts +1 -1
  90. package/lib/theme/{IconEdit → Icon/Edit}/index.js +0 -0
  91. package/lib/theme/{IconEdit → Icon/Edit}/styles.module.css +0 -0
  92. package/lib/theme/{IconExternalLink → Icon/ExternalLink}/index.d.ts +1 -1
  93. package/lib/theme/{IconExternalLink → Icon/ExternalLink}/index.js +0 -0
  94. package/lib/theme/{IconExternalLink → Icon/ExternalLink}/styles.module.css +0 -0
  95. package/lib/theme/{IconHome → Icon/Home}/index.d.ts +1 -1
  96. package/lib/theme/{IconHome → Icon/Home}/index.js +0 -0
  97. package/lib/theme/{IconLanguage → Icon/Language}/index.d.ts +1 -1
  98. package/lib/theme/{IconLanguage → Icon/Language}/index.js +0 -0
  99. package/lib/theme/{IconLightMode → Icon/LightMode}/index.d.ts +1 -1
  100. package/lib/theme/{IconLightMode → Icon/LightMode}/index.js +0 -0
  101. package/lib/theme/{IconMenu → Icon/Menu}/index.d.ts +1 -1
  102. package/lib/theme/{IconMenu → Icon/Menu}/index.js +0 -0
  103. package/lib/theme/Layout/Provider/index.d.ts +9 -0
  104. package/lib/theme/Layout/Provider/index.js +29 -0
  105. package/lib/theme/Layout/index.d.ts +0 -1
  106. package/lib/theme/Layout/index.js +12 -10
  107. package/{src/theme/Layout/styles.css → lib/theme/Layout/styles.module.css} +10 -12
  108. package/lib/theme/Logo/index.js +35 -17
  109. package/lib/theme/MDXComponents/Code.js +1 -1
  110. package/lib/theme/MDXComponents/index.js +2 -0
  111. package/lib/theme/MDXPage/index.js +6 -4
  112. package/lib/theme/Navbar/Content/index.js +2 -2
  113. package/lib/theme/Navbar/Layout/index.js +2 -2
  114. package/lib/theme/Navbar/MobileSidebar/Header/index.js +2 -2
  115. package/lib/theme/Navbar/MobileSidebar/Layout/index.js +1 -1
  116. package/lib/theme/Navbar/MobileSidebar/PrimaryMenu/index.js +2 -1
  117. package/lib/theme/Navbar/MobileSidebar/SecondaryMenu/index.js +2 -1
  118. package/lib/theme/Navbar/MobileSidebar/Toggle/index.js +2 -2
  119. package/lib/theme/Navbar/MobileSidebar/index.js +1 -1
  120. package/lib/theme/NavbarItem/DocNavbarItem.js +1 -1
  121. package/lib/theme/NavbarItem/DocSidebarNavbarItem.js +1 -1
  122. package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js +2 -4
  123. package/lib/theme/NavbarItem/DocsVersionNavbarItem.js +1 -1
  124. package/lib/theme/NavbarItem/DropdownNavbarItem.js +2 -3
  125. package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js +2 -2
  126. package/lib/theme/NavbarItem/NavbarNavLink.js +1 -1
  127. package/lib/theme/SiteMetadata/index.js +2 -3
  128. package/lib/theme/SkipToContent/index.js +1 -1
  129. package/lib/theme/TOCItems/index.js +2 -2
  130. package/lib/theme/Tabs/index.js +2 -2
  131. package/lib/validateThemeConfig.js +13 -18
  132. package/package.json +19 -15
  133. package/src/getSwizzleConfig.ts +5 -5
  134. package/src/index.ts +4 -2
  135. package/src/theme/Admonition/index.tsx +161 -58
  136. package/src/{admonitions.css → theme/Admonition/styles.module.css} +14 -15
  137. package/src/theme/AnnouncementBar/index.tsx +3 -2
  138. package/src/theme/BackToTopButton/index.tsx +2 -1
  139. package/src/theme/BlogListPage/index.tsx +2 -11
  140. package/src/theme/BlogPostItem/Container/index.tsx +32 -0
  141. package/src/theme/BlogPostItem/Content/index.tsx +29 -0
  142. package/src/theme/BlogPostItem/Footer/ReadMoreLink/index.tsx +44 -0
  143. package/src/theme/BlogPostItem/Footer/index.tsx +60 -0
  144. package/src/theme/BlogPostItem/Footer/styles.module.css +10 -0
  145. package/src/theme/{BlogPostAuthor → BlogPostItem/Header/Author}/index.tsx +8 -3
  146. package/{lib/theme/BlogPostAuthors/index.js → src/theme/BlogPostItem/Header/Authors/index.tsx} +14 -3
  147. package/src/theme/{BlogPostAuthors → BlogPostItem/Header/Authors}/styles.module.css +0 -0
  148. package/src/theme/BlogPostItem/Header/Info/index.tsx +71 -0
  149. package/src/theme/BlogPostItem/Header/Info/styles.module.css +10 -0
  150. package/src/theme/BlogPostItem/Header/Title/index.tsx +33 -0
  151. package/{lib/theme/BlogPostItem → src/theme/BlogPostItem/Header/Title}/styles.module.css +2 -10
  152. package/src/theme/BlogPostItem/Header/index.tsx +21 -0
  153. package/src/theme/BlogPostItem/index.tsx +19 -145
  154. package/src/theme/BlogPostItems/index.tsx +30 -0
  155. package/src/theme/BlogPostPage/Metadata/index.tsx +44 -0
  156. package/src/theme/BlogPostPage/index.tsx +29 -62
  157. package/src/theme/BlogTagsListPage/index.tsx +1 -1
  158. package/src/theme/BlogTagsPostsPage/index.tsx +42 -35
  159. package/src/theme/CodeBlock/Container/index.tsx +3 -6
  160. package/src/theme/CodeBlock/Content/String.tsx +2 -3
  161. package/src/theme/CodeBlock/CopyButton/index.tsx +1 -0
  162. package/src/theme/CodeBlock/Line/styles.module.css +7 -7
  163. package/src/theme/ColorModeToggle/index.tsx +2 -2
  164. package/src/theme/DocBreadcrumbs/index.tsx +3 -3
  165. package/src/theme/DocCard/index.tsx +4 -1
  166. package/src/theme/DocCardList/index.tsx +2 -2
  167. package/src/theme/DocItem/Content/index.tsx +48 -0
  168. package/src/theme/{DocItemFooter → DocItem/Footer}/index.tsx +4 -5
  169. package/src/theme/{DocItemFooter → DocItem/Footer}/styles.module.css +0 -0
  170. package/src/theme/DocItem/Layout/index.tsx +68 -0
  171. package/src/theme/DocItem/Layout/styles.module.css +17 -0
  172. package/src/theme/DocItem/Metadata/index.tsx +22 -0
  173. package/src/theme/DocItem/Paginator/index.tsx +19 -0
  174. package/src/theme/DocItem/TOC/Desktop/index.tsx +24 -0
  175. package/src/theme/DocItem/TOC/Mobile/index.tsx +27 -0
  176. package/src/theme/DocItem/{styles.module.css → TOC/Mobile/styles.module.css} +0 -9
  177. package/src/theme/DocItem/index.tsx +13 -115
  178. package/src/theme/DocPage/Layout/Main/index.tsx +1 -1
  179. package/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.tsx +1 -1
  180. package/src/theme/DocPage/Layout/Sidebar/index.tsx +2 -1
  181. package/src/theme/DocPage/Layout/index.tsx +1 -1
  182. package/src/theme/DocPage/index.tsx +2 -3
  183. package/src/theme/DocPaginator/index.tsx +0 -1
  184. package/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx +1 -1
  185. package/src/theme/DocSidebar/Desktop/Content/index.tsx +2 -2
  186. package/src/theme/DocSidebar/Mobile/index.tsx +1 -1
  187. package/src/theme/DocSidebarItem/Category/index.tsx +6 -4
  188. package/src/theme/DocSidebarItem/Link/index.tsx +3 -2
  189. package/src/theme/DocSidebarItems/index.tsx +1 -1
  190. package/src/theme/DocVersionBadge/index.tsx +2 -1
  191. package/src/theme/DocVersionBanner/index.tsx +2 -3
  192. package/src/theme/EditThisPage/index.tsx +1 -1
  193. package/src/theme/Footer/LinkItem/index.tsx +1 -1
  194. package/src/theme/Footer/Logo/index.tsx +7 -2
  195. package/src/theme/{IconArrow → Icon/Arrow}/index.tsx +1 -1
  196. package/src/theme/{IconClose → Icon/Close}/index.tsx +1 -1
  197. package/src/theme/{IconDarkMode → Icon/DarkMode}/index.tsx +1 -1
  198. package/src/theme/{IconEdit → Icon/Edit}/index.tsx +1 -1
  199. package/src/theme/{IconEdit → Icon/Edit}/styles.module.css +0 -0
  200. package/src/theme/{IconExternalLink → Icon/ExternalLink}/index.tsx +1 -1
  201. package/src/theme/{IconExternalLink → Icon/ExternalLink}/styles.module.css +0 -0
  202. package/src/theme/{IconHome → Icon/Home}/index.tsx +1 -1
  203. package/src/theme/{IconLanguage → Icon/Language}/index.tsx +1 -1
  204. package/src/theme/{IconLightMode → Icon/LightMode}/index.tsx +1 -1
  205. package/src/theme/{IconMenu → Icon/Menu}/index.tsx +1 -1
  206. package/src/theme/Layout/Provider/index.tsx +33 -0
  207. package/src/theme/Layout/index.tsx +12 -10
  208. package/{lib/theme/Layout/styles.css → src/theme/Layout/styles.module.css} +10 -12
  209. package/src/theme/Logo/index.tsx +49 -19
  210. package/src/theme/MDXComponents/Code.tsx +5 -2
  211. package/src/theme/MDXComponents/Details.tsx +2 -1
  212. package/src/theme/MDXComponents/Head.tsx +3 -5
  213. package/src/theme/MDXComponents/Pre.tsx +2 -1
  214. package/src/theme/MDXComponents/index.tsx +2 -0
  215. package/src/theme/MDXPage/index.tsx +6 -4
  216. package/src/theme/Navbar/Content/index.tsx +2 -2
  217. package/src/theme/Navbar/Layout/index.tsx +2 -2
  218. package/src/theme/Navbar/MobileSidebar/Header/index.tsx +2 -2
  219. package/src/theme/Navbar/MobileSidebar/Layout/index.tsx +1 -1
  220. package/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +2 -1
  221. package/src/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx +2 -1
  222. package/src/theme/Navbar/MobileSidebar/Toggle/index.tsx +2 -2
  223. package/src/theme/Navbar/MobileSidebar/index.tsx +1 -1
  224. package/src/theme/NavbarItem/DocNavbarItem.tsx +1 -1
  225. package/src/theme/NavbarItem/DocSidebarNavbarItem.tsx +1 -1
  226. package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +2 -4
  227. package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx +1 -1
  228. package/src/theme/NavbarItem/DropdownNavbarItem.tsx +2 -3
  229. package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +2 -2
  230. package/src/theme/NavbarItem/NavbarNavLink.tsx +1 -1
  231. package/src/theme/NavbarItem/index.tsx +1 -1
  232. package/src/theme/SiteMetadata/index.tsx +2 -3
  233. package/src/theme/SkipToContent/index.tsx +1 -1
  234. package/src/theme/TOCItems/index.tsx +3 -3
  235. package/src/theme/Tabs/index.tsx +2 -2
  236. package/src/theme-classic.d.ts +128 -36
  237. package/src/validateThemeConfig.ts +14 -18
  238. package/lib/theme/LayoutProviders/index.d.ts +0 -9
  239. package/lib/theme/LayoutProviders/index.js +0 -33
  240. package/src/theme/LayoutProviders/index.tsx +0 -36
@@ -87,35 +87,35 @@ function getSwizzleConfig() {
87
87
  },
88
88
  description: 'The footer logo',
89
89
  },
90
- IconArrow: {
90
+ 'Icon/Arrow': {
91
91
  actions: {
92
92
  eject: 'safe',
93
93
  wrap: 'safe',
94
94
  },
95
95
  description: 'The arrow icon component',
96
96
  },
97
- IconDarkMode: {
97
+ 'Icon/DarkMode': {
98
98
  actions: {
99
99
  eject: 'safe',
100
100
  wrap: 'safe',
101
101
  },
102
102
  description: 'The dark mode icon component.',
103
103
  },
104
- IconEdit: {
104
+ 'Icon/Edit': {
105
105
  actions: {
106
106
  eject: 'safe',
107
107
  wrap: 'safe',
108
108
  },
109
109
  description: 'The edit icon component',
110
110
  },
111
- IconLightMode: {
111
+ 'Icon/LightMode': {
112
112
  actions: {
113
113
  eject: 'safe',
114
114
  wrap: 'safe',
115
115
  },
116
116
  description: 'The light mode icon component.',
117
117
  },
118
- IconMenu: {
118
+ 'Icon/Menu': {
119
119
  actions: {
120
120
  eject: 'safe',
121
121
  wrap: 'safe',
package/lib/index.js CHANGED
@@ -18,7 +18,9 @@ const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextR
18
18
  // Need to be inlined to prevent dark mode FOUC
19
19
  // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
20
20
  const ThemeStorageKey = 'theme';
21
- const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) => `(function() {
21
+ const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) =>
22
+ /* language=js */
23
+ `(function() {
22
24
  var defaultMode = '${defaultMode}';
23
25
  var respectPrefersColorScheme = ${respectPrefersColorScheme};
24
26
 
@@ -62,6 +64,7 @@ const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dis
62
64
  // We always render the announcement bar html on the server, to prevent layout
63
65
  // shifts on React hydration. The theme can use CSS + the data attribute to hide
64
66
  // the announcement bar asap (before React hydration)
67
+ /* language=js */
65
68
  const AnnouncementBarInlineJavaScript = `
66
69
  (function() {
67
70
  function isDismissed() {
@@ -104,7 +107,6 @@ function themeClassic(context, options) {
104
107
  const modules = [
105
108
  require.resolve(getInfimaCSSFile(direction)),
106
109
  './prism-include-languages',
107
- './admonitions.css',
108
110
  './nprogress',
109
111
  ];
110
112
  if (customCss) {
@@ -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;
@@ -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
  }
@@ -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
- }
@@ -6,9 +6,10 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import clsx from 'clsx';
9
- import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
9
+ import {useThemeConfig} from '@docusaurus/theme-common';
10
+ import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
10
11
  import {translate} from '@docusaurus/Translate';
11
- import IconClose from '@theme/IconClose';
12
+ import IconClose from '@theme/Icon/Close';
12
13
  import styles from './styles.module.css';
13
14
  export default function AnnouncementBar() {
14
15
  const {isActive, close} = useAnnouncementBar();
@@ -7,7 +7,8 @@
7
7
  import React from 'react';
8
8
  import clsx from 'clsx';
9
9
  import {translate} from '@docusaurus/Translate';
10
- import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
10
+ import {ThemeClassNames} from '@docusaurus/theme-common';
11
+ import {useBackToTopButton} from '@docusaurus/theme-common/internal';
11
12
  import styles from './styles.module.css';
12
13
  export default function BackToTopButton() {
13
14
  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
@@ -13,9 +13,9 @@ import {
13
13
  ThemeClassNames,
14
14
  } from '@docusaurus/theme-common';
15
15
  import BlogLayout from '@theme/BlogLayout';
16
- import BlogPostItem from '@theme/BlogPostItem';
17
16
  import BlogListPaginator from '@theme/BlogListPaginator';
18
17
  import SearchMetadata from '@theme/SearchMetadata';
18
+ import BlogPostItems from '@theme/BlogPostItems';
19
19
  function BlogListPageMetadata(props) {
20
20
  const {metadata} = props;
21
21
  const {
@@ -35,16 +35,7 @@ function BlogListPageContent(props) {
35
35
  const {metadata, items, sidebar} = props;
36
36
  return (
37
37
  <BlogLayout sidebar={sidebar}>
38
- {items.map(({content: BlogPostContent}) => (
39
- <BlogPostItem
40
- key={BlogPostContent.metadata.permalink}
41
- frontMatter={BlogPostContent.frontMatter}
42
- assets={BlogPostContent.assets}
43
- metadata={BlogPostContent.metadata}
44
- truncated={BlogPostContent.metadata.truncated}>
45
- <BlogPostContent />
46
- </BlogPostItem>
47
- ))}
38
+ <BlogPostItems items={items} />
48
39
  <BlogListPaginator metadata={metadata} />
49
40
  </BlogLayout>
50
41
  );
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ import type { Props } from '@theme/BlogPostItem/Container';
9
+ export default function BlogPostItemContainer({ children, className, }: Props): JSX.Element;
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
9
+ import {useBlogPost} from '@docusaurus/theme-common/internal';
10
+ export default function BlogPostItemContainer({children, className}) {
11
+ const {frontMatter, assets} = useBlogPost();
12
+ const {withBaseUrl} = useBaseUrlUtils();
13
+ const image = assets.image ?? frontMatter.image;
14
+ return (
15
+ <article
16
+ className={className}
17
+ itemProp="blogPost"
18
+ itemScope
19
+ itemType="http://schema.org/BlogPosting">
20
+ {image && (
21
+ <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
22
+ )}
23
+ {children}
24
+ </article>
25
+ );
26
+ }
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ import type { Props } from '@theme/BlogPostItem/Content';
9
+ export default function BlogPostItemContent({ children, className, }: Props): JSX.Element;
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ import clsx from 'clsx';
9
+ import {blogPostContainerID} from '@docusaurus/utils-common';
10
+ import {useBlogPost} from '@docusaurus/theme-common/internal';
11
+ import MDXContent from '@theme/MDXContent';
12
+ export default function BlogPostItemContent({children, className}) {
13
+ const {isBlogPostPage} = useBlogPost();
14
+ return (
15
+ <div
16
+ // This ID is used for the feed generation to locate the main content
17
+ id={isBlogPostPage ? blogPostContainerID : undefined}
18
+ className={clsx('markdown', className)}
19
+ itemProp="articleBody">
20
+ <MDXContent>{children}</MDXContent>
21
+ </div>
22
+ );
23
+ }
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ import type { Props } from '@theme/BlogPostItem/Footer/ReadMoreLink';
9
+ export default function BlogPostItemFooterReadMoreLink(props: Props): JSX.Element;
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ import Translate, {translate} from '@docusaurus/Translate';
9
+ import Link from '@docusaurus/Link';
10
+ function ReadMoreLabel() {
11
+ return (
12
+ <b>
13
+ <Translate
14
+ id="theme.blog.post.readMore"
15
+ description="The label used in blog post item excerpts to link to full blog posts">
16
+ Read More
17
+ </Translate>
18
+ </b>
19
+ );
20
+ }
21
+ export default function BlogPostItemFooterReadMoreLink(props) {
22
+ const {blogPostTitle, ...linkProps} = props;
23
+ return (
24
+ <Link
25
+ aria-label={translate(
26
+ {
27
+ message: 'Read more about {title}',
28
+ id: 'theme.blog.post.readMoreLabel',
29
+ description:
30
+ 'The ARIA label for the link to full blog posts from excerpts',
31
+ },
32
+ {title: blogPostTitle},
33
+ )}
34
+ {...linkProps}>
35
+ <ReadMoreLabel />
36
+ </Link>
37
+ );
38
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ export default function BlogPostItemFooter(): JSX.Element | null;
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React from 'react';
8
+ import clsx from 'clsx';
9
+ import {useBlogPost} from '@docusaurus/theme-common/internal';
10
+ import EditThisPage from '@theme/EditThisPage';
11
+ import TagsListInline from '@theme/TagsListInline';
12
+ import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
13
+ import styles from './styles.module.css';
14
+ export default function BlogPostItemFooter() {
15
+ const {metadata, isBlogPostPage} = useBlogPost();
16
+ const {tags, title, editUrl, hasTruncateMarker} = metadata;
17
+ // A post is truncated if it's in the "list view" and it has a truncate marker
18
+ const truncatedPost = !isBlogPostPage && hasTruncateMarker;
19
+ const tagsExists = tags.length > 0;
20
+ const renderFooter = tagsExists || truncatedPost || editUrl;
21
+ if (!renderFooter) {
22
+ return null;
23
+ }
24
+ return (
25
+ <footer
26
+ className={clsx(
27
+ 'row docusaurus-mt-lg',
28
+ isBlogPostPage && styles.blogPostFooterDetailsFull,
29
+ )}>
30
+ {tagsExists && (
31
+ <div className={clsx('col', {'col--9': truncatedPost})}>
32
+ <TagsListInline tags={tags} />
33
+ </div>
34
+ )}
35
+
36
+ {isBlogPostPage && editUrl && (
37
+ <div className="col margin-top--sm">
38
+ <EditThisPage editUrl={editUrl} />
39
+ </div>
40
+ )}
41
+
42
+ {truncatedPost && (
43
+ <div
44
+ className={clsx('col text--right', {
45
+ 'col--3': tagsExists,
46
+ })}>
47
+ <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
48
+ </div>
49
+ )}
50
+ </footer>
51
+ );
52
+ }
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ .blogPostFooterDetailsFull {
9
+ flex-direction: column;
10
+ }
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ import type { Props } from '@theme/BlogPostItem/Header/Author';
9
+ export default function BlogPostItemHeaderAuthor({ author, className, }: Props): JSX.Element;
@@ -5,6 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React from 'react';
8
+ import clsx from 'clsx';
8
9
  import Link from '@docusaurus/Link';
9
10
  function MaybeLink(props) {
10
11
  if (props.href) {
@@ -12,11 +13,11 @@ function MaybeLink(props) {
12
13
  }
13
14
  return <>{props.children}</>;
14
15
  }
15
- export default function BlogPostAuthor({author}) {
16
+ export default function BlogPostItemHeaderAuthor({author, className}) {
16
17
  const {name, title, url, imageURL, email} = author;
17
18
  const link = url || (email && `mailto:${email}`) || undefined;
18
19
  return (
19
- <div className="avatar margin-bottom--sm">
20
+ <div className={clsx('avatar margin-bottom--sm', className)}>
20
21
  {imageURL && (
21
22
  <MaybeLink href={link} className="avatar__photo-link">
22
23
  <img className="avatar__photo" src={imageURL} alt={name} />
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /// <reference types="react" />
8
+ import type { Props } from '@theme/BlogPostItem/Header/Authors';
9
+ export default function BlogPostItemHeaderAuthors({ className, }: Props): JSX.Element | null;