refactor(v2): minor cleanups (#4959)

* refactor(v2): minor cleanups

* Fixes

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css

@@ -13,8 +13,9 @@
   position: relative;
   width: 100%;
   height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
 @media print {

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx

@@ -60,20 +60,18 @@ function BlogPostItem(props: Props): JSX.Element {
 
     return (
       <header>
-        <TitleHeading
+        <TitleHeading className={styles.blogPostTitle}>
-          className={clsx('margin-bottom--sm', styles.blogPostTitle)}>
           {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
         </TitleHeading>
-        <div className="margin-vert--md">
+        <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
-          <time dateTime={date} className={styles.blogPostDate}>
+          <time dateTime={date}>{formattedDate}</time>
-            {formattedDate}
+
           {readingTime && (
             <>
               {' · '}
               {readingTimePlural(readingTime)}
             </>
           )}
-          </time>
         </div>
         <div className="avatar margin-vert--md">
           {authorImageURL && (

packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css

@@ -9,6 +9,6 @@
   font-size: 3rem;
 }
 
-.blogPostDate {
+.blogPostData {
   font-size: 0.9rem;
 }

packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx

@@ -24,7 +24,9 @@ export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
         message: 'Blog recent posts navigation',
         description: 'The ARIA label for recent posts in the blog sidebar',
       })}>
-      <h3 className={styles.sidebarItemTitle}>{sidebar.title}</h3>
+      <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+        {sidebar.title}
+      </div>
       <ul className={styles.sidebarItemList}>
         {sidebar.items.map((item) => {
           return (

packages/docusaurus-theme-classic/src/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-top: 0.7rem;
-  margin: 0.8rem 0;
 }
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
 }
 .sidebarItemLink:hover {
-  color: var(--ifm-color-primary);
   text-decoration: none;
 }
 .sidebarItemLinkActive {

packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx

@@ -11,7 +11,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogTagsListPage';
 import BlogSidebar from '@theme/BlogSidebar';
-import Translate from '@docusaurus/Translate';
+import {translate} from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function getCategoryOfTag(tag: string) {
@@ -21,6 +21,11 @@ function getCategoryOfTag(tag: string) {
 
 function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
+  const title = translate({
+    id: 'theme.tags.tagsPageTitle',
+    message: 'Tags',
+    description: 'The title of the tag list page',
+  });
 
   const tagCategories: {[category: string]: string[]} = {};
   Object.keys(tags).forEach((tag) => {
@@ -28,16 +33,13 @@ function BlogTagsListPage(props: Props): JSX.Element {
     tagCategories[category] = tagCategories[category] || [];
     tagCategories[category].push(tag);
   });
-  const tagsList = Object.entries(tagCategories).sort(([a], [b]) => {
+  const tagsList = Object.entries(tagCategories).sort(([a], [b]) =>
-    if (a === b) {
+    a.localeCompare(b),
-      return 0;
+  );
-    }
-    return a > b ? 1 : -1;
-  });
   const tagsSection = tagsList
     .map(([category, tagsForCategory]) => (
-      <div key={category}>
+      <article key={category}>
-        <h3>{category}</h3>
+        <h2>{category}</h2>
         {tagsForCategory.map((tag) => (
           <Link
             className="padding-right--md"
@@ -47,14 +49,13 @@ function BlogTagsListPage(props: Props): JSX.Element {
           </Link>
         ))}
         <hr />
-      </div>
+      </article>
     ))
     .filter((item) => item != null);
 
   return (
     <Layout
-      title="Tags"
+      title={title}
-      description="Blog Tags"
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsListPage}
       searchMetadatas={{
@@ -67,14 +68,8 @@ function BlogTagsListPage(props: Props): JSX.Element {
             <BlogSidebar sidebar={sidebar} />
           </aside>
           <main className="col col--7">
-            <h1>
+            <h1>{title}</h1>
-              <Translate
+            <section className="margin-vert--lg">{tagsSection}</section>
-                id="theme.tags.tagsPageTitle"
-                description="The title of the tag list page">
-                Tags
-              </Translate>
-            </h1>
-            <div className="margin-vert--lg">{tagsSection}</div>
           </main>
         </div>
       </div>

packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx

@@ -33,32 +33,22 @@ function useBlogPostsPlural() {
     );
 }
 
-function BlogTagsPostPageTitle({
-  tagName,
-  count,
-}: {
-  tagName: string;
-  count: number;
-}) {
-  const blogPostsPlural = useBlogPostsPlural();
-  return (
-    <Translate
-      id="theme.blog.tagTitle"
-      description="The title of the page for a blog tag"
-      values={{nPosts: blogPostsPlural(count), tagName}}>
-      {'{nPosts} tagged with "{tagName}"'}
-    </Translate>
-  );
-}
-
 function BlogTagsPostPage(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {allTagsPath, name: tagName, count} = metadata;
+  const blogPostsPlural = useBlogPostsPlural();
+  const title = 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
-      title={`Posts tagged "${tagName}"`}
+      title={title}
-      description={`Blog | Tagged "${tagName}"`}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsPostPage}
       searchMetadatas={{
@@ -71,9 +61,9 @@ function BlogTagsPostPage(props: Props): JSX.Element {
             <BlogSidebar sidebar={sidebar} />
           </aside>
           <main className="col col--7">
-            <h1>
+            <header className="margin-bottom--xl">
-              <BlogTagsPostPageTitle count={count} tagName={tagName} />
+              <h1>{title}</h1>
-            </h1>
+
               <Link href={allTagsPath}>
                 <Translate
                   id="theme.tags.tagsPageLink"
@@ -81,7 +71,8 @@ function BlogTagsPostPage(props: Props): JSX.Element {
                   View All Tags
                 </Translate>
               </Link>
-            <div className="margin-vert--xl">
+            </header>
+
             {items.map(({content: BlogPostContent}) => (
               <BlogPostItem
                 key={BlogPostContent.metadata.permalink}
@@ -91,7 +82,6 @@ function BlogTagsPostPage(props: Props): JSX.Element {
                 <BlogPostContent />
               </BlogPostItem>
             ))}
-            </div>
           </main>
         </div>
       </div>

packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx

@@ -16,8 +16,8 @@ const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
   return (
     <svg
       fill="currentColor"
-      height="1.2em"
+      height="20"
-      width="1.2em"
+      width="20"
       viewBox="0 0 40 40"
       className={clsx(styles.iconEdit, className)}
       aria-hidden="true"

packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx

@@ -16,10 +16,9 @@ const IconExternalLink = ({
 }: Props): JSX.Element => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
-      role="img"
+      aria-hidden="true"
       viewBox="0 0 24 24"
       className={styles.iconExternalLink}>
       <path

packages/docusaurus-theme-classic/src/theme/Logo/index.tsx

@@ -12,13 +12,17 @@ import Link from '@docusaurus/Link';
 import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useThemeConfig} from '@docusaurus/theme-common';
 
 const Logo = (props: Props): JSX.Element => {
-  const {isClient} = useDocusaurusContext();
   const {
-    navbar: {title, logo = {src: ''}},
+    siteConfig: {
-  } = useThemeConfig();
+      title,
+      themeConfig: {
+        navbar: {title: navbarTitle, logo = {src: ''}},
+      },
+    },
+    isClient,
+  } = useDocusaurusContext();
 
   const {imageClassName, titleClassName, ...propsRest} = props;
   const logoLink = useBaseUrl(logo.href || '/');
@@ -37,10 +41,10 @@ const Logo = (props: Props): JSX.Element => {
           key={isClient}
           className={imageClassName}
           sources={sources}
-          alt={logo.alt || title || 'Logo'}
+          alt={logo.alt || navbarTitle || title}
         />
       )}
-      {title != null && <b className={titleClassName}>{title}</b>}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );
 };

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -36,7 +36,7 @@ function MDXPage(props: Props): JSX.Element {
       wrapperClassName={wrapperClassName ?? ThemeClassNames.wrapper.mdxPages}
       pageClassName={ThemeClassNames.page.mdxPage}>
       <main className="container container--fluid margin-vert--lg">
-        <div className={clsx('row', styles.MdxPageWrapper)}>
+        <div className={clsx('row', styles.mdxPageWrapper)}>
           <div className={clsx('col', !hideTableOfContents && 'col--8')}>
             <MDXProvider components={MDXComponents}>
               <MDXPageContent />

packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.MdxPageWrapper {
+.mdxPageWrapper {
   justify-content: center;
 }

packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx

@@ -99,7 +99,7 @@ function Navbar(): JSX.Element {
           <Logo
             className="navbar__brand"
             imageClassName="navbar__logo"
-            titleClassName={clsx('navbar__title')}
+            titleClassName="navbar__title"
           />
           {leftItems.map((item, i) => (
             <NavbarItem {...item} key={i} />

packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css

@@ -16,5 +16,5 @@
 }
 
 .navbarHidden {
-  transform: translate3d(0, calc(var(--ifm-navbar-height) * -1), 0);
+  transform: translate3d(0, calc(-100% - 2px), 0);
 }

packages/docusaurus-theme-classic/src/theme/NotFound.tsx

@@ -7,11 +7,15 @@
 
 import React from 'react';
 import Layout from '@theme/Layout';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 
 function NotFound(): JSX.Element {
   return (
-    <Layout title="Page Not Found">
+    <Layout
+      title={translate({
+        id: 'theme.NotFound.title',
+        message: 'Page Not Found',
+      })}>
       <main className="container margin-vert--xl">
         <div className="row">
           <div className="col col--6 col--offset-3">

packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx

@@ -20,7 +20,7 @@ export default function SearchMetadatas({
 }: Props): JSX.Element {
   return (
     <Head>
-      {locale && <meta name="docusaurus_locale" content={`${locale}`} />}
+      {locale && <meta name="docusaurus_locale" content={locale} />}
       {version && <meta name="docusaurus_version" content={version} />}
       {tag && <meta name="docusaurus_tag" content={tag} />}
     </Head>

packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 .themedImage {
   display: none;
 }

packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx

@@ -11,6 +11,7 @@ import {useThemeConfig} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import clsx from 'clsx';
+import './styles.css';
 import styles from './styles.module.css';
 
 interface IconProps {

packages/docusaurus-theme-classic/src/theme/Toggle/styles.css

@@ -0,0 +1,103 @@
+/**
+ * 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.
+ */
+
+/**
+ * Styles for React Toggle
+ * copied over because we want to allow user to swizzle it and modify the css
+ * and also to make sure its compatible with our dark mode
+ * https://github.com/aaronshaf/react-toggle/blob/master/style.css
+ */
+.react-toggle {
+  touch-action: pan-x;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  border-radius: 30px;
+  background-color: #4d4d4d;
+  transition: all 0.2s ease;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  left: 8px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+[data-theme='dark'] .react-toggle .react-toggle-track-check,
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin: auto 0;
+  right: 10px;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+[data-theme='dark'] .react-toggle .react-toggle-track-x,
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4d4d4d;
+  border-radius: 50%;
+  background-color: #fafafa;
+  transition: all 0.25s ease;
+}
+
+[data-theme='dark'] .react-toggle .react-toggle-thumb,
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+}
+
+.react-toggle--focus .react-toggle-thumb,
+.react-toggle:hover .react-toggle-thumb {
+  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
+}

packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css

@@ -15,100 +15,3 @@
 .toggle::before {
   position: absolute;
 }
-
-/**
- * styles for React Toggle
- * copied over because we want to allow user to swizzle it and modify the css
- * and also to make sure its compatible with our dark mode
- * https://github.com/aaronshaf/react-toggle/blob/master/style.css
- */
-:global(.react-toggle) {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-:global(.react-toggle-screenreader-only) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-:global(.react-toggle--disabled) {
-  cursor: not-allowed;
-}
-
-:global(.react-toggle-track) {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-:global(.react-toggle-track-check) {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-track-check),
-:global(.react-toggle--checked .react-toggle-track-check) {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-:global(.react-toggle-track-x) {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-track-x),
-:global(.react-toggle--checked .react-toggle-track-x) {
-  opacity: 0;
-}
-
-:global(.react-toggle-thumb) {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-  transition: all 0.25s ease;
-}
-
-:global([data-theme='dark'] .react-toggle .react-toggle-thumb),
-:global(.react-toggle--checked .react-toggle-thumb) {
-  left: 27px;
-}
-
-:global(.react-toggle--focus .react-toggle-thumb),
-:global(.react-toggle:hover .react-toggle-thumb) {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
-}
-
-:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
-}

packages/docusaurus-theme-classic/src/validateThemeConfig.js

@@ -250,8 +250,8 @@ const ThemeConfigSchema = Joi.object({
   announcementBar: Joi.object({
     id: Joi.string().default('announcement-bar'),
     content: Joi.string(),
-    backgroundColor: Joi.string().default('#fff'),
+    backgroundColor: Joi.string(),
-    textColor: Joi.string().default('#000'),
+    textColor: Joi.string(),
     isCloseable: Joi.bool().default(true),
   }).optional(),
   navbar: Joi.object({