@docusaurus/theme-classic 2.0.0-beta.1ab8aa0af → 2.0.0-beta.2

package/lib/theme/BlogPostItem/index.js

@@ -15,17 +15,19 @@ var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 var _MDXComponents = _interopRequireDefault(require("@theme/MDXComponents"));
 
 var _Seo = _interopRequireDefault(require("@theme/Seo"));
 
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
 
-var _themeCommon = require("@docusaurus/theme-common");
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -66,11 +68,12 @@ function BlogPostItem(props) {
     formattedDate,
     permalink,
     tags,
-    readingTime
+    readingTime,
+    title,
+    editUrl
   } = metadata;
   const {
     author,
-    title,
     image,
     keywords
   } = frontMatter;
@@ -81,17 +84,16 @@ function BlogPostItem(props) {
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
     return <header>
-        <TitleHeading className={(0, _clsx.default)('margin-bottom--sm', _stylesModule.default.blogPostTitle)}>
+        <TitleHeading className={_stylesModule.default.blogPostTitle}>
           {isBlogPostPage ? title : <_Link.default to={permalink}>{title}</_Link.default>}
         </TitleHeading>
-        <div className="margin-vert--md">
-          <time dateTime={date} className={_stylesModule.default.blogPostDate}>
-            {formattedDate}
-            {readingTime && <>
-                {' · '}
-                {readingTimePlural(readingTime)}
-              </>}
-          </time>
+        <div className={(0, _clsx.default)(_stylesModule.default.blogPostData, 'margin-vert--md')}>
+          <time dateTime={date}>{formattedDate}</time>
+
+          {readingTime && <>
+              {' · '}
+              {readingTimePlural(readingTime)}
+            </>}
         </div>
         <div className="avatar margin-vert--md">
           {authorImageURL && <_Link.default className="avatar__photo-link avatar__photo" href={authorURL}>
@@ -99,9 +101,9 @@ function BlogPostItem(props) {
             </_Link.default>}
           <div className="avatar__intro">
             {author && <>
-                <h4 className="avatar__name">
+                <div className="avatar__name">
                   <_Link.default href={authorURL}>{author}</_Link.default>
-                </h4>
+                </div>
                 <small className="avatar__subtitle">{authorTitle}</small>
               </>}
           </div>
@@ -120,13 +122,15 @@ function BlogPostItem(props) {
         <div className="markdown">
           <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
         </div>
-        {(tags.length > 0 || truncated) && <footer className="row margin-vert--lg">
+        {(tags.length > 0 || truncated) && <footer className={(0, _clsx.default)('row docusaurus-mt-lg', {
+        [_stylesModule.default.blogPostDetailsFull]: isBlogPostPage
+      })}>
             {tags.length > 0 && <div className="col">
-                <strong>
+                <b>
                   <_Translate.default id="theme.tags.tagsListLabel" description="The label alongside a tag list">
                     Tags:
                   </_Translate.default>
-                </strong>
+                </b>
                 {tags.map(({
             label,
             permalink: tagPermalink
@@ -134,13 +138,18 @@ function BlogPostItem(props) {
                     {label}
                   </_Link.default>)}
               </div>}
-            {truncated && <div className="col text--right">
+
+            {isBlogPostPage && editUrl && <div className="col margin-top--sm">
+                <_EditThisPage.default editUrl={editUrl} />
+              </div>}
+
+            {!isBlogPostPage && truncated && <div className="col text--right">
                 <_Link.default to={metadata.permalink} aria-label={`Read more about ${title}`}>
-                  <strong>
+                  <b>
                     <_Translate.default id="theme.blog.post.readMore" description="The label used in blog post item excerpts to link to full blog posts">
                       Read More
                     </_Translate.default>
-                  </strong>
+                  </b>
                 </_Link.default>
               </div>}
           </footer>}

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

@@ -9,6 +9,10 @@
   font-size: 3rem;
 }
 
-.blogPostDate {
+.blogPostData {
   font-size: 0.9rem;
 }
+
+.blogPostDetailsFull {
+  flex-direction: column;
+}

package/lib/theme/BlogPostPage/index.js

@@ -17,8 +17,6 @@ var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
 
 var _TOC = _interopRequireDefault(require("@theme/TOC"));
 
-var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
-
 var _themeCommon = require("@docusaurus/theme-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,8 +40,7 @@ function BlogPostPage(props) {
     title,
     description,
     nextItem,
-    prevItem,
-    editUrl
+    prevItem
   } = metadata;
   const {
     hide_table_of_contents: hideTableOfContents
@@ -51,17 +48,14 @@ function BlogPostPage(props) {
   return <_Layout.default title={title} description={description} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage}>
       {BlogPostContents && <div className="container margin-vert--lg">
           <div className="row">
-            <div className="col col--3">
+            <aside className="col col--3">
               <_BlogSidebar.default sidebar={sidebar} />
-            </div>
+            </aside>
             <main className="col col--7">
               <_BlogPostItem.default frontMatter={frontMatter} metadata={metadata} isBlogPostPage>
                 <BlogPostContents />
               </_BlogPostItem.default>
-              <div>{editUrl && <_EditThisPage.default editUrl={editUrl} />}</div>
-              {(nextItem || prevItem) && <div className="margin-vert--xl">
-                  <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />
-                </div>}
+              {(nextItem || prevItem) && <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />}
             </main>
             {!hideTableOfContents && BlogPostContents.toc && <div className="col col--2">
                 <_TOC.default toc={BlogPostContents.toc} />

package/lib/theme/BlogPostPaginator/index.js

@@ -11,9 +11,9 @@ var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,7 +28,7 @@ function BlogPostPaginator(props) {
     nextItem,
     prevItem
   } = props;
-  return <nav className="pagination-nav" aria-label={(0, _Translate.translate)({
+  return <nav className="pagination-nav docusaurus-mt-lg" aria-label={(0, _Translate.translate)({
     id: 'theme.blog.post.paginator.navAriaLabel',
     message: 'Blog post page navigation',
     description: 'The ARIA label for the blog posts pagination'

package/lib/theme/BlogSidebar/index.js

@@ -13,6 +13,8 @@ var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _Translate = require("@docusaurus/Translate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -28,8 +30,14 @@ function BlogSidebar({
     return null;
   }
 
-  return <div className={(0, _clsx.default)(_stylesModule.default.sidebar, 'thin-scrollbar')}>
-      <h3 className={_stylesModule.default.sidebarItemTitle}>{sidebar.title}</h3>
+  return <nav className={(0, _clsx.default)(_stylesModule.default.sidebar, 'thin-scrollbar')} aria-label={(0, _Translate.translate)({
+    id: 'theme.blog.sidebar.navAriaLabel',
+    message: 'Blog recent posts navigation',
+    description: 'The ARIA label for recent posts in the blog sidebar'
+  })}>
+      <div className={(0, _clsx.default)(_stylesModule.default.sidebarItemTitle, 'margin-bottom--md')}>
+        {sidebar.title}
+      </div>
       <ul className={_stylesModule.default.sidebarItemList}>
         {sidebar.items.map(item => {
         return <li key={item.permalink} className={_stylesModule.default.sidebarItem}>
@@ -39,5 +47,5 @@ function BlogSidebar({
             </li>;
       })}
       </ul>
-    </div>;
+    </nav>;
 }

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

@@ -6,7 +6,6 @@
  */
 
 .sidebar {
-  display: inherit;
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
   overflow-y: auto;
   position: sticky;
@@ -14,25 +13,24 @@
 }
 
 .sidebarItemTitle {
-  margin-bottom: 0.5rem;
+  font-size: var(--ifm-h3-font-size);
+  font-weight: var(--ifm-font-weight-bold);
 }
 
 .sidebarItemList {
-  overflow-y: auto;
+  list-style: none;
   font-size: 0.9rem;
   padding-left: 0;
 }
 
 .sidebarItem {
-  list-style-type: none;
-  margin: 0.8rem 0;
+  margin-top: 0.7rem;
 }
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
 }
 .sidebarItemLink:hover {
-  color: var(--ifm-color-primary);
   text-decoration: none;
 }
 .sidebarItemLinkActive {

package/lib/theme/BlogTagsListPage/index.js

@@ -13,7 +13,7 @@ var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
 
-var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
+var _Translate = require("@docusaurus/Translate");
 
 var _themeCommon = require("@docusaurus/theme-common");
 
@@ -35,42 +35,37 @@ function BlogTagsListPage(props) {
     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]) => {
-    if (a === b) {
-      return 0;
-    }
-
-    return a > b ? 1 : -1;
-  });
-  const tagsSection = tagsList.map(([category, tagsForCategory]) => <div key={category}>
-        <h3>{category}</h3>
+  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 />
-      </div>).filter(item => item != null);
-  return <_Layout.default title="Tags" description="Blog Tags" wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsListPage} searchMetadatas={{
+      </article>).filter(item => item != null);
+  return <_Layout.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'
   }}>
       <div className="container margin-vert--lg">
         <div className="row">
-          <div className="col col--3">
+          <aside className="col col--3">
             <_BlogSidebar.default sidebar={sidebar} />
-          </div>
+          </aside>
           <main className="col col--7">
-            <h1>
-              <_Translate.default id="theme.tags.tagsPageTitle" description="The title of the tag list page">
-                Tags
-              </_Translate.default>
-            </h1>
-            <div className="margin-vert--lg">{tagsSection}</div>
+            <h1>{title}</h1>
+            <section className="margin-vert--lg">{tagsSection}</section>
           </main>
         </div>
       </div>

package/lib/theme/BlogTagsPostsPage/index.js

@@ -19,9 +19,9 @@ var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,19 +45,6 @@ function useBlogPostsPlural() {
   }));
 }
 
-function BlogTagsPostPageTitle({
-  tagName,
-  count
-}) {
-  const blogPostsPlural = useBlogPostsPlural();
-  return <_Translate.default id="theme.blog.tagTitle" description="The title of the page for a blog tag" values={{
-    nPosts: blogPostsPlural(count),
-    tagName
-  }}>
-      {'{nPosts} tagged with "{tagName}"'}
-    </_Translate.default>;
-}
-
 function BlogTagsPostPage(props) {
   const {
     metadata,
@@ -69,31 +56,40 @@ function BlogTagsPostPage(props) {
     name: tagName,
     count
   } = metadata;
-  return <_Layout.default title={`Posts tagged "${tagName}"`} description={`Blog | Tagged "${tagName}"`} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsPostPage} searchMetadatas={{
+  const blogPostsPlural = useBlogPostsPlural();
+  const title = (0, _Translate.translate)({
+    id: 'theme.blog.tagTitle',
+    description: 'The title of the page for a blog tag',
+    message: '{nPosts} tagged with "{tagName}"'
+  }, {
+    nPosts: blogPostsPlural(count),
+    tagName
+  });
+  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsPostPage} searchMetadatas={{
     // assign unique search tag to exclude this page from search results!
     tag: 'blog_tags_posts'
   }}>
       <div className="container margin-vert--lg">
         <div className="row">
-          <div className="col col--3">
+          <aside className="col col--3">
             <_BlogSidebar.default sidebar={sidebar} />
-          </div>
+          </aside>
           <main className="col col--7">
-            <h1>
-              <BlogTagsPostPageTitle count={count} tagName={tagName} />
-            </h1>
-            <_Link.default href={allTagsPath}>
-              <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
-                View All Tags
-              </_Translate.default>
-            </_Link.default>
-            <div className="margin-vert--xl">
-              {items.map(({
-              content: BlogPostContent
-            }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} metadata={BlogPostContent.metadata} truncated>
-                  <BlogPostContent />
-                </_BlogPostItem.default>)}
-            </div>
+            <header className="margin-bottom--xl">
+              <h1>{title}</h1>
+
+              <_Link.default href={allTagsPath}>
+                <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
+                  View All Tags
+                </_Translate.default>
+              </_Link.default>
+            </header>
+
+            {items.map(({
+            content: BlogPostContent
+          }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} metadata={BlogPostContent.metadata} truncated>
+                <BlogPostContent />
+              </_BlogPostItem.default>)}
           </main>
         </div>
       </div>

package/lib/theme/CodeBlock/index.js

@@ -25,9 +25,9 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -206,12 +206,12 @@ function CodeBlock({
               {codeBlockTitle}
             </div>}
           <div className={(0, _clsx.default)(_stylesModule.default.codeBlockContent, language)}>
-            <div
+            <pre
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
         tabIndex={0} className={(0, _clsx.default)(className, _stylesModule.default.codeBlock, 'thin-scrollbar', {
           [_stylesModule.default.codeBlockWithTitle]: codeBlockTitle
-        })}>
-              <div className={_stylesModule.default.codeBlockLines} style={style}>
+        })} 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
@@ -223,24 +223,24 @@ function CodeBlock({
               });
 
               if (highlightLines.includes(i + 1)) {
-                lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+                lineProps.className += ' docusaurus-highlight-code-line';
               }
 
-              return <div key={i} {...lineProps}>
+              return <span key={i} {...lineProps}>
                       {line.map((token, key) => <span key={key} {...getTokenProps({
                   token,
                   key
                 })} />)}
-                    </div>;
+                    </span>;
             })}
-              </div>
-            </div>
+              </code>
+            </pre>
 
             <button ref={button} type="button" aria-label={(0, _Translate.translate)({
           id: 'theme.CodeBlock.copyButtonAriaLabel',
           message: 'Copy code to clipboard',
           description: 'The ARIA label for copy code blocks button'
-        })} className={(0, _clsx.default)(_stylesModule.default.copyButton)} onClick={handleCopyCode}>
+        })} className={(0, _clsx.default)(_stylesModule.default.copyButton, 'clean-btn')} onClick={handleCopyCode}>
               {showCopied ? <_Translate.default id="theme.CodeBlock.copied" description="The copied button label on code blocks">
                   Copied
                 </_Translate.default> : <_Translate.default id="theme.CodeBlock.copy" description="The copy button label on code blocks">

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

@@ -25,8 +25,7 @@
 }
 
 .codeBlock {
-  overflow: auto;
-  border-radius: var(--ifm-global-radius);
+  padding: 0;
 }
 
 .codeBlockWithTitle {
@@ -36,10 +35,8 @@
 
 .copyButton {
   background: rgba(0, 0, 0, 0.3);
-  border: none;
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
-  cursor: pointer;
   opacity: 0;
   user-select: none;
   padding: 0.4rem 0.5rem;
@@ -56,12 +53,12 @@
 }
 
 .codeBlockLines {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace);
-  white-space: pre;
+  font: inherit;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
+  display: flex;
+  flex-direction: column;
 }
 
 @media print {

package/lib/theme/DocItem/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
 
-var _DocVersionSuggestions = _interopRequireDefault(require("@theme/DocVersionSuggestions"));
+var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"));
 
 var _Seo = _interopRequireDefault(require("@theme/Seo"));
 
@@ -19,6 +19,8 @@ var _TOC = _interopRequireDefault(require("@theme/TOC"));
 
 var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
 
+var _Heading = require("@theme/Heading");
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
@@ -35,7 +37,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function DocItem(props) {
   const {
-    content: DocContent
+    content: DocContent,
+    versionMetadata
   } = props;
   const {
     metadata,
@@ -60,18 +63,18 @@ function DocItem(props) {
   } = (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
+  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; // For meta title, using frontMatter.title in priority over a potential # title found in markdown
-  // See https://github.com/facebook/docusaurus/issues/4665#issuecomment-825831367
+  const showVersionBadge = versions.length > 1; // 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 metaTitle = frontMatter.title || title;
+  const shouldAddTitle = !hideTitle && typeof DocContent.contentTitle === 'undefined';
   return <>
       <_Seo.default {...{
-      title: metaTitle,
+      title,
       description,
       keywords,
       image
@@ -81,32 +84,38 @@ function DocItem(props) {
         <div className={(0, _clsx.default)('col', {
         [_stylesModule.default.docItemCol]: !hideTableOfContents
       })}>
-          <_DocVersionSuggestions.default />
+          <_DocVersionBanner.default versionMetadata={versionMetadata} />
           <div className={_stylesModule.default.docItemContainer}>
             <article>
-              {showVersionBadge && <div>
-                  <span className="badge badge--secondary">
-                    Version: {version.label}
-                  </span>
-                </div>}
-              {!hideTitle && <header>
-                  <h1 className={_stylesModule.default.docTitle}>{title}</h1>
-                </header>}
+              {showVersionBadge && <span className="badge badge--secondary">
+                  Version: {versionMetadata.label}
+                </span>}
+
               <div className="markdown">
+                {
+                /*
+                Title can be declared inside md content or declared through frontmatter 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 && <_Heading.MainHeading>{title}</_Heading.MainHeading>}
+
                 <DocContent />
               </div>
-            </article>
-            {(editUrl || lastUpdatedAt || lastUpdatedBy) && <div className="margin-vert--xl">
-                <div className="row">
+
+              {(editUrl || lastUpdatedAt || lastUpdatedBy) && <footer className="row docusaurus-mt-lg">
                   <div className="col">
                     {editUrl && <_EditThisPage.default editUrl={editUrl} />}
                   </div>
-                  {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
-                </div>
-              </div>}
-            <div className="margin-vert--lg">
-              <_DocPaginator.default metadata={metadata} />
-            </div>
+
+                  <div className={(0, _clsx.default)('col', _stylesModule.default.lastUpdated)}>
+                    {(lastUpdatedAt || lastUpdatedBy) && <_LastUpdated.default lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />}
+                  </div>
+                </footer>}
+            </article>
+
+            <_DocPaginator.default metadata={metadata} />
           </div>
         </div>
         {!hideTableOfContents && DocContent.toc && <div className="col col--3">