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

package/src/theme/ColorModeToggle/styles.module.css

@@ -6,28 +6,11 @@
  */
 
 .toggle {
-  position: relative;
-  width: 32px;
-  height: 32px;
-}
-
-.toggleScreenReader {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.toggleDisabled {
-  cursor: not-allowed;
+  width: 2rem;
+  height: 2rem;
 }
 
 .toggleButton {
-  cursor: pointer;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   display: flex;
@@ -35,17 +18,18 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .toggleButton:hover {
-  background-color: #00000010;
-}
-
-[data-theme='dark'] .toggleButton:hover {
-  background-color: #ffffff20;
+  background: var(--ifm-color-emphasis-200);
 }
 
 [data-theme='light'] .darkToggleIcon,
 [data-theme='dark'] .lightToggleIcon {
   display: none;
 }
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

package/src/theme/DocBreadcrumbs/index.tsx

@@ -24,13 +24,15 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href?: string;
 }): JSX.Element {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
-    <Link className={className} href={href}>
-      {children}
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
     </Link>
   ) : (
-    <span className={className}>{children}</span>
+    <span className={className} itemProp="item name">
+      {children}
+    </span>
   );
 }
 
@@ -38,16 +40,22 @@ function BreadcrumbsItemLink({
 function BreadcrumbsItem({
   children,
   active,
+  index,
 }: {
   children: ReactNode;
   active?: boolean;
+  index: number;
 }): JSX.Element {
   return (
     <li
+      itemScope
+      itemProp="itemListElement"
+      itemType="https://schema.org/ListItem"
       className={clsx('breadcrumbs__item', {
         'breadcrumbs__item--active': active,
       })}>
       {children}
+      <meta itemProp="position" content={String(index + 1)} />
     </li>
   );
 }
@@ -55,9 +63,13 @@ function BreadcrumbsItem({
 function HomeBreadcrumbItem() {
   const homeHref = useBaseUrl('/');
   return (
-    <BreadcrumbsItem>
-      <BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
-    </BreadcrumbsItem>
+    <li className="breadcrumbs__item">
+      <Link
+        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
+        href={homeHref}>
+        🏠
+      </Link>
+    </li>
   );
 }
 
@@ -76,11 +88,18 @@ export default function DocBreadcrumbs(): JSX.Element | null {
         styles.breadcrumbsContainer,
       )}
       aria-label="breadcrumbs">
-      <ul className="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}>
+          <BreadcrumbsItem
+            key={idx}
+            active={idx === breadcrumbs.length - 1}
+            index={idx}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

package/src/theme/DocBreadcrumbs/styles.module.css

@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.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;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }

package/src/theme/DocCard/index.tsx

@@ -22,20 +22,15 @@ function CardContainer({
   href,
   children,
 }: {
-  href?: string;
+  href: string;
   children: ReactNode;
 }): JSX.Element {
-  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>
   );
 }
 
@@ -45,7 +40,7 @@ function CardLayout({
   title,
   description,
 }: {
-  href?: string;
+  href: string;
   icon: ReactNode;
   title: string;
   description?: string;
@@ -55,17 +50,29 @@ function CardLayout({
       <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}: {item: PropSidebarItemCategory}): JSX.Element {
+function CardCategory({
+  item,
+}: {
+  item: PropSidebarItemCategory;
+}): JSX.Element | null {
   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/src/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/src/theme/DocCardList/index.tsx

@@ -9,6 +9,17 @@ import React from 'react';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+import {findFirstCategoryLink} from '@docusaurus/theme-common';
+
+// Filter categories that don't have a link.
+function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
+  return items.filter((item) => {
+    if (item.type === 'category') {
+      return !!findFirstCategoryLink(item);
+    }
+    return true;
+  });
+}
 
 export default function DocCardList({
   items,
@@ -17,9 +28,9 @@ export default function DocCardList({
 }): JSX.Element {
   return (
     <div className="row">
-      {items.map((item, index) => (
-        <article key={index} className="col col--6">
-          <DocCard item={item} />
+      {filterItems(items).map((item, index) => (
+        <article key={index} className="col col--6 margin-bottom--lg">
+          <DocCard key={index} item={item} />
         </article>
       ))}
     </div>

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -6,11 +6,13 @@
  */
 
 import React from 'react';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  useCurrentSidebarCategory,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/DocCategoryGeneratedIndexPage';
 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';
@@ -19,13 +21,27 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
 
-export default function DocCategoryGeneratedIndexPage({
+function DocCategoryGeneratedIndexPageMetadata({
+  categoryGeneratedIndex,
+}: Props): JSX.Element {
+  return (
+    <PageMetadata
+      title={categoryGeneratedIndex.title}
+      description={categoryGeneratedIndex.description}
+      keywords={categoryGeneratedIndex.keywords}
+      // TODO `require` this?
+      image={useBaseUrl(categoryGeneratedIndex.image)}
+    />
+  );
+}
+
+function DocCategoryGeneratedIndexPageContent({
   categoryGeneratedIndex,
 }: Props): JSX.Element {
   const category = useCurrentSidebarCategory();
   return (
     <>
-      <Seo
+      <PageMetadata
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
         keywords={categoryGeneratedIndex.keywords}
@@ -57,3 +73,14 @@ export default function DocCategoryGeneratedIndexPage({
     </>
   );
 }
+
+export default function DocCategoryGeneratedIndexPage(
+  props: Props,
+): JSX.Element {
+  return (
+    <>
+      <DocCategoryGeneratedIndexPageMetadata {...props} />
+      <DocCategoryGeneratedIndexPageContent {...props} />
+    </>
+  );
+}

package/src/theme/DocItem/index.tsx

@@ -10,28 +10,41 @@ 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 type {Props} from '@theme/DocItem';
 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';
+import MDXContent from '@theme/MDXContent';
 
-export default function DocItem(props: Props): JSX.Element {
+function DocItemMetadata(props: Props): JSX.Element {
   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: Props): JSX.Element {
+  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;
+  const {title} = metadata;
 
   // We only add a title if:
   // - user asks to hide it with front matter
@@ -48,66 +61,69 @@ export default function DocItem(props: Props): JSX.Element {
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
 
   return (
-    <>
-      <Seo {...{title, description, keywords, image}} />
+    <div className="row">
+      <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
 
-      <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol]: !hideTableOfContents,
-          })}>
-          <DocVersionBanner />
-          <div className={styles.docItemContainer}>
-            <article>
-              <DocBreadcrumbs />
-              <DocVersionBadge />
-
-              {canRenderTOC && (
-                <TOCCollapsible
-                  toc={DocContent.toc}
-                  minHeadingLevel={tocMinHeadingLevel}
-                  maxHeadingLevel={tocMaxHeadingLevel}
-                  className={clsx(
-                    ThemeClassNames.docs.docTocMobile,
-                    styles.tocMobile,
-                  )}
-                />
-              )}
+            {canRenderTOC && (
+              <TOCCollapsible
+                toc={DocContent.toc}
+                minHeadingLevel={tocMinHeadingLevel}
+                maxHeadingLevel={tocMaxHeadingLevel}
+                className={clsx(
+                  ThemeClassNames.docs.docTocMobile,
+                  styles.tocMobile,
+                )}
+              />
+            )}
 
-              <div
-                className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
-                {/*
+            <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>
-                )}
-
+              {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: Props): JSX.Element {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  return (
+    <HtmlClassNameProvider className={docHtmlClassName}>
+      <DocItemMetadata {...props} />
+      <DocItemContent {...props} />
+    </HtmlClassNameProvider>
   );
 }