@@ -8,11 +8,9 @@ import Footer from './components/Footer.js';
88import GetStarted from './pages/GetStarted/get-started.js' ;
99import SupportUs from './pages/SupportUs/SupportUs.js' ;
1010import { createContext } from 'preact' ;
11- import { useLayoutEffect , useState } from 'preact/hooks' ;
12- import { default as i18next , changeLanguage } from 'i18next' ;
13- import { extractLocaleFromUrl , LOCALES , mapLocale } from './i18n' ;
14- import HttpApi from 'i18next-http-backend' ;
15- import { initReactI18next } from "react-i18next" ;
11+ import { useLayoutEffect , useRef } from 'preact/hooks' ;
12+ import { changeLanguage } from 'i18next' ;
13+ import { extractLocaleFromUrl , initTranslations , LOCALES , mapLocale } from './i18n' ;
1614
1715export const LocaleContext = createContext ( 'en' ) ;
1816
@@ -42,34 +40,26 @@ export function App(props: {repoStargazersCount: number}) {
4240
4341export function LocaleProvider ( { children } ) {
4442 const { path } = useLocation ( ) ;
45- const localeId = mapLocale ( extractLocaleFromUrl ( path ) || navigator . language ) ;
46- const [ loaded , setLoaded ] = useState ( false ) ;
43+ const localeId = getLocaleId ( path ) ;
44+ const loadedRef = useRef ( false ) ;
4745
48- useLayoutEffect ( ( ) => {
49- i18next
50- . use ( HttpApi )
51- . use ( initReactI18next ) ;
52- i18next . init ( {
53- lng : localeId ,
54- fallbackLng : "en" ,
55- backend : {
56- loadPath : "/translations/{{lng}}/{{ns}}.json" ,
57- } ,
58- returnEmptyString : false
59- } ) . then ( ( ) => setLoaded ( true ) )
60- } , [ ] ) ;
46+ if ( ! loadedRef . current ) {
47+ initTranslations ( localeId ) ;
48+ loadedRef . current = true ;
49+ } else {
50+ changeLanguage ( localeId ) ;
51+ }
6152
53+ // Update html lang and dir attributes
6254 useLayoutEffect ( ( ) => {
63- if ( ! loaded ) return ;
64- changeLanguage ( localeId ) ;
6555 const correspondingLocale = LOCALES . find ( l => l . id === localeId ) ;
6656 document . documentElement . lang = localeId ;
6757 document . documentElement . dir = correspondingLocale ?. rtl ? "rtl" : "ltr" ;
68- } , [ loaded , localeId ] ) ;
58+ } , [ localeId ] ) ;
6959
7060 return (
7161 < LocaleContext . Provider value = { localeId } >
72- { loaded && children }
62+ { children }
7363 </ LocaleContext . Provider >
7464 ) ;
7565}
@@ -78,12 +68,26 @@ if (typeof window !== 'undefined') {
7868 hydrate ( < App repoStargazersCount = { FALLBACK_STARGAZERS_COUNT } /> , document . getElementById ( 'app' ) ! ) ;
7969}
8070
71+ function getLocaleId ( path : string ) {
72+ const extractedLocale = extractLocaleFromUrl ( path ) ;
73+ if ( extractedLocale ) return mapLocale ( extractedLocale ) ;
74+ if ( typeof window === "undefined" ) return 'en' ;
75+ return mapLocale ( navigator . language ) ;
76+ }
77+
8178export async function prerender ( data ) {
8279 // Fetch the stargazer count of the Trilium's GitHub repo on prerender to pass
8380 // it to the App component for SSR.
8481 // This ensures the GitHub API is not called on every page load in the client.
8582 const stargazersCount = await getRepoStargazersCount ( ) ;
8683
87- return await ssr ( < App repoStargazersCount = { stargazersCount } { ...data } /> ) ;
84+ const { html, links } = await ssr ( < App repoStargazersCount = { stargazersCount } { ...data } /> ) ;
85+ return {
86+ html,
87+ links,
88+ head : {
89+ lang : extractLocaleFromUrl ( data . url ) ?? "en"
90+ }
91+ }
8892}
8993
0 commit comments