@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/lib/theme/BlogPostPage/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Seo = _interopRequireDefault(require("@theme/Seo"));
+
 var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
 
 var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
@@ -15,6 +17,8 @@ var _BlogPostPaginator = _interopRequireDefault(require("@theme/BlogPostPaginato
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _TOC = _interopRequireDefault(require("@theme/TOC"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -24,27 +28,52 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  */
 function BlogPostPage(props) {
+  var _assets$image;
+
   const {
     content: BlogPostContents,
     sidebar
   } = props;
   const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
     frontMatter,
+    assets,
     metadata
   } = BlogPostContents;
   const {
     title,
     description,
     nextItem,
-    prevItem
+    prevItem,
+    date,
+    tags,
+    authors
   } = metadata;
   const {
-    hide_table_of_contents: hideTableOfContents
+    hide_table_of_contents: hideTableOfContents,
+    keywords,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel
   } = frontMatter;
-  return <_BlogLayout.default title={title} description={description} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage} sidebar={sidebar} toc={!hideTableOfContents && BlogPostContents.toc ? BlogPostContents.toc : undefined}>
-      <_BlogPostItem.default frontMatter={frontMatter} metadata={metadata} isBlogPostPage>
+  const image = (_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image;
+  return <_BlogLayout.default wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage} sidebar={sidebar} toc={!hideTableOfContents && BlogPostContents.toc && BlogPostContents.toc.length > 0 ? <_TOC.default toc={BlogPostContents.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} /> : undefined}>
+      <_Seo.default // TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
+    // otherwise  default image (set by BlogLayout) would shadow the custom blog post image
+    title={title} description={description} keywords={keywords} image={image}>
+        <meta property="og:type" content="article" />
+        <meta property="article:published_time" content={date} />
+
+        {
+        /* TODO double check those article metas array syntaxes, see https://ogp.me/#array */
+      }
+        {authors.some(author => author.url) && <meta property="article:author" content={authors.map(author => author.url).filter(Boolean).join(',')} />}
+        {tags.length > 0 && <meta property="article:tag" content={tags.map(tag => tag.label).join(',')} />}
+      </_Seo.default>
+
+      <_BlogPostItem.default frontMatter={frontMatter} assets={assets} metadata={metadata} isBlogPostPage>
         <BlogPostContents />
       </_BlogPostItem.default>
+
       {(nextItem || prevItem) && <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />}
     </_BlogLayout.default>;
 }

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

@@ -34,10 +34,10 @@
   text-decoration: none;
 }
 .sidebarItemLinkActive {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary) !important;
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .sidebar {
     display: none;
   }

package/lib/theme/BlogTagsListPage/index.js

@@ -7,11 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
 var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
 
-var _Translate = require("@docusaurus/Translate");
+var _TagsListByLetter = _interopRequireDefault(require("@theme/TagsListByLetter"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
@@ -23,41 +21,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function getCategoryOfTag(tag) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
-
 function BlogTagsListPage(props) {
   const {
     tags,
     sidebar
   } = props;
-  const title = (0, _Translate.translate)({
-    id: 'theme.tags.tagsPageTitle',
-    message: 'Tags',
-    description: 'The title of the tag list page'
-  });
-  const tagCategories = {};
-  Object.keys(tags).forEach(tag => {
-    const category = getCategoryOfTag(tag);
-    tagCategories[category] = tagCategories[category] || [];
-    tagCategories[category].push(tag);
-  });
-  const tagsList = Object.entries(tagCategories).sort(([a], [b]) => a.localeCompare(b));
-  const tagsSection = tagsList.map(([category, tagsForCategory]) => <article key={category}>
-        <h2>{category}</h2>
-        {tagsForCategory.map(tag => <_Link.default className="padding-right--md" href={tags[tag].permalink} key={tag}>
-            {tags[tag].name} ({tags[tag].count})
-          </_Link.default>)}
-        <hr />
-      </article>).filter(item => item != null);
+  const title = (0, _themeCommon.translateTagsPageTitle)();
   return <_BlogLayout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsListPage} searchMetadatas={{
     // assign unique search tag to exclude this page from search results!
     tag: 'blog_tags_list'
   }} sidebar={sidebar}>
       <h1>{title}</h1>
-      <section className="margin-vert--lg">{tagsSection}</section>
+      <_TagsListByLetter.default tags={Object.values(tags)} />
     </_BlogLayout.default>;
 }
 

package/lib/theme/BlogTagsPostsPage/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = BlogTagsPostsPage;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -43,7 +43,7 @@ function useBlogPostsPlural() {
   }));
 }
 
-function BlogTagsPostPage(props) {
+function BlogTagsPostsPage(props) {
   const {
     metadata,
     items,
@@ -63,7 +63,7 @@ function BlogTagsPostPage(props) {
     nPosts: blogPostsPlural(count),
     tagName
   });
-  return <_BlogLayout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsPostPage} searchMetadatas={{
+  return <_BlogLayout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagPostListPage} searchMetadatas={{
     // assign unique search tag to exclude this page from search results!
     tag: 'blog_tags_posts'
   }} sidebar={sidebar}>
@@ -79,11 +79,8 @@ function BlogTagsPostPage(props) {
 
       {items.map(({
       content: BlogPostContent
-    }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} metadata={BlogPostContent.metadata} truncated>
+    }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} assets={BlogPostContent.assets} metadata={BlogPostContent.metadata} truncated>
           <BlogPostContent />
         </_BlogPostItem.default>)}
     </_BlogLayout.default>;
-}
-
-var _default = BlogTagsPostPage;
-exports.default = _default;
+}

package/lib/theme/CodeBlock/index.js

@@ -35,36 +35,43 @@ 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.
  */
-const highlightLinesRangeRegex = /{([\d,-]+)}/;
-
-const getHighlightDirectiveRegex = (languages = ['js', 'jsBlock', 'jsx', 'python', 'html']) => {
-  // supported types of comments
-  const comments = {
-    js: {
-      start: '\\/\\/',
-      end: ''
-    },
-    jsBlock: {
-      start: '\\/\\*',
-      end: '\\*\\/'
-    },
-    jsx: {
-      start: '\\{\\s*\\/\\*',
-      end: '\\*\\/\\s*\\}'
-    },
-    python: {
-      start: '#',
-      end: ''
-    },
-    html: {
-      start: '<!--',
-      end: '-->'
-    }
-  }; // supported directives
+const HighlightLinesRangeRegex = /{([\d,-]+)}/;
+const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'];
+// Supported types of highlight comments
+const HighlightComments = {
+  js: {
+    start: '\\/\\/',
+    end: ''
+  },
+  jsBlock: {
+    start: '\\/\\*',
+    end: '\\*\\/'
+  },
+  jsx: {
+    start: '\\{\\s*\\/\\*',
+    end: '\\*\\/\\s*\\}'
+  },
+  python: {
+    start: '#',
+    end: ''
+  },
+  html: {
+    start: '<!--',
+    end: '-->'
+  }
+}; // Supported highlight directives
 
-  const directives = ['highlight-next-line', 'highlight-start', 'highlight-end'].join('|'); // to be more reliable, the opening and closing comment must match
+const HighlightDirectives = ['highlight-next-line', 'highlight-start', 'highlight-end'];
 
-  const commentPattern = languages.map(lang => `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`).join('|'); // white space is allowed, but otherwise it should be on it's own line
+const getHighlightDirectiveRegex = (languages = HighlightLanguages) => {
+  // to be more reliable, the opening and closing comment must match
+  const commentPattern = languages.map(lang => {
+    const {
+      start,
+      end
+    } = HighlightComments[lang];
+    return `(?:${start}\\s*(${HighlightDirectives.join('|')})\\s*${end})`;
+  }).join('|'); // white space is allowed, but otherwise it should be on it's own line
 
   return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
 }; // select comment styles based on language
@@ -97,7 +104,7 @@ const highlightDirectiveRegex = lang => {
 
 function CodeBlock({
   children,
-  className: languageClassName,
+  className: blockClassName,
   metastring,
   title
 }) {
@@ -126,15 +133,14 @@ function CodeBlock({
 
   const content = Array.isArray(children) ? children.join('') : children;
 
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+  if (metastring && HighlightLinesRangeRegex.test(metastring)) {
     // Tested above
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+    const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)[1];
     highlightLines = (0, _parseNumericRange.default)(highlightLinesRange).filter(n => n > 0);
   }
 
-  let language = languageClassName && // Force Prism's language union type to `any` because it does not contain all available languages
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  languageClassName.replace(/language-/, '');
+  const languageClassName = blockClassName === null || blockClassName === void 0 ? void 0 : blockClassName.split(' ').find(str => str.startsWith('language-'));
+  let language = languageClassName === null || languageClassName === void 0 ? void 0 : languageClassName.replace(/language-/, '');
 
   if (!language && prism.defaultLanguage) {
     language = prism.defaultLanguage;
@@ -200,7 +206,7 @@ function CodeBlock({
       tokens,
       getLineProps,
       getTokenProps
-    }) => <div className={_stylesModule.default.codeBlockContainer}>
+    }) => <div className={(0, _clsx.default)(_stylesModule.default.codeBlockContainer, blockClassName === null || blockClassName === void 0 ? void 0 : blockClassName.replace(/language-[^ ]+/, ''))}>
           {codeBlockTitle && <div style={style} className={_stylesModule.default.codeBlockTitle}>
               {codeBlockTitle}
             </div>}
@@ -210,8 +216,8 @@ function CodeBlock({
         tabIndex={0} className={(0, _clsx.default)(className, _stylesModule.default.codeBlock, 'thin-scrollbar')} style={style}>
               <code className={_stylesModule.default.codeBlockLines}>
                 {tokens.map((line, i) => {
-              if (line.length === 1 && line[0].content === '') {
-                line[0].content = '\n'; // eslint-disable-line no-param-reassign
+              if (line.length === 1 && line[0].content === '\n') {
+                line[0].content = '';
               }
 
               const lineProps = getLineProps({
@@ -228,6 +234,7 @@ function CodeBlock({
                   token,
                   key
                 })} />)}
+                      <br />
                     </span>;
             })}
               </code>

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

@@ -52,11 +52,10 @@
 
 .codeBlockLines {
   font: inherit;
+  /*rtl:ignore*/
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
-  display: flex;
-  flex-direction: column;
 }
 
 @media print {

package/lib/theme/DocItem/index.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DocItem;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _useDocs = require("@theme/hooks/useDocs");
-
 var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
 
 var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
@@ -19,18 +17,18 @@ var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"
 
 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 _TOCCollapsible = _interopRequireDefault(require("@theme/TOCCollapsible"));
 
-var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
-
 var _Heading = require("@theme/Heading");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -52,26 +50,14 @@ 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); // 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
 
@@ -94,13 +80,13 @@ function DocItem(props) {
           <_DocVersionBanner.default versionMetadata={versionMetadata} />
           <div className={_stylesModule.default.docItemContainer}>
             <article>
-              {showVersionBadge && <span className="badge badge--secondary">
+              {versionMetadata.badge && <span className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docVersionBadge, 'badge badge--secondary')}>
                   Version: {versionMetadata.label}
                 </span>}
 
-              {canRenderTOC && <_TOCCollapsible.default toc={DocContent.toc} className={_stylesModule.default.tocMobile} />}
+              {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
@@ -113,26 +99,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} />
           </div>
         </div>
         {renderTocDesktop && <div className="col col--3">
-            <_TOC.default toc={DocContent.toc} />
+            <_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,26 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.docItemContainer article *:first-child,
+.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 <></>;
+  }
+
+  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"));
@@ -35,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); }
@@ -52,9 +52,6 @@ function DocPageContent({
   versionMetadata,
   children
 }) {
-  const {
-    isClient
-  } = (0, _useDocusaurusContext.default)();
   const {
     pluginId,
     version
@@ -68,9 +65,9 @@ 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} searchMetadatas={{
     version,
     tag: (0, _themeCommon.docVersionSearchTag)(pluginId, version)
   }}>
@@ -128,14 +125,22 @@ function DocPage(props) {
   const currentDocRoute = docRoutes.find(docRoute => (0, _router.matchPath)(location.pathname, docRoute));
 
   if (!currentDocRoute) {
-    return <_NotFound.default {...props} />;
+    return <_NotFound.default />;
   }
 
-  return <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
-      {(0, _renderRoutes.default)(docRoutes, {
-      versionMetadata
-    })}
-    </DocPageContent>;
+  return <>
+      <_Head.default>
+        {
+        /* TODO we should add a core addRoute({htmlClassName}) generic plugin option */
+      }
+        <html className={versionMetadata.className} />
+      </_Head.default>
+      <DocPageContent currentDocRoute={currentDocRoute} versionMetadata={versionMetadata}>
+        {(0, _renderRoutes.default)(docRoutes, {
+        versionMetadata
+      })}
+      </DocPageContent>
+    </>;
 }
 
 var _default = DocPage;