feat(theme): add ability to translate navbar+footer logo alt text (#8616

) Co-authored-by: sebastienlorber <[email protected]>
facebook · Feb 16, 2023 · 10a8d12 · 10a8d12
1 parent 533777c
commit 10a8d12
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 2 deletions.
diff --git a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap
@@ -16,6 +16,10 @@ exports[`getTranslationFiles returns translation files matching snapshot 1`] = `
         "description": "Navbar item with label Dropdown item 2",
         "message": "Dropdown item 2",
       },
+      "logo.alt": {
+        "description": "The alt text of navbar logo",
+        "message": "navbar alt text logo",
+      },
       "title": {
         "description": "The title in the navbar",
         "message": "navbar title",
@@ -49,6 +53,10 @@ exports[`getTranslationFiles returns translation files matching snapshot 1`] = `
         "description": "The title of the footer links column with title=Footer link column 2 in the footer",
         "message": "Footer link column 2",
       },
+      "logo.alt": {
+        "description": "The alt text of footer logo",
+        "message": "footer alt text logo",
+      },
     },
     "path": "footer",
   },
@@ -71,6 +79,10 @@ exports[`getTranslationFiles returns translation files matching snapshot 2`] = `
         "description": "Navbar item with label Dropdown item 2",
         "message": "Dropdown item 2",
       },
+      "logo.alt": {
+        "description": "The alt text of navbar logo",
+        "message": "navbar alt text logo",
+      },
       "title": {
         "description": "The title in the navbar",
         "message": "navbar title",
@@ -92,6 +104,10 @@ exports[`getTranslationFiles returns translation files matching snapshot 2`] = `
         "description": "The label of footer link with label=Link 2 linking to https://facebook.com",
         "message": "Link 2",
       },
+      "logo.alt": {
+        "description": "The alt text of footer logo",
+        "message": "footer alt text logo",
+      },
     },
     "path": "footer",
   },
@@ -131,6 +147,10 @@ exports[`translateThemeConfig returns translated themeConfig 1`] = `
         "title": "Footer link column 2 (translated)",
       },
     ],
+    "logo": {
+      "alt": "footer alt text logo (translated)",
+      "src": "img/docusaurus.svg",
+    },
     "style": "light",
   },
   "navbar": {
@@ -150,6 +170,10 @@ exports[`translateThemeConfig returns translated themeConfig 1`] = `
         "label": "Dropdown (translated)",
       },
     ],
+    "logo": {
+      "alt": "navbar alt text logo (translated)",
+      "src": "img/docusaurus.svg",
+    },
     "style": "dark",
     "title": "navbar title (translated)",
   },

diff --git a/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts b/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts
@@ -18,6 +18,10 @@ const ThemeConfigSample = {
   },
   navbar: {
     title: 'navbar title',
+    logo: {
+      alt: 'navbar alt text logo',
+      src: 'img/docusaurus.svg',
+    },
     style: 'dark',
     hideOnScroll: false,
     items: [
@@ -31,6 +35,10 @@ const ThemeConfigSample = {
     ],
   },
   footer: {
+    logo: {
+      alt: 'footer alt text logo',
+      src: 'img/docusaurus.svg',
+    },
     copyright: 'Copyright FB',
     style: 'light',
     links: [
@@ -52,6 +60,10 @@ const ThemeConfigSample = {
 const ThemeConfigSampleSimpleFooter: ThemeConfig = {
   ...ThemeConfigSample,
   footer: {
+    logo: {
+      alt: 'footer alt text logo',
+      src: 'img/docusaurus.svg',
+    },
     copyright: 'Copyright FB',
     style: 'light',
     links: [

diff --git a/packages/docusaurus-theme-classic/src/translations.ts b/packages/docusaurus-theme-classic/src/translations.ts
@@ -45,7 +45,20 @@ function getNavbarTranslationFile(navbar: Navbar): TranslationFileContent {
     ? {title: {message: navbar.title, description: 'The title in the navbar'}}
     : {};
 
-  return mergeTranslations([titleTranslations, navbarItemsTranslations]);
+  const logoAlt: TranslationFileContent = navbar.logo?.alt
+    ? {
+        'logo.alt': {
+          message: navbar.logo.alt,
+          description: 'The alt text of navbar logo',
+        },
+      }
+    : {};
+
+  return mergeTranslations([
+    titleTranslations,
+    logoAlt,
+    navbarItemsTranslations,
+  ]);
 }
 function translateNavbar(
   navbar: Navbar,
@@ -54,9 +67,18 @@ function translateNavbar(
   if (!navbarTranslations) {
     return navbar;
   }
+
+  const logo = navbar.logo
+    ? {
+        ...navbar.logo,
+        alt: navbarTranslations[`logo.alt`]?.message ?? navbar.logo?.alt,
+      }
+    : undefined;
+
   return {
     ...navbar,
     title: navbarTranslations.title?.message ?? navbar.title,
+    logo,
     //  TODO handle properly all the navbar item types here!
     items: navbar.items.map((item) => {
       const subItems = item.items?.map((subItem) => ({
@@ -119,7 +141,21 @@ function getFooterTranslationFile(footer: Footer): TranslationFileContent {
       }
     : {};
 
-  return mergeTranslations([footerLinkTitles, footerLinkLabels, copyright]);
+  const logoAlt: TranslationFileContent = footer.logo?.alt
+    ? {
+        'logo.alt': {
+          message: footer.logo.alt,
+          description: 'The alt text of footer logo',
+        },
+      }
+    : {};
+
+  return mergeTranslations([
+    footerLinkTitles,
+    footerLinkLabels,
+    copyright,
+    logoAlt,
+  ]);
 }
 function translateFooter(
   footer: Footer,
@@ -149,10 +185,18 @@ function translateFooter(
 
   const copyright = footerTranslations.copyright?.message ?? footer.copyright;
 
+  const logo = footer.logo
+    ? {
+        ...footer.logo,
+        alt: footerTranslations[`logo.alt`]?.message ?? footer.logo?.alt,
+      }
+    : undefined;
+
   return {
     ...footer,
     links,
     copyright,
+    logo,
   };
 }