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

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

@@ -13,26 +13,47 @@ 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, isLast}) {
+  const className = 'breadcrumbs__link';
+
+  if (isLast) {
+    return (
+      <span className={className} itemProp="name">
+        {children}
+      </span>
+    );
+  }
 
-function BreadcrumbsItemLink({children, href}) {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
   return href ? (
-    <Link className={className} href={href}>
-      {children}
-    </Link>
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
+    </Link> // TODO Google search console doesn't like breadcrumb items without href.
   ) : (
+    // 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}) {
+function BreadcrumbsItem({children, active, index, addMicrodata}) {
   return (
     <li
+      {...(addMicrodata && {
+        itemScope: true,
+        itemProp: 'itemListElement',
+        itemType: 'https://schema.org/ListItem',
+      })}
       className={clsx('breadcrumbs__item', {
         'breadcrumbs__item--active': active,
       })}>
       {children}
+      <meta itemProp="position" content={String(index + 1)} />
     </li>
   );
 }
@@ -40,9 +61,18 @@ function BreadcrumbsItem({children, active}) {
 function HomeBreadcrumbItem() {
   const homeHref = useBaseUrl('/');
   return (
-    <BreadcrumbsItem>
-      <BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
-    </BreadcrumbsItem>
+    <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>
   );
 }
 
@@ -60,16 +90,30 @@ export default function DocBreadcrumbs() {
         ThemeClassNames.docs.docBreadcrumbs,
         styles.breadcrumbsContainer,
       )}
-      aria-label="breadcrumbs">
-      <ul className="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}>
-            <BreadcrumbsItemLink href={item.href}>
-              {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

@@ -6,21 +6,14 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }
 
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
 }

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

@@ -13,17 +13,12 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
 
 function CardContainer({href, children}) {
-  const className = clsx(
-    'card margin-bottom--lg padding--lg',
-    styles.cardContainer,
-    href && styles.cardContainerLink,
-  );
-  return href ? (
-    <Link href={href} className={className}>
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
       {children}
     </Link>
-  ) : (
-    <div className={className}>{children}</div>
   );
 }
 
@@ -33,17 +28,24 @@ function CardLayout({href, icon, title, description}) {
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </h2>
-      <div
-        className={clsx('text--truncate', styles.cardDescription)}
-        title={description}>
-        {description}
-      </div>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
     </CardContainer>
   );
 }
 
 function CardCategory({item}) {
-  const href = findFirstCategoryLink(item);
+  const href = findFirstCategoryLink(item); // Unexpected: categories that don't have a link have been filtered upfront
+
+  if (!href) {
+    return null;
+  }
+
   return (
     <CardLayout
       href={href}

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

@@ -6,38 +6,29 @@
  */
 
 .cardContainer {
-  height: 8rem;
-  color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
 
-  /* box-shadow: var(--ifm-global-shadow-lw); */
   box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: box-shadow var(--ifm-transition-fast) ease,
-    background-color var(--ifm-transition-fast) ease;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
+.cardContainer *:last-child {
+  margin-bottom: 0;
 }
 
 .cardTitle {
   font-size: 1.2rem;
-  min-height: 1.2rem;
 }
 
 .cardDescription {
   font-size: 0.8rem;
-  min-height: 0.8rem;
 }

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

@@ -5,15 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import DocCard from '@theme/DocCard';
-export default function DocCardList({items}) {
+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') {
+      return !!findFirstCategoryLink(item);
+    }
+
+    return true;
+  });
+}
+
+export default function DocCardList({items, className}) {
   return (
-    <div className="row">
-      {items.map((item, index) => (
-        <article key={index} className="col col--6">
-          <DocCard item={item} />
+    <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

@@ -5,23 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  useCurrentSidebarCategory,
+} from '@docusaurus/theme-common';
 import DocCardList from '@theme/DocCardList';
 import DocPaginator from '@theme/DocPaginator';
-import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Heading from '@theme/Heading';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
-export default function DocCategoryGeneratedIndexPage({
-  categoryGeneratedIndex,
-}) {
+
+function DocCategoryGeneratedIndexPageMetadata({categoryGeneratedIndex}) {
+  return (
+    <PageMetadata
+      title={categoryGeneratedIndex.title}
+      description={categoryGeneratedIndex.description}
+      keywords={categoryGeneratedIndex.keywords} // TODO `require` this?
+      image={useBaseUrl(categoryGeneratedIndex.image)}
+    />
+  );
+}
+
+function DocCategoryGeneratedIndexPageContent({categoryGeneratedIndex}) {
   const category = useCurrentSidebarCategory();
   return (
     <>
-      <Seo
+      <PageMetadata
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
         keywords={categoryGeneratedIndex.keywords} // TODO `require` this?
@@ -39,9 +51,9 @@ export default function DocCategoryGeneratedIndexPage({
             <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}
@@ -52,3 +64,12 @@ export default function DocCategoryGeneratedIndexPage({
     </>
   );
 }
+
+export default function DocCategoryGeneratedIndexPage(props) {
+  return (
+    <>
+      <DocCategoryGeneratedIndexPageMetadata {...props} />
+      <DocCategoryGeneratedIndexPageContent {...props} />
+    </>
+  );
+}

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

@@ -9,27 +9,49 @@ import clsx from 'clsx';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
-import Seo from '@theme/Seo';
 import DocItemFooter from '@theme/DocItemFooter';
 import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-export default function DocItem(props) {
+import MDXContent from '@theme/MDXContent';
+
+function DocItemMetadata(props) {
   const {content: DocContent} = props;
   const {metadata, frontMatter, assets} = DocContent;
+  const {keywords} = frontMatter;
+  const {description, title} = metadata;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      {...{
+        title,
+        description,
+        keywords,
+        image,
+      }}
+    />
+  );
+}
+
+function DocItemContent(props) {
+  const {content: DocContent} = props;
+  const {metadata, frontMatter} = DocContent;
   const {
-    keywords,
     hide_title: hideTitle,
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  const {description, title} = metadata;
-  const image = assets.image ?? frontMatter.image; // We only add a title if:
-  // - user asks to hide it with front matter
+  const {title} = metadata; // We only add a title if:
+  // - user doesn't ask to hide it with front matter
   // - the markdown content does not already contain a top-level h1 heading
 
   const shouldAddTitle =
@@ -40,73 +62,69 @@ export default function DocItem(props) {
   const renderTocDesktop =
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
   return (
-    <>
-      <Seo
-        {...{
-          title,
-          description,
-          keywords,
-          image,
-        }}
-      />
-
-      <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol]: !hideTableOfContents,
-          })}>
-          <DocVersionBanner />
-          <div className={styles.docItemContainer}>
-            <article>
-              <DocBreadcrumbs />
-              <DocVersionBadge />
+    <div className="row">
+      <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
 
-              {canRenderTOC && (
-                <TOCCollapsible
-                  toc={DocContent.toc}
-                  minHeadingLevel={tocMinHeadingLevel}
-                  maxHeadingLevel={tocMaxHeadingLevel}
-                  className={clsx(
-                    ThemeClassNames.docs.docTocMobile,
-                    styles.tocMobile,
-                  )}
-                />
-              )}
-
-              <div
-                className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-                {/*
-                Title can be declared inside md content or declared through
-                front matter and added manually. To make both cases consistent,
-                the added title is added under the same div.markdown block
-                See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
-                */}
-                {shouldAddTitle && (
-                  <header>
-                    <Heading as="h1">{title}</Heading>
-                  </header>
+            {canRenderTOC && (
+              <TOCCollapsible
+                toc={DocContent.toc}
+                minHeadingLevel={tocMinHeadingLevel}
+                maxHeadingLevel={tocMaxHeadingLevel}
+                className={clsx(
+                  ThemeClassNames.docs.docTocMobile,
+                  styles.tocMobile,
                 )}
+              />
+            )}
 
+            <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+              {/*
+               Title can be declared inside md content or declared through
+               front matter and added manually. To make both cases consistent,
+               the added title is added under the same div.markdown block
+               See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+               */}
+              {shouldAddTitle && (
+                <header>
+                  <Heading as="h1">{title}</Heading>
+                </header>
+              )}
+              <MDXContent>
                 <DocContent />
-              </div>
+              </MDXContent>
+            </div>
 
-              <DocItemFooter {...props} />
-            </article>
+            <DocItemFooter {...props} />
+          </article>
 
-            <DocPaginator previous={metadata.previous} next={metadata.next} />
-          </div>
+          <DocPaginator previous={metadata.previous} next={metadata.next} />
         </div>
-        {renderTocDesktop && (
-          <div className="col col--3">
-            <TOC
-              toc={DocContent.toc}
-              minHeadingLevel={tocMinHeadingLevel}
-              maxHeadingLevel={tocMaxHeadingLevel}
-              className={ThemeClassNames.docs.docTocDesktop}
-            />
-          </div>
-        )}
       </div>
-    </>
+      {renderTocDesktop && (
+        <div className="col col--3">
+          <TOC
+            toc={DocContent.toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+            className={ThemeClassNames.docs.docTocDesktop}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function DocItem(props) {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  return (
+    <HtmlClassNameProvider className={docHtmlClassName}>
+      <DocItemMetadata {...props} />
+      <DocItemContent {...props} />
+    </HtmlClassNameProvider>
   );
 }

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>
+  );
+}