@docusaurus/theme-classic 2.4.0 → 3.0.0-alpha.0

package/src/theme/BlogTagsListPage/index.tsx

@@ -17,6 +17,7 @@ import BlogLayout from '@theme/BlogLayout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
+import Heading from '@theme/Heading';
 
 export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
   const title = translateTagsPageTitle();
@@ -29,7 +30,7 @@ export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
       <PageMetadata title={title} />
       <SearchMetadata tag="blog_tags_list" />
       <BlogLayout sidebar={sidebar}>
-        <h1>{title}</h1>
+        <Heading as="h1">{title}</Heading>
         <TagsListByLetter tags={tags} />
       </BlogLayout>
     </HtmlClassNameProvider>

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -20,6 +20,8 @@ import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogTagsPostsPage';
 import BlogPostItems from '@theme/BlogPostItems';
+import Unlisted from '@theme/Unlisted';
+import Heading from '@theme/Heading';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
@@ -70,9 +72,9 @@ function BlogTagsPostsPageContent({
   const title = useBlogTagsPostsPageTitle(tag);
   return (
     <BlogLayout sidebar={sidebar}>
+      {tag.unlisted && <Unlisted />}
       <header className="margin-bottom--xl">
-        <h1>{title}</h1>
-
+        <Heading as="h1">{title}</Heading>
         <Link href={tag.allTagsPath}>
           <Translate
             id="theme.tags.tagsPageLink"

package/src/theme/CodeBlock/CopyButton/index.tsx

@@ -11,6 +11,8 @@ import clsx from 'clsx';
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/CopyButton';
+import IconCopy from '@theme/Icon/Copy';
+import IconSuccess from '@theme/Icon/Success';
 
 import styles from './styles.module.css';
 
@@ -56,12 +58,8 @@ export default function CopyButton({code, className}: Props): JSX.Element {
       )}
       onClick={handleCopyCode}>
       <span className={styles.copyButtonIcons} aria-hidden="true">
-        <svg className={styles.copyButtonIcon} viewBox="0 0 24 24">
-          <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-        </svg>
-        <svg className={styles.copyButtonSuccessIcon} viewBox="0 0 24 24">
-          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-        </svg>
+        <IconCopy className={styles.copyButtonIcon} />
+        <IconSuccess className={styles.copyButtonSuccessIcon} />
       </span>
     </button>
   );

package/src/theme/CodeBlock/WordWrapButton/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/WordWrapButton';
+import IconWordWrap from '@theme/Icon/WordWrap';
 
 import styles from './styles.module.css';
 
@@ -35,15 +36,7 @@ export default function WordWrapButton({
       )}
       aria-label={title}
       title={title}>
-      <svg
-        className={styles.wordWrapButtonIcon}
-        viewBox="0 0 24 24"
-        aria-hidden="true">
-        <path
-          fill="currentColor"
-          d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
-        />
-      </svg>
+      <IconWordWrap className={styles.wordWrapButtonIcon} aria-hidden="true" />
     </button>
   );
 }

package/src/theme/DocBreadcrumbs/index.tsx

@@ -104,13 +104,17 @@ export default function DocBreadcrumbs(): JSX.Element | null {
         {homePageRoute && <HomeBreadcrumbItem />}
         {breadcrumbs.map((item, idx) => {
           const isLast = idx === breadcrumbs.length - 1;
+          const href =
+            item.type === 'category' && item.linkUnlisted
+              ? undefined
+              : item.href;
           return (
             <BreadcrumbsItem
               key={idx}
               active={isLast}
               index={idx}
-              addMicrodata={!!item.href}>
-              <BreadcrumbsItemLink href={item.href} isLast={isLast}>
+              addMicrodata={!!href}>
+              <BreadcrumbsItemLink href={href} isLast={isLast}>
                 {item.label}
               </BreadcrumbsItemLink>
             </BreadcrumbsItem>

package/src/theme/DocCard/index.tsx

@@ -9,19 +9,21 @@ import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {
-  findFirstCategoryLink,
+  findFirstSidebarItemLink,
   useDocById,
 } from '@docusaurus/theme-common/internal';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {translate} from '@docusaurus/Translate';
-import type {Props} from '@theme/DocCard';
 
-import styles from './styles.module.css';
+import type {Props} from '@theme/DocCard';
+import Heading from '@theme/Heading';
 import type {
   PropSidebarItemCategory,
   PropSidebarItemLink,
 } from '@docusaurus/plugin-content-docs';
 
+import styles from './styles.module.css';
+
 function CardContainer({
   href,
   children,
@@ -51,9 +53,12 @@ function CardLayout({
 }): JSX.Element {
   return (
     <CardContainer href={href}>
-      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+      <Heading
+        as="h2"
+        className={clsx('text--truncate', styles.cardTitle)}
+        title={title}>
         {icon} {title}
-      </h2>
+      </Heading>
       {description && (
         <p
           className={clsx('text--truncate', styles.cardDescription)}
@@ -70,7 +75,7 @@ function CardCategory({
 }: {
   item: PropSidebarItemCategory;
 }): JSX.Element | null {
-  const href = findFirstCategoryLink(item);
+  const href = findFirstSidebarItemLink(item);
 
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {

package/src/theme/DocItem/Layout/index.tsx

@@ -17,6 +17,7 @@ import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import Unlisted from '@theme/Unlisted';
 import type {Props} from '@theme/DocItem/Layout';
 
 import styles from './styles.module.css';
@@ -47,9 +48,13 @@ function useDocTOC() {
 
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
+  const {
+    metadata: {unlisted},
+  } = useDoc();
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        {unlisted && <Unlisted />}
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>

package/src/theme/DocPaginator/index.tsx

@@ -17,7 +17,7 @@ export default function DocPaginator(props: Props): JSX.Element {
       className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
         id: 'theme.docs.paginator.navAriaLabel',
-        message: 'Docs pages navigation',
+        message: 'Docs pages',
         description: 'The ARIA label for the docs pagination',
       })}>
       {previous && (

package/src/theme/{DocPage → DocRoot}/Layout/Main/index.tsx

@@ -8,11 +8,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import {useDocsSidebar} from '@docusaurus/theme-common/internal';
-import type {Props} from '@theme/DocPage/Layout/Main';
+import type {Props} from '@theme/DocRoot/Layout/Main';
 
 import styles from './styles.module.css';
 
-export default function DocPageLayoutMain({
+export default function DocRootLayoutMain({
   hiddenSidebarContainer,
   children,
 }: Props): JSX.Element {

package/src/theme/{DocPage → DocRoot}/Layout/Sidebar/ExpandButton/index.tsx

@@ -8,11 +8,11 @@
 import React from 'react';
 import {translate} from '@docusaurus/Translate';
 import IconArrow from '@theme/Icon/Arrow';
-import type {Props} from '@theme/DocPage/Layout/Sidebar/ExpandButton';
+import type {Props} from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
 
 import styles from './styles.module.css';
 
-export default function DocPageLayoutSidebarExpandButton({
+export default function DocRootLayoutSidebarExpandButton({
   toggleSidebar,
 }: Props): JSX.Element {
   return (

package/src/theme/{DocPage → DocRoot}/Layout/Sidebar/index.tsx

@@ -7,12 +7,12 @@
 
 import React, {type ReactNode, useState, useCallback} from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common';
 import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import DocSidebar from '@theme/DocSidebar';
-import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
-import type {Props} from '@theme/DocPage/Layout/Sidebar';
+import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
+import type {Props} from '@theme/DocRoot/Layout/Sidebar';
 
 import styles from './styles.module.css';
 
@@ -28,7 +28,7 @@ function ResetOnSidebarChange({children}: {children: ReactNode}) {
   );
 }
 
-export default function DocPageLayoutSidebar({
+export default function DocRootLayoutSidebar({
   sidebar,
   hiddenSidebarContainer,
   setHiddenSidebarContainer,
@@ -40,6 +40,11 @@ export default function DocPageLayoutSidebar({
     if (hiddenSidebar) {
       setHiddenSidebar(false);
     }
+    // onTransitionEnd won't fire when sidebar animation is disabled
+    // fixes https://github.com/facebook/docusaurus/issues/8918
+    if (!hiddenSidebar && prefersReducedMotion()) {
+      setHiddenSidebar(true);
+    }
     setHiddenSidebarContainer((value) => !value);
   }, [setHiddenSidebarContainer, hiddenSidebar]);
 

package/src/theme/{DocPage → DocRoot}/Layout/index.tsx

@@ -7,32 +7,31 @@
 
 import React, {useState} from 'react';
 import {useDocsSidebar} from '@docusaurus/theme-common/internal';
-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 type {Props} from '@theme/DocPage/Layout';
+import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
+import DocRootLayoutMain from '@theme/DocRoot/Layout/Main';
+import type {Props} from '@theme/DocRoot/Layout';
 
 import styles from './styles.module.css';
 
-export default function DocPageLayout({children}: Props): JSX.Element {
+export default function DocRootLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (
-    <Layout wrapperClassName={styles.docsWrapper}>
+    <div className={styles.docsWrapper}>
       <BackToTopButton />
-      <div className={styles.docPage}>
+      <div className={styles.docRoot}>
         {sidebar && (
-          <DocPageLayoutSidebar
+          <DocRootLayoutSidebar
             sidebar={sidebar.items}
             hiddenSidebarContainer={hiddenSidebarContainer}
             setHiddenSidebarContainer={setHiddenSidebarContainer}
           />
         )}
-        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+        <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
           {children}
-        </DocPageLayoutMain>
+        </DocRootLayoutMain>
       </div>
-    </Layout>
+    </div>
   );
 }

package/src/theme/{DocPage → DocRoot}/Layout/styles.module.css

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.docPage {
+.docRoot {
   display: flex;
   width: 100%;
-  flex: 1 0;
 }
 
 .docsWrapper {

package/src/theme/DocRoot/index.tsx

@@ -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 clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  DocsSidebarProvider,
+  useDocRootMetadata,
+} from '@docusaurus/theme-common/internal';
+import DocRootLayout from '@theme/DocRoot/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+import type {Props} from '@theme/DocRoot';
+
+export default function DocRoot(props: Props): JSX.Element {
+  const currentDocRouteMetadata = useDocRootMetadata(props);
+  if (!currentDocRouteMetadata) {
+    // We only render the not found content to avoid a double layout
+    // see https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692
+    return <NotFoundContent />;
+  }
+  const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
+  return (
+    <HtmlClassNameProvider className={clsx(ThemeClassNames.page.docsDocPage)}>
+      <DocsSidebarProvider name={sidebarName} items={sidebarItems}>
+        <DocRootLayout>{docElement}</DocRootLayout>
+      </DocsSidebarProvider>
+    </HtmlClassNameProvider>
+  );
+}

package/src/theme/DocSidebarItem/Category/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@docusaurus/theme-common';
 import {
   isActiveSidebarItem,
-  findFirstCategoryLink,
+  findFirstSidebarItemLink,
   useDocSidebarItemsExpandedState,
   isSamePath,
 } from '@docusaurus/theme-common/internal';
@@ -59,7 +59,7 @@ function useCategoryHrefWithSSRFallback(
 ): string | undefined {
   const isBrowser = useIsBrowser();
   return useMemo(() => {
-    if (item.href) {
+    if (item.href && !item.linkUnlisted) {
       return item.href;
     }
     // In these cases, it's not necessary to render a fallback
@@ -67,7 +67,7 @@ function useCategoryHrefWithSSRFallback(
     if (isBrowser || !item.collapsible) {
       return undefined;
     }
-    return findFirstCategoryLink(item);
+    return findFirstSidebarItemLink(item);
   }, [item, isBrowser]);
 }
 

package/src/theme/DocSidebarItems/index.tsx

@@ -6,17 +6,19 @@
  */
 
 import React, {memo} from 'react';
-import {DocSidebarItemsExpandedStateProvider} from '@docusaurus/theme-common/internal';
+import {
+  DocSidebarItemsExpandedStateProvider,
+  useVisibleSidebarItems,
+} from '@docusaurus/theme-common/internal';
 import DocSidebarItem from '@theme/DocSidebarItem';
 
 import type {Props} from '@theme/DocSidebarItems';
 
-// TODO this item should probably not receive the "activePath" props
-// TODO this triggers whole sidebar re-renders on navigation
 function DocSidebarItems({items, ...props}: Props): JSX.Element {
+  const visibleItems = useVisibleSidebarItems(items, props.activePath);
   return (
     <DocSidebarItemsExpandedStateProvider>
-      {items.map((item, index) => (
+      {visibleItems.map((item, index) => (
         <DocSidebarItem key={index} item={item} index={index} {...props} />
       ))}
     </DocSidebarItemsExpandedStateProvider>

package/src/theme/DocTagDocListPage/index.tsx

@@ -15,9 +15,10 @@ import {
   usePluralForm,
 } from '@docusaurus/theme-common';
 import Translate, {translate} from '@docusaurus/Translate';
-import Layout from '@theme/Layout';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagDocListPage';
+import Unlisted from '@theme/Unlisted';
+import Heading from '@theme/Heading';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
@@ -37,59 +38,79 @@ function useNDocsTaggedPlural() {
     );
 }
 
+function usePageTitle(props: Props): string {
+  const nDocsTaggedPlural = useNDocsTaggedPlural();
+  return translate(
+    {
+      id: 'theme.docs.tagDocListPageTitle',
+      description: 'The title of the page for a docs tag',
+      message: '{nDocsTagged} with "{tagName}"',
+    },
+    {nDocsTagged: nDocsTaggedPlural(props.tag.count), tagName: props.tag.label},
+  );
+}
+
 function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
   return (
     <article className="margin-vert--lg">
       <Link to={doc.permalink}>
-        <h2>{doc.title}</h2>
+        <Heading as="h2">{doc.title}</Heading>
       </Link>
       {doc.description && <p>{doc.description}</p>}
     </article>
   );
 }
 
-export default function DocTagDocListPage({tag}: Props): JSX.Element {
-  const nDocsTaggedPlural = useNDocsTaggedPlural();
-  const title = translate(
-    {
-      id: 'theme.docs.tagDocListPageTitle',
-      description: 'The title of the page for a docs tag',
-      message: '{nDocsTagged} with "{tagName}"',
-    },
-    {nDocsTagged: nDocsTaggedPlural(tag.count), tagName: tag.label},
+function DocTagDocListPageMetadata({
+  title,
+}: Props & {title: string}): JSX.Element {
+  return (
+    <>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="doc_tag_doc_list" />
+    </>
   );
+}
 
+function DocTagDocListPageContent({
+  tag,
+  title,
+}: Props & {title: string}): JSX.Element {
   return (
     <HtmlClassNameProvider
-      className={clsx(
-        ThemeClassNames.wrapper.docsPages,
-        ThemeClassNames.page.docsTagDocListPage,
-      )}>
-      <PageMetadata title={title} />
-      <SearchMetadata tag="doc_tag_doc_list" />
-      <Layout>
-        <div className="container margin-vert--lg">
-          <div className="row">
-            <main className="col col--8 col--offset-2">
-              <header className="margin-bottom--xl">
-                <h1>{title}</h1>
-                <Link href={tag.allTagsPath}>
-                  <Translate
-                    id="theme.tags.tagsPageLink"
-                    description="The label of the link targeting the tag list page">
-                    View All Tags
-                  </Translate>
-                </Link>
-              </header>
-              <section className="margin-vert--lg">
-                {tag.items.map((doc) => (
-                  <DocItem key={doc.id} doc={doc} />
-                ))}
-              </section>
-            </main>
-          </div>
+      className={clsx(ThemeClassNames.page.docsTagDocListPage)}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            {tag.unlisted && <Unlisted />}
+            <header className="margin-bottom--xl">
+              <Heading as="h1">{title}</Heading>
+              <Link href={tag.allTagsPath}>
+                <Translate
+                  id="theme.tags.tagsPageLink"
+                  description="The label of the link targeting the tag list page">
+                  View All Tags
+                </Translate>
+              </Link>
+            </header>
+            <section className="margin-vert--lg">
+              {tag.items.map((doc) => (
+                <DocItem key={doc.id} doc={doc} />
+              ))}
+            </section>
+          </main>
         </div>
-      </Layout>
+      </div>
     </HtmlClassNameProvider>
   );
 }
+
+export default function DocTagDocListPage(props: Props): JSX.Element {
+  const title = usePageTitle(props);
+  return (
+    <>
+      <DocTagDocListPageMetadata {...props} title={title} />
+      <DocTagDocListPageContent {...props} title={title} />
+    </>
+  );
+}

package/src/theme/DocTagsListPage/index.tsx

@@ -13,31 +13,47 @@ import {
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
-import Layout from '@theme/Layout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagsListPage';
+import Heading from '@theme/Heading';
 
-export default function DocTagsListPage({tags}: Props): JSX.Element {
-  const title = translateTagsPageTitle();
+function DocTagsListPageMetadata({
+  title,
+}: Props & {title: string}): JSX.Element {
   return (
-    <HtmlClassNameProvider
-      className={clsx(
-        ThemeClassNames.wrapper.docsPages,
-        ThemeClassNames.page.docsTagsListPage,
-      )}>
+    <>
       <PageMetadata title={title} />
       <SearchMetadata tag="doc_tags_list" />
-      <Layout>
-        <div className="container margin-vert--lg">
-          <div className="row">
-            <main className="col col--8 col--offset-2">
-              <h1>{title}</h1>
-              <TagsListByLetter tags={tags} />
-            </main>
-          </div>
+    </>
+  );
+}
+
+function DocTagsListPageContent({
+  tags,
+  title,
+}: Props & {title: string}): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(ThemeClassNames.page.docsTagsListPage)}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            <Heading as="h1">{title}</Heading>
+            <TagsListByLetter tags={tags} />
+          </main>
         </div>
-      </Layout>
+      </div>
     </HtmlClassNameProvider>
   );
 }
+
+export default function DocTagsListPage(props: Props): JSX.Element {
+  const title = translateTagsPageTitle();
+  return (
+    <>
+      <DocTagsListPageMetadata {...props} title={title} />
+      <DocTagsListPageContent {...props} title={title} />
+    </>
+  );
+}

package/src/theme/DocVersionRoot/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 {HtmlClassNameProvider, PageMetadata} from '@docusaurus/theme-common';
+import {
+  docVersionSearchTag,
+  DocsVersionProvider,
+} from '@docusaurus/theme-common/internal';
+import renderRoutes from '@docusaurus/renderRoutes';
+import SearchMetadata from '@theme/SearchMetadata';
+
+import type {Props} from '@theme/DocVersionRoot';
+
+function DocVersionRootMetadata(props: Props): JSX.Element {
+  const {version} = props;
+  return (
+    <>
+      <SearchMetadata
+        version={version.version}
+        tag={docVersionSearchTag(version.pluginId, version.version)}
+      />
+      <PageMetadata>
+        {version.noIndex && <meta name="robots" content="noindex, nofollow" />}
+      </PageMetadata>
+    </>
+  );
+}
+
+function DocVersionRootContent(props: Props): JSX.Element {
+  const {version, route} = props;
+  return (
+    <HtmlClassNameProvider className={version.className}>
+      <DocsVersionProvider version={version}>
+        {renderRoutes(route.routes!)}
+      </DocsVersionProvider>
+    </HtmlClassNameProvider>
+  );
+}
+export default function DocVersionRoot(props: Props): JSX.Element {
+  return (
+    <>
+      <DocVersionRootMetadata {...props} />
+      <DocVersionRootContent {...props} />
+    </>
+  );
+}