Skip to content

Commit 0fa5290

Browse files
authored
Website static fixes (#7525)
2 parents 715fe77 + c4f57f3 commit 0fa5290

37 files changed

+68
-27
lines changed

apps/website/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html>
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.ico" />

apps/website/src/i18n.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ describe("swapLocale", () => {
1919
expect(swapLocaleInUrl("/ro/get-started", "ro")).toStrictEqual("/ro/get-started");
2020
expect(swapLocaleInUrl("/en/get-started", "ro")).toStrictEqual("/ro/get-started");
2121
expect(swapLocaleInUrl("/ro/", "en")).toStrictEqual("/en/");
22+
expect(swapLocaleInUrl("/ro", "en")).toStrictEqual("/en");
2223
});
2324
});
2425

apps/website/src/i18n.ts

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
1+
import i18next from "i18next";
2+
import { initReactI18next } from "react-i18next";
3+
14
interface Locale {
25
id: string;
36
name: string;
47
rtl?: boolean;
58
}
69

10+
i18next.use(initReactI18next);
11+
const localeFiles = import.meta.glob("./translations/*/translation.json", { eager: true });
12+
const resources: Record<string, Record<string, Record<string, string>>> = {};
13+
for (const [path, module] of Object.entries(localeFiles)) {
14+
const id = path.split("/").at(-2);
15+
if (!id) continue;
16+
17+
const translations = (module as any).default ?? module;
18+
resources[id] = { translation: translations };
19+
}
20+
21+
export function initTranslations(lng: string) {
22+
i18next.init({
23+
fallbackLng: "en",
24+
lng,
25+
returnEmptyString: false,
26+
resources,
27+
initAsync: false,
28+
react: {
29+
useSuspense: false
30+
}
31+
});
32+
}
33+
734
export const LOCALES: Locale[] = [
835
{ id: "en", name: "English" },
936
{ id: "ro", name: "Română" },
@@ -35,7 +62,13 @@ export function mapLocale(locale: string) {
3562
export function swapLocaleInUrl(url: string, newLocale: string) {
3663
const components = url.split("/");
3764
if (components.length === 2) {
38-
return `/${newLocale}${url}`;
65+
const potentialLocale = components[1];
66+
const correspondingLocale = LOCALES.find(l => l.id === potentialLocale);
67+
if (correspondingLocale) {
68+
return `/${newLocale}`;
69+
} else {
70+
return `/${newLocale}${url}`;
71+
}
3972
} else {
4073
components[1] = newLocale;
4174
return components.join("/");

apps/website/src/index.tsx

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ import Footer from './components/Footer.js';
88
import GetStarted from './pages/GetStarted/get-started.js';
99
import SupportUs from './pages/SupportUs/SupportUs.js';
1010
import { 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

1715
export const LocaleContext = createContext('en');
1816

@@ -42,34 +40,26 @@ export function App(props: {repoStargazersCount: number}) {
4240

4341
export 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+
8178
export 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

Comments
 (0)