@docusaurus/theme-classic 2.0.0-beta.15d451942 → 2.0.0-beta.16

package/lib-next/theme/Footer/index.js

@@ -9,8 +9,10 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl 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}) {
   const toUrl = useBaseUrl(to);
@@ -28,14 +30,88 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
             to: toUrl,
           })}
       {...props}>
-      {label}
+      {href && !isInternalUrl(href) ? (
+        <span>
+          {label}
+          <IconExternalLink />
+        </span>
+      ) : (
+        label
+      )}
     </Link>
   );
 }
 
-const FooterLogo = ({sources, alt}) => (
-  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
-);
+function FooterLogo({sources, alt, width, height}) {
+  return (
+    <ThemedImage
+      className="footer__logo"
+      alt={alt}
+      sources={sources}
+      width={width}
+      height={height}
+    />
+  );
+}
+
+function MultiColumnLinks({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}) {
+  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) {
+  return 'title' in links[0];
+}
 
 function Footer() {
   const {footer} = useThemeConfig();
@@ -54,50 +130,38 @@ function Footer() {
       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} />
+                  <FooterLogo
+                    alt={logo.alt}
+                    sources={sources}
+                    width={logo.width}
+                    height={logo.height}
+                  />
                 )}
               </div>
             )}
@@ -117,4 +181,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default React.memo(Footer);

package/lib-next/theme/Footer/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/Heading/index.js

@@ -4,48 +4,55 @@
  * 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 */
 import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import './styles.css';
 import styles from './styles.module.css';
 
-const Heading = (Tag) =>
-  function TargetComponent({id, ...props}) {
-    const {
-      navbar: {hideOnScroll},
-    } = useThemeConfig();
+function AnchorHeading({as: As, id, ...props}) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
+
+  if (!id) {
+    return <As {...props} />;
+  }
 
-    if (!id) {
-      return <Tag {...props} />;
-    }
+  return (
+    <As
+      {...props}
+      className={clsx('anchor', {
+        [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+        [styles.anchorWithStickyNavbar]: !hideOnScroll,
+      })}
+      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>
+  );
+}
 
+export default function Heading({as, ...props}) {
+  if (as === 'h1') {
     return (
-      <Tag {...props}>
-        <a
-          aria-hidden="true"
-          tabIndex={-1}
-          className={clsx('anchor', {
-            [styles.enhancedAnchor]: !hideOnScroll,
-          })}
-          id={id}
-        />
+      <h1
+        {...props}
+        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+      >
         {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',
-          })}>
-          #
-        </a>
-      </Tag>
+      </h1>
     );
-  };
+  }
 
-export default Heading;
+  return <AnchorHeading as={as} {...props} />;
+}

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

@@ -5,6 +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: '#';
+}
+
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
 }

package/lib-next/theme/IconArrow/index.js

@@ -5,16 +5,13 @@
  * 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" role="img" {...props}>
+    <svg width="20" height="20" aria-hidden="true" {...props}>
       <g fill="#7a7a7a">
         <path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0" />
         <path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0" />
       </g>
     </svg>
   );
-};
-
-export default IconArrow;
+}

package/lib-next/theme/IconClose/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-next/theme/IconEdit/index.js

@@ -7,24 +7,19 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-
-const IconEdit = ({className, ...restProps}) => {
+export default function IconEdit({className, ...restProps}) {
   return (
     <svg
       fill="currentColor"
-      height="1.2em"
-      width="1.2em"
-      preserveAspectRatio="xMidYMid meet"
-      role="img"
+      height="20"
+      width="20"
       viewBox="0 0 40 40"
       className={clsx(styles.iconEdit, className)}
-      aria-label="Edit page"
+      aria-hidden="true"
       {...restProps}>
       <g>
         <path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
       </g>
     </svg>
   );
-};
-
-export default IconEdit;
+}

package/lib-next/theme/IconExternalLink/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';
+import styles from './styles.module.css';
+export default function IconExternalLink({width = 13.5, height = 13.5}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      className={styles.iconExternalLink}>
+      <path
+        fill="currentColor"
+        d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+      />
+    </svg>
+  );
+}

package/{lib/theme/BlogPostItem → lib-next/theme/IconExternalLink}/styles.module.css

@@ -5,10 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.blogPostTitle {
-  font-size: 3rem;
-}
-
-.blogPostDate {
-  font-size: 0.9rem;
+.iconExternalLink {
+  margin-left: 0.3rem;
+  position: relative;
+  top: 1px;
 }

package/lib-next/theme/IconLanguage/index.js

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-const IconLanguage = ({width = 20, height = 20, ...props}) => {
+export default function IconLanguage({width = 20, height = 20, ...props}) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 20 20"
       width={width}
       height={height}
+      aria-hidden="true"
       {...props}>
       <path
         fill="currentColor"
@@ -20,6 +19,4 @@ const IconLanguage = ({width = 20, height = 20, ...props}) => {
       />
     </svg>
   );
-};
-
-export default IconLanguage;
+}

package/lib-next/theme/IconMenu/index.js

@@ -5,19 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-
-const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
+export default function IconMenu({
+  width = 30,
+  height = 30,
+  className,
+  ...restProps
+}) {
   return (
     <svg
-      aria-label="Menu"
       className={className}
       width={width}
       height={height}
       viewBox="0 0 30 30"
-      role="img"
-      focusable="false"
+      aria-hidden="true"
       {...restProps}>
-      <title>Menu</title>
       <path
         stroke="currentColor"
         strokeLinecap="round"
@@ -27,6 +28,4 @@ const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
       />
     </svg>
   );
-};
-
-export default IconMenu;
+}

package/lib-next/theme/LastUpdated/index.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import styles from './styles.module.css';
 import Translate from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
   return (
@@ -15,11 +15,11 @@ function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
       description="The words used to describe on which date a page has been last updated"
       values={{
         date: (
-          <time
-            dateTime={new Date(lastUpdatedAt * 1000).toISOString()}
-            className={styles.lastUpdatedDate}>
-            {formattedLastUpdatedAt}
-          </time>
+          <b>
+            <time dateTime={new Date(lastUpdatedAt * 1000).toISOString()}>
+              {formattedLastUpdatedAt}
+            </time>
+          </b>
         ),
       }}>
       {' on {date}'}
@@ -33,7 +33,7 @@ function LastUpdatedByUser({lastUpdatedBy}) {
       id="theme.lastUpdated.byUser"
       description="The words used to describe by who the page has been last updated"
       values={{
-        user: <strong>{lastUpdatedBy}</strong>,
+        user: <b>{lastUpdatedBy}</b>,
       }}>
       {' by {user}'}
     </Translate>
@@ -46,37 +46,33 @@ export default function LastUpdated({
   lastUpdatedBy,
 }) {
   return (
-    <div className="col text--right">
-      <em>
-        <small>
-          <Translate
-            id="theme.lastUpdated.lastUpdatedAtBy"
-            description="The sentence used to display when a page has been last updated, and by who"
-            values={{
-              atDate:
-                lastUpdatedAt && formattedLastUpdatedAt ? (
-                  <LastUpdatedAtDate
-                    lastUpdatedAt={lastUpdatedAt}
-                    formattedLastUpdatedAt={formattedLastUpdatedAt}
-                  />
-                ) : (
-                  ''
-                ),
-              byUser: lastUpdatedBy ? (
-                <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
-              ) : (
-                ''
-              ),
-            }}>
-            {'Last updated{atDate}{byUser}'}
-          </Translate>
-          {process.env.NODE_ENV === 'development' && (
-            <div>
-              <small> (Simulated during dev for better perf)</small>
-            </div>
-          )}
-        </small>
-      </em>
-    </div>
+    <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"
+        values={{
+          atDate:
+            lastUpdatedAt && formattedLastUpdatedAt ? (
+              <LastUpdatedAtDate
+                lastUpdatedAt={lastUpdatedAt}
+                formattedLastUpdatedAt={formattedLastUpdatedAt}
+              />
+            ) : (
+              ''
+            ),
+          byUser: lastUpdatedBy ? (
+            <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
+          ) : (
+            ''
+          ),
+        }}>
+        {'Last updated{atDate}{byUser}'}
+      </Translate>
+      {process.env.NODE_ENV === 'development' && (
+        <div>
+          <small> (Simulated during dev for better perf)</small>
+        </div>
+      )}
+    </span>
   );
 }

package/lib-next/theme/Layout/index.js

@@ -6,17 +6,17 @@
  */
 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';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
-import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
+import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
-
-function Layout(props) {
+export default function Layout(props) {
   const {children, noFooter, wrapperClassName, pageClassName} = props;
   useKeyboardNavigation();
   return (
@@ -35,12 +35,10 @@ function Layout(props) {
           wrapperClassName,
           pageClassName,
         )}>
-        {children}
+        <ErrorBoundary fallback={ErrorPageContent}>{children}</ErrorBoundary>
       </div>
 
       {!noFooter && <Footer />}
     </LayoutProviders>
   );
 }
-
-export default Layout;

package/lib-next/theme/Layout/styles.css

@@ -19,3 +19,9 @@ body {
 .main-wrapper {
   flex: 1 0 auto;
 }
+
+/* Docusaurus-specific utility classes */
+
+.docusaurus-mt-lg {
+  margin-top: 3rem;
+}