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

package/lib/theme/Logo/index.js

@@ -10,38 +10,56 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import ThemedImage from '@theme/ThemedImage';
-export default function Logo(props) {
-  const {
-    siteConfig: {title},
-  } = useDocusaurusContext();
-  const {
-    navbar: {title: navbarTitle, logo = {src: ''}},
-  } = useThemeConfig();
-  const {imageClassName, titleClassName, ...propsRest} = props;
-  const logoLink = useBaseUrl(logo.href || '/');
+function LogoThemedImage({logo, alt, imageClassName}) {
   const sources = {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
   const themedImage = (
     <ThemedImage
+      className={logo.className}
       sources={sources}
       height={logo.height}
       width={logo.width}
-      alt={logo.alt || navbarTitle || title}
+      alt={alt}
+      style={logo.style}
     />
   );
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+export default function Logo(props) {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
   return (
     <Link
       to={logoLink}
       {...propsRest}
-      {...(logo.target && {target: logo.target})}>
-      {logo.src &&
-        (imageClassName ? (
-          <div className={imageClassName}>{themedImage}</div>
-        ) : (
-          themedImage
-        ))}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

package/lib/theme/MDXComponents/Code.js

@@ -22,7 +22,7 @@ export default function MDXCode(props) {
   const shouldBeInline = React.Children.toArray(props.children).every(
     (el) =>
       (typeof el === 'string' && !el.includes('\n')) ||
-      (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+      (isValidElement(el) && inlineElements.includes(el.props?.mdxType)),
   );
   return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
 }

package/lib/theme/MDXComponents/index.js

@@ -13,6 +13,7 @@ import MDXDetails from '@theme/MDXComponents/Details';
 import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
+import Admonition from '@theme/Admonition';
 const MDXComponents = {
   head: MDXHead,
   code: MDXCode,
@@ -27,5 +28,6 @@ const MDXComponents = {
   h4: (props) => <MDXHeading as="h4" {...props} />,
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
 };
 export default MDXComponents;

package/lib/theme/MDXPage/index.js

@@ -33,11 +33,13 @@ export default function MDXPage(props) {
         <main className="container container--fluid margin-vert--lg">
           <div className={clsx('row', styles.mdxPageWrapper)}>
             <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-              <MDXContent>
-                <MDXPageContent />
-              </MDXContent>
+              <article>
+                <MDXContent>
+                  <MDXPageContent />
+                </MDXContent>
+              </article>
             </div>
-            {!hideTableOfContents && MDXPageContent.toc && (
+            {!hideTableOfContents && MDXPageContent.toc.length > 0 && (
               <div className="col col--2">
                 <TOC
                   toc={MDXPageContent.toc}

package/lib/theme/Navbar/Content/index.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
-  useThemeConfig,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarItem from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import SearchBar from '@theme/SearchBar';

package/lib/theme/Navbar/Layout/index.js

@@ -6,11 +6,11 @@
  */
 import React from 'react';
 import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
-  useThemeConfig,
   useHideableNavbar,
   useNavbarMobileSidebar,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import styles from './styles.module.css';
 function NavbarBackdrop(props) {

package/lib/theme/Navbar/MobileSidebar/Header/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
-import IconClose from '@theme/IconClose';
+import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
 function CloseButton() {
   const mobileSidebar = useNavbarMobileSidebar();

package/lib/theme/Navbar/MobileSidebar/Layout/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {useNavbarSecondaryMenu} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 export default function NavbarMobileSidebarLayout({
   header,
   primaryMenu,

package/lib/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useNavbarMobileSidebar, useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import NavbarItem from '@theme/NavbarItem';
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved

package/lib/theme/Navbar/MobileSidebar/SecondaryMenu/index.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useNavbarSecondaryMenu, useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
 import Translate from '@docusaurus/Translate';
 function SecondaryMenuBackButton(props) {
   return (

package/lib/theme/Navbar/MobileSidebar/Toggle/index.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common';
-import IconMenu from '@theme/IconMenu';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import IconMenu from '@theme/Icon/Menu';
 export default function MobileSidebarToggle() {
   const mobileSidebar = useNavbarMobileSidebar();
   return (

package/lib/theme/Navbar/MobileSidebar/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import {
   useLockBodyScroll,
   useNavbarMobileSidebar,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
 import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
 import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';

package/lib/theme/NavbarItem/DocNavbarItem.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import {useLayoutDoc} from '@docusaurus/theme-common';
+import {useLayoutDoc} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 export default function DocNavbarItem({
   docId,

package/lib/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import {useLayoutDocsSidebar} from '@docusaurus/theme-common';
+import {useLayoutDocsSidebar} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 export default function DocSidebarNavbarItem({
   sidebarId,

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -9,10 +9,8 @@ import {
   useVersions,
   useActiveDocContext,
 } from '@docusaurus/plugin-content-docs/client';
-import {
-  useDocsPreferredVersion,
-  useDocsVersionCandidates,
-} from '@docusaurus/theme-common';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';

package/lib/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useDocsVersionCandidates} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 const getVersionMainDoc = (version) =>
   version.docs.find((doc) => doc.id === version.mainDocId);

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -7,12 +7,11 @@
 import React, {useState, useRef, useEffect} from 'react';
 import clsx from 'clsx';
 import {
-  isSamePath,
+  isRegexpStringMatch,
   useCollapsible,
   Collapsible,
-  isRegexpStringMatch,
-  useLocalPathname,
 } from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
 import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
 import NavbarItem from '@theme/NavbarItem';
 function isItemActive(item, localPathname) {

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -6,10 +6,10 @@
  */
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import IconLanguage from '@theme/IconLanguage';
+import IconLanguage from '@theme/Icon/Language';
 import styles from './styles.module.css';
 export default function LocaleDropdownNavbarItem({
   mobile,

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 export default function NavbarNavLink({
   activeBasePath,
   activeBaseRegex,

package/lib/theme/SiteMetadata/index.js

@@ -8,13 +8,12 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
 import {
-  PageMetadata,
   DEFAULT_SEARCH_TAG,
   useAlternatePageUtils,
-  useThemeConfig,
   keyboardFocusedClassName,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import SearchMetadata from '@theme/SearchMetadata';
 // TODO move to SiteMetadataDefaults or theme-common ?

package/lib/theme/SkipToContent/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common';
+import {useSkipToContent} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 export default function SkipToContent() {
   const {containerRef, handleSkip} = useSkipToContent();

package/lib/theme/TOCItems/index.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
-  useThemeConfig,
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import TOCItemTree from '@theme/TOCItems/Tree';
 export default function TOCItems({
   toc,

package/lib/theme/Tabs/index.js

@@ -7,11 +7,11 @@
 import React, {useState, cloneElement, isValidElement} from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import {duplicates} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
-  duplicates,
   useTabGroupChoice,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization

package/lib/validateThemeConfig.js

@@ -268,6 +268,17 @@ const FooterLinkItemSchema = utils_validation_1.Joi.object({
 const CustomCssSchema = utils_validation_1.Joi.alternatives()
     .try(utils_validation_1.Joi.array().items(utils_validation_1.Joi.string().required()), utils_validation_1.Joi.string().required())
     .optional();
+const LogoSchema = utils_validation_1.Joi.object({
+    alt: utils_validation_1.Joi.string().allow(''),
+    src: utils_validation_1.Joi.string().required(),
+    srcDark: utils_validation_1.Joi.string(),
+    width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
+    height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
+    href: utils_validation_1.Joi.string(),
+    target: utils_validation_1.Joi.string(),
+    style: utils_validation_1.Joi.object(),
+    className: utils_validation_1.Joi.string(),
+});
 exports.ThemeConfigSchema = utils_validation_1.Joi.object({
     // TODO temporary (@alpha-58)
     // @ts-expect-error: forbidden
@@ -309,27 +320,11 @@ exports.ThemeConfigSchema = utils_validation_1.Joi.object({
             .items(NavbarItemSchema)
             .default(exports.DEFAULT_CONFIG.navbar.items),
         title: utils_validation_1.Joi.string().allow('', null),
-        logo: utils_validation_1.Joi.object({
-            alt: utils_validation_1.Joi.string().allow(''),
-            src: utils_validation_1.Joi.string().required(),
-            srcDark: utils_validation_1.Joi.string(),
-            width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            href: utils_validation_1.Joi.string(),
-            target: utils_validation_1.Joi.string(),
-        }),
+        logo: LogoSchema,
     }).default(exports.DEFAULT_CONFIG.navbar),
     footer: utils_validation_1.Joi.object({
         style: utils_validation_1.Joi.string().equal('dark', 'light').default('light'),
-        logo: utils_validation_1.Joi.object({
-            alt: utils_validation_1.Joi.string().allow(''),
-            src: utils_validation_1.Joi.string().required(),
-            srcDark: utils_validation_1.Joi.string(),
-            // TODO infer this from reading the image
-            width: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            height: utils_validation_1.Joi.alternatives().try(utils_validation_1.Joi.string(), utils_validation_1.Joi.number()),
-            href: utils_validation_1.Joi.string(),
-        }),
+        logo: LogoSchema,
         copyright: utils_validation_1.Joi.string(),
         links: utils_validation_1.Joi.alternatives(utils_validation_1.Joi.array().items(utils_validation_1.Joi.object({
             title: utils_validation_1.Joi.string().allow(null).default(null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,27 +20,31 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.21",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.21",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.21",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.21",
-    "@docusaurus/theme-common": "2.0.0-beta.21",
-    "@docusaurus/theme-translations": "2.0.0-beta.21",
-    "@docusaurus/utils": "2.0.0-beta.21",
-    "@docusaurus/utils-common": "2.0.0-beta.21",
-    "@docusaurus/utils-validation": "2.0.0-beta.21",
+    "@docusaurus/core": "2.0.0-beta.22",
+    "@docusaurus/mdx-loader": "2.0.0-beta.22",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.22",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.22",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.22",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.22",
+    "@docusaurus/theme-common": "2.0.0-beta.22",
+    "@docusaurus/theme-translations": "2.0.0-beta.22",
+    "@docusaurus/types": "2.0.0-beta.22",
+    "@docusaurus/utils": "2.0.0-beta.22",
+    "@docusaurus/utils-common": "2.0.0-beta.22",
+    "@docusaurus/utils-validation": "2.0.0-beta.22",
     "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.1.1",
+    "clsx": "^1.2.0",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.39",
+    "infima": "0.2.0-alpha.41",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.14",
-    "prism-react-renderer": "^1.3.3",
+    "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.28.0",
     "react-router-dom": "^5.3.3",
     "rtlcss": "^3.5.0",
-    "tslib": "^2.4.0"
+    "tslib": "^2.4.0",
+    "utility-types": "^3.10.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-beta.21",
@@ -60,5 +64,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "69ac49fc6909517f13615ee40290c4bd00c39df4"
+  "gitHead": "daf9e462c4eebb7ac26a940932311f987e768f87"
 }

package/src/getSwizzleConfig.ts

@@ -93,35 +93,35 @@ export default function getSwizzleConfig(): SwizzleConfig {
         },
         description: 'The footer logo',
       },
-      IconArrow: {
+      'Icon/Arrow': {
         actions: {
           eject: 'safe',
           wrap: 'safe',
         },
         description: 'The arrow icon component',
       },
-      IconDarkMode: {
+      'Icon/DarkMode': {
         actions: {
           eject: 'safe',
           wrap: 'safe',
         },
         description: 'The dark mode icon component.',
       },
-      IconEdit: {
+      'Icon/Edit': {
         actions: {
           eject: 'safe',
           wrap: 'safe',
         },
         description: 'The edit icon component',
       },
-      IconLightMode: {
+      'Icon/LightMode': {
         actions: {
           eject: 'safe',
           wrap: 'safe',
         },
         description: 'The light mode icon component.',
       },
-      IconMenu: {
+      'Icon/Menu': {
         actions: {
           eject: 'safe',
           wrap: 'safe',

package/src/index.ts

@@ -29,7 +29,9 @@ const ThemeStorageKey = 'theme';
 const noFlashColorMode = ({
   defaultMode,
   respectPrefersColorScheme,
-}: ThemeConfig['colorMode']) => `(function() {
+}: ThemeConfig['colorMode']) =>
+  /* language=js */
+  `(function() {
   var defaultMode = '${defaultMode}';
   var respectPrefersColorScheme = ${respectPrefersColorScheme};
 
@@ -76,6 +78,7 @@ const AnnouncementBarDismissDataAttribute =
 // We always render the announcement bar html on the server, to prevent layout
 // shifts on React hydration. The theme can use CSS + the data attribute to hide
 // the announcement bar asap (before React hydration)
+/* language=js */
 const AnnouncementBarInlineJavaScript = `
 (function() {
   function isDismissed() {
@@ -139,7 +142,6 @@ export default function themeClassic(
       const modules = [
         require.resolve(getInfimaCSSFile(direction)),
         './prism-include-languages',
-        './admonitions.css',
         './nprogress',
       ];