Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Feb 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
},
Expand All @@ -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",
Expand All @@ -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",
},
Expand Down Expand Up @@ -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": {
Expand All @@ -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)",
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -31,6 +35,10 @@ const ThemeConfigSample = {
],
},
footer: {
logo: {
alt: 'footer alt text logo',
src: 'img/docusaurus.svg',
},
copyright: 'Copyright FB',
style: 'light',
links: [
Expand All @@ -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: [
Expand Down
48 changes: 46 additions & 2 deletions packages/docusaurus-theme-classic/src/translations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) => ({
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
};
}

Expand Down