@docusaurus/theme-classic 2.0.0-beta.15d451942 → 2.0.0-beta.18

package/src/theme/BlogSidebar/index.tsx

@@ -10,29 +10,36 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogSidebar';
 import styles from './styles.module.css';
+import {translate} from '@docusaurus/Translate';
 
 export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
   if (sidebar.items.length === 0) {
     return null;
   }
   return (
-    <div className={clsx(styles.sidebar, 'thin-scrollbar')}>
-      <h3 className={styles.sidebarItemTitle}>{sidebar.title}</h3>
+    <nav
+      className={clsx(styles.sidebar, 'thin-scrollbar')}
+      aria-label={translate({
+        id: 'theme.blog.sidebar.navAriaLabel',
+        message: 'Blog recent posts navigation',
+        description: 'The ARIA label for recent posts in the blog sidebar',
+      })}>
+      <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+        {sidebar.title}
+      </div>
       <ul className={styles.sidebarItemList}>
-        {sidebar.items.map((item) => {
-          return (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          );
-        })}
+        {sidebar.items.map((item) => (
+          <li key={item.permalink} className={styles.sidebarItem}>
+            <Link
+              isNavLink
+              to={item.permalink}
+              className={styles.sidebarItemLink}
+              activeClassName={styles.sidebarItemLinkActive}>
+              {item.title}
+            </Link>
+          </li>
+        ))}
       </ul>
-    </div>
+    </nav>
   );
 }

package/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,32 +13,33 @@
 }
 
 .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 {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary) !important;
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .sidebar {
     display: none;
   }

package/src/theme/BlogTagsListPage/index.tsx

@@ -7,79 +7,33 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
-import BlogSidebar from '@theme/BlogSidebar';
-import Translate from '@docusaurus/Translate';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  translateTagsPageTitle,
+} from '@docusaurus/theme-common';
+import SearchMetadata from '../SearchMetadata';
+import clsx from 'clsx';
 
-function getCategoryOfTag(tag: string) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
-
-function BlogTagsListPage(props: Props): JSX.Element {
+export default function BlogTagsListPage(props: Props): JSX.Element {
   const {tags, sidebar} = props;
-
-  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 tagsSection = tagsList
-    .map(([category, tagsForCategory]) => (
-      <div key={category}>
-        <h3>{category}</h3>
-        {tagsForCategory.map((tag) => (
-          <Link
-            className="padding-right--md"
-            href={tags[tag].permalink}
-            key={tag}>
-            {tags[tag].name} ({tags[tag].count})
-          </Link>
-        ))}
-        <hr />
-      </div>
-    ))
-    .filter((item) => item != null);
-
+  const title = translateTagsPageTitle();
   return (
-    <Layout
-      title="Tags"
-      description="Blog Tags"
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={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">
-            <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>
-          </main>
-        </div>
-      </div>
-    </Layout>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagsListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_list" />
+      <BlogLayout sidebar={sidebar}>
+        <h1>{title}</h1>
+        <TagsListByLetter tags={Object.values(tags)} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
   );
 }
-
-export default BlogTagsListPage;

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -7,13 +7,20 @@
 
 import React from 'react';
 
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogTagsPostsPage';
-import BlogSidebar from '@theme/BlogSidebar';
 import Translate, {translate} from '@docusaurus/Translate';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import clsx from 'clsx';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
@@ -33,70 +40,52 @@ function useBlogPostsPlural() {
     );
 }
 
-function BlogTagsPostPageTitle({
-  tagName,
-  count,
-}: {
-  tagName: string;
-  count: number;
-}) {
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
+  const {metadata, items, sidebar, listMetadata} = props;
+  const {allTagsPath, name: tagName, count} = metadata;
   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>
+  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},
   );
-}
-
-function BlogTagsPostPage(props: Props): JSX.Element {
-  const {metadata, items, sidebar} = props;
-  const {allTagsPath, name: tagName, count} = metadata;
 
   return (
-    <Layout
-      title={`Posts tagged "${tagName}"`}
-      description={`Blog | Tagged "${tagName}"`}
-      wrapperClassName={ThemeClassNames.wrapper.blogPages}
-      pageClassName={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">
-            <BlogSidebar sidebar={sidebar} />
-          </div>
-          <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>
-          </main>
-        </div>
-      </div>
-    </Layout>
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagPostListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_posts" />
+      <BlogLayout sidebar={sidebar}>
+        <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}
+            assets={BlogPostContent.assets}
+            metadata={BlogPostContent.metadata}
+            truncated>
+            <BlogPostContent />
+          </BlogPostItem>
+        ))}
+        <BlogListPaginator metadata={listMetadata} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
   );
 }
-
-export default BlogTagsPostPage;

package/src/theme/CodeBlock/CopyButton/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+
+import React, {useCallback, useState, useRef, useEffect} from 'react';
+import clsx from 'clsx';
+import copy from 'copy-text-to-clipboard';
+import {translate} from '@docusaurus/Translate';
+import type {Props} from '@theme/CodeBlock/CopyButton';
+
+import styles from './styles.module.css';
+
+export default function CopyButton({code}: Props): JSX.Element {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef<number | undefined>(undefined);
+  const handleCopyCode = useCallback(() => {
+    copy(code);
+    setIsCopied(true);
+    copyTimeout.current = window.setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  }, [code]);
+
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+
+  return (
+    <button
+      type="button"
+      aria-label={
+        isCopied
+          ? translate({
+              id: 'theme.CodeBlock.copied',
+              message: 'Copied',
+              description: 'The copied button label on code blocks',
+            })
+          : translate({
+              id: 'theme.CodeBlock.copyButtonAriaLabel',
+              message: 'Copy code to clipboard',
+              description: 'The ARIA label for copy code blocks button',
+            })
+      }
+      title={translate({
+        id: 'theme.CodeBlock.copy',
+        message: 'Copy',
+        description: 'The copy button label on code blocks',
+      })}
+      className={clsx(
+        styles.copyButton,
+        'clean-btn',
+        isCopied && styles.copyButtonCopied,
+      )}
+      onClick={handleCopyCode}>
+      <span className={styles.copyButtonIcons} aria-hidden="true">
+        <svg className={styles.copyButtonIcon} viewBox="0 0 24 24">
+          <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+        </svg>
+        <svg className={styles.copyButtonSuccessIcon} viewBox="0 0 24 24">
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </span>
+    </button>
+  );
+}

package/src/theme/CodeBlock/CopyButton/styles.module.css

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+
+.copyButton {
+  display: flex;
+  background: inherit;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.4rem;
+  position: absolute;
+  right: calc(var(--ifm-pre-padding) / 2);
+  top: calc(var(--ifm-pre-padding) / 2);
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;
+}
+
+.copyButton:focus-visible,
+.copyButton:hover,
+:global(.theme-code-block:hover) .copyButtonCopied {
+  opacity: 1 !important;
+}
+
+:global(.theme-code-block:hover) .copyButton:not(.copyButtonCopied) {
+  opacity: 0.4;
+}
+
+.copyButtonIcons {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.copyButtonIcon,
+.copyButtonSuccessIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentColor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all 0.15s ease;
+}
+
+.copyButtonSuccessIcon {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.33);
+  opacity: 0;
+  color: #00d600;
+}
+
+.copyButtonCopied .copyButtonIcon {
+  transform: scale(0.33);
+  opacity: 0;
+}
+
+.copyButtonCopied .copyButtonSuccessIcon {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  transition-delay: 0.075s;
+}