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

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

@@ -6,22 +6,31 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+import {findFirstCategoryLink} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCardList';
 
-export default function DocCardList({
-  items,
-}: {
-  items: PropSidebarItem[];
-}): JSX.Element {
+// 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, className}: Props): JSX.Element {
   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/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}
@@ -44,9 +60,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}
@@ -57,3 +73,14 @@ export default function DocCategoryGeneratedIndexPage({
     </>
   );
 }
+
+export default function DocCategoryGeneratedIndexPage(
+  props: Props,
+): JSX.Element {
+  return (
+    <>
+      <DocCategoryGeneratedIndexPageMetadata {...props} />
+      <DocCategoryGeneratedIndexPageContent {...props} />
+    </>
+  );
+}

package/src/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/src/theme/DocItem/index.tsx

@@ -10,31 +10,44 @@ 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
+  // - user doesn't ask to hide it with front matter
   // - the markdown content does not already contain a top-level h1 heading
   const shouldAddTitle =
     !hideTitle && typeof DocContent.contentTitle === 'undefined';
@@ -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>
   );
 }

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

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

package/src/theme/DocPage/Layout/Main/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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';
+import type {Props} from '@theme/DocPage/Layout/Main';
+
+export default function DocPageLayoutMain({
+  hiddenSidebarContainer,
+  children,
+}: Props): JSX.Element {
+  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/src/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/src/theme/DocPage/Layout/Sidebar/ExpandButton/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+
+import styles from './styles.module.css';
+
+export default function DocPageLayoutSidebarExpandButton({
+  toggleSidebar,
+}: Props): JSX.Element {
+  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/src/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/src/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/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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, {type ReactNode, useState, useCallback} from 'react';
+import DocSidebar from '@theme/DocSidebar';
+import {useLocation} from '@docusaurus/router';
+import type {Props} from '@theme/DocPage/Layout/Sidebar';
+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}: {children: ReactNode}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <React.Fragment key={sidebar?.name ?? 'noSidebar'}>
+      {children}
+    </React.Fragment>
+  );
+}
+
+export default function DocPageLayoutSidebar({
+  sidebar,
+  hiddenSidebarContainer,
+  setHiddenSidebarContainer,
+}: Props): JSX.Element {
+  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>
+  );
+}