@docusaurus/theme-classic 0.0.0-4705 → 0.0.0-4709

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;
     }

package/src/theme-classic.d.ts

@@ -180,6 +180,42 @@ declare module '@theme/DocSidebar' {
   export default function DocSidebar(props: Props): JSX.Element;
 }
 
+declare module '@theme/DocSidebar/Mobile' {
+  import type {Props as DocSidebarProps} from '@theme/DocSidebar';
+
+  export interface Props extends DocSidebarProps {}
+
+  export default function DocSidebarMobile(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop' {
+  import type {Props as DocSidebarProps} from '@theme/DocSidebar';
+
+  export interface Props extends DocSidebarProps {}
+
+  export default function DocSidebarDesktop(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop/Content' {
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly className?: string;
+    readonly path: string;
+    readonly sidebar: readonly PropSidebarItem[];
+  }
+
+  export default function Content(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop/CollapseButton' {
+  export interface Props {
+    onClick: React.MouseEventHandler;
+  }
+
+  export default function CollapseButton(props: Props): JSX.Element;
+}
+
 declare module '@theme/DocSidebarItem' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
@@ -244,6 +280,77 @@ declare module '@theme/Footer' {
   export default function Footer(): JSX.Element | null;
 }
 
+declare module '@theme/Footer/Logo' {
+  import type {FooterLogo} from '@docusaurus/theme-common';
+
+  export interface Props {
+    logo: FooterLogo;
+  }
+
+  export default function FooterLogo(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Copyright' {
+  export interface Props {
+    copyright: string;
+  }
+
+  export default function FooterCopyright(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/LinkItem' {
+  import type {FooterLinkItem} from '@docusaurus/theme-common';
+
+  export interface Props {
+    item: FooterLinkItem;
+  }
+
+  export default function FooterLinkItem(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Layout' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    style: 'light' | 'dark';
+    links: ReactNode;
+    logo: ReactNode;
+    copyright: ReactNode;
+  }
+
+  export default function FooterLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links' {
+  import type {Footer} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: Footer['links'];
+  }
+
+  export default function FooterLinks(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/MultiColumn' {
+  import type {MultiColumnFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    columns: MultiColumnFooter['links'];
+  }
+
+  export default function FooterLinksMultiColumn(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/Simple' {
+  import type {SimpleFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: SimpleFooter['links'];
+  }
+
+  export default function FooterLinksSimple(props: Props): JSX.Element;
+}
+
 declare module '@theme/Heading' {
   import type {ComponentProps} from 'react';
 

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

@@ -1,107 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --collapse-button-bg-color-dark: #2e333a;
-}
-
-@media (min-width: 997px) {
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    max-height: 100vh;
-    height: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: var(--ifm-navbar-height);
-    width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
-  }
-
-  .sidebarWithHideableNavbar {
-    padding-top: 0;
-  }
-
-  .sidebarHidden {
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  .sidebarLogo {
-    display: flex !important;
-    align-items: center;
-    margin: 0 var(--ifm-navbar-padding-horizontal);
-    min-height: var(--ifm-navbar-height);
-    max-height: var(--ifm-navbar-height);
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  .sidebarLogo img {
-    margin-right: 0.5rem;
-    height: 2rem;
-  }
-
-  .menu {
-    flex-grow: 1;
-    padding: 0.5rem;
-  }
-
-  .menuWithAnnouncementBar {
-    margin-bottom: var(--docusaurus-announcement-bar-height);
-  }
-
-  .collapseSidebarButton {
-    display: block !important;
-    background-color: var(--ifm-button-background-color);
-    height: 40px;
-    position: sticky;
-    bottom: 0;
-    border-radius: 0;
-    border: 1px solid var(--ifm-toc-border-color);
-  }
-
-  .collapseSidebarButtonIcon {
-    transform: rotate(180deg);
-    margin-top: 4px;
-  }
-
-  [dir='rtl'] .collapseSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton:hover,
-  [data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-}
-
-.sidebarLogo,
-.collapseSidebarButton {
-  display: none;
-}
-
-.sidebarMenuIcon {
-  vertical-align: middle;
-}
-
-.sidebarMenuCloseIcon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 24px;
-  font-size: 1.5rem;
-  font-weight: var(--ifm-font-weight-bold);
-  line-height: 0.9;
-  width: 24px;
-}

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

@@ -1,107 +0,0 @@
-/**
- * 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.
- */
-
-:root {
-  --collapse-button-bg-color-dark: #2e333a;
-}
-
-@media (min-width: 997px) {
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    max-height: 100vh;
-    height: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: var(--ifm-navbar-height);
-    width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
-  }
-
-  .sidebarWithHideableNavbar {
-    padding-top: 0;
-  }
-
-  .sidebarHidden {
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  .sidebarLogo {
-    display: flex !important;
-    align-items: center;
-    margin: 0 var(--ifm-navbar-padding-horizontal);
-    min-height: var(--ifm-navbar-height);
-    max-height: var(--ifm-navbar-height);
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  .sidebarLogo img {
-    margin-right: 0.5rem;
-    height: 2rem;
-  }
-
-  .menu {
-    flex-grow: 1;
-    padding: 0.5rem;
-  }
-
-  .menuWithAnnouncementBar {
-    margin-bottom: var(--docusaurus-announcement-bar-height);
-  }
-
-  .collapseSidebarButton {
-    display: block !important;
-    background-color: var(--ifm-button-background-color);
-    height: 40px;
-    position: sticky;
-    bottom: 0;
-    border-radius: 0;
-    border: 1px solid var(--ifm-toc-border-color);
-  }
-
-  .collapseSidebarButtonIcon {
-    transform: rotate(180deg);
-    margin-top: 4px;
-  }
-
-  [dir='rtl'] .collapseSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton:hover,
-  [data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-}
-
-.sidebarLogo,
-.collapseSidebarButton {
-  display: none;
-}
-
-.sidebarMenuIcon {
-  vertical-align: middle;
-}
-
-.sidebarMenuCloseIcon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 24px;
-  font-size: 1.5rem;
-  font-weight: var(--ifm-font-weight-bold);
-  line-height: 0.9;
-  width: 24px;
-}