refactor(v2): minor cleanups

facebook · Jun 14, 2021 · 971d939 · 971d939
1 parent 4eb1b58
commit 971d939
Show file tree

Hide file tree

Showing 20 changed files with 183 additions and 181 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
@@ -60,20 +60,18 @@ function BlogPostItem(props: Props): JSX.Element {
 
     return (
       <header>
-        <TitleHeading
-          className={clsx('margin-bottom--sm', styles.blogPostTitle)}>
+        <TitleHeading className={styles.blogPostTitle}>
           {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
         </TitleHeading>
-        <div className="margin-vert--md">
-          <time dateTime={date} className={styles.blogPostDate}>
-            {formattedDate}
-            {readingTime && (
-              <>
-                {' · '}
-                {readingTimePlural(readingTime)}
-              </>
-            )}
-          </time>
+        <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
+          <time dateTime={date}>{formattedDate}</time>
+
+          {readingTime && (
+            <>
+              {' · '}
+              {readingTimePlural(readingTime)}
+            </>
+          )}
         </div>
         <div className="avatar margin-vert--md">
           {authorImageURL && (

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css
@@ -9,6 +9,6 @@
   font-size: 3rem;
 }
 
-.blogPostDate {
+.blogPostData {
   font-size: 0.9rem;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
@@ -17,7 +17,9 @@ export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
   }
   return (
     <div className={clsx(styles.sidebar, 'thin-scrollbar')}>
-      <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 (

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
@@ -6,33 +6,31 @@
  */
 
 .sidebar {
-  display: inherit;
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
   overflow-y: auto;
   position: sticky;
   top: calc(var(--ifm-navbar-height) + 2rem);
 }
 
 .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 {

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/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,23 +21,25 @@ 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) => {
     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 tagsList = Object.entries(tagCategories).sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
   const tagsSection = tagsList
     .map(([category, tagsForCategory]) => (
-      <div key={category}>
-        <h3>{category}</h3>
+      <article key={category}>
+        <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"
-      description="Blog Tags"
+      title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsListPage}
       searchMetadatas={{
@@ -67,14 +68,8 @@ function BlogTagsListPage(props: Props): JSX.Element {
             <BlogSidebar sidebar={sidebar} />
           </div>
           <main className="col col--7">
-            <h1>
-              <Translate
-                id="theme.tags.tagsPageTitle"
-                description="The title of the tag list page">
-                Tags
-              </Translate>
-            </h1>
-            <div className="margin-vert--lg">{tagsSection}</div>
+            <h1>{title}</h1>
+            <section className="margin-vert--lg">{tagsSection}</section>
           </main>
         </div>
       </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/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}"`}
-      description={`Blog | Tagged "${tagName}"`}
+      title={title}
       wrapperClassName={ThemeClassNames.wrapper.blogPages}
       pageClassName={ThemeClassNames.page.blogTagsPostPage}
       searchMetadatas={{
@@ -71,17 +61,15 @@ function BlogTagsPostPage(props: Props): JSX.Element {
             <BlogSidebar sidebar={sidebar} />
           </div>
           <main className="col col--7">
-            <h1>
-              <BlogTagsPostPageTitle count={count} tagName={tagName} />
-            </h1>
+            <h1>{title}</h1>
             <Link href={allTagsPath}>
               <Translate
                 id="theme.tags.tagsPageLink"
                 description="The label of the link targeting the tag list page">
                 View All Tags
               </Translate>
             </Link>
-            <div className="margin-vert--xl">
+            <section className="margin-vert--xl">
               {items.map(({content: BlogPostContent}) => (
                 <BlogPostItem
                   key={BlogPostContent.metadata.permalink}
@@ -91,7 +79,7 @@ function BlogTagsPostPage(props: Props): JSX.Element {
                   <BlogPostContent />
                 </BlogPostItem>
               ))}
-            </div>
+            </section>
           </main>
         </div>
       </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx b/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"
-      width="1.2em"
+      height="20"
+      width="20"
       viewBox="0 0 40 40"
       className={clsx(styles.iconEdit, className)}
       aria-hidden="true"

diff --git a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
@@ -12,10 +12,9 @@ import styles from './styles.module.css';
 const IconExternalLink = (): JSX.Element => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width="14"
       height="14"
-      role="img"
+      aria-hidden="true"
       viewBox="0 0 24 24"
       className={styles.iconExternalLink}>
       <path

diff --git a/packages/docusaurus-theme-classic/src/theme/Logo/index.tsx b/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: ''}},
-  } = useThemeConfig();
+    siteConfig: {
+      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>
   );
 };

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/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 />

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css b/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;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/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} />

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/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, -103%, 0);
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx b/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">

diff --git a/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx b/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>

diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css b/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;
 }

diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx b/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 {