@docusaurus/theme-classic 0.0.0-4707 → 0.0.0-4710

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4707",
+  "version": "0.0.0-4710",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4707",
-    "@docusaurus/plugin-content-blog": "0.0.0-4707",
-    "@docusaurus/plugin-content-docs": "0.0.0-4707",
-    "@docusaurus/plugin-content-pages": "0.0.0-4707",
-    "@docusaurus/theme-common": "0.0.0-4707",
-    "@docusaurus/theme-translations": "0.0.0-4707",
-    "@docusaurus/utils": "0.0.0-4707",
-    "@docusaurus/utils-common": "0.0.0-4707",
-    "@docusaurus/utils-validation": "0.0.0-4707",
+    "@docusaurus/core": "0.0.0-4710",
+    "@docusaurus/plugin-content-blog": "0.0.0-4710",
+    "@docusaurus/plugin-content-docs": "0.0.0-4710",
+    "@docusaurus/plugin-content-pages": "0.0.0-4710",
+    "@docusaurus/theme-common": "0.0.0-4710",
+    "@docusaurus/theme-translations": "0.0.0-4710",
+    "@docusaurus/utils": "0.0.0-4710",
+    "@docusaurus/utils-common": "0.0.0-4710",
+    "@docusaurus/utils-validation": "0.0.0-4710",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4707",
-    "@docusaurus/types": "0.0.0-4707",
+    "@docusaurus/module-type-aliases": "0.0.0-4710",
+    "@docusaurus/types": "0.0.0-4710",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "0092bf6871799bbc934553842aafd69768517768"
+  "gitHead": "b87b7d90b4b0f155d034b52406c2056ea1dced54"
 }

package/src/getSwizzleConfig.ts

@@ -37,11 +37,62 @@ export default function getSwizzleConfig(): SwizzleConfig {
       },
       Footer: {
         actions: {
-          eject: 'unsafe', // TODO split footer into smaller parts
+          eject: 'safe',
           wrap: 'safe',
         },
         description: "The footer component of you site's layout",
       },
+      'Footer/Copyright': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer copyright',
+      },
+      'Footer/Layout': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer main layout component',
+      },
+      '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',
+        },
+        description:
+          'The footer component rendering the footer links with a multi-column layout',
+      },
+      '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',

package/src/theme/Footer/Copyright/index.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 from 'react';
+import type {Props} from '@theme/Footer/Copyright';
+
+export default function FooterCopyright({copyright}: Props): JSX.Element {
+  return (
+    <div
+      className="footer__copyright"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: copyright,
+      }}
+    />
+  );
+}

package/src/theme/Footer/Layout/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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/Footer/Layout';
+
+export default function FooterLayout({
+  style,
+  links,
+  logo,
+  copyright,
+}: Props): JSX.Element {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}>
+      <div className="container container-fluid">
+        {links}
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

package/src/theme/Footer/LinkItem/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/IconExternalLink';
+import type {Props} from '@theme/Footer/LinkItem';
+
+export default function FooterLinkItem({item}: Props): JSX.Element {
+  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+
+  return (
+    <Link
+      className="footer__link-item"
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      <span>
+        {label}
+        {href && !isInternalUrl(href) && <IconExternalLink />}
+      </span>
+    </Link>
+  );
+}

package/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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/Footer/Links/MultiColumn';
+import LinkItem from '@theme/Footer/LinkItem';
+
+type ColumnType = Props['columns'][number];
+type ColumnItemType = ColumnType['items'][number];
+
+function ColumnLinkItem({item}: {item: ColumnItemType}) {
+  return item.html ? (
+    <li
+      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">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+
+function Column({column}: {column: ColumnType}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function FooterLinksMultiColumn({columns}: Props): JSX.Element {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/src/theme/Footer/Links/Simple/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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/Footer/Links/Simple';
+import LinkItem from '@theme/Footer/LinkItem';
+
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+
+function SimpleLinkItem({item}: {item: Props['links'][number]}) {
+  return 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,
+      }}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+
+export default function FooterLinksSimple({links}: Props): JSX.Element {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/theme/Footer/Links/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Footer/Links';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+
+export default function FooterLinks({links}: Props): JSX.Element {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

package/src/theme/Footer/Logo/index.tsx

@@ -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.
+ */
+
+import React from 'react';
+
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import type {Props} from '@theme/Footer/Logo';
+
+function LogoImage({logo}: Props) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+    />
+  );
+}
+
+export default function FooterLogo({logo}: Props): JSX.Element {
+  return logo.href ? (
+    <Link href={logo.href} className={styles.footerLogoLink}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

package/src/theme/Footer/index.tsx

@@ -6,185 +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, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import isInternalUrl from '@docusaurus/isInternalUrl';
-import styles from './styles.module.css';
-import ThemedImage 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}>
-      <span>
-        {label}
-        {href && !isInternalUrl(href) && <IconExternalLink />}
-      </span>
-    </Link>
-  );
-}
-
-function FooterLogo({logo}: {logo: SimpleFooter['logo']}) {
-  const {withBaseUrl} = useBaseUrlUtils();
-  if (!logo?.src) {
-    return null;
-  }
-  const sources = {
-    light: withBaseUrl(logo.src),
-    dark: withBaseUrl(logo.srcDark ?? logo.src),
-  };
-  const image = (
-    <ThemedImage
-      className="footer__logo"
-      alt={logo.alt}
-      sources={sources}
-      width={logo.width}
-      height={logo.height}
-    />
-  );
-  return (
-    <div className="margin-bottom--sm">
-      {logo.href ? (
-        <Link href={logo.href} className={styles.footerLogoLink}>
-          {image}
-        </Link>
-      ) : (
-        image
-      )}
-    </div>
-  );
-}
-
-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();
   if (!footer) {
     return null;
   }
-  const {copyright, links, logo} = footer;
+  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">
-            <FooterLogo logo={logo} />
-            {copyright && (
-              <div
-                className="footer__copyright"
-                // Developer provided the HTML, so assume it's safe.
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{
-                  __html: copyright,
-                }}
-              />
-            )}
-          </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/MDXComponents/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, {
-  type ComponentProps,
   isValidElement,
+  type ComponentProps,
   type ReactElement,
 } from 'react';
 import Head from '@docusaurus/Head';
@@ -52,7 +52,7 @@ const MDXComponents: MDXComponentsObject = {
     const shouldBeInline = React.Children.toArray(props.children).every(
       (el) =>
         (typeof el === 'string' && !el.includes('\n')) ||
-        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
+        (isValidElement(el) && inlineElements.includes(el.props.mdxType)),
     );
 
     return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;

package/src/theme/Tabs/index.tsx

@@ -8,7 +8,6 @@
 import React, {
   useState,
   cloneElement,
-  Children,
   isValidElement,
   type ReactElement,
 } from 'react';
@@ -40,7 +39,7 @@ function TabsComponent(props: Props): JSX.Element {
     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;
     }