diff --git a/apps/sodo-search/src/App.js b/apps/sodo-search/src/App.js
index f67ba9f80d..e4db34bd86 100644
--- a/apps/sodo-search/src/App.js
+++ b/apps/sodo-search/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
import AppContext from './AppContext';
import PopupModal from './components/PopupModal';
import SearchIndex from './search-index.js';
+import i18nLib from '@tryghost/i18n';
export default class App extends React.Component {
constructor(props) {
@@ -13,11 +14,15 @@ export default class App extends React.Component {
apiKey: props.apiKey
});
+ const i18nLanguage = this.props.locale || 'en';
+ const i18n = i18nLib(i18nLanguage, 'search');
+
this.state = {
searchIndex,
showPopup: false,
indexStarted: false,
- indexComplete: false
+ indexComplete: false,
+ t: i18n.t
};
this.inputRef = React.createRef();
@@ -163,7 +168,8 @@ export default class App extends React.Component {
...data
});
}
- }
+ },
+ t: this.state.t
}}>
diff --git a/apps/sodo-search/src/AppContext.js b/apps/sodo-search/src/AppContext.js
index e8648eaa9f..420758711d 100644
--- a/apps/sodo-search/src/AppContext.js
+++ b/apps/sodo-search/src/AppContext.js
@@ -13,7 +13,8 @@ const AppContext = React.createContext({
dispatch: (_action, _data) => {},
searchIndex: null,
indexComplete: false,
- searchValue: ''
+ searchValue: '',
+ t: () => {}
});
export default AppContext;
diff --git a/apps/sodo-search/src/components/PopupModal.js b/apps/sodo-search/src/components/PopupModal.js
index 443cd14479..832420e881 100644
--- a/apps/sodo-search/src/components/PopupModal.js
+++ b/apps/sodo-search/src/components/PopupModal.js
@@ -71,7 +71,7 @@ class PopupContent extends React.Component {
}
function SearchBox() {
- const {searchValue, dispatch, inputRef} = useContext(AppContext);
+ const {searchValue, dispatch, inputRef, t} = useContext(AppContext);
const containerRef = useRef(null);
useEffect(() => {
setTimeout(() => {
@@ -117,7 +117,7 @@ function SearchBox() {
}
}}
className='grow -my-5 py-5 -ml-3 pl-3 text-[1.65rem] focus-visible:outline-none placeholder:text-gray-400 outline-none truncate'
- placeholder='Search posts, tags and authors'
+ placeholder={t('Search posts, tags and authors')}
/>
@@ -154,7 +154,7 @@ function Loading() {
}
function CancelButton() {
- const {dispatch} = useContext(AppContext);
+ const {dispatch, t} = useContext(AppContext);
return (
);
}
@@ -195,6 +195,8 @@ function TagListItem({tag, selectedResult, setSelectedResult}) {
}
function TagResults({tags, selectedResult, setSelectedResult}) {
+ const {t} = useContext(AppContext);
+
if (!tags?.length) {
return null;
}
@@ -210,7 +212,7 @@ function TagResults({tags, selectedResult, setSelectedResult}) {
});
return (
-
Tags
+ {t('Tags')}
{TagItems}
);
@@ -355,6 +357,8 @@ function HighlightWord({word, isExcerpt}) {
}
function ShowMoreButton({posts, maxPosts, setMaxPosts}) {
+ const {t} = useContext(AppContext);
+
if (!posts?.length || maxPosts >= posts?.length) {
return null;
}
@@ -366,12 +370,13 @@ function ShowMoreButton({posts, maxPosts, setMaxPosts}) {
setMaxPosts(updatedMaxPosts);
}}
>
- Show more results
+ {t('Show more results')}
);
}
function PostResults({posts, selectedResult, setSelectedResult}) {
+ const {t} = useContext(AppContext);
const [maxPosts, setMaxPosts] = useState(DEFAULT_MAX_POSTS);
useEffect(() => {
setMaxPosts(DEFAULT_MAX_POSTS);
@@ -392,7 +397,7 @@ function PostResults({posts, selectedResult, setSelectedResult}) {
});
return (
-
Posts
+ {t('Posts')}
{PostItems}
@@ -437,6 +442,8 @@ function AuthorAvatar({name, avatar}) {
}
function AuthorResults({authors, selectedResult, setSelectedResult}) {
+ const {t} = useContext(AppContext);
+
if (!authors?.length) {
return null;
}
@@ -453,7 +460,7 @@ function AuthorResults({authors, selectedResult, setSelectedResult}) {
return (
-
Authors
+ {t('Authors')}
{AuthorItems}
);
@@ -572,9 +579,10 @@ function Results({posts, authors, tags}) {
}
function NoResultsBox() {
+ const {t} = useContext(AppContext);
return (
-
No matches found
+
{t('No matches found')}