@docusaurus/theme-classic 2.0.0-beta.18 → 2.0.0-beta.19

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

@@ -13,27 +13,42 @@ import {
 import styles from './styles.module.css';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl'; // TODO move to design system folder
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/IconHome'; // TODO move to design system folder
 
-function BreadcrumbsItemLink({children, href}) {
+function BreadcrumbsItemLink({children, href, isLast}) {
   const className = 'breadcrumbs__link';
+
+  if (isLast) {
+    return (
+      <span className={className} itemProp="name">
+        {children}
+      </span>
+    );
+  }
+
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
-    </Link>
+    </Link> // TODO Google search console doesn't like breadcrumb items without href.
   ) : (
-    <span className={className} itemProp="item name">
-      {children}
-    </span>
+    // The schema doesn't seem to require `id` for each `item`, although Google
+    // insist to infer one, even if it's invalid. Removing `itemProp="item
+    // name"` for now, since I don't know how to properly fix it.
+    // See https://github.com/facebook/docusaurus/issues/7241
+    <span className={className}>{children}</span>
   );
 } // TODO move to design system folder
 
-function BreadcrumbsItem({children, active, index}) {
+function BreadcrumbsItem({children, active, index, addMicrodata}) {
   return (
     <li
-      itemScope
-      itemProp="itemListElement"
-      itemType="https://schema.org/ListItem"
+      {...(addMicrodata && {
+        itemScope: true,
+        itemProp: 'itemListElement',
+        itemType: 'https://schema.org/ListItem',
+      })}
       className={clsx('breadcrumbs__item', {
         'breadcrumbs__item--active': active,
       })}>
@@ -48,9 +63,14 @@ function HomeBreadcrumbItem() {
   return (
     <li className="breadcrumbs__item">
       <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
         className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
         href={homeHref}>
-        🏠
+        <IconHome className={styles.breadcrumbHomeIcon} />
       </Link>
     </li>
   );
@@ -70,23 +90,30 @@ export default function DocBreadcrumbs() {
         ThemeClassNames.docs.docBreadcrumbs,
         styles.breadcrumbsContainer,
       )}
-      aria-label="breadcrumbs">
+      aria-label={translate({
+        id: 'theme.docs.breadcrumbs.navAriaLabel',
+        message: 'Breadcrumbs',
+        description: 'The ARIA label for the breadcrumbs',
+      })}>
       <ul
         className="breadcrumbs"
         itemScope
         itemType="https://schema.org/BreadcrumbList">
         {homePageRoute && <HomeBreadcrumbItem />}
-        {breadcrumbs.map((item, idx) => (
-          <BreadcrumbsItem
-            key={idx}
-            active={idx === breadcrumbs.length - 1}
-            index={idx}>
-            <BreadcrumbsItemLink
-              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
-              {item.label}
-            </BreadcrumbsItemLink>
-          </BreadcrumbsItem>
-        ))}
+        {breadcrumbs.map((item, idx) => {
+          const isLast = idx === breadcrumbs.length - 1;
+          return (
+            <BreadcrumbsItem
+              key={idx}
+              active={isLast}
+              index={idx}
+              addMicrodata={!!item.href}>
+              <BreadcrumbsItemLink href={item.href} isLast={isLast}>
+                {item.label}
+              </BreadcrumbsItemLink>
+            </BreadcrumbsItem>
+          );
+        })}
       </ul>
     </nav>
   );

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

@@ -9,3 +9,11 @@
   --ifm-breadcrumb-size-multiplier: 0.8;
   margin-bottom: 0.8rem;
 }
+
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}

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

@@ -5,9 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import DocCard from '@theme/DocCard';
-import {findFirstCategoryLink} from '@docusaurus/theme-common'; // Filter categories that don't have a link.
+import {findFirstCategoryLink} from '@docusaurus/theme-common';
 
+// Filter categories that don't have a link.
 function filterItems(items) {
   return items.filter((item) => {
     if (item.type === 'category') {
@@ -18,14 +20,14 @@ function filterItems(items) {
   });
 }
 
-export default function DocCardList({items}) {
+export default function DocCardList({items, className}) {
   return (
-    <div className="row">
+    <section className={clsx('row', className)}>
       {filterItems(items).map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard key={index} item={item} />
         </article>
       ))}
-    </div>
+    </section>
   );
 }

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

@@ -51,9 +51,9 @@ function DocCategoryGeneratedIndexPageContent({categoryGeneratedIndex}) {
             <p>{categoryGeneratedIndex.description}</p>
           )}
         </header>
-        <main className="margin-top--lg">
-          <DocCardList items={category.items} />
-        </main>
+        <article className="margin-top--lg">
+          <DocCardList items={category.items} className={styles.list} />
+        </article>
         <footer className="margin-top--lg">
           <DocPaginator
             previous={categoryGeneratedIndex.navigation.previous}

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

@@ -9,6 +9,10 @@
   .generatedIndexPage {
     max-width: 75% !important;
   }
+
+  .list article:nth-last-child(-n + 2) {
+    margin-bottom: 0 !important;
+  }
 }
 
 /* Duplicated from .markdown h1 */
@@ -16,3 +20,7 @@
   --ifm-h1-font-size: 3rem;
   margin-bottom: calc(1.25 * var(--ifm-leading));
 }
+
+.list article:last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -51,7 +51,7 @@ function DocItemContent(props) {
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
   const {title} = metadata; // We only add a title if:
-  // - user asks to hide it with front matter
+  // - user doesn't ask to hide it with front matter
   // - the markdown content does not already contain a top-level h1 heading
 
   const shouldAddTitle =

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

@@ -20,3 +20,9 @@
     display: none;
   }
 }
+
+@media print {
+  .tocMobile {
+    display: none;
+  }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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 {useDocsSidebar} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <main
+      className={clsx(
+        styles.docMainContainer,
+        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+      )}>
+      <div
+        className={clsx(
+          'container padding-top--md padding-bottom--lg',
+          styles.docItemWrapper,
+          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+        )}>
+        {children}
+      </div>
+    </main>
+  );
+}

package/lib-next/theme/DocPage/Layout/Main/styles.module.css

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

package/lib-next/theme/DocPage/Layout/Sidebar/ExpandButton/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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 IconArrow from '@theme/IconArrow';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+export default function DocPageLayoutSidebarExpandButton({toggleSidebar}) {
+  return (
+    <div
+      className={styles.expandButton}
+      title={translate({
+        id: 'theme.docs.sidebar.expandButtonTitle',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.expandButtonAriaLabel',
+        message: 'Expand sidebar',
+        description:
+          'The ARIA label and title attribute for expand button of doc sidebar',
+      })}
+      tabIndex={0}
+      role="button"
+      onKeyDown={toggleSidebar}
+      onClick={toggleSidebar}>
+      <IconArrow className={styles.expandButtonIcon} />
+    </div>
+  );
+}

package/lib-next/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+@media (min-width: 997px) {
+  .expandButton {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
+  }
+
+  .expandButton:hover,
+  .expandButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
+  }
+
+  .expandButtonIcon {
+    transform: rotate(0);
+  }
+
+  [dir='rtl'] .expandButtonIcon {
+    transform: rotate(180deg);
+  }
+}

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

@@ -0,0 +1,68 @@
+/**
+ * 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, {useState, useCallback} from 'react';
+import DocSidebar from '@theme/DocSidebar';
+import {useLocation} from '@docusaurus/router';
+import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+import clsx from 'clsx';
+import styles from './index.module.css';
+import {ThemeClassNames, useDocsSidebar} from '@docusaurus/theme-common'; // Reset sidebar state when sidebar changes
+// Use React key to unmount/remount the children
+// See https://github.com/facebook/docusaurus/issues/3414
+
+function ResetOnSidebarChange({children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+      {children}
+    </React.Fragment>
+  );
+}
+
+export default function DocPageLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}) {
+  const {pathname} = useLocation();
+  const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const toggleSidebar = useCallback(() => {
+    if (hiddenSidebar) {
+      setHiddenSidebar(false);
+    }
+
+    setHiddenSidebarContainer((value) => !value);
+  }, [setHiddenSidebarContainer, hiddenSidebar]);
+  return (
+    <aside
+      className={clsx(
+        ThemeClassNames.docs.docSidebarContainer,
+        styles.docSidebarContainer,
+        hiddenSidebarContainer && styles.docSidebarContainerHidden,
+      )}
+      onTransitionEnd={(e) => {
+        if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
+          return;
+        }
+
+        if (hiddenSidebarContainer) {
+          setHiddenSidebar(true);
+        }
+      }}>
+      <ResetOnSidebarChange>
+        <DocSidebar
+          sidebar={sidebar}
+          path={pathname}
+          onCollapse={toggleSidebar}
+          isHidden={hiddenSidebar}
+        />
+      </ResetOnSidebarChange>
+
+      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+    </aside>
+  );
+}

package/lib-next/theme/DocPage/Layout/Sidebar/index.module.css

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+.docSidebarContainer {
+  display: none;
+}
+
+@media (min-width: 997px) {
+  .docSidebarContainer {
+    display: block;
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * 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, {useState} from 'react';
+import Layout from '@theme/Layout';
+import BackToTopButton from '@theme/BackToTopButton';
+import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
+import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
+import styles from './index.module.css';
+import {useDocsSidebar} from '@docusaurus/theme-common';
+export default function DocPageLayout({children}) {
+  const sidebar = useDocsSidebar();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  return (
+    <Layout wrapperClassName={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docPage}>
+        {sidebar && (
+          <DocPageLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocPageLayoutMain>
+      </div>
+    </Layout>
+  );
+}

package/lib-next/theme/{BlogPostAuthor/styles.module.css → DocPage/Layout/index.module.css}

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.image {
+.docPage {
+  display: flex;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+}
+
+.docsWrapper {
+  display: flex;
 }