@docusaurus/theme-classic 2.0.0-beta.17 → 2.0.0-beta.18

package/src/theme/Footer/index.tsx

@@ -6,201 +6,27 @@
  */
 
 import React from 'react';
-import clsx from 'clsx';
 
-import Link from '@docusaurus/Link';
-import {
-  type FooterLinkItem,
-  useThemeConfig,
-  type MultiColumnFooter,
-  type SimpleFooter,
-} from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import styles from './styles.module.css';
-import ThemedImage, {type Props as ThemedImageProps} from '@theme/ThemedImage';
-import IconExternalLink from '@theme/IconExternalLink';
-
-function FooterLink({
-  to,
-  href,
-  label,
-  prependBaseUrlToHref,
-  ...props
-}: FooterLinkItem) {
-  const toUrl = useBaseUrl(to);
-  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
-
-  return (
-    <Link
-      className="footer__link-item"
-      {...(href
-        ? {
-            href: prependBaseUrlToHref ? normalizedHref : href,
-          }
-        : {
-            to: toUrl,
-          })}
-      {...props}>
-      {href && !isInternalUrl(href) ? (
-        <span>
-          {label}
-          <IconExternalLink />
-        </span>
-      ) : (
-        label
-      )}
-    </Link>
-  );
-}
-
-function FooterLogo({
-  sources,
-  alt,
-  width,
-  height,
-}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) {
-  return (
-    <ThemedImage
-      className="footer__logo"
-      alt={alt}
-      sources={sources}
-      width={width}
-      height={height}
-    />
-  );
-}
-
-function MultiColumnLinks({links}: {links: MultiColumnFooter['links']}) {
-  return (
-    <>
-      {links.map((linkItem, i) => (
-        <div key={i} className="col footer__col">
-          <div className="footer__title">{linkItem.title}</div>
-          <ul className="footer__items">
-            {linkItem.items.map((item, key) =>
-              item.html ? (
-                <li
-                  key={key}
-                  className="footer__item"
-                  // Developer provided the HTML, so assume it's safe.
-                  // eslint-disable-next-line react/no-danger
-                  dangerouslySetInnerHTML={{
-                    __html: item.html,
-                  }}
-                />
-              ) : (
-                <li key={item.href || item.to} className="footer__item">
-                  <FooterLink {...item} />
-                </li>
-              ),
-            )}
-          </ul>
-        </div>
-      ))}
-    </>
-  );
-}
-
-function SimpleLinks({links}: {links: SimpleFooter['links']}) {
-  return (
-    <div className="footer__links">
-      {links.map((item, key) => (
-        <React.Fragment key={key}>
-          {item.html ? (
-            <span
-              className="footer__link-item"
-              // Developer provided the HTML, so assume it's safe.
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: item.html,
-              }}
-            />
-          ) : (
-            <FooterLink {...item} />
-          )}
-          {links.length !== key + 1 && (
-            <span className="footer__link-separator">·</span>
-          )}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
-
-function isMultiColumnFooterLinks(
-  links: MultiColumnFooter['links'] | SimpleFooter['links'],
-): links is MultiColumnFooter['links'] {
-  return 'title' in links[0];
-}
+import {useThemeConfig} from '@docusaurus/theme-common';
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
 
 function Footer(): JSX.Element | null {
   const {footer} = useThemeConfig();
-
-  const {copyright, links = [], logo = {}} = footer || {};
-  const sources = {
-    light: useBaseUrl(logo.src),
-    dark: useBaseUrl(logo.srcDark || logo.src),
-  };
-
   if (!footer) {
     return null;
   }
+  const {copyright, links, logo, style} = footer;
 
   return (
-    <footer
-      className={clsx('footer', {
-        'footer--dark': footer.style === 'dark',
-      })}>
-      <div className="container container-fluid">
-        {links &&
-          links.length > 0 &&
-          (isMultiColumnFooterLinks(links) ? (
-            <div className="row footer__links">
-              <MultiColumnLinks links={links} />
-            </div>
-          ) : (
-            <div className="footer__links text--center">
-              <SimpleLinks links={links} />
-            </div>
-          ))}
-        {(logo || copyright) && (
-          <div className="footer__bottom text--center">
-            {logo && (logo.src || logo.srcDark) && (
-              <div className="margin-bottom--sm">
-                {logo.href ? (
-                  <Link href={logo.href} className={styles.footerLogoLink}>
-                    <FooterLogo
-                      alt={logo.alt}
-                      sources={sources}
-                      width={logo.width}
-                      height={logo.height}
-                    />
-                  </Link>
-                ) : (
-                  <FooterLogo
-                    alt={logo.alt}
-                    sources={sources}
-                    width={logo.width}
-                    height={logo.height}
-                  />
-                )}
-              </div>
-            )}
-            {copyright ? (
-              <div
-                className="footer__copyright"
-                // Developer provided the HTML, so assume it's safe.
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{
-                  __html: copyright,
-                }}
-              />
-            ) : null}
-          </div>
-        )}
-      </div>
-    </footer>
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
   );
 }
 

package/src/theme/Heading/index.tsx

@@ -25,10 +25,12 @@ function AnchorHeading({as: As, id, ...props}: Props) {
   return (
     <As
       {...props}
-      className={clsx('anchor', {
-        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-        [styles.anchorWithStickyNavbar]: !hideOnScroll,
-      })}
+      className={clsx(
+        'anchor',
+        hideOnScroll
+          ? styles.anchorWithHideOnScrollNavbar
+          : styles.anchorWithStickyNavbar,
+      )}
       id={id}>
       {props.children}
       <a

package/src/theme/IconExternalLink/styles.module.css

@@ -7,6 +7,4 @@
 
 .iconExternalLink {
   margin-left: 0.3rem;
-  position: relative;
-  top: 1px;
 }

package/src/theme/Layout/index.tsx

@@ -13,20 +13,30 @@ import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
-import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
-import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  ThemeClassNames,
+  useKeyboardNavigation,
+} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
 export default function Layout(props: Props): JSX.Element {
-  const {children, noFooter, wrapperClassName, pageClassName} = props;
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
 
   useKeyboardNavigation();
 
   return (
     <LayoutProviders>
-      <LayoutHead {...props} />
+      <PageMetadata title={title} description={description} />
 
       <SkipToContent />
 
@@ -34,12 +44,7 @@ export default function Layout(props: Props): JSX.Element {
 
       <Navbar />
 
-      <div
-        className={clsx(
-          ThemeClassNames.wrapper.main,
-          wrapperClassName,
-          pageClassName,
-        )}>
+      <div className={clsx(ThemeClassNames.wrapper.main, wrapperClassName)}>
         <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
       </div>
 

package/src/theme/LayoutProviders/index.tsx

@@ -11,8 +11,9 @@ import {
   TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
-  MobileSecondaryMenuProvider,
   ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
 } from '@docusaurus/theme-common';
 import type {Props} from '@theme/LayoutProviders';
 
@@ -23,9 +24,9 @@ export default function LayoutProviders({children}: Props): JSX.Element {
         <TabGroupChoiceProvider>
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
-              <MobileSecondaryMenuProvider>
-                {children}
-              </MobileSecondaryMenuProvider>
+              <PluginHtmlClassNameProvider>
+                <NavbarProvider>{children}</NavbarProvider>
+              </PluginHtmlClassNameProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>
         </TabGroupChoiceProvider>

package/src/theme/MDXComponents/A.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import type {Props} from '@theme/MDXComponents/A';
+
+export default function MDXA(props: Props): JSX.Element {
+  return <Link {...props} />;
+}

package/src/theme/MDXComponents/Code.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 type {ComponentProps} from 'react';
+import React, {isValidElement} from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import type {Props} from '@theme/MDXComponents/Code';
+
+export default function MDXCode(props: Props): JSX.Element {
+  const inlineElements = [
+    'a',
+    'b',
+    'big',
+    'i',
+    'span',
+    'em',
+    'strong',
+    'sup',
+    'sub',
+    'small',
+  ];
+  const shouldBeInline = React.Children.toArray(props.children).every(
+    (el) =>
+      (typeof el === 'string' && !el.includes('\n')) ||
+      (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+  );
+
+  return shouldBeInline ? (
+    <code {...props} />
+  ) : (
+    <CodeBlock {...(props as ComponentProps<typeof CodeBlock>)} />
+  );
+}

package/src/theme/MDXComponents/Details.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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, {type ComponentProps, type ReactElement} from 'react';
+import Details from '@theme/Details';
+import type {Props} from '@theme/MDXComponents/Details';
+
+export default function MDXDetails(props: Props): JSX.Element {
+  const items = React.Children.toArray(props.children) as ReactElement[];
+  // Split summary item from the rest to pass it as a separate prop to the
+  // Details theme component
+  const summary: ReactElement<ComponentProps<'summary'>> = items.find(
+    (item) => item?.props?.mdxType === 'summary',
+  )!;
+  const children = <>{items.filter((item) => item !== summary)}</>;
+
+  return (
+    <Details {...props} summary={summary}>
+      {children}
+    </Details>
+  );
+}

package/src/theme/MDXComponents/Head.tsx

@@ -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, {type ReactElement, type ComponentProps} from 'react';
+import Head from '@docusaurus/Head';
+import type {Props} from '@theme/MDXComponents/Head';
+
+// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
+function unwrapMDXElement(element: ReactElement) {
+  if (element?.props?.mdxType && element?.props?.originalType) {
+    const {mdxType, originalType, ...newProps} = element.props;
+    return React.createElement(element.props.originalType, newProps);
+  }
+  return element;
+}
+
+export default function MDXHead(props: Props): JSX.Element {
+  const unwrappedChildren = React.Children.map(props.children, (child) =>
+    unwrapMDXElement(child as ReactElement),
+  );
+  return (
+    <Head {...(props as ComponentProps<typeof Head>)}>{unwrappedChildren}</Head>
+  );
+}

package/src/theme/MDXComponents/Heading.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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 Heading from '@theme/Heading';
+import type {Props} from '@theme/MDXComponents/Heading';
+
+export default function MDXHeading(props: Props): JSX.Element {
+  return <Heading {...props} />;
+}

package/src/theme/MDXComponents/Img.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.
+ */
+
+.img {
+  height: auto;
+}

package/src/theme/MDXComponents/Img.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 type {Props} from '@theme/MDXComponents/Img';
+import styles from './Img.module.css';
+import clsx from 'clsx';
+
+function transformImgClassName(className?: string): string {
+  return clsx(className, styles.img);
+}
+
+export default function MDXImg(props: Props): JSX.Element {
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img
+      loading="lazy"
+      {...props}
+      className={transformImgClassName(props.className)}
+    />
+  );
+}

package/src/theme/MDXComponents/Pre.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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, {isValidElement} from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import type {Props} from '@theme/MDXComponents/Pre';
+
+export default function MDXPre(props: Props): JSX.Element {
+  return (
+    <CodeBlock
+      // If this pre is created by a ``` fenced codeblock, unwrap the children
+      {...(isValidElement(props.children) &&
+      props.children.props.originalType === 'code'
+        ? props.children?.props
+        : {...props})}
+    />
+  );
+}

package/{lib-next/theme/MDXComponents/styles.css → src/theme/MDXComponents/Ul.module.css}

@@ -5,11 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-ul.contains-task-list {
+.contains-task-list {
   padding-left: 0;
   list-style: none;
 }
-
-img {
-  height: auto;
-}

package/src/theme/MDXComponents/Ul.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Ul';
+
+import styles from './Ul.module.css';
+
+const containsClassListLocalClass = styles['contains-task-list'];
+
+function transformUlClassName(className?: string): string {
+  return clsx(
+    className,
+    // This class is set globally by GitHub/MDX
+    // We keep the global class, but apply scoped CSS
+    // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
+    className?.includes('contains-task-list') && containsClassListLocalClass,
+  );
+}
+
+export default function MDXUl(props: Props): JSX.Element {
+  return <ul {...props} className={transformUlClassName(props.className)} />;
+}

package/src/theme/MDXComponents/index.tsx

@@ -5,89 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {
-  type ComponentProps,
-  isValidElement,
-  type ReactElement,
-} from 'react';
-import Head from '@docusaurus/Head';
-import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
-import Heading from '@theme/Heading';
-import Details from '@theme/Details';
-import type {MDXComponentsObject} from '@theme/MDXComponents';
-
-import './styles.css';
+import React from 'react';
+import MDXHead from '@theme/MDXComponents/Head';
+import MDXCode from '@theme/MDXComponents/Code';
+import MDXA from '@theme/MDXComponents/A';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXUl from '@theme/MDXComponents/Ul';
+import MDXImg from '@theme/MDXComponents/Img';
 
-// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
-// with Head/Helmet) we need to unwrap those elements.
-function unwrapMDXElement(element: ReactElement) {
-  if (element?.props?.mdxType && element?.props?.originalType) {
-    const {mdxType, originalType, ...newProps} = element.props;
-    return React.createElement(element.props.originalType, newProps);
-  }
-  return element;
-}
+import type {MDXComponentsObject} from '@theme/MDXComponents';
 
 const MDXComponents: MDXComponentsObject = {
-  head: (props) => {
-    const unwrappedChildren = React.Children.map(props.children, (child) =>
-      unwrapMDXElement(child as ReactElement),
-    );
-    return <Head {...props}>{unwrappedChildren}</Head>;
-  },
-  code: (props) => {
-    const inlineElements = [
-      'a',
-      'b',
-      'big',
-      'i',
-      'span',
-      'em',
-      'strong',
-      'sup',
-      'sub',
-      'small',
-    ];
-    const shouldBeInline = React.Children.toArray(props.children).every(
-      (el) =>
-        (typeof el === 'string' && !el.includes('\n')) ||
-        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
-    );
-
-    return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
-  },
-  a: (props) => <Link {...props} />,
-  pre: (props) => (
-    <CodeBlock
-      // If this pre is created by a ``` fenced codeblock, unwrap the children
-      {...(isValidElement(props.children) &&
-      props.children.props.originalType === 'code'
-        ? props.children?.props
-        : {...props})}
-    />
-  ),
-  details: (props): JSX.Element => {
-    const items = React.Children.toArray(props.children) as ReactElement[];
-    // Split summary item from the rest to pass it as a separate prop to the
-    // Details theme component
-    const summary: ReactElement<ComponentProps<'summary'>> = items.find(
-      (item) => item?.props?.mdxType === 'summary',
-    )!;
-    const children = <>{items.filter((item) => item !== summary)}</>;
-
-    return (
-      <Details {...props} summary={summary}>
-        {children}
-      </Details>
-    );
-  },
-  h1: (props) => <Heading as="h1" {...props} />,
-  h2: (props) => <Heading as="h2" {...props} />,
-  h3: (props) => <Heading as="h3" {...props} />,
-  h4: (props) => <Heading as="h4" {...props} />,
-  h5: (props) => <Heading as="h5" {...props} />,
-  h6: (props) => <Heading as="h6" {...props} />,
+  head: MDXHead,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  details: MDXDetails,
+  ul: MDXUl,
+  img: MDXImg,
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
 };
 
 export default MDXComponents;

package/src/theme/MDXContent/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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 {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+import type {Props} from '@theme/MDXContent';
+
+export default function MDXContent({children}: Props): JSX.Element {
+  return <MDXProvider components={MDXComponents}>{children}</MDXProvider>;
+}