@docusaurus/theme-classic 2.0.0-beta.16 → 2.0.0-beta.19

package/lib-next/theme/TabItem/index.js

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
 export default function TabItem({children, hidden, className}) {
   return (
     <div
       role="tabpanel"
+      className={clsx(styles.tabItem, className)}
       {...{
         hidden,
-        className,
       }}>
       {children}
     </div>

package/lib-next/theme/TabItem/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}

package/lib-next/theme/Tabs/__tests__/index.test.js

@@ -13,7 +13,7 @@ import {
   ScrollControllerProvider,
 } from '@docusaurus/theme-common';
 describe('Tabs', () => {
-  test('Should reject bad Tabs child', () => {
+  it('rejects bad Tabs child', () => {
     expect(() => {
       renderer.create(
         <Tabs>
@@ -22,10 +22,10 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \\"value\\" prop."`,
+      `"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop."`,
     );
   });
-  test('Should reject bad Tabs defaultValue', () => {
+  it('rejects bad Tabs defaultValue', () => {
     expect(() => {
       renderer.create(
         <Tabs defaultValue="bad">
@@ -34,10 +34,10 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: The <Tabs> has a defaultValue \\"bad\\" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`,
+      `"Docusaurus error: The <Tabs> has a defaultValue "bad" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`,
     );
   });
-  test('Should reject duplicate values', () => {
+  it('rejects duplicate values', () => {
     expect(() => {
       renderer.create(
         <Tabs>
@@ -50,10 +50,10 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: Duplicate values \\"v1, v2\\" found in <Tabs>. Every value needs to be unique."`,
+      `"Docusaurus error: Duplicate values "v1, v2" found in <Tabs>. Every value needs to be unique."`,
     );
   });
-  test('Should accept valid Tabs config', () => {
+  it('accepts valid Tabs config', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
@@ -120,7 +120,7 @@ describe('Tabs', () => {
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
   }); // https://github.com/facebook/docusaurus/issues/5729
 
-  test('Should accept dynamic Tabs with number values', () => {
+  it('accepts dynamic Tabs with number values', () => {
     expect(() => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(

package/lib-next/theme/Tabs/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useState, cloneElement, Children, isValidElement} from 'react';
+import React, {useState, cloneElement, isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {
   useScrollPositionBlocker,
@@ -28,7 +28,7 @@ function TabsComponent(props) {
     groupId,
     className,
   } = props;
-  const children = Children.map(props.children, (child) => {
+  const children = React.Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
       return child;
     } // child.type.name will give non-sensical values in prod because of
@@ -132,7 +132,7 @@ function TabsComponent(props) {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -173,11 +173,11 @@ function TabsComponent(props) {
             (tabItem) => tabItem.props.value === selectedValue,
           )[0],
           {
-            className: 'margin-vert--md',
+            className: 'margin-top--md',
           },
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

package/lib-next/theme/Tabs/styles.module.css

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }

package/lib-next/theme/Tag/index.js

@@ -8,16 +8,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-export default function Tag(props) {
-  const {permalink, name, count} = props;
+export default function Tag({permalink, label, count}) {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, {
-        [styles.tagRegular]: !count,
-        [styles.tagWithCount]: count,
-      })}>
-      {name}
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
+      {label}
       {count && <span>{count}</span>}
     </Link>
   );

package/lib-next/theme/TagsListInline/index.js

@@ -22,7 +22,7 @@ export default function TagsListInline({tags}) {
       <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
         {tags.map(({label, permalink: tagPermalink}) => (
           <li key={tagPermalink} className={styles.tag}>
-            <Tag name={label} permalink={tagPermalink} />
+            <Tag label={label} permalink={tagPermalink} />
           </li>
         ))}
       </ul>

package/lib-next/theme/ThemedImage/index.js

@@ -11,9 +11,9 @@ import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 export default function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useColorMode();
-  const {sources, className, alt = '', ...propsRest} = props;
-  const clientThemes = isDarkTheme ? ['dark'] : ['light'];
+  const {colorMode} = useColorMode();
+  const {sources, className, alt, ...propsRest} = props;
+  const clientThemes = colorMode === 'dark' ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser
     ? clientThemes // We need to render both images on the server to avoid flash
     : // See https://github.com/facebook/docusaurus/pull/3730

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.19",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,34 +21,39 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.16",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.16",
-    "@docusaurus/theme-common": "2.0.0-beta.16",
-    "@docusaurus/theme-translations": "2.0.0-beta.16",
-    "@docusaurus/utils": "2.0.0-beta.16",
-    "@docusaurus/utils-common": "2.0.0-beta.16",
-    "@docusaurus/utils-validation": "2.0.0-beta.16",
+    "@docusaurus/core": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.19",
+    "@docusaurus/theme-common": "2.0.0-beta.19",
+    "@docusaurus/theme-translations": "2.0.0-beta.19",
+    "@docusaurus/utils": "2.0.0-beta.19",
+    "@docusaurus/utils-common": "2.0.0-beta.19",
+    "@docusaurus/utils-validation": "2.0.0-beta.19",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.37",
+    "infima": "0.2.0-alpha.39",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.6",
-    "prism-react-renderer": "^1.2.1",
-    "prismjs": "^1.27.0",
+    "nprogress": "^0.2.0",
+    "postcss": "^8.4.13",
+    "prism-react-renderer": "^1.3.1",
+    "prismjs": "^1.28.0",
     "react-router-dom": "^5.2.0",
-    "rtlcss": "^3.3.0"
+    "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.16",
-    "@docusaurus/types": "2.0.0-beta.16",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-typescript": "^7.16.7",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.19",
+    "@docusaurus/types": "2.0.0-beta.19",
     "@types/mdx-js__react": "^1.5.5",
+    "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
-    "@types/rtlcss": "^3.1.2",
+    "@types/rtlcss": "^3.1.4",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "react-test-renderer": "^17.0.2",
     "utility-types": "^3.10.0"
   },
@@ -59,5 +64,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
+  "gitHead": "a71e60a49cce93c1006ef10c41ac03187f057102"
 }

package/src/admonitions.css

@@ -11,6 +11,10 @@
   text-transform: uppercase;
 }
 
+.admonition h5 code {
+  text-transform: none;
+}
+
 .admonition-icon {
   display: inline-block;
   vertical-align: middle;

package/src/getSwizzleConfig.ts

@@ -7,95 +7,246 @@
 
 import type {SwizzleConfig} from '@docusaurus/types';
 
+/* eslint sort-keys: "error" */
+
 export default function getSwizzleConfig(): SwizzleConfig {
   return {
     components: {
       CodeBlock: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
         description:
           'The component used to render multi-line code blocks, generally used in Markdown files.',
       },
+      ColorModeToggle: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The color mode toggle to switch between light and dark mode.',
+      },
       DocSidebar: {
         actions: {
+          eject: 'unsafe', // Too much technical code in sidebar, not very safe atm
           wrap: 'safe',
-          eject: 'unsafe', // too much technical code in sidebar, not very safe atm
         },
         description: 'The sidebar component on docs pages',
       },
       Footer: {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
-          eject: 'unsafe', // TODO split footer into smaller parts
         },
         description: "The footer component of you site's layout",
       },
-      NotFound: {
+      'Footer/Copyright': {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description: 'The footer copyright',
+      },
+      'Footer/Layout': {
+        actions: {
           eject: 'safe',
+          wrap: 'safe',
         },
-        description:
-          'The global 404 page of your site, meant to be ejected and customized',
+        description: 'The footer main layout component',
       },
-      SearchBar: {
+      'Footer/LinkItem': {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description: 'The footer link item component',
+      },
+      'Footer/Links': {
+        actions: {
           eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer component rendering the footer links',
+      },
+      'Footer/Links/MultiColumn': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
         },
-        // TODO how to describe this one properly?
-        // By default it's an empty placeholder for the user to fill
         description:
-          'The search bar component of your site, appearing in the navbar.',
+          'The footer component rendering the footer links with a multi-column layout',
       },
-      IconArrow: {
+      'Footer/Links/Simple': {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description:
+          'The footer component rendering the footer links with a simple layout (single row)',
+      },
+      'Footer/Logo': {
+        actions: {
           eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer logo',
+      },
+      IconArrow: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
         },
         description: 'The arrow icon component',
       },
-      IconEdit: {
+      IconDarkMode: {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description: 'The dark mode icon component.',
+      },
+      IconEdit: {
+        actions: {
           eject: 'safe',
+          wrap: 'safe',
         },
         description: 'The edit icon component',
       },
-      IconMenu: {
+      IconLightMode: {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description: 'The light mode icon component.',
+      },
+      IconMenu: {
+        actions: {
           eject: 'safe',
+          wrap: 'safe',
         },
         description: 'The menu icon component',
       },
-
-      'prism-include-languages': {
+      MDXComponents: {
         actions: {
-          wrap: 'forbidden', // not a component!
           eject: 'safe',
+          wrap: 'forbidden', /// TODO allow wrapping objects???
         },
         description:
-          'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',
+          'The MDX components to use for rendering MDX files. Meant to be ejected.',
       },
-      MDXComponents: {
+      'MDXComponents/A': {
         actions: {
-          wrap: 'forbidden', /// TODO allow wrapping objects???
           eject: 'safe',
+          wrap: 'safe',
         },
         description:
-          'The MDX components to use for rendering MDX files. Meant to be ejected.',
+          'The component used to render <a> tags and Markdown links in MDX',
+      },
+      'MDXComponents/Code': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <code> tags and Markdown code blocks in MDX',
+      },
+      'MDXComponents/Details': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The component used to render <details> tags in MDX',
+      },
+      'MDXComponents/Head': {
+        actions: {
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+        description:
+          'Technical component used to assign metadata (generally for SEO purpose) to the current MDX document',
+      },
+      'MDXComponents/Heading': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render heading tags (<h1>, <h2>...) and Markdown headings in MDX',
+      },
+      'MDXComponents/Img': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <img> tags and Markdown images in MDX',
+      },
+      'MDXComponents/Pre': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The component used to render <pre> tags in MDX',
+      },
+      'MDXComponents/Ul': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <ul> tags and Markdown unordered lists in MDX',
+      },
+      MDXContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'A component wrapping all MDX content and providing the MDXComponents to the MDX context',
+      },
+      'NavbarItem/ComponentTypes': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
       },
-
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {
-          wrap: 'forbidden',
           eject: 'forbidden',
+          wrap: 'forbidden',
         },
       },
+      NotFound: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The global 404 page of your site, meant to be ejected and customized',
+      },
+      SearchBar: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        // TODO how to describe this one properly?
+        // By default it's an empty placeholder for the user to fill
+        description:
+          'The search bar component of your site, appearing in the navbar.',
+      },
+      'prism-include-languages': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden', // Not a component!
+        },
+        description:
+          'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',
+      },
     },
   };
 }

package/src/index.ts

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {LoadContext, Plugin, PostCssOptions} from '@docusaurus/types';
+import type {LoadContext, Plugin} from '@docusaurus/types';
 import type {ThemeConfig} from '@docusaurus/theme-common';
 import {getTranslationFiles, translateThemeConfig} from './translations';
-import path from 'path';
 import {createRequire} from 'module';
 import type {Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
@@ -92,35 +91,34 @@ function getInfimaCSSFile(direction: string) {
   }.css`;
 }
 
-export default function docusaurusThemeClassic(
+export default function themeClassic(
   context: LoadContext,
   options: Options,
-): Plugin<void> {
+): Plugin<undefined> {
   const {
-    siteConfig: {themeConfig: roughlyTypedThemeConfig},
     i18n: {currentLocale, localeConfigs},
   } = context;
-  const themeConfig = (roughlyTypedThemeConfig || {}) as ThemeConfig;
+  const themeConfig = context.siteConfig.themeConfig as ThemeConfig;
   const {
     announcementBar,
     colorMode,
-    prism: {additionalLanguages = []} = {},
+    prism: {additionalLanguages},
   } = themeConfig;
-  const {customCss} = options || {};
-  const {direction} = localeConfigs[currentLocale];
+  const {customCss} = options ?? {};
+  const {direction} = localeConfigs[currentLocale]!;
 
   return {
     name: 'docusaurus-theme-classic',
 
     getThemePath() {
-      return path.join(__dirname, '../lib-next/theme');
+      return '../lib-next/theme';
     },
 
     getTypeScriptThemePath() {
-      return path.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
 
-    getTranslationFiles: async () => getTranslationFiles({themeConfig}),
+    getTranslationFiles: () => getTranslationFiles({themeConfig}),
 
     translateThemeConfig: (params) =>
       translateThemeConfig({
@@ -138,8 +136,9 @@ export default function docusaurusThemeClassic(
     getClientModules() {
       const modules = [
         require.resolve(getInfimaCSSFile(direction)),
-        path.resolve(__dirname, './prism-include-languages'),
-        path.resolve(__dirname, './admonitions.css'),
+        './prism-include-languages',
+        './admonitions.css',
+        './nprogress',
       ];
 
       if (customCss) {
@@ -171,7 +170,7 @@ export default function docusaurusThemeClassic(
       };
     },
 
-    configurePostCss(postCssOptions: PostCssOptions) {
+    configurePostCss(postCssOptions) {
       if (direction === 'rtl') {
         const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
         const plugin: PostCssPlugin = {

package/src/nprogress.css

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+/**
+ * Styles for NProgress
+ * Copied over to remove unused styles for the spinner.
+ * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
+ */
+
+:root {
+  --docusaurus-progress-bar-color: var(--ifm-color-primary);
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--docusaurus-progress-bar-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
+    0 0 5px var(--docusaurus-progress-bar-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}