Skip to content

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

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.

Sign up for GitHub

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

Merged
slorber merged 8 commits into from
Feb 16, 2023
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
08b63ea
Begin Work
Mysterious-Dev Feb 1, 2023
4abadd7
Update tests
Mysterious-Dev Feb 1, 2023
4b2a657
Finish update tests
Mysterious-Dev Feb 1, 2023
2c04eac
Try formatting
Mysterious-Dev Feb 1, 2023
9f66723
Change description of keys
Mysterious-Dev Feb 1, 2023
9e8c12e
Update tests snapshot
Mysterious-Dev Feb 1, 2023
b629694
Tweak test result
Mysterious-Dev Feb 8, 2023
c44511d
do not mutate translation input args
slorber Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap
View file
Open in desktop
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 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 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 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 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 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 logo (translated)",
"src": "img/docusaurus.svg",
},
"style": "dark",
"title": "navbar title (translated)",
},
Expand Down
12 changes: 12 additions & 0 deletions packages/docusaurus-theme-classic/src/__tests__/translations.test.ts
View file
Open in desktop
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 logo',
src: 'img/docusaurus.svg',
},
style: 'dark',
hideOnScroll: false,
items: [
Expand All @@ -31,6 +35,10 @@ const ThemeConfigSample = {
],
},
footer: {
logo: {
alt: 'footer alt 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 logo',
src: 'img/docusaurus.svg',
},
copyright: 'Copyright FB',
style: 'light',
links: [
Expand Down
46 changes: 44 additions & 2 deletions packages/docusaurus-theme-classic/src/translations.ts
View file
Open in desktop
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,17 @@ function translateNavbar(
if (!navbarTranslations) {
return navbar;
}

const {logo} = navbar;

if (logo) {
logo.alt = navbarTranslations[`logo.alt`]?.message ?? navbar.logo?.alt;
}
Copy link
Collaborator

@slorber slorber Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer to not mutate the logo object here but instead create a copy with the changes needed

It's likely that I'll want to make these translation methods pure in the future and may ensure that by freezing the input objects to ensure they are not modified.

Will do the fix and merge

Copy link
Contributor Author

@Mysterious-Dev Mysterious-Dev Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary for me to do something?

Copy link
Collaborator

@slorber slorber Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I did the changes already ;)


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 +140,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 +184,17 @@ function translateFooter(

const copyright = footerTranslations.copyright?.message ?? footer.copyright;

const {logo} = footer;

if (logo) {
logo.alt = footerTranslations[`logo.alt`]?.message ?? footer.logo?.alt;
}

return {
...footer,
links,
copyright,
logo,
};
}

Expand Down