@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.14

package/src/theme/Footer/index.tsx

@@ -9,7 +9,12 @@ import React from 'react';
 import clsx from 'clsx';
 
 import Link from '@docusaurus/Link';
-import {FooterLinkItem, useThemeConfig} from '@docusaurus/theme-common';
+import {
+  FooterLinkItem,
+  useThemeConfig,
+  MultiColumnFooter,
+  SimpleFooter,
+} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
@@ -49,12 +54,86 @@ function FooterLink({
   );
 }
 
-const FooterLogo = ({
+function FooterLogo({
   sources,
   alt,
-}: Pick<ThemedImageProps, 'sources' | 'alt'>) => (
-  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
-);
+  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) => (
+        <>
+          {item.html ? (
+            <span
+              key={key}
+              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>
+          )}
+        </>
+      ))}
+    </div>
+  );
+}
+
+function isMultiColumnFooterLinks(
+  links: MultiColumnFooter['links'] | SimpleFooter['links'],
+): links is MultiColumnFooter['links'] {
+  return 'title' in links[0];
+}
 
 function Footer(): JSX.Element | null {
   const {footer} = useThemeConfig();
@@ -74,48 +153,30 @@ function Footer(): JSX.Element | null {
       className={clsx('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>
-        )}
+      <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} />
+                    <FooterLogo
+                      alt={logo.alt}
+                      sources={sources}
+                      width={logo.width}
+                      height={logo.height}
+                    />
                   </Link>
                 ) : (
                   <FooterLogo alt={logo.alt} sources={sources} />
@@ -139,4 +200,4 @@ function Footer(): JSX.Element | null {
   );
 }
 
-export default Footer;
+export default React.memo(Footer);

package/src/theme/Heading/index.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
-
 import React from 'react';
 import clsx from 'clsx';
 import type {HeadingType, Props} from '@theme/Heading';
@@ -18,23 +16,21 @@ import styles from './styles.module.css';
 
 type HeadingComponent = (props: Props) => JSX.Element;
 
-export const MainHeading: HeadingComponent = 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={styles.h1Heading}>
-        {props.children}
-      </h1>
-    </header>
-  );
-};
+// eslint-disable-next-line react/function-component-definition
+export const MainHeading: HeadingComponent = ({...props}) => (
+  <header>
+    <h1
+      {...props}
+      id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+    >
+      {props.children}
+    </h1>
+  </header>
+);
 
-const createAnchorHeading = (
-  Tag: HeadingType,
-): ((props: Props) => JSX.Element) =>
-  function TargetComponent({id, ...props}) {
+const createAnchorHeading =
+  (Tag: HeadingType) =>
+  ({id, ...props}: Props) => {
     const {
       navbar: {hideOnScroll},
     } = useThemeConfig();
@@ -44,15 +40,13 @@ const createAnchorHeading = (
     }
 
     return (
-      <Tag {...props}>
-        <a
-          aria-hidden="true"
-          tabIndex={-1}
-          className={clsx('anchor', {
-            [styles.enhancedAnchor]: !hideOnScroll,
-          })}
-          id={id}
-        />
+      <Tag
+        {...props}
+        className={clsx('anchor', {
+          [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+          [styles.anchorWithStickyNavbar]: !hideOnScroll,
+        })}
+        id={id}>
         {props.children}
         <a
           className="hash-link"
@@ -62,14 +56,13 @@ const createAnchorHeading = (
             message: 'Direct link to heading',
             description: 'Title for link to heading',
           })}>
-          #
+          &#8203;
         </a>
       </Tag>
     );
   };
 
-const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) => {
-  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-};
+const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) =>
+  headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
 
 export default Heading;

package/src/theme/Heading/styles.css

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -0.5rem;
-}
-
 .hash-link {
   opacity: 0;
   padding-left: 0.5rem;
   transition: opacity var(--ifm-transition-fast);
+  user-select: none;
+}
+
+.hash-link:before {
+  content: '#';
 }
 
 .hash-link:focus,

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

@@ -5,11 +5,15 @@
  * 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);
 }
 
-.h1Heading {
-  font-size: 3rem;
-  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
 }

package/src/theme/IconArrow/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconArrow';
 
-const IconArrow = (props: Props): JSX.Element => {
+function IconArrow(props: Props): JSX.Element {
   return (
     <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
@@ -17,6 +17,6 @@ const IconArrow = (props: Props): JSX.Element => {
       </g>
     </svg>
   );
-};
+}
 
 export default IconArrow;

package/src/theme/IconClose/index.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/IconClose';
+
+export default function IconClose({
+  width = 21,
+  height = 21,
+  color = 'currentColor',
+  strokeWidth = 1.2,
+  className,
+  ...restProps
+}: Props): JSX.Element {
+  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/src/theme/IconEdit/index.tsx

@@ -12,7 +12,7 @@ import type {Props} from '@theme/IconEdit';
 
 import styles from './styles.module.css';
 
-const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
+function IconEdit({className, ...restProps}: Props): JSX.Element {
   return (
     <svg
       fill="currentColor"
@@ -27,6 +27,6 @@ const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
       </g>
     </svg>
   );
-};
+}
 
 export default IconEdit;

package/src/theme/IconExternalLink/index.tsx

@@ -10,10 +10,7 @@ import type {Props} from '@theme/IconExternalLink';
 
 import styles from './styles.module.css';
 
-const IconExternalLink = ({
-  width = 13.5,
-  height = 13.5,
-}: Props): JSX.Element => {
+function IconExternalLink({width = 13.5, height = 13.5}: Props): JSX.Element {
   return (
     <svg
       width={width}
@@ -27,6 +24,6 @@ const IconExternalLink = ({
       />
     </svg>
   );
-};
+}
 
 export default IconExternalLink;

package/src/theme/IconLanguage/index.tsx

@@ -8,11 +8,7 @@
 import React from 'react';
 import type {Props} from '@theme/IconLanguage';
 
-const IconLanguage = ({
-  width = 20,
-  height = 20,
-  ...props
-}: Props): JSX.Element => {
+function IconLanguage({width = 20, height = 20, ...props}: Props): JSX.Element {
   return (
     <svg
       viewBox="0 0 20 20"
@@ -26,6 +22,6 @@ const IconLanguage = ({
       />
     </svg>
   );
-};
+}
 
 export default IconLanguage;

package/src/theme/IconMenu/index.tsx

@@ -8,12 +8,12 @@
 import React from 'react';
 import type {Props} from '@theme/IconMenu';
 
-const IconMenu = ({
+function IconMenu({
   width = 30,
   height = 30,
   className,
   ...restProps
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   return (
     <svg
       className={className}
@@ -31,6 +31,6 @@ const IconMenu = ({
       />
     </svg>
   );
-};
+}
 
 export default IconMenu;

package/src/theme/LastUpdated/index.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/LastUpdated';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function LastUpdatedAtDate({
   lastUpdatedAt,
@@ -57,7 +58,7 @@ export default function LastUpdated({
   lastUpdatedBy,
 }: Props): JSX.Element {
   return (
-    <>
+    <span className={ThemeClassNames.common.lastUpdated}>
       <Translate
         id="theme.lastUpdated.lastUpdatedAtBy"
         description="The sentence used to display when a page has been last updated, and by who"
@@ -84,6 +85,6 @@ export default function LastUpdated({
           <small> (Simulated during dev for better perf)</small>
         </div>
       )}
-    </>
+    </span>
   );
 }

package/src/theme/Layout/index.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
@@ -16,6 +17,7 @@ import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
 import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
 import {ThemeClassNames} from '@docusaurus/theme-common';
+import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 
 function Layout(props: Props): JSX.Element {
@@ -39,7 +41,7 @@ function Layout(props: Props): JSX.Element {
           wrapperClassName,
           pageClassName,
         )}>
-        {children}
+        <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}

package/src/theme/LayoutHead/index.tsx

@@ -10,12 +10,13 @@ import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import type {Props} from '@theme/Layout';
-import SearchMetadatas from '@theme/SearchMetadatas';
+import SearchMetadata from '@theme/SearchMetadata';
 import Seo from '@theme/Seo';
 import {
   DEFAULT_SEARCH_TAG,
   useTitleFormatter,
   useAlternatePageUtils,
+  useThemeConfig,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
 
@@ -83,13 +84,11 @@ function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
 
 export default function LayoutHead(props: Props): JSX.Element {
   const {
-    siteConfig: {
-      favicon,
-      themeConfig: {metadatas, image: defaultImage},
-    },
+    siteConfig: {favicon},
     i18n: {currentLocale, localeConfigs},
   } = useDocusaurusContext();
-  const {title, description, image, keywords, searchMetadatas} = props;
+  const {metadata, image: defaultImage} = useThemeConfig();
+  const {title, description, image, keywords, searchMetadata} = props;
   const faviconUrl = useBaseUrl(favicon);
   const pageTitle = useTitleFormatter(title);
 
@@ -102,36 +101,38 @@ export default function LayoutHead(props: Props): JSX.Element {
     <>
       <Head>
         <html lang={htmlLang} dir={htmlDir} />
-        {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+        {favicon && <link rel="icon" href={faviconUrl} />}
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
-        {image ||
-          (defaultImage && (
-            <meta name="twitter:card" content="summary_large_image" />
-          ))}
+        <meta name="twitter:card" content="summary_large_image" />
       </Head>
 
-      <Seo {...{description, keywords, image}} />
+      {/* image can override the default image */}
+      {defaultImage && <Seo image={defaultImage} />}
+      {image && <Seo image={image} />}
+
+      <Seo description={description} keywords={keywords} />
 
       <CanonicalUrlHeaders />
 
       <AlternateLangHeaders />
 
-      <SearchMetadatas
+      <SearchMetadata
         tag={DEFAULT_SEARCH_TAG}
         locale={currentLocale}
-        {...searchMetadatas}
+        {...searchMetadata}
       />
 
       <Head
       // it's important to have an additional <Head> element here,
       // as it allows react-helmet to override values set in previous <Head>
-      // ie we can override default metadatas such as "twitter:card"
+      // ie we can override default metadata such as "twitter:card"
       // In same Head, the same meta would appear twice instead of overriding
       // See react-helmet doc
       >
-        {metadatas.map((metadata, i) => (
-          <meta key={`metadata_${i}`} {...metadata} />
+        {/* Yes, "metadatum" is the grammatically correct term */}
+        {metadata.map((metadatum, i) => (
+          <meta key={`metadata_${i}`} {...metadatum} />
         ))}
       </Head>
     </>

package/src/theme/LayoutProviders/index.tsx

@@ -12,6 +12,7 @@ import {
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
+  ScrollControllerProvider,
 } from '@docusaurus/theme-common';
 import type {Props} from '@theme/LayoutProviders';
 
@@ -20,11 +21,13 @@ export default function LayoutProviders({children}: Props): JSX.Element {
     <ThemeProvider>
       <AnnouncementBarProvider>
         <UserPreferencesProvider>
-          <DocsPreferredVersionContextProvider>
-            <MobileSecondaryMenuProvider>
-              {children}
-            </MobileSecondaryMenuProvider>
-          </DocsPreferredVersionContextProvider>
+          <ScrollControllerProvider>
+            <DocsPreferredVersionContextProvider>
+              <MobileSecondaryMenuProvider>
+                {children}
+              </MobileSecondaryMenuProvider>
+            </DocsPreferredVersionContextProvider>
+          </ScrollControllerProvider>
         </UserPreferencesProvider>
       </AnnouncementBarProvider>
     </ThemeProvider>

package/src/theme/Logo/index.tsx

@@ -12,17 +12,15 @@ import Link from '@docusaurus/Link';
 import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
-const Logo = (props: Props): JSX.Element => {
+function Logo(props: Props): JSX.Element {
   const {
-    siteConfig: {
-      title,
-      themeConfig: {
-        navbar: {title: navbarTitle, logo = {src: ''}},
-      },
-    },
-    isClient,
+    siteConfig: {title},
   } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo = {src: ''}},
+  } = useThemeConfig();
 
   const {imageClassName, titleClassName, ...propsRest} = props;
   const logoLink = useBaseUrl(logo.href || '/');
@@ -30,23 +28,29 @@ const Logo = (props: Props): JSX.Element => {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
+  const themedImage = (
+    <ThemedImage
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={logo.alt || navbarTitle || title}
+    />
+  );
 
   return (
     <Link
       to={logoLink}
       {...propsRest}
       {...(logo.target && {target: logo.target})}>
-      {logo.src && (
-        <ThemedImage
-          key={isClient}
-          className={imageClassName}
-          sources={sources}
-          alt={logo.alt || navbarTitle || title}
-        />
-      )}
+      {logo.src &&
+        (imageClassName ? (
+          <div className={imageClassName}>{themedImage}</div>
+        ) : (
+          themedImage
+        ))}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );
-};
+}
 
 export default Logo;