refactor(v2): add more translatable strings (#4219)

* refactor(v2): add more translatable strings

* Apply suggestions from code review

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Fixes

* Updates

* Localize direct link to heading

* typo + add french translations

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.js

@@ -7,6 +7,7 @@
 
 import React, {useState} from 'react';
 import clsx from 'clsx';
+import Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
@@ -16,7 +17,13 @@ export default function PwaReloadPopup({onReload}) {
   return (
     isVisible && (
       <div className={clsx('alert', 'alert--secondary', styles.popup)}>
-        <p>New version available</p>
+        <p>
+          <Translate
+            id="theme.PwaReloadPopup.info"
+            description="The text for PWA reload popup">
+            New version available
+          </Translate>
+        </p>
         <div className={styles.buttonContainer}>
           <button
             className="button button--link"
@@ -25,11 +32,20 @@ export default function PwaReloadPopup({onReload}) {
               setIsVisible(false);
               onReload();
             }}>
-            Refresh
+            <Translate
+              id="theme.PwaReloadPopup.refreshButtonText"
+              description="The text for PWA reload button">
+              Refresh
+            </Translate>
           </button>
 
           <button
-            aria-label="Close"
+            aria-label={translate({
+              id: 'theme.PwaReloadPopup.closeButtonAriaLabel',
+              message: 'Close',
+              description:
+                'The ARIA label for close button of PWA reload popup',
+            })}
             className="close"
             type="button"
             onClick={() => setIsVisible(false)}>

packages/docusaurus-theme-classic/codeTranslations/base.json

@@ -0,0 +1,42 @@
+{
+  "theme.NotFound.title": "Page Not Found",
+  "theme.NotFound.p1": "We could not find what you were looking for.",
+  "theme.NotFound.p2": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
+  "theme.AnnouncementBar.closeButtonAriaLabel": "Close",
+  "theme.blog.paginator.navAriaLabel": "Blog list page navigation",
+  "theme.blog.paginator.newerEntries": "Newer Entries",
+  "theme.blog.paginator.olderEntries": "Older Entries",
+  "theme.blog.post.paginator.navAriaLabel": "Blog post page navigation",
+  "theme.blog.post.paginator.newerPost": "Newer Post",
+  "theme.blog.post.paginator.olderPost": "Older Post",
+  "theme.blog.post.readMore": "Read More",
+  "theme.blog.tags": "Tags:",
+  "theme.CodeBlock.copyButtonAriaLabel": "Copy code to clipboard",
+  "theme.CodeBlock.copied": "Copied",
+  "theme.CodeBlock.copy": "Copy",
+  "theme.docs.paginator.navAriaLabel": "Docs pages navigation",
+  "theme.docs.paginator.previous": "Previous",
+  "theme.docs.paginator.next": "Next",
+  "theme.docs.sidebar.expandButtonTitle": "Expand sidebar",
+  "theme.docs.sidebar.expandButtonAriaLabel": "Expand sidebar",
+  "theme.docs.sidebar.responsiveCloseButtonLabel": "Close menu",
+  "theme.docs.sidebar.responsiveOpenButtonLabel": "Open menu",
+  "theme.docs.sidebar.collapseButtonTitle": "Collapse sidebar",
+  "theme.docs.sidebar.collapseButtonAriaLabel": "Collapse sidebar",
+  "theme.common.editThisPage": "Edit this page",
+  "theme.common.headingLinkTitle": "Direct link to heading",
+  "theme.common.skipToMainContent": "Skip to main content",
+  "theme.SearchPage.existingResultsTitle": "Search results for",
+  "theme.SearchPage.emptyResultsTitle": "Search the documentation",
+  "theme.SearchPage.inputPlaceholder": "Type your search here",
+  "theme.SearchPage.inputLabel": "Search",
+  "theme.SearchPage.algoliaLabel": "Search by Algolia",
+  "theme.SearchPage.noResultsText": "No results were found",
+  "theme.SearchPage.fetchingNewResults": "Fetching new results...",
+  "theme.SearchBar.label": "Search",
+  "theme.PwaReloadPopup.info": "New version available",
+  "theme.PwaReloadPopup.refreshButtonText": "Refresh",
+  "theme.PwaReloadPopup.closeButtonAriaLabel": "Close",
+  "theme.Playground.liveEditor": "Live Editor",
+  "theme.Playground.result": "Result"
+}

packages/docusaurus-theme-classic/codeTranslations/fr.json

@@ -2,17 +2,41 @@
   "theme.NotFound.title": "Page introuvable",
   "theme.NotFound.p1": "Nous n'avons pas trouvé ce que vous recherchez.",
   "theme.NotFound.p2": "Veuillez contacter le propriétaire du site qui vous a lié à l'URL d'origine et leur faire savoir que leur lien est cassé.",
-  "theme.BlogListPaginator.newerEntries": "Nouvelles entrées",
+  "theme.AnnouncementBar.closeButtonAriaLabel": "Fermer",
-  "theme.BlogListPaginator.olderEntries": "Anciennes entrées",
+  "theme.blog.paginator.navAriaLabel": "Pagination de la liste des posts du blog",
-  "theme.BlogPostItem.readMore": "Lire plus",
+  "theme.blog.paginator.newerEntries": "Nouvelles entrées",
-  "theme.BlogPostPaginator.newerPost": "Article plus récent",
+  "theme.blog.paginator.olderEntries": "Anciennes entrées",
-  "theme.BlogPostPaginator.olderPost": "Article plus ancien",
+  "theme.blog.post.paginator.navAriaLabel": "Pagination des blog posts",
+  "theme.blog.post.paginator.newerPost": "Article plus récent",
+  "theme.blog.post.paginator.olderPost": "Article plus ancien",
+  "theme.blog.post.readMore": "Lire plus",
+  "theme.blog.tags": "Tags:",
+  "theme.CodeBlock.copyButtonAriaLabel": "Copier le code",
   "theme.CodeBlock.copied": "Copié",
   "theme.CodeBlock.copy": "Copier",
-  "theme.DocPaginator.previous": "Précédent",
+  "theme.docs.paginator.navAriaLabel": "Pagination des documents",
-  "theme.DocPaginator.next": "Suivant",
+  "theme.docs.paginator.previous": "Précédent",
-  "theme.EditThisPage.editThisPage": "Éditer cette page",
+  "theme.docs.paginator.next": "Suivant",
-  "theme.SkipToContent.skipToMainContent": "Aller au contenu principal",
+  "theme.docs.sidebar.expandButtonTitle": "Déplier le menu latéral",
+  "theme.docs.sidebar.expandButtonAriaLabel": "Déplier le menu latéral",
+  "theme.docs.sidebar.responsiveCloseButtonLabel": "Fermer le menu latéral",
+  "theme.docs.sidebar.responsiveOpenButtonLabel": "Ouvrir le menu latéral",
+  "theme.docs.sidebar.collapseButtonTitle": "Réduire le menu latéral",
+  "theme.docs.sidebar.collapseButtonAriaLabel": "Réduire le menu latéral",
+  "theme.common.editThisPage": "Éditer cette page",
+  "theme.common.headingLinkTitle": "Lien direct vers le titre",
+  "theme.common.skipToMainContent": "Aller au contenu principal",
+  "theme.SearchPage.existingResultsTitle": "Rechercher des résultats pour",
+  "theme.SearchPage.emptyResultsTitle": "Rechercher dans la documentation",
+  "theme.SearchPage.inputPlaceholder": "Tapez vôtre recherche ici",
+  "theme.SearchPage.inputLabel": "Chercher",
+  "theme.SearchPage.algoliaLabel": "Recharche Algolia",
+  "theme.SearchPage.noResultsText": "Aucun résultat trouvé",
+  "theme.SearchPage.fetchingNewResults": "Chargement de nouveaux résultats...",
+  "theme.SearchBar.label": "Chercher",
+  "theme.PwaReloadPopup.info": "Nouvelle version disponible",
+  "theme.PwaReloadPopup.refreshButtonText": "Rafraichir",
+  "theme.PwaReloadPopup.closeButtonAriaLabel": "Fermer",
   "theme.Playground.liveEditor": "Éditeur en direct",
   "theme.Playground.result": "Résultat"
 }

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
+import {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
@@ -46,7 +47,11 @@ function AnnouncementBar(): JSX.Element | null {
           type="button"
           className={styles.announcementBarClose}
           onClick={closeAnnouncementBar}
-          aria-label="Close">
+          aria-label={translate({
+            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+            message: 'Close',
+            description: 'The ARIA label for close button of announcement bar',
+          })}>
           <span aria-hidden="true">×</span>
         </button>
       ) : null}

packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import type {Metadata} from '@theme/BlogListPage';
 
 function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
@@ -15,14 +15,20 @@ function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
   const {previousPage, nextPage} = metadata;
 
   return (
-    <nav className="pagination-nav" aria-label="Blog list page navigation">
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.blog.paginator.navAriaLabel',
+        message: 'Blog list page navigation',
+        description: 'The ARIA label for the blog pagination',
+      })}>
       <div className="pagination-nav__item">
         {previousPage && (
           <Link className="pagination-nav__link" to={previousPage}>
             <div className="pagination-nav__label">
               &laquo;{' '}
               <Translate
-                id="theme.BlogListPaginator.newerEntries"
+                id="theme.blog.paginator.newerEntries"
                 description="The label used to navigate to the newer blog posts page (previous page)">
                 Newer Entries
               </Translate>
@@ -35,7 +41,7 @@ function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
           <Link className="pagination-nav__link" to={nextPage}>
             <div className="pagination-nav__label">
               <Translate
-                id="theme.BlogListPaginator.olderEntries"
+                id="theme.blog.paginator.olderEntries"
                 description="The label used to navigate to the older blog posts page (next page)">
                 Older Entries
               </Translate>{' '}

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx

@@ -117,7 +117,13 @@ function BlogPostItem(props: Props): JSX.Element {
           <footer className="row margin-vert--lg">
             {tags.length > 0 && (
               <div className="col">
-                <strong>Tags:</strong>
+                <strong>
+                  <Translate
+                    id="theme.blog.tags"
+                    description="The label used during output tags list">
+                    Tags:
+                  </Translate>
+                </strong>
                 {tags.map(({label, permalink: tagPermalink}) => (
                   <Link
                     key={tagPermalink}
@@ -135,8 +141,8 @@ function BlogPostItem(props: Props): JSX.Element {
                   aria-label={`Read more about ${title}`}>
                   <strong>
                     <Translate
-                      id="theme.BlogPostItem.readMore"
+                      id="theme.blog.post.readMore"
-                      description="The label used in blog post item excerps to link to full blog posts">
+                      description="The label used in blog post item excerpts to link to full blog posts">
                       Read More
                     </Translate>
                   </strong>

packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostPaginator';
 
@@ -14,13 +14,19 @@ function BlogPostPaginator(props: Props): JSX.Element {
   const {nextItem, prevItem} = props;
 
   return (
-    <nav className="pagination-nav" aria-label="Blog post page navigation">
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.blog.post.paginator.navAriaLabel',
+        message: 'Blog post page navigation',
+        description: 'The ARIA label for the blog posts pagination',
+      })}>
       <div className="pagination-nav__item">
         {prevItem && (
           <Link className="pagination-nav__link" to={prevItem.permalink}>
             <div className="pagination-nav__sublabel">
               <Translate
-                id="theme.BlogPostPaginator.newerPost"
+                id="theme.blog.post.paginator.newerPost"
                 description="The blog post button label to navigate to the newer/previous post">
                 Newer Post
               </Translate>
@@ -36,7 +42,7 @@ function BlogPostPaginator(props: Props): JSX.Element {
           <Link className="pagination-nav__link" to={nextItem.permalink}>
             <div className="pagination-nav__sublabel">
               <Translate
-                id="theme.BlogPostPaginator.olderPost"
+                id="theme.blog.post.paginator.olderPost"
                 description="The blog post button label to navigate to the older/next post">
                 Older Post
               </Translate>

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -12,7 +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 Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 import {useThemeConfig} from '@docusaurus/theme-common';
@@ -240,7 +240,11 @@ export default function CodeBlock({
             <button
               ref={button}
               type="button"
-              aria-label="Copy code to clipboard"
+              aria-label={translate({
+                id: 'theme.CodeBlock.copyButtonAriaLabel',
+                message: 'Copy code to clipboard',
+                description: 'The ARIA label for copy code blocks button',
+              })}
               className={clsx(styles.copyButton)}
               onClick={handleCopyCode}>
               {showCopied ? (

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -112,6 +112,7 @@ function DocItem(props: Props): JSX.Element {
                     <div className="col text--right">
                       <em>
                         <small>
+                          {/* TODO: wait for using interpolation in translation function */}
                           Last updated{' '}
                           {lastUpdatedAt && (
                             <>

packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx

@@ -19,6 +19,7 @@ import type {DocumentRoute} from '@theme/DocItem';
 import type {Props} from '@theme/DocPage';
 import IconArrow from '@theme/IconArrow';
 import {matchPath} from '@docusaurus/router';
+import {translate} from '@docusaurus/Translate';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
@@ -93,16 +94,23 @@ function DocPageContent({
             {hiddenSidebar && (
               <div
                 className={styles.collapsedDocSidebar}
-                title="Expand sidebar"
+                title={translate({
-                aria-label="Expand sidebar"
+                  id: 'theme.docs.sidebar.expandButtonTitle',
+                  message: 'Expand sidebar',
+                  description:
+                    'The ARIA label and title attribute for expand button of doc sidebar',
+                })}
+                aria-label={translate({
+                  id: 'theme.docs.sidebar.expandButtonAriaLabel',
+                  message: 'Expand sidebar',
+                  description:
+                    'The ARIA label and title attribute for expand button of doc sidebar',
+                })}
                 tabIndex={0}
                 role="button"
                 onKeyDown={toggleSidebar}
                 onClick={toggleSidebar}>
-                <IconArrow
+                <IconArrow className={styles.expandSidebarButtonIcon} />
-                  aria-label="Expand sidebar"
-                  className={styles.expandSidebarButtonIcon}
-                />
               </div>
             )}
           </div>

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx

@@ -7,14 +7,20 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/DocPaginator';
 
 function DocPaginator(props: Props): JSX.Element {
   const {metadata} = props;
 
   return (
-    <nav className="pagination-nav" aria-label="Blog list page navigation">
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label for the docs pagination',
+      })}>
       <div className="pagination-nav__item">
         {metadata.previous && (
           <Link
@@ -22,7 +28,7 @@ function DocPaginator(props: Props): JSX.Element {
             to={metadata.previous.permalink}>
             <div className="pagination-nav__sublabel">
               <Translate
-                id="theme.DocPaginator.previous"
+                id="theme.docs.paginator.previous"
                 description="The label used to navigate to the previous doc">
                 Previous
               </Translate>
@@ -38,7 +44,7 @@ function DocPaginator(props: Props): JSX.Element {
           <Link className="pagination-nav__link" to={metadata.next.permalink}>
             <div className="pagination-nav__sublabel">
               <Translate
-                id="theme.DocPaginator.next"
+                id="theme.docs.paginator.next"
                 description="The label used to navigate to the next doc">
                 Next
               </Translate>

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -18,6 +18,7 @@ import type {Props} from '@theme/DocSidebar';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import IconMenu from '@theme/IconMenu';
+import {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
@@ -229,7 +230,21 @@ function DocSidebar({
           },
         )}>
         <button
-          aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
+          aria-label={
+            showResponsiveSidebar
+              ? translate({
+                  id: 'theme.docs.sidebar.responsiveCloseButtonLabel',
+                  message: 'Close menu',
+                  description:
+                    'The ARIA label for close button of mobile doc sidebar',
+                })
+              : translate({
+                  id: 'theme.docs.sidebar.responsiveOpenButtonLabel',
+                  message: 'Open menu',
+                  description:
+                    'The ARIA label for open button of mobile doc sidebar',
+                })
+          }
           aria-haspopup="true"
           className="button button--secondary button--sm menu__button"
           type="button"
@@ -270,17 +285,24 @@ function DocSidebar({
       {hideableSidebar && (
         <button
           type="button"
-          title="Collapse sidebar"
+          title={translate({
-          aria-label="Collapse sidebar"
+            id: 'theme.docs.sidebar.collapseButtonTitle',
+            message: 'Collapse sidebar',
+            description:
+              'The title attribute for collapse button of doc sidebar',
+          })}
+          aria-label={translate({
+            id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+            message: 'Collapse sidebar',
+            description:
+              'The title attribute for collapse button of doc sidebar',
+          })}
           className={clsx(
             'button button--secondary button--outline',
             styles.collapseSidebarButton,
           )}
           onClick={onCollapse}>
-          <IconArrow
+          <IconArrow className={styles.collapseSidebarButtonIcon} />
-            className={styles.collapseSidebarButtonIcon}
-            aria-label="Collapse sidebar"
-          />
         </button>
       )}
     </div>

packages/docusaurus-theme-classic/src/theme/DocVersionSuggestions/index.tsx

@@ -46,6 +46,7 @@ function DocVersionSuggestions(): JSX.Element {
     <div className="alert alert--warning margin-bottom--md" role="alert">
       {
         // TODO need refactoring
+        // TODO need translate after interpolation appears
         activeVersion.name === 'current' ? (
           <div>
             This is unreleased documentation for {siteTitle}{' '}

packages/docusaurus-theme-classic/src/theme/EditThisPage/index.tsx

@@ -16,7 +16,7 @@ export default function EditThisPage({editUrl}: Props): JSX.Element {
     <a href={editUrl} target="_blank" rel="noreferrer noopener">
       <IconEdit />
       <Translate
-        id="theme.EditThisPage.editThisPage"
+        id="theme.common.editThisPage"
         description="The link label to edit the current page">
         Edit this page
       </Translate>

packages/docusaurus-theme-classic/src/theme/Heading/index.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import type {HeadingType, Props} from '@theme/Heading';
+import {translate} from '@docusaurus/Translate';
 import {useThemeConfig} from '@docusaurus/theme-common';
 
 import './styles.css';
@@ -36,7 +37,14 @@ const Heading = (Tag: HeadingType): ((props: Props) => JSX.Element) =>
           id={id}
         />
         {props.children}
-        <a className="hash-link" href={`#${id}`} title="Direct link to heading">
+        <a
+          className="hash-link"
+          href={`#${id}`}
+          title={translate({
+            id: 'theme.common.headingLinkTitle',
+            message: 'Direct link to heading',
+            description: 'Title for link to heading',
+          })}>
           #
         </a>
       </Tag>

packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx

@@ -42,7 +42,7 @@ function SkipToContent(): JSX.Element {
     <div ref={containerRef}>
       <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
-          id="theme.SkipToContent.skipToMainContent"
+          id="theme.common.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>

packages/docusaurus-theme-search-algolia/package.json

@@ -13,7 +13,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docsearch/react": "^3.0.0-alpha.32",
+    "@docsearch/react": "^3.0.0-alpha.33",
     "@docusaurus/core": "2.0.0-alpha.70",
     "@docusaurus/theme-common": "2.0.0-alpha.70",
     "@docusaurus/utils": "2.0.0-alpha.70",

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

@@ -15,6 +15,7 @@ import Head from '@docusaurus/Head';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
+import {translate} from '@docusaurus/Translate';
 
 let DocSearchModal = null;
 
@@ -144,6 +145,12 @@ function DocSearch({contextualSearch, ...props}) {
     searchButtonRef,
   });
 
+  const translatedSearchLabel = translate({
+    id: 'theme.SearchBar.label',
+    message: 'Search',
+    description: 'The ARIA label and placeholder for search button',
+  });
+
   return (
     <>
       <Head>
@@ -163,6 +170,10 @@ function DocSearch({contextualSearch, ...props}) {
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={onOpen}
         ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
       />
 
       {isOpen &&

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js

@@ -21,6 +21,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAllDocsData} from '@theme/hooks/useDocs';
 import useSearchQuery from '@theme/hooks/useSearchQuery';
 import Layout from '@theme/Layout';
+import Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
@@ -99,12 +100,11 @@ const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
   );
 };
 
-function Search() {
+function SearchPage() {
   const {
-    siteConfig: {
+    siteConfig: {themeConfig: {algolia: {appId, apiKey, indexName} = {}}} = {},
-      themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
-    } = {},
   } = useDocusaurusContext();
+
   const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
   const {searchValue, updateSearchPath} = useSearchQuery();
   const [searchQuery, setSearchQuery] = useState(searchValue);
@@ -236,8 +236,16 @@ function Search() {
 
   const getTitle = () =>
     searchQuery
-      ? `Search results for "${searchQuery}"`
+      ? `${translate({
-      : 'Search the documentation';
+          id: 'theme.SearchPage.existingResultsTitle',
+          message: 'Search results for',
+          description: 'The search page title for non-empty query',
+        })} "${searchQuery}"`
+      : translate({
+          id: 'theme.SearchPage.emptyResultsTitle',
+          message: 'Search the documentation',
+          description: 'The search page title for empty query',
+        });
 
   const makeSearch = (page = 0) => {
     algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
@@ -318,8 +326,16 @@ function Search() {
               type="search"
               name="q"
               className={styles.searchQueryInput}
-              placeholder="Type your search here"
+              placeholder={translate({
-              aria-label="Search"
+                id: 'theme.SearchPage.inputPlaceholder',
+                message: 'Type your search here',
+                description: 'The placeholder for search page input',
+              })}
+              aria-label={translate({
+                id: 'theme.SearchPage.inputLabel',
+                message: 'Search',
+                description: 'The ARIA label for search page input',
+              })}
               onChange={(e) => setSearchQuery(e.target.value)}
               value={searchQuery}
               autoComplete="off"
@@ -349,12 +365,15 @@ function Search() {
               target="_blank"
               rel="noopener noreferrer"
               href="https://www.algolia.com/"
-              aria-label="Search">
+              aria-label={translate({
+                id: 'theme.SearchPage.algoliaLabel',
+                message: 'Search by Algolia',
+                description: 'The ARIA label for Algolia mention',
+              })}>
               <svg
                 viewBox="0 0 168 24"
                 className={styles.algoliaLogo}
-                xmlns="http://www.w3.org/2000/svg"
+                xmlns="http://www.w3.org/2000/svg">
-                aria-label="Search by Algolia">
                 <g fill="none">
                   <path
                     className={styles.algoliaLogoPathFill}
@@ -420,7 +439,13 @@ function Search() {
         ) : (
           [
             searchQuery && !searchResultState.loading && (
-              <p key="no-results">No results were found</p>
+              <p key="no-results">
+                <Translate
+                  id="theme.SearchPage.noResultsText"
+                  description="The paragraph for empty search result">
+                  No results were found
+                </Translate>
+              </p>
             ),
             !!searchResultState.loading && (
               <div key="spinner" className={styles.loadingSpinner} />
@@ -430,7 +455,13 @@ function Search() {
 
         {searchResultState.hasMore && (
           <div className={styles.loader} ref={setLoaderRef}>
-            <span>Fetching new results...</span>
+            <span>
+              <Translate
+                id="theme.SearchPage.fetchingNewResults"
+                description="The paragraph for fetching new search results">
+                Fetching new results...
+              </Translate>
+            </span>
           </div>
         )}
       </div>
@@ -438,4 +469,4 @@ function Search() {
   );
 }
 
-export default Search;
+export default SearchPage;

yarn.lock

@@ -1248,19 +1248,19 @@
     enabled "2.0.x"
     kuler "^2.0.0"
 
-"@docsearch/css@3.0.0-alpha.32":
+"@docsearch/css@3.0.0-alpha.33":
-  version "3.0.0-alpha.32"
+  version "3.0.0-alpha.33"
-  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.0.0-alpha.32.tgz#3d89c8db4035531d201f74ef2115f72094a24036"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.0.0-alpha.33.tgz#36c8d61ec001d678b501adf49117413dd9c41fa3"
-  integrity sha512-wafLX/jT1NPAwifPhzMJX394PjKdqf5TA4cz/JgvBYR1/+MiErLk/pyCmocXkawWGR17/6u2qw3wYvXu/Qe/DQ==
+  integrity sha512-7k/d960WaCRPxZqKwasSH2+pmKW+IeQ14zvS8t7T59OeW24G4N9xuLnpBf1XZ6IyS2AS3KPwRomwRX78qpETVg==
 
-"@docsearch/react@^3.0.0-alpha.32":
+"@docsearch/react@^3.0.0-alpha.33":
-  version "3.0.0-alpha.32"
+  version "3.0.0-alpha.33"
-  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.0.0-alpha.32.tgz#ae3fa82e9c88683d9415bc439c4af7e2c0cfa5b7"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.0.0-alpha.33.tgz#2f8b5d90990b54b59db1a90e405d8008178e972a"
-  integrity sha512-2jqzPJu4y0mWiwwm+Kfgf/97Q8XaGxj1+jJfGJpJLkJyD8S2tK4OikyIRWI9gI9k3m48HxFm0+P8uAYYtIyjqA==
+  integrity sha512-XOhaUsxiq62umpGMfgzey45H6Id7qOa2DyJJOIpZHEeo5uFVkxc7Qamng+ETdUIn9ql8tWRPzjTh5OAtjJAgxw==
   dependencies:
     "@algolia/autocomplete-core" "^1.0.0-alpha.35"
     "@algolia/autocomplete-preset-algolia" "^1.0.0-alpha.35"
-    "@docsearch/css" "3.0.0-alpha.32"
+    "@docsearch/css" "3.0.0-alpha.33"
     algoliasearch "^4.0.0"
 
 "@docusaurus/react-loadable@5.5.0":