@docusaurus/theme-classic 2.0.0-beta.15a2b59f9 → 2.0.0-beta.17

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

@@ -42,9 +42,76 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   );
 }
 
-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();
@@ -63,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>
             )}
@@ -126,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,64 +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';
-export const MainHeading = function MainHeading({...props}) {
+
+function AnchorHeading({as: As, id, ...props}) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
+
+  if (!id) {
+    return <As {...props} />;
+  }
+
   return (
-    <header>
+    <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 (
       <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>
-  );
-};
-
-const createAnchorHeading = (Tag) =>
-  function TargetComponent({id, ...props}) {
-    const {
-      navbar: {hideOnScroll},
-    } = useThemeConfig();
-
-    if (!id) {
-      return <Tag {...props} />;
-    }
-
-    return (
-      <Tag {...props}>
-        <a
-          aria-hidden="true"
-          tabIndex={-1}
-          className={clsx('anchor', {
-            [styles.enhancedAnchor]: !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',
-          })}>
-          #
-        </a>
-      </Tag>
     );
-  };
-
-const Heading = (headingType) => {
-  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
-};
+  }
 
-export default Heading;
+  return <AnchorHeading as={as} {...props} />;
+}

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

@@ -7,8 +7,7 @@
 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"
@@ -23,6 +22,4 @@ const IconEdit = ({className, ...restProps}) => {
       </g>
     </svg>
   );
-};
-
-export default IconEdit;
+}

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

@@ -6,8 +6,7 @@
  */
 import React from 'react';
 import styles from './styles.module.css';
-
-const IconExternalLink = ({width = 13.5, height = 13.5}) => {
+export default function IconExternalLink({width = 13.5, height = 13.5}) {
   return (
     <svg
       width={width}
@@ -21,6 +20,4 @@ const IconExternalLink = ({width = 13.5, height = 13.5}) => {
       />
     </svg>
   );
-};
-
-export default IconExternalLink;
+}

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

@@ -5,21 +5,18 @@
  * 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
-      viewBox="0 0 20 20"
+      viewBox="0 0 24 24"
       width={width}
       height={height}
-      aria-hidden="true"
+      aria-hidden
       {...props}>
       <path
         fill="currentColor"
-        d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"
+        d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
       />
     </svg>
   );
-};
-
-export default IconLanguage;
+}

package/lib-next/theme/IconLightMode/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 IconLightMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+      />
+    </svg>
+  );
+}

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

@@ -5,8 +5,12 @@
  * 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
       className={className}
@@ -24,6 +28,4 @@ const IconMenu = ({width = 30, height = 30, className, ...restProps}) => {
       />
     </svg>
   );
-};
-
-export default IconMenu;
+}

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

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function LastUpdatedAtDate({lastUpdatedAt, formattedLastUpdatedAt}) {
   return (
@@ -45,7 +46,7 @@ export default function LastUpdated({
   lastUpdatedBy,
 }) {
   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"
@@ -72,6 +73,6 @@ export default function LastUpdated({
           <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/LayoutHead/index.js

@@ -8,12 +8,14 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import SearchMetadatas from '@theme/SearchMetadatas';
+import SearchMetadata from '@theme/SearchMetadata';
 import Seo from '@theme/Seo';
 import {
   DEFAULT_SEARCH_TAG,
   useTitleFormatter,
   useAlternatePageUtils,
+  useThemeConfig,
+  keyboardFocusedClassName,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router'; // Useful for SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@@ -21,14 +23,14 @@ import {useLocation} from '@docusaurus/router'; // Useful for SEO
 
 function AlternateLangHeaders() {
   const {
-    i18n: {defaultLocale, locales},
+    i18n: {defaultLocale, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils(); // Note: it is fine to use both "x-default" and "en" to target the same url
   // See https://www.searchviu.com/en/multiple-hreflang-tags-one-url/
 
   return (
     <Head>
-      {locales.map((locale) => (
+      {Object.entries(localeConfigs).map(([locale, {htmlLang}]) => (
         <link
           key={locale}
           rel="alternate"
@@ -36,7 +38,7 @@ function AlternateLangHeaders() {
             locale,
             fullyQualified: true,
           })}
-          hrefLang={locale}
+          hrefLang={htmlLang}
         />
       ))}
       <link
@@ -77,59 +79,52 @@ function CanonicalUrlHeaders({permalink}) {
 
 export default function LayoutHead(props) {
   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); // See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
-  // const htmlLang = currentLocale.split('-')[0];
-
-  const htmlLang = currentLocale; // should we allow the user to override htmlLang with localeConfig?
-
-  const htmlDir = localeConfigs[currentLocale].direction;
+  const pageTitle = useTitleFormatter(title);
+  const {htmlLang, direction: htmlDir} = localeConfigs[currentLocale];
   return (
     <>
       <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" />
+        {/* The keyboard focus class name need to be applied when SSR so links
+        are outlined when JS is disabled */}
+        <body className={keyboardFocusedClassName} />
       </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>
     </>