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

package/lib/theme/DocItem/index.js

@@ -5,114 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import {
-  PageMetadata,
-  HtmlClassNameProvider,
-  ThemeClassNames,
-  useWindowSize,
-} from '@docusaurus/theme-common';
-import DocPaginator from '@theme/DocPaginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocItemFooter from '@theme/DocItemFooter';
-import TOC from '@theme/TOC';
-import TOCCollapsible from '@theme/TOCCollapsible';
-import Heading from '@theme/Heading';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import MDXContent from '@theme/MDXContent';
-import styles from './styles.module.css';
-function DocItemMetadata(props) {
-  const {content: DocContent} = props;
-  const {metadata, frontMatter, assets} = DocContent;
-  const {keywords} = frontMatter;
-  const {description, title} = metadata;
-  const image = assets.image ?? frontMatter.image;
-  return <PageMetadata {...{title, description, keywords, image}} />;
-}
-function DocItemContent(props) {
-  const {content: DocContent} = props;
-  const {metadata, frontMatter} = DocContent;
-  const {
-    hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents,
-    toc_min_heading_level: tocMinHeadingLevel,
-    toc_max_heading_level: tocMaxHeadingLevel,
-  } = frontMatter;
-  const {title} = metadata;
-  // We only add a title if:
-  // - user doesn't ask to hide it with front matter
-  // - the markdown content does not already contain a top-level h1 heading
-  const shouldAddTitle =
-    !hideTitle && typeof DocContent.contentTitle === 'undefined';
-  const windowSize = useWindowSize();
-  const canRenderTOC =
-    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-  const renderTocDesktop =
-    canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
-  return (
-    <div className="row">
-      <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
-        <DocVersionBanner />
-        <div className={styles.docItemContainer}>
-          <article>
-            <DocBreadcrumbs />
-            <DocVersionBadge />
-
-            {canRenderTOC && (
-              <TOCCollapsible
-                toc={DocContent.toc}
-                minHeadingLevel={tocMinHeadingLevel}
-                maxHeadingLevel={tocMaxHeadingLevel}
-                className={clsx(
-                  ThemeClassNames.docs.docTocMobile,
-                  styles.tocMobile,
-                )}
-              />
-            )}
-
-            <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-              {/*
-          Title can be declared inside md content or declared through
-          front matter and added manually. To make both cases consistent,
-          the added title is added under the same div.markdown block
-          See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
-          */}
-              {shouldAddTitle && (
-                <header>
-                  <Heading as="h1">{title}</Heading>
-                </header>
-              )}
-              <MDXContent>
-                <DocContent />
-              </MDXContent>
-            </div>
-
-            <DocItemFooter {...props} />
-          </article>
-
-          <DocPaginator previous={metadata.previous} next={metadata.next} />
-        </div>
-      </div>
-      {renderTocDesktop && (
-        <div className="col col--3">
-          <TOC
-            toc={DocContent.toc}
-            minHeadingLevel={tocMinHeadingLevel}
-            maxHeadingLevel={tocMaxHeadingLevel}
-            className={ThemeClassNames.docs.docTocDesktop}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+import {HtmlClassNameProvider} from '@docusaurus/theme-common';
+import {DocProvider} from '@docusaurus/theme-common/internal';
+import DocItemMetadata from '@theme/DocItem/Metadata';
+import DocItemLayout from '@theme/DocItem/Layout';
 export default function DocItem(props) {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  const MDXComponent = props.content;
   return (
-    <HtmlClassNameProvider className={docHtmlClassName}>
-      <DocItemMetadata {...props} />
-      <DocItemContent {...props} />
-    </HtmlClassNameProvider>
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <MDXComponent />
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
   );
 }

package/lib/theme/DocPage/Layout/Main/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {useDocsSidebar} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
   const sidebar = useDocsSidebar();

package/lib/theme/DocPage/Layout/Sidebar/ExpandButton/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import {translate} from '@docusaurus/Translate';
-import IconArrow from '@theme/IconArrow';
+import IconArrow from '@theme/Icon/Arrow';
 import styles from './styles.module.css';
 export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) {
   return (

package/lib/theme/DocPage/Layout/Sidebar/index.js

@@ -6,7 +6,8 @@
  */
 import React, {useState, useCallback} from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import DocSidebar from '@theme/DocSidebar';
 import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {useState} from 'react';
-import {useDocsSidebar} from '@docusaurus/theme-common';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import Layout from '@theme/Layout';
 import BackToTopButton from '@theme/BackToTopButton';
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';

package/lib/theme/DocPage/index.js

@@ -6,14 +6,13 @@
  */
 import React from 'react';
 import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
 import {
-  HtmlClassNameProvider,
-  ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
   DocsVersionProvider,
   useDocRouteMetadata,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import DocPageLayout from '@theme/DocPage/Layout';
 import NotFound from '@theme/NotFound';
 import SearchMetadata from '@theme/SearchMetadata';

package/lib/theme/DocSidebar/Desktop/CollapseButton/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
-import IconArrow from '@theme/IconArrow';
+import IconArrow from '@theme/Icon/Arrow';
 import styles from './styles.module.css';
 export default function CollapseButton({onClick}) {
   return (

package/lib/theme/DocSidebar/Desktop/Content/index.js

@@ -6,11 +6,11 @@
  */
 import React, {useState} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
-  ThemeClassNames,
   useAnnouncementBar,
   useScrollPosition,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import styles from './styles.module.css';
 function useShowAnnouncementBar() {

package/lib/theme/DocSidebar/Mobile/index.js

@@ -9,8 +9,8 @@ import clsx from 'clsx';
 import {
   NavbarSecondaryMenuFiller,
   ThemeClassNames,
-  useNavbarMobileSidebar,
 } from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 // eslint-disable-next-line react/function-component-definition
 const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {

package/lib/theme/DocSidebarItem/Category/index.js

@@ -7,16 +7,18 @@
 import React, {useEffect, useMemo} from 'react';
 import clsx from 'clsx';
 import {
-  isActiveSidebarItem,
+  ThemeClassNames,
+  useThemeConfig,
   usePrevious,
   Collapsible,
   useCollapsible,
+} from '@docusaurus/theme-common';
+import {
+  isActiveSidebarItem,
   findFirstCategoryLink,
-  ThemeClassNames,
-  useThemeConfig,
   useDocSidebarItemsExpandedState,
   isSamePath,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import useIsBrowser from '@docusaurus/useIsBrowser';

package/lib/theme/DocSidebarItem/Link/index.js

@@ -6,10 +6,11 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import {isActiveSidebarItem, ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
 export default function DocSidebarItemLink({
   item,

package/lib/theme/DocSidebarItems/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {memo} from 'react';
-import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common';
+import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common/internal';
 import DocSidebarItem from '@theme/DocSidebarItem';
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation

package/lib/theme/DocVersionBadge/index.js

@@ -7,7 +7,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsVersion} from '@docusaurus/theme-common/internal';
 export default function DocVersionBadge({className}) {
   const versionMetadata = useDocsVersion();
   if (versionMetadata.badge) {

package/lib/theme/DocVersionBanner/index.js

@@ -13,11 +13,11 @@ import {
   useActivePlugin,
   useDocVersionSuggestions,
 } from '@docusaurus/plugin-content-docs/client';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
-  ThemeClassNames,
   useDocsPreferredVersion,
   useDocsVersion,
-} from '@docusaurus/theme-common';
+} from '@docusaurus/theme-common/internal';
 function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
   return (
     <Translate

package/lib/theme/EditThisPage/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import IconEdit from '@theme/IconEdit';
+import IconEdit from '@theme/Icon/Edit';
 export default function EditThisPage({editUrl}) {
   return (
     <a

package/lib/theme/Footer/LinkItem/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
-import IconExternalLink from '@theme/IconExternalLink';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 export default function FooterLinkItem({item}) {
   const {to, href, label, prependBaseUrlToHref, ...props} = item;
   const toUrl = useBaseUrl(to);

package/lib/theme/Footer/Logo/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
@@ -17,17 +18,21 @@ function LogoImage({logo}) {
   };
   return (
     <ThemedImage
-      className="footer__logo"
+      className={clsx('footer__logo', logo.className)}
       alt={logo.alt}
       sources={sources}
       width={logo.width}
       height={logo.height}
+      style={logo.style}
     />
   );
 }
 export default function FooterLogo({logo}) {
   return logo.href ? (
-    <Link href={logo.href} className={styles.footerLogoLink}>
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
       <LogoImage logo={logo} />
     </Link>
   ) : (

package/lib/theme/{IconArrow → Icon/Arrow}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconArrow';
+import type { Props } from '@theme/Icon/Arrow';
 export default function IconArrow(props: Props): JSX.Element;

package/lib/theme/{IconClose → Icon/Close}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconClose';
+import type { Props } from '@theme/Icon/Close';
 export default function IconClose({ width, height, color, strokeWidth, className, ...restProps }: Props): JSX.Element;

package/lib/theme/{IconDarkMode → Icon/DarkMode}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconDarkMode';
+import type { Props } from '@theme/Icon/DarkMode';
 export default function IconDarkMode(props: Props): JSX.Element;

package/lib/theme/{IconEdit → Icon/Edit}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconEdit';
+import type { Props } from '@theme/Icon/Edit';
 export default function IconEdit({ className, ...restProps }: Props): JSX.Element;

package/lib/theme/{IconExternalLink → Icon/ExternalLink}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconExternalLink';
+import type { Props } from '@theme/Icon/ExternalLink';
 export default function IconExternalLink({ width, height, }: Props): JSX.Element;

package/lib/theme/{IconHome → Icon/Home}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconHome';
+import type { Props } from '@theme/Icon/Home';
 export default function IconHome(props: Props): JSX.Element;

package/lib/theme/{IconLanguage → Icon/Language}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconLanguage';
+import type { Props } from '@theme/Icon/Language';
 export default function IconLanguage({ width, height, ...props }: Props): JSX.Element;

package/lib/theme/{IconLightMode → Icon/LightMode}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconLightMode';
+import type { Props } from '@theme/Icon/LightMode';
 export default function IconLightMode(props: Props): JSX.Element;

package/lib/theme/{IconMenu → Icon/Menu}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/IconMenu';
+import type { Props } from '@theme/Icon/Menu';
 export default function IconMenu({ width, height, className, ...restProps }: Props): JSX.Element;

package/lib/theme/Layout/Provider/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/Layout/Provider';
+export default function LayoutProvider({ children }: Props): JSX.Element;

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import {composeProviders} from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+export default function LayoutProvider({children}) {
+  return <Provider>{children}</Provider>;
+}

package/lib/theme/Layout/index.d.ts

@@ -5,6 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import './styles.css';
 import type { Props } from '@theme/Layout';
 export default function Layout(props: Props): JSX.Element;

package/lib/theme/Layout/index.js

@@ -7,18 +7,15 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import {
-  PageMetadata,
-  ThemeClassNames,
-  useKeyboardNavigation,
-} from '@docusaurus/theme-common';
+import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
-import LayoutProviders from '@theme/LayoutProviders';
+import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
-import './styles.css';
+import styles from './styles.module.css';
 export default function Layout(props) {
   const {
     children,
@@ -30,7 +27,7 @@ export default function Layout(props) {
   } = props;
   useKeyboardNavigation();
   return (
-    <LayoutProviders>
+    <LayoutProvider>
       <PageMetadata title={title} description={description} />
 
       <SkipToContent />
@@ -39,13 +36,18 @@ export default function Layout(props) {
 
       <Navbar />
 
-      <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
+      <div
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
         <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
           {children}
         </ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}
-    </LayoutProviders>
+    </LayoutProvider>
   );
 }

package/{src/theme/Layout/styles.css → lib/theme/Layout/styles.module.css}

@@ -5,23 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-html,
-body {
+:global(html, body) {
   height: 100%;
 }
 
-#__docusaurus {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.main-wrapper {
+.mainWrapper {
   flex: 1 0 auto;
 }
 
-/* Docusaurus-specific utility classes */
-
-.docusaurus-mt-lg {
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
   margin-top: 3rem;
 }
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}