@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

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

@@ -42,8 +42,14 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   );
 }
 
-const FooterLogo = ({sources, alt}) => (
-  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
+const FooterLogo = ({sources, alt, width, height}) => (
+  <ThemedImage
+    className="footer__logo"
+    alt={alt}
+    sources={sources}
+    width={width}
+    height={height}
+  />
 );
 
 function Footer() {
@@ -103,7 +109,12 @@ function Footer() {
               <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} />

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

@@ -4,8 +4,6 @@
  * 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';
@@ -18,7 +16,7 @@ export const MainHeading = function MainHeading({...props}) {
       <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>
@@ -36,17 +34,16 @@ const createAnchorHeading = (Tag) =>
     }
 
     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
+          aria-hidden="true"
           className="hash-link"
           href={`#${id}`}
           title={translate({
@@ -54,7 +51,7 @@ const createAnchorHeading = (Tag) =>
             message: 'Direct link to heading',
             description: 'Title for link to heading',
           })}>
-          #
+          &#8203;
         </a>
       </Tag>
     );

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

@@ -5,18 +5,16 @@
  * 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);
 }
 
+.hash-link:before {
+  content: '#';
+}
+
 .hash-link:focus,
 *:hover > .hash-link {
   opacity: 1;

package/lib-next/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/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/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/LayoutHead/index.js

@@ -14,6 +14,7 @@ import {
   DEFAULT_SEARCH_TAG,
   useTitleFormatter,
   useAlternatePageUtils,
+  useThemeConfig,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router'; // Useful for SEO
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@@ -77,12 +78,10 @@ function CanonicalUrlHeaders({permalink}) {
 
 export default function LayoutHead(props) {
   const {
-    siteConfig: {
-      favicon,
-      themeConfig: {metadatas, image: defaultImage},
-    },
+    siteConfig: {favicon},
     i18n: {currentLocale, localeConfigs},
   } = useDocusaurusContext();
+  const {metadatas, image: defaultImage} = useThemeConfig();
   const {title, description, image, keywords, searchMetadatas} = props;
   const faviconUrl = useBaseUrl(favicon);
   const pageTitle = useTitleFormatter(title); // See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
@@ -98,19 +97,14 @@ export default function LayoutHead(props) {
         {favicon && <link rel="shortcut 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 />
 

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

@@ -11,17 +11,20 @@ import {
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
+  ScrollControllerProvider,
 } from '@docusaurus/theme-common';
 export default function LayoutProviders({children}) {
   return (
     <ThemeProvider>
       <AnnouncementBarProvider>
         <UserPreferencesProvider>
-          <DocsPreferredVersionContextProvider>
-            <MobileSecondaryMenuProvider>
-              {children}
-            </MobileSecondaryMenuProvider>
-          </DocsPreferredVersionContextProvider>
+          <ScrollControllerProvider>
+            <DocsPreferredVersionContextProvider>
+              <MobileSecondaryMenuProvider>
+                {children}
+              </MobileSecondaryMenuProvider>
+            </DocsPreferredVersionContextProvider>
+          </ScrollControllerProvider>
         </UserPreferencesProvider>
       </AnnouncementBarProvider>
     </ThemeProvider>

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

@@ -9,28 +9,34 @@ 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) => {
   const {
-    siteConfig: {
-      title,
-      themeConfig: {
-        navbar: {
-          title: navbarTitle,
-          logo = {
-            src: '',
-          },
-        },
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {
+      title: navbarTitle,
+      logo = {
+        src: '',
       },
     },
-    isClient,
-  } = useDocusaurusContext();
+  } = useThemeConfig();
   const {imageClassName, titleClassName, ...propsRest} = props;
   const logoLink = useBaseUrl(logo.href || '/');
   const sources = {
     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}
@@ -38,14 +44,12 @@ const Logo = (props) => {
       {...(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>
   );

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

@@ -5,11 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {isValidElement} from 'react';
+import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Details from '@theme/Details';
+import './styles.css'; // MDX elements are wrapped through the MDX pragma
+// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+
+function unwrapMDXElement(element) {
+  if (element?.props?.mdxType && element?.props?.originalType) {
+    const {mdxType, originalType, ...newProps} = element.props;
+    return React.createElement(element.props.originalType, newProps);
+  }
+
+  return element;
+}
+
 const MDXComponents = {
+  head: (props) => {
+    const unwrappedChildren = React.Children.map(props.children, (child) =>
+      unwrapMDXElement(child),
+    );
+    return <Head {...props}>{unwrappedChildren}</Head>;
+  },
   code: (props) => {
     const {children} = props; // For retrocompatibility purposes (pretty rare use case)
     // See https://github.com/facebook/docusaurus/pull/1584
@@ -29,7 +48,7 @@ const MDXComponents = {
     const {children} = props; // See comment for `code` above
 
     if (isValidElement(children) && isValidElement(children?.props?.children)) {
-      return children?.props.children;
+      return children.props.children;
     }
 
     return (

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+ul.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}

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

@@ -15,7 +15,11 @@ import styles from './styles.module.css';
 
 function MDXPage(props) {
   const {content: MDXPageContent} = props;
-  const {frontMatter, metadata} = MDXPageContent;
+  const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
+    frontMatter,
+    metadata,
+  } = MDXPageContent;
   const {
     title,
     description,
@@ -39,7 +43,11 @@ function MDXPage(props) {
           </div>
           {!hideTableOfContents && MDXPageContent.toc && (
             <div className="col col--2">
-              <TOC toc={MDXPageContent.toc} />
+              <TOC
+                toc={MDXPageContent.toc}
+                minHeadingLevel={frontMatter.toc_min_heading_level}
+                maxHeadingLevel={frontMatter.toc_max_heading_level}
+              />
             </div>
           )}
         </div>

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

@@ -14,6 +14,7 @@ import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
+  useHistoryPopHandler,
 } from '@docusaurus/theme-common';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
@@ -22,6 +23,7 @@ import {useActivePlugin} from '@theme/hooks/useDocs';
 import NavbarItem from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
+import IconClose from '@theme/IconClose';
 import styles from './styles.module.css'; // retrocompatible with v1
 
 const DefaultNavItemPosition = 'right';
@@ -50,7 +52,19 @@ function useMobileSidebar() {
 
   const shouldRender = windowSize === 'mobile'; // || windowSize === 'ssr';
 
-  const [shown, setShown] = useState(false);
+  const [shown, setShown] = useState(false); // Close mobile sidebar on navigation pop
+  // Most likely firing when using the Android back button (but not only)
+
+  useHistoryPopHandler(() => {
+    if (shown) {
+      setShown(false); // Should we prevent the navigation here?
+      // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
+
+      return false; // prevent pop navigation
+    }
+
+    return undefined;
+  });
   const toggle = useCallback(() => {
     setShown((s) => !s);
   }, []);
@@ -141,12 +155,22 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
           imageClassName="navbar__logo"
           titleClassName="navbar__title"
         />
-        {!colorModeToggle.disabled && sidebarShown && (
+        {!colorModeToggle.disabled && (
           <Toggle
+            className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
           />
         )}
+        <button
+          type="button"
+          className="clean-btn navbar-sidebar__close"
+          onClick={toggleSidebar}>
+          <IconClose
+            color="var(--ifm-color-emphasis-600)"
+            className={styles.navbarSidebarCloseSvg}
+          />
+        </button>
       </div>
 
       <div
@@ -161,7 +185,7 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
           </ul>
         </div>
 
-        <div className="navbar-sidebar__item navbar-sidebar__item--secondary menu">
+        <div className="navbar-sidebar__item menu">
           {items.length > 0 && (
             <button
               type="button"

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

@@ -8,7 +8,7 @@
 /*
 Hide toggle in small viewports
  */
-@media screen and (max-width: 997px) {
+@media (max-width: 996px) {
   .toggle {
     display: none;
   }
@@ -21,3 +21,7 @@ Hide toggle in small viewports
 .navbarHidden {
   transform: translate3d(0, calc(-100% - 2px), 0);
 }
+
+.navbarSidebarToggle {
+  margin-right: 1rem;
+}

package/lib-next/theme/NavbarItem/DefaultNavbarItem.js

@@ -10,6 +10,8 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import IconExternalLink from '@theme/IconExternalLink';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+import {getInfimaActiveClassName} from './index';
 const dropdownLinkActiveClass = 'dropdown__link--active';
 export function NavLink({
   activeBasePath,
@@ -17,7 +19,7 @@ export function NavLink({
   to,
   href,
   label,
-  activeClassName = 'navbar__link--active',
+  activeClassName = '',
   prependBaseUrlToHref,
   ...props
 }) {
@@ -38,13 +40,15 @@ export function NavLink({
           }
         : {
             isNavLink: true,
-            activeClassName,
+            activeClassName: !props.className?.includes(activeClassName)
+              ? activeClassName
+              : '',
             to: toUrl,
             ...(activeBasePath || activeBaseRegex
               ? {
                   isActive: (_match, location) =>
                     activeBaseRegex
-                      ? new RegExp(activeBaseRegex).test(location.pathname)
+                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
                       : location.pathname.startsWith(activeBaseUrl),
                 }
               : null),
@@ -108,7 +112,14 @@ function DefaultNavbarItem({
   ...props
 }) {
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return <Comp {...props} />;
+  return (
+    <Comp
+      {...props}
+      activeClassName={
+        props.activeClassName ?? getInfimaActiveClassName(mobile)
+      }
+    />
+  );
 }
 
 export default DefaultNavbarItem;

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -8,6 +8,7 @@ import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
 import clsx from 'clsx';
+import {getInfimaActiveClassName} from './index';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {uniq} from '@docusaurus/utils-common';
 
@@ -28,7 +29,6 @@ Available doc ids are:\n- ${docIds}`);
 
 export default function DocNavbarItem({
   docId,
-  activeSidebarClassName,
   label: staticLabel,
   docsPluginId,
   ...props
@@ -41,14 +41,16 @@ export default function DocNavbarItem({
     [activeVersion, preferredVersion, latestVersion].filter(Boolean),
   );
   const doc = getDocInVersions(versions, docId);
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
   return (
     <DefaultNavbarItem
       exact
       {...props}
       className={clsx(props.className, {
-        [activeSidebarClassName]:
-          activeDoc && activeDoc.sidebar === doc.sidebar,
+        [activeDocInfimaClassName]:
+          activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar,
       })}
+      activeClassName={activeDocInfimaClassName}
       label={staticLabel ?? doc.id}
       to={doc.path}
     />

package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -13,6 +13,7 @@ import {
   useActiveDocContext,
 } from '@theme/hooks/useDocs';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 
 const getVersionMainDoc = (version) =>
   version.docs.find((doc) => doc.id === version.mainDocId);
@@ -28,9 +29,8 @@ export default function DocsVersionDropdownNavbarItem({
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const latestVersion = useLatestVersion(docsPluginId);
-  const {preferredVersion, savePreferredVersionName} = useDocsPreferredVersion(
-    docsPluginId,
-  );
+  const {preferredVersion, savePreferredVersionName} =
+    useDocsPreferredVersion(docsPluginId);
 
   function getItems() {
     const versionLinks = versions.map((version) => {
@@ -56,7 +56,15 @@ export default function DocsVersionDropdownNavbarItem({
   const dropdownVersion =
     activeDocContext.activeVersion ?? preferredVersion ?? latestVersion; // Mobile dropdown is handled a bit differently
 
-  const dropdownLabel = mobile && items ? 'Versions' : dropdownVersion.label;
+  const dropdownLabel =
+    mobile && items
+      ? translate({
+          id: 'theme.navbar.mobileVersionsDropdown.label',
+          message: 'Versions',
+          description:
+            'The label for the navbar versions dropdown on mobile view',
+        })
+      : dropdownVersion.label;
   const dropdownTo =
     mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
   // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])

package/lib-next/theme/NavbarItem/DropdownNavbarItem.js

@@ -10,6 +10,7 @@ import {
   isSamePath,
   useCollapsible,
   Collapsible,
+  isRegexpStringMatch,
   useLocalPathname,
 } from '@docusaurus/theme-common';
 import {NavLink} from '@theme/NavbarItem/DefaultNavbarItem';
@@ -21,10 +22,7 @@ function isItemActive(item, localPathname) {
     return true;
   }
 
-  if (
-    item.activeBaseRegex &&
-    new RegExp(item.activeBaseRegex).test(localPathname)
-  ) {
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
     return true;
   }
 
@@ -67,7 +65,7 @@ function DropdownNavbarItemDesktop({items, position, className, ...props}) {
         'dropdown--show': showDropdown,
       })}>
       <NavLink
-        className={clsx('navbar__item navbar__link', className)}
+        className={clsx('navbar__link', className)}
         {...props}
         onClick={props.to ? undefined : (e) => e.preventDefault()}
         onKeyDown={(e) => {
@@ -120,7 +118,7 @@ function DropdownNavbarItemMobile({
     if (containsActive) {
       setCollapsed(!containsActive);
     }
-  }, [localPathname, containsActive]);
+  }, [localPathname, containsActive, setCollapsed]);
   return (
     <li
       className={clsx('menu__list-item', {

package/lib-next/theme/NavbarItem/{LocaleDropdownNavbarItem.js → LocaleDropdownNavbarItem/index.js}

@@ -9,6 +9,7 @@ import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/IconLanguage';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
@@ -51,12 +52,7 @@ export default function LocaleDropdownNavbarItem({
       mobile={mobile}
       label={
         <span>
-          <IconLanguage
-            style={{
-              verticalAlign: 'text-bottom',
-              marginRight: 5,
-            }}
-          />
+          <IconLanguage className={styles.iconLanguage} />
           <span>{dropdownLabel}</span>
         </span>
       }