@docusaurus/theme-classic 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

package/lib/theme/Footer/LinkItem/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/Footer/LinkItem';
+export default function FooterLinkItem({ item }: Props): JSX.Element;

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

@@ -0,0 +1,31 @@
+/**
+ * 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/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+  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}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

package/lib/theme/Footer/Links/MultiColumn/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/Footer/Links/MultiColumn';
+export default function FooterLinksMultiColumn({ columns }: Props): JSX.Element;

package/lib/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,43 @@
+/**
+ * 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 LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+  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}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/lib/theme/Footer/Links/Simple/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/Footer/Links/Simple';
+export default function FooterLinksSimple({ links }: Props): JSX.Element;

package/lib/theme/Footer/Links/Simple/index.js

@@ -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 React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+  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}) {
+  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/lib/theme/Footer/Links/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/Footer/Links';
+export default function FooterLinks({ links }: Props): JSX.Element;

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

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

package/lib/theme/Footer/Logo/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/Footer/Logo';
+export default function FooterLogo({ logo }: Props): JSX.Element;

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

@@ -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 clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      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}
+      target={logo.target}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

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

@@ -7,7 +7,8 @@
 
 .footerLogoLink {
   opacity: 0.5;
-  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
 }
 
 .footerLogoLink:hover {

package/{lib-next/theme/Footer/styles.module.css → lib/theme/Footer/index.d.ts}

@@ -4,12 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-.footerLogoLink {
-  opacity: 0.5;
-  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
-}
-
-.footerLogoLink:hover {
-  opacity: 1;
-}
+import React from 'react';
+declare function Footer(): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof Footer>;
+export default _default;

package/lib/theme/Footer/index.js

@@ -1,115 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
-
-var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-var _ThemedImage = _interopRequireDefault(require("@theme/ThemedImage"));
-
-var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function FooterLink({
-  to,
-  href,
-  label,
-  prependBaseUrlToHref,
-  ...props
-}) {
-  const toUrl = (0, _useBaseUrl.default)(to);
-  const normalizedHref = (0, _useBaseUrl.default)(href, {
-    forcePrependBaseUrl: true
-  });
-  return <_Link.default className="footer__link-item" {...href ? {
-    href: prependBaseUrlToHref ? normalizedHref : href
-  } : {
-    to: toUrl
-  }} {...props}>
-      {href && !(0, _isInternalUrl.default)(href) ? <span>
-          {label}
-          <_IconExternalLink.default />
-        </span> : label}
-    </_Link.default>;
-}
-
-const FooterLogo = ({
-  sources,
-  alt
-}) => <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} />;
-
+import React from 'react';
+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() {
-  const {
-    footer
-  } = (0, _themeCommon.useThemeConfig)();
-  const {
-    copyright,
-    links = [],
-    logo = {}
-  } = footer || {};
-  const sources = {
-    light: (0, _useBaseUrl.default)(logo.src),
-    dark: (0, _useBaseUrl.default)(logo.srcDark || logo.src)
-  };
-
+  const {footer} = useThemeConfig();
   if (!footer) {
     return null;
   }
-
-  return <footer className={(0, _clsx.default)('footer', {
-    'footer--dark': footer.style === 'dark'
-  })}>
-      <div className="container">
-        {links && links.length > 0 && <div className="row footer__links">
-            {links.map((linkItem, i) => <div key={i} className="col footer__col">
-                {linkItem.title != null ? <div className="footer__title">{linkItem.title}</div> : null}
-                {linkItem.items != null && Array.isArray(linkItem.items) && linkItem.items.length > 0 ? <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> : null}
-              </div>)}
-          </div>}
-        {(logo || copyright) && <div className="footer__bottom text--center">
-            {logo && (logo.src || logo.srcDark) && <div className="margin-bottom--sm">
-                {logo.href ? <_Link.default href={logo.href} className={_stylesModule.default.footerLogoLink}>
-                    <FooterLogo alt={logo.alt} sources={sources} />
-                  </_Link.default> : <FooterLogo alt={logo.alt} sources={sources} />}
-              </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>;
+  const {copyright, links, logo, style} = footer;
+  return (
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
+  );
 }
-
-var _default = Footer;
-exports.default = _default;
+export default React.memo(Footer);

package/lib/theme/Heading/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/Heading';
+export default function Heading({ as: As, id, ...props }: Props): JSX.Element;

package/lib/theme/Heading/index.js

@@ -1,76 +1,43 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MainHeading = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Translate = require("@docusaurus/Translate");
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-require("./styles.css");
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-
-/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
-const MainHeading = function MainHeading({ ...props
-}) {
-  return <header>
-      <h1 {...props} id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-    className={_stylesModule.default.h1Heading}>
-        {props.children}
-      </h1>
-    </header>;
-};
-
-exports.MainHeading = MainHeading;
-
-const createAnchorHeading = Tag => function TargetComponent({
-  id,
-  ...props
-}) {
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function Heading({as: As, id, ...props}) {
   const {
-    navbar: {
-      hideOnScroll
-    }
-  } = (0, _themeCommon.useThemeConfig)();
-
-  if (!id) {
-    return <Tag {...props} />;
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
+  // H1 headings do not need an id because they don't appear in the TOC.
+  if (As === 'h1' || !id) {
+    return <As {...props} id={undefined} />;
   }
-
-  return <Tag {...props}>
-        <a aria-hidden="true" tabIndex={-1} className={(0, _clsx.default)('anchor', {
-      [_stylesModule.default.enhancedAnchor]: !hideOnScroll
-    })} id={id} />
-        {props.children}
-        <a className="hash-link" href={`#${id}`} title={(0, _Translate.translate)({
-      id: 'theme.common.headingLinkTitle',
-      message: 'Direct link to heading',
-      description: 'Title for link to heading'
-    })}>
-          #
-        </a>
-      </Tag>;
-};
-
-const Heading = headingType => {
-  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-};
-
-var _default = Heading;
-exports.default = _default;
+  return (
+    <As
+      {...props}
+      className={clsx(
+        'anchor',
+        hideOnScroll
+          ? styles.anchorWithHideOnScrollNavbar
+          : styles.anchorWithStickyNavbar,
+      )}
+      id={id}>
+      {props.children}
+      <a
+        className="hash-link"
+        href={`#${id}`}
+        title={translate({
+          id: 'theme.common.headingLinkTitle',
+          message: 'Direct link to heading',
+          description: 'Title for link to heading',
+        })}>
+        &#8203;
+      </a>
+    </As>
+  );
+}

package/lib/theme/Heading/styles.module.css

@@ -5,11 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.enhancedAnchor {
-  top: calc(var(--ifm-navbar-height) * -1 - 0.5rem);
+/*
+When the navbar is sticky, ensure that on anchor click,
+the browser does not scroll that anchor behind the navbar
+See https://twitter.com/JoshWComeau/status/1332015868725891076
+ */
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
+}
+
+:global(.hash-link) {
+  opacity: 0;
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
+  user-select: none;
+}
+
+:global(.hash-link::before) {
+  content: '#';
 }
 
-.h1Heading {
-  font-size: 3rem;
-  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
 }

package/lib/theme/Icon/Arrow/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/Icon/Arrow';
+export default function IconArrow(props: Props): JSX.Element;

package/{lib-next/theme/IconArrow → lib/theme/Icon/Arrow}/index.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-const IconArrow = (props) => {
+export default function IconArrow(props) {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
@@ -15,6 +14,4 @@ const IconArrow = (props) => {
       </g>
     </svg>
   );
-};
-
-export default IconArrow;
+}

package/lib/theme/Icon/Close/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/Icon/Close';
+export default function IconClose({ width, height, color, strokeWidth, className, ...restProps }: Props): JSX.Element;

package/lib/theme/Icon/Close/index.js

@@ -0,0 +1,23 @@
+/**
+ * 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';
+export default function IconClose({
+  width = 21,
+  height = 21,
+  color = 'currentColor',
+  strokeWidth = 1.2,
+  className,
+  ...restProps
+}) {
+  return (
+    <svg viewBox="0 0 15 15" width={width} height={height} {...restProps}>
+      <g stroke={color} strokeWidth={strokeWidth}>
+        <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25" />
+      </g>
+    </svg>
+  );
+}

package/lib/theme/Icon/DarkMode/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/Icon/DarkMode';
+export default function IconDarkMode(props: Props): JSX.Element;

package/lib/theme/Icon/DarkMode/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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';
+export default function IconDarkMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+      />
+    </svg>
+  );
+}

package/lib/theme/Icon/Edit/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/Icon/Edit';
+export default function IconEdit({ className, ...restProps }: Props): JSX.Element;