refactor(v2): minor cleanups (#4959)

* refactor(v2): minor cleanups * Fixes
2025-05-03 12:17:20 +02:00 · 2021-06-16 11:59:50 +03:00 · 2021-06-16 11:59:50 +03:00 · bfd33dc63a
commit bfd33dc63a
parent af3640dca2
21 changed files with 203 additions and 198 deletions
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
+++ b/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 {
--- 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 && (
--- 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;
 }
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/index.tsx
+++ b/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 (
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/styles.module.css
+++ b/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: 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 {
--- 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,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]) => {
-    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} />
          </aside>
          <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>
--- 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,27 +61,27 @@ function BlogTagsPostPage(props: Props): JSX.Element {
            <BlogSidebar sidebar={sidebar} />
          </aside>
          <main className="col col--7">
-            <h1>
-              <BlogTagsPostPageTitle count={count} tagName={tagName} />
-            </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">
-              {items.map(({content: BlogPostContent}) => (
-                <BlogPostItem
-                  key={BlogPostContent.metadata.permalink}
-                  frontMatter={BlogPostContent.frontMatter}
-                  metadata={BlogPostContent.metadata}
-                  truncated>
-                  <BlogPostContent />
-                </BlogPostItem>
-              ))}
-            </div>
+            <header className="margin-bottom--xl">
+              <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>
+            </header>
+
+            {items.map(({content: BlogPostContent}) => (
+              <BlogPostItem
+                key={BlogPostContent.metadata.permalink}
+                frontMatter={BlogPostContent.frontMatter}
+                metadata={BlogPostContent.metadata}
+                truncated>
+                <BlogPostContent />
+              </BlogPostItem>
+            ))}
          </main>
        </div>
      </div>
--- 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"
--- a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
+++ b/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
--- 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>
  );
 };
--- 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 />
--- 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;
 }
--- 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} />
--- 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, calc(-100% - 2px), 0);
 }
--- 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">
--- 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>
--- 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;
 }
--- 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 {
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.css
+++ b/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);
+}
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
+++ b/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);
-}
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/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'),
-    textColor: Joi.string().default('#000'),
+    backgroundColor: Joi.string(),
+    textColor: Joi.string(),
    isCloseable: Joi.bool().default(true),
  }).optional(),
  navbar: Joi.object({