@docusaurus/theme-classic 2.0.0-beta.1 → 2.0.0-beta.10

package/lib/theme/DocCard/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocCard;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function CardContainer({
+  href,
+  children
+}) {
+  const className = (0, _clsx.default)('card margin-bottom--lg padding--lg', _stylesModule.default.cardContainer, href && _stylesModule.default.cardContainerLink);
+  return href ? <_Link.default href={href} className={className}>
+      {children}
+    </_Link.default> : <div className={className}>{children}</div>;
+}
+
+function CardLayout({
+  href,
+  icon,
+  title,
+  description
+}) {
+  return <CardContainer href={href}>
+      <h2 className={(0, _clsx.default)('text--truncate', _stylesModule.default.cardTitle)} title={title}>
+        {icon} {title}
+      </h2>
+      <div className={(0, _clsx.default)('text--truncate', _stylesModule.default.cardDescription)} title={description}>
+        {description}
+      </div>
+    </CardContainer>;
+}
+
+function CardCategory({
+  item
+}) {
+  const href = (0, _themeCommon.findFirstCategoryLink)(item);
+  return <CardLayout href={href} icon="🗃️" title={item.label} description={`${item.items.length} items`} />;
+}
+
+function CardLink({
+  item
+}) {
+  var _item$docId;
+
+  const icon = (0, _isInternalUrl.default)(item.href) ? '📄️' : '🔗';
+  const doc = (0, _themeCommon.useDocById)((_item$docId = item.docId) !== null && _item$docId !== void 0 ? _item$docId : undefined);
+  return <CardLayout href={item.href} icon={icon} title={item.label} description={doc === null || doc === void 0 ? void 0 : doc.description} />;
+}
+
+function DocCard({
+  item
+}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+
+    case 'category':
+      return <CardCategory item={item} />;
+
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+.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-decoration: none;
+
+  /* box-shadow: var(--ifm-global-shadow-lw); */
+  box-shadow: 0 1.5px 3px 0 rgba(0, 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;
+}
+
+.cardContainer.cardContainerLink:hover {
+  /* box-shadow: var(--ifm-global-shadow-md); */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+html[data-theme='dark'] .cardContainer.cardContainerLink:hover {
+  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
+}
+
+.cardContainer:not(.cardContainerLink) {
+  cursor: not-allowed;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+  min-height: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+  min-height: 0.8rem;
+}

package/lib/theme/DocCardList/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocCardList;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DocCard = _interopRequireDefault(require("@theme/DocCard"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function DocCardList({
+  items
+}) {
+  return <div className="row">
+      {items.map((item, index) => <article key={index} className="col col--6">
+          <_DocCard.default item={item} />
+        </article>)}
+    </div>;
+}

package/lib/theme/DocCategoryGeneratedIndexPage/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocCategoryGeneratedIndexPage;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _DocCardList = _interopRequireDefault(require("@theme/DocCardList"));
+
+var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
+
+var _Seo = _interopRequireDefault(require("@theme/Seo"));
+
+var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"));
+
+var _DocVersionBadge = _interopRequireDefault(require("@theme/DocVersionBadge"));
+
+var _Heading = require("@theme/Heading");
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function DocCategoryGeneratedIndexPage({
+  categoryGeneratedIndex
+}) {
+  const category = (0, _themeCommon.useCurrentSidebarCategory)();
+  return <>
+      <_Seo.default title={categoryGeneratedIndex.title} description={categoryGeneratedIndex.description} />
+      <div className={_stylesModule.default.generatedIndexPage}>
+        <_DocVersionBanner.default />
+        <_DocVersionBadge.default />
+        <header>
+          <_Heading.MainHeading className={_stylesModule.default.title}>
+            {categoryGeneratedIndex.title}
+          </_Heading.MainHeading>
+          {categoryGeneratedIndex.description && <p>{categoryGeneratedIndex.description}</p>}
+        </header>
+        <main className="margin-top--lg">
+          <_DocCardList.default items={category.items} />
+        </main>
+        <footer className="margin-top--lg">
+          <_DocPaginator.default previous={categoryGeneratedIndex.navigation.previous} next={categoryGeneratedIndex.navigation.next} />
+        </footer>
+      </div>
+    </>;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * 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) {
+  .generatedIndexPage {
+    max-width: 75% !important;
+  }
+}
+
+/* Duplicated from .markdown h1 */
+.title {
+  --ifm-h1-font-size: 3rem;
+  margin-bottom: calc(1.25 * var(--ifm-leading));
+}

package/lib/theme/DocItem/index.js

@@ -3,29 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DocItem;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
+
 var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
 
-var _DocVersionSuggestions = _interopRequireDefault(require("@theme/DocVersionSuggestions"));
+var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"));
+
+var _DocVersionBadge = _interopRequireDefault(require("@theme/DocVersionBadge"));
 
 var _Seo = _interopRequireDefault(require("@theme/Seo"));
 
-var _LastUpdated = _interopRequireDefault(require("@theme/LastUpdated"));
+var _DocItemFooter = _interopRequireDefault(require("@theme/DocItemFooter"));
 
 var _TOC = _interopRequireDefault(require("@theme/TOC"));
 
-var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
+var _TOCCollapsible = _interopRequireDefault(require("@theme/TOCCollapsible"));
 
 var _Heading = require("@theme/Heading");
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
-var _useDocs = require("@theme/hooks/useDocs");
+var _themeCommon = require("@docusaurus/theme-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,31 +51,21 @@ function DocItem(props) {
     image,
     keywords,
     hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents
+    hide_table_of_contents: hideTableOfContents,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel
   } = frontMatter;
   const {
     description,
-    title,
-    editUrl,
-    lastUpdatedAt,
-    formattedLastUpdatedAt,
-    lastUpdatedBy
-  } = metadata;
-  const {
-    pluginId
-  } = (0, _useDocs.useActivePlugin)({
-    failfast: true
-  });
-  const versions = (0, _useDocs.useVersions)(pluginId);
-  const version = (0, _useDocs.useActiveVersion)(pluginId); // If site is not versioned or only one version is included
-  // we don't show the version badge
-  // See https://github.com/facebook/docusaurus/issues/3362
-
-  const showVersionBadge = versions.length > 1; // We only add a title if:
+    title
+  } = metadata; // We only add a title if:
   // - user asks to hide it with frontmatter
   // - the markdown content does not already contain a top-level h1 heading
 
   const shouldAddTitle = !hideTitle && typeof DocContent.contentTitle === 'undefined';
+  const windowSize = (0, _useWindowSize.default)();
+  const canRenderTOC = !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
+  const renderTocDesktop = canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
   return <>
       <_Seo.default {...{
       title,
@@ -84,14 +78,14 @@ function DocItem(props) {
         <div className={(0, _clsx.default)('col', {
         [_stylesModule.default.docItemCol]: !hideTableOfContents
       })}>
-          <_DocVersionSuggestions.default />
+          <_DocVersionBanner.default />
           <div className={_stylesModule.default.docItemContainer}>
             <article>
-              {showVersionBadge && <span className="badge badge--secondary">
-                  Version: {version.label}
-                </span>}
+              <_DocVersionBadge.default />
+
+              {canRenderTOC && <_TOCCollapsible.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docTocMobile, _stylesModule.default.tocMobile)} />}
 
-              <div className="markdown">
+              <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docMarkdown, 'markdown')}>
                 {
                 /*
                 Title can be declared inside md content or declared through frontmatter and added manually
@@ -104,26 +98,15 @@ function DocItem(props) {
                 <DocContent />
               </div>
 
-              {(editUrl || lastUpdatedAt || lastUpdatedBy) && <footer className="row docusaurus-mt-lg">
-                  <div className="col">
-                    {editUrl && <_EditThisPage.default editUrl={editUrl} />}
-                  </div>
-
-                  <div className={(0, _clsx.default)('col', _stylesModule.default.lastUpdated)}>
-                    {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
-                  </div>
-                </footer>}
+              <_DocItemFooter.default {...props} />
             </article>
 
-            <_DocPaginator.default metadata={metadata} />
+            <_DocPaginator.default previous={metadata.previous} next={metadata.next} />
           </div>
         </div>
-        {!hideTableOfContents && DocContent.toc && <div className="col col--3">
-            <_TOC.default toc={DocContent.toc} />
+        {renderTocDesktop && <div className="col col--3">
+            <_TOC.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={_themeCommon.ThemeClassNames.docs.docTocDesktop} />
           </div>}
       </div>
     </>;
-}
-
-var _default = DocItem;
-exports.default = _default;
+}

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

@@ -5,22 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.docItemContainer article > *:first-child,
 .docItemContainer header + * {
   margin-top: 0;
 }
 
-.lastUpdated {
-  margin-top: 0.2rem;
-  font-style: italic;
-  font-size: smaller;
-}
-
-@media only screen and (min-width: 997px) {
+@media (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
   }
 
-  .lastUpdated {
-    text-align: right;
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
   }
 }

package/lib/theme/DocItemFooter/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemFooter;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _LastUpdated = _interopRequireDefault(require("@theme/LastUpdated"));
+
+var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
+
+var _TagsListInline = _interopRequireDefault(require("@theme/TagsListInline"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 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.
+ */
+function TagsRow(props) {
+  return <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooterTagsRow, 'row margin-bottom--sm')}>
+      <div className="col">
+        <_TagsListInline.default {...props} />
+      </div>
+    </div>;
+}
+
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt
+}) {
+  return <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+      <div className="col">{editUrl && <_EditThisPage.default editUrl={editUrl} />}</div>
+
+      <div className={(0, _clsx.default)('col', _stylesModule.default.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
+      </div>
+    </div>;
+}
+
+function DocItemFooter(props) {
+  const {
+    content: DocContent
+  } = props;
+  const {
+    metadata
+  } = DocContent;
+  const {
+    editUrl,
+    lastUpdatedAt,
+    formattedLastUpdatedAt,
+    lastUpdatedBy,
+    tags
+  } = metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+
+  if (!canDisplayFooter) {
+    return null;
+  }
+
+  return <footer className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayEditMetaRow && <EditMetaRow editUrl={editUrl} lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} formattedLastUpdatedAt={formattedLastUpdatedAt} />}
+    </footer>;
+}

package/lib/theme/DocItemFooter/styles.module.css

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}

package/lib/theme/DocPage/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@mdx-js/react");
 
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
 var _renderRoutes = _interopRequireDefault(require("@docusaurus/renderRoutes"));
 
 var _Layout = _interopRequireDefault(require("@theme/Layout"));
@@ -23,6 +21,8 @@ var _NotFound = _interopRequireDefault(require("@theme/NotFound"));
 
 var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
 
+var _BackToTopButton = _interopRequireDefault(require("@theme/BackToTopButton"));
+
 var _router = require("@docusaurus/router");
 
 var _Translate = require("@docusaurus/Translate");
@@ -33,6 +33,8 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _Head = _interopRequireDefault(require("@docusaurus/Head"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -45,55 +47,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function getSidebar({
-  versionMetadata,
-  currentDocRoute
-}) {
-  function addTrailingSlash(str) {
-    return str.endsWith('/') ? str : `${str}/`;
-  }
-
-  function removeTrailingSlash(str) {
-    return str.endsWith('/') ? str.slice(0, -1) : str;
-  }
-
-  const {
-    permalinkToSidebar,
-    docsSidebars
-  } = versionMetadata; // With/without trailingSlash, we should always be able to get the appropriate sidebar
-  // note: docs plugin permalinks currently never have trailing slashes
-  // trailingSlash is handled globally at the framework level, not plugin level
-
-  const sidebarName = permalinkToSidebar[currentDocRoute.path] || permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] || permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)];
-  const sidebar = docsSidebars[sidebarName];
-  return {
-    sidebar,
-    sidebarName
-  };
-}
-
 function DocPageContent({
   currentDocRoute,
   versionMetadata,
-  children
+  children,
+  sidebarName
 }) {
-  var _siteConfig$themeConf, _siteConfig$themeConf2;
-
-  const {
-    siteConfig,
-    isClient
-  } = (0, _useDocusaurusContext.default)();
+  const sidebar = (0, _themeCommon.useDocsSidebar)();
   const {
     pluginId,
     version
   } = versionMetadata;
-  const {
-    sidebarName,
-    sidebar
-  } = getSidebar({
-    versionMetadata,
-    currentDocRoute
-  });
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = (0, _react.useState)(false);
   const [hiddenSidebar, setHiddenSidebar] = (0, _react.useState)(false);
   const toggleSidebar = (0, _react.useCallback)(() => {
@@ -101,13 +65,15 @@ function DocPageContent({
       setHiddenSidebar(false);
     }
 
-    setHiddenSidebarContainer(!hiddenSidebarContainer);
+    setHiddenSidebarContainer(value => !value);
   }, [hiddenSidebar]);
-  return <_Layout.default key={isClient} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docPages} pageClassName={_themeCommon.ThemeClassNames.page.docPage} searchMetadatas={{
+  return <_Layout.default wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsDocPage} searchMetadata={{
     version,
     tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
   }}>
       <div className={_stylesModule.default.docPage}>
+        <_BackToTopButton.default />
+
         {sidebar && <aside className={(0, _clsx.default)(_stylesModule.default.docSidebarContainer, {
         [_stylesModule.default.docSidebarContainerHidden]: hiddenSidebarContainer
       })} onTransitionEnd={e => {
@@ -121,7 +87,7 @@ function DocPageContent({
       }}>
             <_DocSidebar.default key={// Reset sidebar state on sidebar changes
         // See https://github.com/facebook/docusaurus/issues/3414
-        sidebarName} sidebar={sidebar} path={currentDocRoute.path} sidebarCollapsible={(_siteConfig$themeConf = (_siteConfig$themeConf2 = siteConfig.themeConfig) === null || _siteConfig$themeConf2 === void 0 ? void 0 : _siteConfig$themeConf2.sidebarCollapsible) !== null && _siteConfig$themeConf !== void 0 ? _siteConfig$themeConf : true} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
+        sidebarName} sidebar={sidebar} path={currentDocRoute.path} onCollapse={toggleSidebar} isHidden={hiddenSidebar} />
 
             {hiddenSidebar && <div className={_stylesModule.default.collapsedDocSidebar} title={(0, _Translate.translate)({
           id: 'theme.docs.sidebar.expandButtonTitle',
@@ -159,12 +125,29 @@ function DocPage(props) {
   const currentDocRoute = docRoutes.find(docRoute => (0, _router.matchPath)(location.pathname, docRoute));
 
   if (!currentDocRoute) {
-    return <_NotFound.default {...props} />;
-  }
-
-  return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes)}
-    </DocPageContent>;
+    return <_NotFound.default />;
+  } // For now, the sidebarName is added as route config: not ideal!
+
+
+  const sidebarName = currentDocRoute.sidebar;
+  const sidebar = sidebarName ? versionMetadata.docsSidebars[sidebarName] : null;
+  return <>
+      <_Head.default>
+        {
+        /* TODO we should add a core addRoute({htmlClassName}) generic plugin option */
+      }
+        <html className={versionMetadata.className} />
+      </_Head.default>
+      <_themeCommon.DocsVersionProvider version={versionMetadata}>
+        <_themeCommon.DocsSidebarProvider sidebar={sidebar}>
+          <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata} sidebarName={sidebarName}>
+            {(0, _renderRoutes.default)(docRoutes, {
+            versionMetadata
+          })}
+          </DocPageContent>
+        </_themeCommon.DocsSidebarProvider>
+      </_themeCommon.DocsVersionProvider>
+    </>;
 }
 
 var _default = DocPage;