feat(v2): Extract/translate hardcoded labels from classic theme (#4168)

* Translate theme hardcoded strings * improve test
facebook · Feb 3, 2021 · ab79515 · ab79515
1 parent 823d0fe
commit ab79515
Show file tree

Hide file tree

Showing 17 changed files with 217 additions and 60 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
 import type {Metadata} from '@theme/BlogListPage';
 
 function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
@@ -18,14 +19,28 @@ function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
       <div className="pagination-nav__item">
         {previousPage && (
           <Link className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">&laquo; Newer Entries</div>
+            <div className="pagination-nav__label">
+              &laquo;{' '}
+              <Translate
+                id="theme.BlogListPaginator.newerEntries"
+                description="The label used to navigate to the newer blog posts page (previous page)">
+                Newer Entries
+              </Translate>
+            </div>
           </Link>
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextPage && (
           <Link className="pagination-nav__link" to={nextPage}>
-            <div className="pagination-nav__label">Older Entries &raquo;</div>
+            <div className="pagination-nav__label">
+              <Translate
+                id="theme.BlogListPaginator.olderEntries"
+                description="The label used to navigate to the older blog posts page (next page)">
+                Older Entries
+              </Translate>{' '}
+              &raquo;
+            </div>
           </Link>
         )}
       </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import {MDXProvider} from '@mdx-js/react';
-
+import Translate from '@docusaurus/Translate';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import MDXComponents from '@theme/MDXComponents';
@@ -133,7 +133,13 @@ function BlogPostItem(props: Props): JSX.Element {
                 <Link
                   to={metadata.permalink}
                   aria-label={`Read more about ${title}`}>
-                  <strong>Read More</strong>
+                  <strong>
+                    <Translate
+                      id="theme.BlogPostItem.readMore"
+                      description="The label used in blog post item excerps to link to full blog posts">
+                      Read More
+                    </Translate>
+                  </strong>
                 </Link>
               </div>
             )}

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -6,14 +6,13 @@
  */
 
 import React from 'react';
-
 import Layout from '@theme/Layout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
 import BlogSidebar from '@theme/BlogSidebar';
 import TOC from '@theme/TOC';
-import IconEdit from '@theme/IconEdit';
+import EditThisPage from '@theme/EditThisPage';
 
 function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
@@ -39,14 +38,7 @@ function BlogPostPage(props: Props): JSX.Element {
                 isBlogPostPage>
                 <BlogPostContents />
               </BlogPostItem>
-              <div>
-                {editUrl && (
-                  <a href={editUrl} target="_blank" rel="noreferrer noopener">
-                    <IconEdit />
-                    Edit this page
-                  </a>
-                )}
-              </div>
+              <div>{editUrl && <EditThisPage editUrl={editUrl} />}</div>
               {(nextItem || prevItem) && (
                 <div className="margin-vert--xl">
                   <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostPaginator';
 
@@ -17,7 +18,13 @@ function BlogPostPaginator(props: Props): JSX.Element {
       <div className="pagination-nav__item">
         {prevItem && (
           <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">Newer Post</div>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.BlogPostPaginator.newerPost"
+                description="The blog post button label to navigate to the newer/previous post">
+                Newer Post
+              </Translate>
+            </div>
             <div className="pagination-nav__label">
               &laquo; {prevItem.title}
             </div>
@@ -27,7 +34,13 @@ function BlogPostPaginator(props: Props): JSX.Element {
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
           <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">Older Post</div>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.BlogPostPaginator.olderPost"
+                description="The blog post button label to navigate to the older/next post">
+                Older Post
+              </Translate>
+            </div>
             <div className="pagination-nav__label">
               {nextItem.title} &raquo;
             </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx
@@ -49,6 +49,7 @@ function BlogTagsListPage(props: Props): JSX.Element {
     ))
     .filter((item) => item != null);
 
+  // TODO soon: translate hardcoded labels, but factorize them (blog + docs will both have tags)
   return (
     <Layout
       title="Tags"

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx
@@ -21,6 +21,7 @@ function BlogTagsPostPage(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   const {allTagsPath, name: tagName, count} = metadata;
 
+  // TODO soon: translate hardcoded labels, but factorize them (blog + docs will both have tags)
   return (
     <Layout
       title={`Posts tagged "${tagName}"`}

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -12,6 +12,7 @@ import copy from 'copy-text-to-clipboard';
 import rangeParser from 'parse-numeric-range';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
+import Translate from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 import {useThemeConfig} from '@docusaurus/theme-common';
@@ -86,11 +87,11 @@ const highlightDirectiveRegex = (lang) => {
 };
 const codeBlockTitleRegex = /(?:title=")(.*)(?:")/;
 
-export default ({
+export default function CodeBlock({
   children,
   className: languageClassName,
   metastring,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const {prism} = useThemeConfig();
 
   const [showCopied, setShowCopied] = useState(false);
@@ -242,11 +243,23 @@ export default ({
               aria-label="Copy code to clipboard"
               className={clsx(styles.copyButton)}
               onClick={handleCopyCode}>
-              {showCopied ? 'Copied' : 'Copy'}
+              {showCopied ? (
+                <Translate
+                  id="theme.CodeBlock.copied"
+                  description="The copied button label on code blocks">
+                  Copied
+                </Translate>
+              ) : (
+                <Translate
+                  id="theme.CodeBlock.copy"
+                  description="The copy button label on code blocks">
+                  Copy
+                </Translate>
+              )}
             </button>
           </div>
         </>
       )}
     </Highlight>
   );
-};
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-
 import Head from '@docusaurus/Head';
 import {useTitleFormatter} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -15,7 +14,7 @@ import DocPaginator from '@theme/DocPaginator';
 import DocVersionSuggestions from '@theme/DocVersionSuggestions';
 import type {Props} from '@theme/DocItem';
 import TOC from '@theme/TOC';
-import IconEdit from '@theme/IconEdit';
+import EditThisPage from '@theme/EditThisPage';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
@@ -107,15 +106,7 @@ function DocItem(props: Props): JSX.Element {
               <div className="margin-vert--xl">
                 <div className="row">
                   <div className="col">
-                    {editUrl && (
-                      <a
-                        href={editUrl}
-                        target="_blank"
-                        rel="noreferrer noopener">
-                        <IconEdit />
-                        Edit this page
-                      </a>
-                    )}
+                    {editUrl && <EditThisPage editUrl={editUrl} />}
                   </div>
                   {(lastUpdatedAt || lastUpdatedBy) && (
                     <div className="col text--right">

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/DocPaginator';
 
 function DocPaginator(props: Props): JSX.Element {
@@ -19,7 +20,13 @@ function DocPaginator(props: Props): JSX.Element {
           <Link
             className="pagination-nav__link"
             to={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">Previous</div>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.DocPaginator.previous"
+                description="The label used to navigate to the previous doc">
+                Previous
+              </Translate>
+            </div>
             <div className="pagination-nav__label">
               &laquo; {metadata.previous.title}
             </div>
@@ -29,7 +36,13 @@ function DocPaginator(props: Props): JSX.Element {
       <div className="pagination-nav__item pagination-nav__item--next">
         {metadata.next && (
           <Link className="pagination-nav__link" to={metadata.next.permalink}>
-            <div className="pagination-nav__sublabel">Next</div>
+            <div className="pagination-nav__sublabel">
+              <Translate
+                id="theme.DocPaginator.next"
+                description="The label used to navigate to the next doc">
+                Next
+              </Translate>
+            </div>
             <div className="pagination-nav__label">
               {metadata.next.title} &raquo;
             </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * 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 from 'react';
+import Translate from '@docusaurus/Translate';
+
+import type {Props} from '@theme/EditThisPage';
+import IconEdit from '@theme/IconEdit';
+
+export default function EditThisPage({editUrl}: Props): JSX.Element {
+  return (
+    <a href={editUrl} target="_blank" rel="noreferrer noopener">
+      <IconEdit />
+      <Translate
+        id="theme.EditThisPage.editThisPage"
+        description="The link label to edit the current page">
+        Edit this page
+      </Translate>
+    </a>
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx b/packages/docusaurus-theme-classic/src/theme/NotFound.tsx
@@ -7,18 +7,35 @@
 
 import React from 'react';
 import Layout from '@theme/Layout';
+import Translate from '@docusaurus/Translate';
 
 function NotFound(): JSX.Element {
   return (
     <Layout title="Page Not Found">
       <main className="container margin-vert--xl">
         <div className="row">
           <div className="col col--6 col--offset-3">
-            <h1 className="hero__title">Page Not Found</h1>
-            <p>We could not find what you were looking for.</p>
+            <h1 className="hero__title">
+              <Translate
+                id="theme.NotFound.title"
+                description="The title of the 404 page">
+                Page Not Found
+              </Translate>
+            </h1>
             <p>
-              Please contact the owner of the site that linked you to the
-              original URL and let them know their link is broken.
+              <Translate
+                id="theme.NotFound.p1"
+                description="The first paragraph of the 404 page">
+                We could not find what you were looking for.
+              </Translate>
+            </p>
+            <p>
+              <Translate
+                id="theme.NotFound.p2"
+                description="The 2nd paragraph of the 404 page">
+                Please contact the owner of the site that linked you to the
+                original URL and let them know their link is broken.
+              </Translate>
             </p>
           </div>
         </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
@@ -6,8 +6,8 @@
  */
 
 import React, {useRef, useEffect} from 'react';
+import Translate from '@docusaurus/Translate';
 import {useLocation} from '@docusaurus/router';
-
 import styles from './styles.module.css';
 
 function programmaticFocus(el) {
@@ -39,7 +39,11 @@ function SkipToContent(): JSX.Element {
   return (
     <div ref={containerRef}>
       <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
-        Skip to main content
+        <Translate
+          id="theme.SkipToContent.skipToMainContent"
+          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
+          Skip to main content
+        </Translate>
       </a>
     </div>
   );

diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -92,6 +92,14 @@ declare module '@theme/DocVersionSuggestions' {
   export default DocVersionSuggestions;
 }
 
+declare module '@theme/EditThisPage' {
+  export type Props = {
+    readonly editUrl: string;
+  };
+  const EditThisPage: (props: Props) => JSX.Element;
+  export default EditThisPage;
+}
+
 declare module '@theme/Footer' {
   const Footer: () => JSX.Element | null;
   export default Footer;