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.

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

feat(algolia-search): allow translating search modal #7666

Merged
merged 9 commits into from
Jul 6, 2022
Merged

feat(algolia-search): allow translating search modal #7666

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a3534d4
feat: add translations for modal search Algolia
forresst Jun 23, 2022
b177a48
zh
Josh-Cena Jun 23, 2022
6ac9a3f
extract translations to a separate file and delete duplicate translat…
forresst Jun 23, 2022
a689bc4
Update packages/docusaurus-theme-search-algolia/src/theme/SearchBar/t…
Josh-Cena Jun 23, 2022
8151ab4
Update theme-search-algolia.json
Josh-Cena Jun 23, 2022
64a10bb
Update theme-search-algolia.json
Josh-Cena Jun 23, 2022
0208ef1
refactor
Josh-Cena Jun 23, 2022
62ddf74
Merge branch 'main' into translate-modal-algolia
forresst Jul 5, 2022
b79c730
fix translations ar and vi
forresst Jul 5, 2022
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
145 changes: 145 additions & 0 deletions packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import Translate, {translate} from '@docusaurus/Translate';
import type {
DocSearchModal as DocSearchModalType,
DocSearchModalProps,
DocSearchTranslations,
} from '@docsearch/react';
import type {
InternalDocSearchHit,
Expand Down Expand Up @@ -221,6 +222,149 @@ function DocSearch({
description: 'The ARIA label and placeholder for search button',
});

const translatedModal: DocSearchTranslations = {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we extract all the translations to a separate file, or at least outside the component?

Copy link
Collaborator

Choose a reason for hiding this comment

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

agree 👍 we'll want to reduce the size of this component, and probably later also use some of those translations on the search page (quite old/legacy, but we'll want to refactor/upgrade someday)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Josh-Cena @slorber Agree in principle. It makes sense. How should I implement this? I haven't found any examples in the current code that already do this. Unless I have misunderstood the request... 😜

Copy link
Collaborator

Choose a reason for hiding this comment

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

Um, it just means copying everything to another file like src/theme/searchTranslations.ts, and then importing it as import translations from "@theme/searchTranslations"...

modal: {
searchBox: {
resetButtonTitle: translate({
id: 'theme.SearchModal.searchBox.resetButtonTitle',
message: 'Clear the query',
description: 'The label for search box reset button',
}),
resetButtonAriaLabel: translate({
id: 'theme.SearchModal.searchBox.resetButtonAriaLabel',
message: 'Clear the query',
description: 'The ARIA label for search box reset button',
}),
cancelButtonText: translate({
id: 'theme.SearchModal.searchBox.cancelButtonText',
message: 'Cancel',
description: 'The label for search box cancel button',
}),
cancelButtonAriaLabel: translate({
id: 'theme.SearchModal.searchBox.cancelButtonAriaLabel',
message: 'Cancel',
description: 'The ARIA label for search box cancel button',
}),
Copy link
Collaborator

Choose a reason for hiding this comment

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

Looks repetitive to me. What are the odds that the user wants different translations for these labels?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK. I'll change it to one

},
startScreen: {
recentSearchesTitle: translate({
id: 'theme.SearchModal.startScreen.recentSearchesTitle',
message: 'Recent',
description: 'The title for recent searches',
}),
noRecentSearchesText: translate({
id: 'theme.SearchModal.startScreen.noRecentSearchesText',
message: 'No recent searches',
description: 'The text when no recent searches',
}),
saveRecentSearchButtonTitle: translate({
id: 'theme.SearchModal.startScreen.saveRecentSearchButtonTitle',
message: 'Save this search',
description: 'The label for save recent search button',
}),
removeRecentSearchButtonTitle: translate({
id: 'theme.SearchModal.startScreen.removeRecentSearchButtonTitle',
message: 'Remove this search from history',
description: 'The label for remove recent search button',
}),
favoriteSearchesTitle: translate({
id: 'theme.SearchModal.startScreen.favoriteSearchesTitle',
message: 'Favorite',
description: 'The title for favorite searches',
}),
removeFavoriteSearchButtonTitle: translate({
id: 'theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle',
message: 'Remove this search from favorites',
description: 'The label for remove favorite search button',
}),
},
errorScreen: {
titleText: translate({
id: 'theme.SearchModal.errorScreen.titleText',
message: 'Unable to fetch results',
description: 'The title for error screen of search modal',
}),
helpText: translate({
id: 'theme.SearchModal.errorScreen.helpText',
message: 'You might want to check your network connection.',
description: 'The help text for error screen of search modal',
}),
},
footer: {
selectText: translate({
id: 'theme.SearchModal.footer.selectText',
message: 'to select',
description: 'The explanatory text of the action for the enter key',
}),
selectKeyAriaLabel: translate({
id: 'theme.SearchModal.footer.selectKeyAriaLabel',
message: 'Enter key',
description:
'The ARIA label for the Enter key button that makes the selection',
}),
navigateText: translate({
id: 'theme.SearchModal.footer.navigateText',
message: 'to navigate',
description:
'The explanatory text of the action for the Arrow up and Arrow down key',
}),
navigateUpKeyAriaLabel: translate({
id: 'theme.SearchModal.footer.navigateUpKeyAriaLabel',
message: 'Arrow up',
description:
'The ARIA label for the Arrow up key button that makes the navigation',
}),
navigateDownKeyAriaLabel: translate({
id: 'theme.SearchModal.footer.navigateDownKeyAriaLabel',
message: 'Arrow down',
description:
'The ARIA label for the Arrow down key button that makes the navigation',
}),
closeText: translate({
id: 'theme.SearchModal.footer.closeText',
message: 'to close',
description: 'The explanatory text of the action for Escape key',
}),
closeKeyAriaLabel: translate({
id: 'theme.SearchModal.footer.closeKeyAriaLabel',
message: 'Escape key',
description:
'The ARIA label for the Escape key button that close the modal',
}),
searchByText: translate({
id: 'theme.SearchModal.footer.searchByText',
message: 'Search by',
description: 'The text explain that the search is making by Algolia',
}),
},
noResultsScreen: {
noResultsText: translate({
id: 'theme.SearchModal.noResultsScreen.noResultsText',
message: 'No results for',
description:
'The text explains that there are no results for the following search',
}),
suggestedQueryText: translate({
id: 'theme.SearchModal.noResultsScreen.suggestedQueryText',
message: 'Try searching for',
description:
'The text for the suggested query when no results are found for the following search',
}),
reportMissingResultsText: translate({
id: 'theme.SearchModal.noResultsScreen.reportMissingResultsText',
message: 'Believe this query should return results?',
description:
'The text for the question where the user thinks there are missing results',
}),
reportMissingResultsLinkText: translate({
id: 'theme.SearchModal.noResultsScreen.reportMissingResultsLinkText',
message: 'Let us know.',
description: 'The text for the link to report missing results',
}),
},
},
};

return (
<>
<Head>
Expand Down Expand Up @@ -263,6 +407,7 @@ function DocSearch({
})}
{...props}
searchParameters={searchParameters}
translations={translatedModal}
/>,
searchContainer.current,
)}
Expand Down
24 changes: 24 additions & 0 deletions packages/docusaurus-theme-translations/locales/ar/theme-search-algolia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
{
"theme.SearchBar.label": "بحث",
"theme.SearchBar.seeAll": "See all {count} results",
"theme.SearchModal.errorScreen.helpText": "You might want to check your network connection.",
"theme.SearchModal.errorScreen.titleText": "Unable to fetch results",
"theme.SearchModal.footer.closeKeyAriaLabel": "Escape key",
"theme.SearchModal.footer.closeText": "to close",
"theme.SearchModal.footer.navigateDownKeyAriaLabel": "Arrow down",
"theme.SearchModal.footer.navigateText": "to navigate",
"theme.SearchModal.footer.navigateUpKeyAriaLabel": "Arrow up",
"theme.SearchModal.footer.searchByText": "Search by",
"theme.SearchModal.footer.selectKeyAriaLabel": "Enter key",
"theme.SearchModal.footer.selectText": "to select",
"theme.SearchModal.noResultsScreen.noResultsText": "No results for",
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": "Let us know.",
"theme.SearchModal.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
"theme.SearchModal.noResultsScreen.suggestedQueryText": "Try searching for",
"theme.SearchModal.searchBox.cancelButtonAriaLabel": "Cancel",
"theme.SearchModal.searchBox.cancelButtonText": "Cancel",
"theme.SearchModal.searchBox.resetButtonAriaLabel": "Clear the query",
"theme.SearchModal.searchBox.resetButtonTitle": "Clear the query",
"theme.SearchModal.startScreen.favoriteSearchesTitle": "Favorite",
"theme.SearchModal.startScreen.noRecentSearchesText": "No recent searches",
"theme.SearchModal.startScreen.recentSearchesTitle": "Recent",
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": "Save this search",
"theme.SearchPage.algoliaLabel": "البحث بواسطه Algolia",
"theme.SearchPage.documentsFound.plurals": "تم العثور على مستند واحد|تم العثور على {count} مستندات",
"theme.SearchPage.emptyResultsTitle": "ابحث في الوثائق",
Expand Down
48 changes: 48 additions & 0 deletions packages/docusaurus-theme-translations/locales/base/theme-search-algolia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,54 @@
"theme.SearchBar.label": "Search",
"theme.SearchBar.label___DESCRIPTION": "The ARIA label and placeholder for search button",
"theme.SearchBar.seeAll": "See all {count} results",
"theme.SearchModal.errorScreen.helpText": "You might want to check your network connection.",
"theme.SearchModal.errorScreen.helpText___DESCRIPTION": "The help text for error screen of search modal",
"theme.SearchModal.errorScreen.titleText": "Unable to fetch results",
"theme.SearchModal.errorScreen.titleText___DESCRIPTION": "The title for error screen of search modal",
"theme.SearchModal.footer.closeKeyAriaLabel": "Escape key",
"theme.SearchModal.footer.closeKeyAriaLabel___DESCRIPTION": "The ARIA label for the Escape key button that close the modal",
"theme.SearchModal.footer.closeText": "to close",
"theme.SearchModal.footer.closeText___DESCRIPTION": "The explanatory text of the action for Escape key",
"theme.SearchModal.footer.navigateDownKeyAriaLabel": "Arrow down",
"theme.SearchModal.footer.navigateDownKeyAriaLabel___DESCRIPTION": "The ARIA label for the Arrow down key button that makes the navigation",
"theme.SearchModal.footer.navigateText": "to navigate",
"theme.SearchModal.footer.navigateText___DESCRIPTION": "The explanatory text of the action for the Arrow up and Arrow down key",
"theme.SearchModal.footer.navigateUpKeyAriaLabel": "Arrow up",
"theme.SearchModal.footer.navigateUpKeyAriaLabel___DESCRIPTION": "The ARIA label for the Arrow up key button that makes the navigation",
"theme.SearchModal.footer.searchByText": "Search by",
"theme.SearchModal.footer.searchByText___DESCRIPTION": "The text explain that the search is making by Algolia",
"theme.SearchModal.footer.selectKeyAriaLabel": "Enter key",
"theme.SearchModal.footer.selectKeyAriaLabel___DESCRIPTION": "The ARIA label for the Enter key button that makes the selection",
"theme.SearchModal.footer.selectText": "to select",
"theme.SearchModal.footer.selectText___DESCRIPTION": "The explanatory text of the action for the enter key",
"theme.SearchModal.noResultsScreen.noResultsText": "No results for",
"theme.SearchModal.noResultsScreen.noResultsText___DESCRIPTION": "The text explains that there are no results for the following search",
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": "Let us know.",
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText___DESCRIPTION": "The text for the link to report missing results",
"theme.SearchModal.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
"theme.SearchModal.noResultsScreen.reportMissingResultsText___DESCRIPTION": "The text for the question where the user thinks there are missing results",
"theme.SearchModal.noResultsScreen.suggestedQueryText": "Try searching for",
"theme.SearchModal.noResultsScreen.suggestedQueryText___DESCRIPTION": "The text for the suggested query when no results are found for the following search",
"theme.SearchModal.searchBox.cancelButtonAriaLabel": "Cancel",
"theme.SearchModal.searchBox.cancelButtonAriaLabel___DESCRIPTION": "The ARIA label for search box cancel button",
"theme.SearchModal.searchBox.cancelButtonText": "Cancel",
"theme.SearchModal.searchBox.cancelButtonText___DESCRIPTION": "The label for search box cancel button",
"theme.SearchModal.searchBox.resetButtonAriaLabel": "Clear the query",
"theme.SearchModal.searchBox.resetButtonAriaLabel___DESCRIPTION": "The ARIA label for search box reset button",
"theme.SearchModal.searchBox.resetButtonTitle": "Clear the query",
"theme.SearchModal.searchBox.resetButtonTitle___DESCRIPTION": "The label for search box reset button",
"theme.SearchModal.startScreen.favoriteSearchesTitle": "Favorite",
"theme.SearchModal.startScreen.favoriteSearchesTitle___DESCRIPTION": "The title for favorite searches",
"theme.SearchModal.startScreen.noRecentSearchesText": "No recent searches",
"theme.SearchModal.startScreen.noRecentSearchesText___DESCRIPTION": "The text when no recent searches",
"theme.SearchModal.startScreen.recentSearchesTitle": "Recent",
"theme.SearchModal.startScreen.recentSearchesTitle___DESCRIPTION": "The title for recent searches",
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle___DESCRIPTION": "The label for remove favorite search button",
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle___DESCRIPTION": "The label for remove recent search button",
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": "Save this search",
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle___DESCRIPTION": "The label for save recent search button",
"theme.SearchPage.algoliaLabel": "Search by Algolia",
"theme.SearchPage.algoliaLabel___DESCRIPTION": "The ARIA label for Algolia mention",
"theme.SearchPage.documentsFound.plurals": "One document found|{count} documents found",
Expand Down
24 changes: 24 additions & 0 deletions packages/docusaurus-theme-translations/locales/bn/theme-search-algolia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
{
"theme.SearchBar.label": "সার্চ",
"theme.SearchBar.seeAll": "See all {count} results",
"theme.SearchModal.errorScreen.helpText": "You might want to check your network connection.",
"theme.SearchModal.errorScreen.titleText": "Unable to fetch results",
"theme.SearchModal.footer.closeKeyAriaLabel": "Escape key",
"theme.SearchModal.footer.closeText": "to close",
"theme.SearchModal.footer.navigateDownKeyAriaLabel": "Arrow down",
"theme.SearchModal.footer.navigateText": "to navigate",
"theme.SearchModal.footer.navigateUpKeyAriaLabel": "Arrow up",
"theme.SearchModal.footer.searchByText": "Search by",
"theme.SearchModal.footer.selectKeyAriaLabel": "Enter key",
"theme.SearchModal.footer.selectText": "to select",
"theme.SearchModal.noResultsScreen.noResultsText": "No results for",
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": "Let us know.",
"theme.SearchModal.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
"theme.SearchModal.noResultsScreen.suggestedQueryText": "Try searching for",
"theme.SearchModal.searchBox.cancelButtonAriaLabel": "Cancel",
"theme.SearchModal.searchBox.cancelButtonText": "Cancel",
"theme.SearchModal.searchBox.resetButtonAriaLabel": "Clear the query",
"theme.SearchModal.searchBox.resetButtonTitle": "Clear the query",
"theme.SearchModal.startScreen.favoriteSearchesTitle": "Favorite",
"theme.SearchModal.startScreen.noRecentSearchesText": "No recent searches",
"theme.SearchModal.startScreen.recentSearchesTitle": "Recent",
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": "Save this search",
"theme.SearchPage.algoliaLabel": "আলগোলিয়া দ্বারা অনুসন্ধান করুন",
"theme.SearchPage.documentsFound.plurals": "একটি ডকুমেন্ট পাওয়া গেছে|{count} ডকুমেন্টস পাওয়া গেছে",
"theme.SearchPage.emptyResultsTitle": "ডকুমেন্টেশন অনুসন্ধান করুন",
Expand Down
24 changes: 24 additions & 0 deletions packages/docusaurus-theme-translations/locales/cs/theme-search-algolia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
{
"theme.SearchBar.label": "Hledat",
"theme.SearchBar.seeAll": "See all {count} results",
"theme.SearchModal.errorScreen.helpText": "You might want to check your network connection.",
"theme.SearchModal.errorScreen.titleText": "Unable to fetch results",
"theme.SearchModal.footer.closeKeyAriaLabel": "Escape key",
"theme.SearchModal.footer.closeText": "to close",
"theme.SearchModal.footer.navigateDownKeyAriaLabel": "Arrow down",
"theme.SearchModal.footer.navigateText": "to navigate",
"theme.SearchModal.footer.navigateUpKeyAriaLabel": "Arrow up",
"theme.SearchModal.footer.searchByText": "Search by",
"theme.SearchModal.footer.selectKeyAriaLabel": "Enter key",
"theme.SearchModal.footer.selectText": "to select",
"theme.SearchModal.noResultsScreen.noResultsText": "No results for",
"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": "Let us know.",
"theme.SearchModal.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
"theme.SearchModal.noResultsScreen.suggestedQueryText": "Try searching for",
"theme.SearchModal.searchBox.cancelButtonAriaLabel": "Cancel",
"theme.SearchModal.searchBox.cancelButtonText": "Cancel",
"theme.SearchModal.searchBox.resetButtonAriaLabel": "Clear the query",
"theme.SearchModal.searchBox.resetButtonTitle": "Clear the query",
"theme.SearchModal.startScreen.favoriteSearchesTitle": "Favorite",
"theme.SearchModal.startScreen.noRecentSearchesText": "No recent searches",
"theme.SearchModal.startScreen.recentSearchesTitle": "Recent",
"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
"theme.SearchModal.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
"theme.SearchModal.startScreen.saveRecentSearchButtonTitle": "Save this search",
"theme.SearchPage.algoliaLabel": "Vyhledávání od Algolia",
"theme.SearchPage.documentsFound.plurals": "Jeden dokument nalezen|{count} dokumenty nalezeny|{count} dokumentů nalezeno",
"theme.SearchPage.emptyResultsTitle": "Prohledat dokumentaci",
Expand Down
Loading