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

package/lib-next/theme/BlogTagsListPage/index.js

@@ -5,77 +5,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import BlogSidebar from '@theme/BlogSidebar';
-import Translate from '@docusaurus/Translate';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-
-function getCategoryOfTag(tag) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
-
-function BlogTagsListPage(props) {
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  translateTagsPageTitle,
+} from '@docusaurus/theme-common';
+import SearchMetadata from '../SearchMetadata';
+import clsx from 'clsx';
+export default function BlogTagsListPage(props) {
   const {tags, sidebar} = props;
-  const tagCategories = {};
-  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/lib-next/theme/BlogTagsPostsPage/index.js

@@ -5,12 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Layout from '@theme/Layout';
-import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
-import BlogSidebar from '@theme/BlogSidebar';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
 import Translate, {translate} from '@docusaurus/Translate';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common'; // Very simple pluralization: probably good enough for now
+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() {
   const {selectMessage} = usePluralForm();
@@ -31,66 +38,54 @@ function useBlogPostsPlural() {
     );
 }
 
-function BlogTagsPostPageTitle({tagName, count}) {
+export default function BlogTagsPostsPage(props) {
+  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) {
-  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/lib-next/theme/CodeBlock/CopyButton/index.js

@@ -0,0 +1,60 @@
+/**
+ * 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 styles from './styles.module.css';
+export default function CopyButton({code}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef(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/lib-next/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;
+}