feat(algolia-search): allow translating search modal #7666
Conversation
Josh-Cena
changed the title
Try |
| @@ -221,6 +222,149 @@ function DocSearch({ | |||
| description: 'The ARIA label and placeholder for search button', | |||
| }); | |||
|
|
|||
| const translatedModal: DocSearchTranslations = { | |||
There was a problem hiding this comment.
Can we extract all the translations to a separate file, or at least outside the component?
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
@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... 😜
There was a problem hiding this comment.
Um, it just means copying everything to another file like src/theme/searchTranslations.ts, and then importing it as import translations from "@theme/searchTranslations"...
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
⚡️ Lighthouse report for the deploy preview of this PR
|
| 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', | ||
| }), |
There was a problem hiding this comment.
Looks repetitive to me. What are the odds that the user wants different translations for these labels?
There was a problem hiding this comment.
OK. I'll change it to one
Thank you. But my test doesn't work, I need to look into the details of why it keeps the default values of DocSearch. It's the Modal part (only) that doesn't translate ..... 👀 |
|
Did you run |
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/translations.ts
Outdated
Show resolved
Hide resolved
|
Type-checking errors because |
|
cc @shortcuts |
|
Hey, should be fixed in 3.1.1 for the DocSearch part, I've pinged the Autocomplete team for the Thanks for the ping :D |
|
@Josh-Cena @shortcuts It looks good now |
|
LGTM 👍 thanks |
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Pre-flight checklist
Motivation
The Algolia Search Modal is not translatable. This should solve the problem.
Test Plan
I'm still trying to figure out how to test the site locally in French... help meTested locally:
Test links
Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/
Related issues/PRs
#4542