From bfd33dc63af0cab7da99a3b91507e6fac860baa1 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 16 Jun 2021 11:59:50 +0300 Subject: [PATCH] refactor(v2): minor cleanups (#4959) * refactor(v2): minor cleanups * Fixes --- .../theme/AnnouncementBar/styles.module.css | 3 +- .../src/theme/BlogPostItem/index.tsx | 22 ++-- .../src/theme/BlogPostItem/styles.module.css | 2 +- .../src/theme/BlogSidebar/index.tsx | 4 +- .../src/theme/BlogSidebar/styles.module.css | 10 +- .../src/theme/BlogTagsListPage/index.tsx | 35 +++--- .../src/theme/BlogTagsPostsPage/index.tsx | 72 ++++++------ .../src/theme/IconEdit/index.tsx | 4 +- .../src/theme/IconExternalLink/index.tsx | 3 +- .../src/theme/Logo/index.tsx | 16 ++- .../src/theme/MDXPage/index.tsx | 2 +- .../src/theme/MDXPage/styles.module.css | 2 +- .../src/theme/Navbar/index.tsx | 2 +- .../src/theme/Navbar/styles.module.css | 2 +- .../src/theme/NotFound.tsx | 8 +- .../src/theme/SearchMetadatas/index.tsx | 2 +- .../src/theme/ThemedImage/styles.module.css | 7 ++ .../src/theme/Toggle/index.tsx | 1 + .../src/theme/Toggle/styles.css | 103 ++++++++++++++++++ .../src/theme/Toggle/styles.module.css | 97 ----------------- .../src/validateThemeConfig.js | 4 +- 21 files changed, 203 insertions(+), 198 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Toggle/styles.css diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css index 57b5fb788b..10c2198b2b 100644 --- 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 { diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx index 30b5d96aa0..653086cf74 100644 --- 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 (
- + {isBlogPostPage ? title : {title}} -
- +
+ + + {readingTime && ( + <> + {' · '} + {readingTimePlural(readingTime)} + + )}
{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 index f7fa35a020..2e10ed61d1 100644 --- 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 index fe90d16af8..0fee4b252a 100644 --- 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', })}> -

{sidebar.title}

+
+ {sidebar.title} +
    {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 index c55e3277a7..89eb6e178a 100644 --- 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 { diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx index cc127d1dde..455d5f1f93 100644 --- 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]) => ( -
    -

    {category}

    +
    +

    {category}

    {tagsForCategory.map((tag) => ( ))}
    -
    + )) .filter((item) => item != null); return (
    -

    - - Tags - -

    -
    {tagsSection}
    +

    {title}

    +
    {tagsSection}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx index 09a002a845..1eff02c0fb 100644 --- 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 ( - - {'{nPosts} tagged with "{tagName}"'} - - ); -} - 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 (
-

- -

- - - View All Tags - - -
- {items.map(({content: BlogPostContent}) => ( - - - - ))} -
+
+

{title}

+ + + + View All Tags + + +
+ + {items.map(({content: BlogPostContent}) => ( + + + + ))}
diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx index 80f21a28e2..7eb81c8b82 100644 --- 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 ( {title}} + {navbarTitle != null && {navbarTitle}} ); }; diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx index aff5e7b6d5..6305ed2728 100644 --- 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}>
-
+
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXPage/styles.module.css index 6920c4a5ab..deb83e5972 100644 --- 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 index d285e4fa35..5aca53a38d 100644 --- 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 { {leftItems.map((item, 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 index 760d9b46fd..9e4ab9b4ec 100644 --- 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); } diff --git a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx b/packages/docusaurus-theme-classic/src/theme/NotFound.tsx index bbd776d302..20a600f827 100644 --- 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 ( - +
diff --git a/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx b/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx index a3986de708..5ad846997d 100644 --- 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 ( - {locale && } + {locale && } {version && } {tag && } diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css index 4476c5e3dc..2f8648d5d9 100644 --- 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 index 0a53e68ea4..7bfe3db259 100644 --- 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 { diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.css new file mode 100644 index 0000000000..f7fdb1ae64 --- /dev/null +++ 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); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css index 364e2c6862..e48be23523 100644 --- 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); -} diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js index b2bb46a82c..141d15dcbb 100644 --- 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({