From 10a8d1264be2d962dede4bb976e391b923177d96 Mon Sep 17 00:00:00 2001 From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com> Date: Thu, 16 Feb 2023 17:14:45 +0100 Subject: [PATCH] feat(theme): add ability to translate navbar+footer logo alt text (#8616) Co-authored-by: sebastienlorber --- .../__snapshots__/translations.test.ts.snap | 24 ++++++++++ .../src/__tests__/translations.test.ts | 12 +++++ .../src/translations.ts | 48 ++++++++++++++++++- 3 files changed, 82 insertions(+), 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 index d36f4e6959..4b3c3f54a3 100644 --- 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 index ba4d3464ea..2bd55fb081 100644 --- 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 index cc087a87d8..56258c86ee 100644 --- 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, }; }