3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-23 11:38:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): add more translatable strings (#4219)

Browse source 
* refactor(v2): add more translatable strings

* Apply suggestions from code review

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Fixes

* Updates

* Localize direct link to heading

* typo + add french translations

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2021-02-18 13:29:51 +03:00 • committed by GitHub
parent 75228c4b8d
commit 08fa318599
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 267 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -15,6 +15,7 @@ import Head from '@docusaurus/Head';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
import {translate} from '@docusaurus/Translate';
let DocSearchModal = null;
@ -144,6 +145,12 @@ function DocSearch({contextualSearch, ...props}) {
searchButtonRef,
});
const translatedSearchLabel = translate({
id: 'theme.SearchBar.label',
message: 'Search',
description: 'The ARIA label and placeholder for search button',
});
return (
<>
<Head>
@ -163,6 +170,10 @@ function DocSearch({contextualSearch, ...props}) {
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
/>
{isOpen &&

59
packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
View file

@ -21,6 +21,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useAllDocsData} from '@theme/hooks/useDocs';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import Layout from '@theme/Layout';
import Translate, {translate} from '@docusaurus/Translate';
import styles from './styles.module.css';
@ -99,12 +100,11 @@ const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
);
};
function Search() {
function SearchPage() {
const {
siteConfig: {
themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
} = {},
siteConfig: {themeConfig: {algolia: {appId, apiKey, indexName} = {}}} = {},
} = useDocusaurusContext();
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
const {searchValue, updateSearchPath} = useSearchQuery();
const [searchQuery, setSearchQuery] = useState(searchValue);
@ -236,8 +236,16 @@ function Search() {
const getTitle = () =>
searchQuery
? `Search results for "${searchQuery}"`
: 'Search the documentation';
? `${translate({
id: 'theme.SearchPage.existingResultsTitle',
message: 'Search results for',
description: 'The search page title for non-empty query',
})} "${searchQuery}"`
: translate({
id: 'theme.SearchPage.emptyResultsTitle',
message: 'Search the documentation',
description: 'The search page title for empty query',
});
const makeSearch = (page = 0) => {
algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
@ -318,8 +326,16 @@ function Search() {
type="search"
name="q"
className={styles.searchQueryInput}
placeholder="Type your search here"
aria-label="Search"
placeholder={translate({
id: 'theme.SearchPage.inputPlaceholder',
message: 'Type your search here',
description: 'The placeholder for search page input',
})}
aria-label={translate({
id: 'theme.SearchPage.inputLabel',
message: 'Search',
description: 'The ARIA label for search page input',
})}
onChange={(e) => setSearchQuery(e.target.value)}
value={searchQuery}
autoComplete="off"
@ -349,12 +365,15 @@ function Search() {
target="_blank"
rel="noopener noreferrer"
href="https://www.algolia.com/"
aria-label="Search">
aria-label={translate({
id: 'theme.SearchPage.algoliaLabel',
message: 'Search by Algolia',
description: 'The ARIA label for Algolia mention',
})}>
<svg
viewBox="0 0 168 24"
className={styles.algoliaLogo}
xmlns="http://www.w3.org/2000/svg"
aria-label="Search by Algolia">
xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path
className={styles.algoliaLogoPathFill}
@ -420,7 +439,13 @@ function Search() {
) : (
[
searchQuery && !searchResultState.loading && (
<p key="no-results">No results were found</p>
<p key="no-results">
<Translate
id="theme.SearchPage.noResultsText"
description="The paragraph for empty search result">
No results were found
</Translate>
</p>
),
!!searchResultState.loading && (
<div key="spinner" className={styles.loadingSpinner} />
@ -430,7 +455,13 @@ function Search() {
{searchResultState.hasMore && (
<div className={styles.loader} ref={setLoaderRef}>
<span>Fetching new results...</span>
<span>
<Translate
id="theme.SearchPage.fetchingNewResults"
description="The paragraph for fetching new search results">
Fetching new results...
</Translate>
</span>
</div>
)}
</div>
@ -438,4 +469,4 @@ function Search() {
);
}
export default Search;
export default SearchPage;