feat(website/i18n): get translation to actually render

apps/website/src/components/Card.tsx

@@ -1,7 +1,7 @@
 import { ComponentChildren, HTMLAttributes } from "preact";
 import { Link } from "./Button.js";
 import Icon from "./Icon.js";
-import { t } from "../i18n.js";
+import { useTranslation } from "react-i18next";
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: ComponentChildren;
@@ -13,6 +13,8 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 }
 
 export default function Card({ title, children, imageUrl, iconSvg, className, moreInfoUrl, ...restProps }: CardProps) {
+    const { t } = useTranslation();
+
     return (
         <div className={`card ${className}`} {...restProps}>
             {imageUrl && <img class="image" src={imageUrl} loading="lazy" />}

apps/website/src/components/DownloadButton.tsx

@@ -4,16 +4,17 @@ import Button from "./Button.js";
 import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
 import packageJson from "../../../../package.json" with { type: "json" };
 import { useEffect, useState } from "preact/hooks";
-import { t } from "../i18n.js";
+import { useTranslation } from "react-i18next";
 
 interface DownloadButtonProps {
     big?: boolean;
 }
 
 export default function DownloadButton({ big }: DownloadButtonProps) {
+    const { t } = useTranslation();
     const [ recommendedDownload, setRecommendedDownload ] = useState<RecommendedDownload | null>();
     useEffect(() => {
-        getRecommendedDownload()?.then(setRecommendedDownload);
+        getRecommendedDownload(t)?.then(setRecommendedDownload);
     }, []);
 
     return (recommendedDownload &&

apps/website/src/components/Footer.tsx

@@ -5,9 +5,12 @@ import githubDiscussionsIcon from "../assets/boxicons/bx-discussion.svg?raw";
 import matrixIcon from "../assets/boxicons/bx-message-dots.svg?raw";
 import redditIcon from "../assets/boxicons/bx-reddit.svg?raw";
 import { Link } from "./Button.js";
-import { LOCALES, t } from "../i18n";
+import { LOCALES } from "../i18n";
+import { useTranslation } from "react-i18next";
 
 export default function Footer() {
+    const { t } = useTranslation();
+
     return (
         <footer>
             <div class="content-wrapper">
@@ -33,6 +36,8 @@ export default function Footer() {
 }
 
 export function SocialButtons({ className, withText }: { className?: string, withText?: boolean }) {
+    const { t } = useTranslation();
+
     return (
         <div className={`social-buttons ${className}`}>
             <SocialButton

apps/website/src/download-helper.ts

@@ -1,5 +1,5 @@
+import { TFunction } from 'i18next';
 import rootPackageJson from '../../../package.json' with { type: "json" };
-import { t } from './i18n';
 
 export type App = "desktop" | "server";
 
@@ -34,7 +34,8 @@ export interface RecommendedDownload {
 type DownloadMatrix = Record<App, { [ P in Platform ]?: DownloadMatrixEntry }>;
 
 // Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
-export const downloadMatrix: DownloadMatrix = {
+export function getDownloadMatrix(t: TFunction<"translation", undefined>): DownloadMatrix {
+    return {
         desktop: {
             windows: {
                 title: {
@@ -176,9 +177,12 @@ export const downloadMatrix: DownloadMatrix = {
                 }
             }
         }
+    }
 };
 
-export function buildDownloadUrl(app: App, platform: Platform, format: string, architecture: Architecture): string {
+export function buildDownloadUrl(t: TFunction<"translation", undefined>, app: App, platform: Platform, format: string, architecture: Architecture): string {
+    const downloadMatrix = getDownloadMatrix(t);
+
     if (app === "desktop") {
         return downloadMatrix.desktop[platform]?.downloads[format].url ??
             `https://github.com/TriliumNext/Trilium/releases/download/v${version}/TriliumNotes-v${version}-${platform}-${architecture}.${format}`;
@@ -218,8 +222,9 @@ export function getPlatform(): Platform | null {
     }
 }
 
-export async function getRecommendedDownload(): Promise<RecommendedDownload | null> {
+export async function getRecommendedDownload(t: TFunction<"translation", undefined>): Promise<RecommendedDownload | null> {
     if (typeof window === "undefined") return null;
+    const downloadMatrix = getDownloadMatrix(t);
 
     const architecture = await getArchitecture();
     const platform = getPlatform();
@@ -233,7 +238,7 @@ export async function getRecommendedDownload(): Promise<RecommendedDownload | nu
     if (!recommendedDownload) return null;
 
     const format = recommendedDownload[0];
-    const url = buildDownloadUrl("desktop", platform, format || 'zip', architecture);
+    const url = buildDownloadUrl(t, "desktop", platform, format || 'zip', architecture);
 
     const platformTitle = platformInfo.title;
     const name = typeof platformTitle === "string" ? platformTitle : platformTitle[architecture] as string;

apps/website/src/i18n.ts

@@ -33,5 +33,3 @@ await i18next.init({
     },
     returnEmptyString: false
 });
-
-export const t = i18next.t;

apps/website/src/index.tsx

@@ -8,6 +8,8 @@ import Footer from './components/Footer.js';
 import GetStarted from './pages/GetStarted/get-started.js';
 import SupportUs from './pages/SupportUs/SupportUs.js';
 import { createContext } from 'preact';
+import { useEffect } from 'preact/hooks';
+import { changeLanguage } from 'i18next';
 
 export const LocaleContext = createContext('en');
 
@@ -34,6 +36,10 @@ export function LocaleProvider({ children }) {
   const { path } = useLocation();
   const locale = path.split('/')[1] || 'en';
 
+  useEffect(() => {
+    changeLanguage(locale);
+  }, [ locale ]);
+
   return (
     <LocaleContext.Provider value={locale}>
       {children}

apps/website/src/pages/GetStarted/get-started.tsx

@@ -1,18 +1,20 @@
 import { useLayoutEffect, useState } from "preact/hooks";
 import Card from "../../components/Card.js";
 import Section from "../../components/Section.js";
-import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntry, getArchitecture, getPlatform, Platform } from "../../download-helper.js";
+import { App, Architecture, buildDownloadUrl, DownloadMatrixEntry, getArchitecture, getDownloadMatrix, getPlatform, Platform } from "../../download-helper.js";
 import { usePageTitle } from "../../hooks.js";
 import Button, { Link } from "../../components/Button.js";
 import Icon from "../../components/Icon.js";
 import helpIcon from "../../assets/boxicons/bx-help-circle.svg?raw";
 import "./get-started.css";
 import packageJson from "../../../../../package.json" with { type: "json" };
-import { t } from "../../i18n.js";
+import { useTranslation } from "react-i18next";
 
 export default function DownloadPage() {
+    const { t } = useTranslation();
     const [ currentArch, setCurrentArch ] = useState<Architecture>("x64");
     const [ userPlatform, setUserPlatform ] = useState<Platform>();
+    const downloadMatrix = getDownloadMatrix(t);
 
     useLayoutEffect(() => {
         getArchitecture().then((arch) => setCurrentArch(arch ?? "x64"));
@@ -71,6 +73,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommen
         return (typeof text === "string" ? text : text[arch]);
     }
 
+    const { t } = useTranslation();
     const allDownloads = Object.entries(entry.downloads);
     const recommendedDownloads = allDownloads.filter(download => download[1].recommended);
     const restDownloads = allDownloads.filter(download => !download[1].recommended);
@@ -107,7 +110,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommen
                     {recommendedDownloads.map(recommendedDownload => (
                         <Button
                             className="recommended"
-                            href={buildDownloadUrl(app, platform as Platform, recommendedDownload[0], arch)}
+                            href={buildDownloadUrl(t, app, platform as Platform, recommendedDownload[0], arch)}
                             text={recommendedDownload[1].name}
                             openExternally={!!recommendedDownload[1].url}
                         />
@@ -117,7 +120,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommen
                 <div class="other-options">
                     {restDownloads.map(download => (
                         <Link
-                            href={buildDownloadUrl(app, platform as Platform, download[0], arch)}
+                            href={buildDownloadUrl(t, app, platform as Platform, download[0], arch)}
                             openExternally={!!download[1].url}
                         >
                             {download[1].name}

apps/website/src/pages/Home/index.tsx

@@ -31,8 +31,7 @@ import boardIcon from "../../assets/boxicons/bx-columns-3.svg?raw";
 import geomapIcon from "../../assets/boxicons/bx-map.svg?raw";
 import { getPlatform } from '../../download-helper.js';
 import { useEffect, useState } from 'preact/hooks';
-import { t } from '../../i18n.js';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 export function Home() {
     usePageTitle("");
@@ -52,6 +51,7 @@ export function Home() {
 }
 
 function HeroSection() {
+    const { t } = useTranslation();
     const platform = getPlatform();
     const colorScheme = useColorScheme();
     const [ screenshotUrl, setScreenshotUrl ] = useState<string>();
@@ -96,6 +96,7 @@ function HeroSection() {
 }
 
 function OrganizationBenefitsSection() {
+    const { t } = useTranslation();
     return (
         <>
             <Section className="benefits" title={t("organization_benefits.title")}>
@@ -110,6 +111,7 @@ function OrganizationBenefitsSection() {
 }
 
 function ProductivityBenefitsSection() {
+    const { t } = useTranslation();
     return (
         <>
             <Section className="benefits accented" title={t("productivity_benefits.title")}>
@@ -127,6 +129,7 @@ function ProductivityBenefitsSection() {
 }
 
 function NoteTypesSection() {
+    const { t } = useTranslation();
     return (
         <Section className="note-types" title="Multiple ways to represent your information">
             <ListWithScreenshot horizontal items={[
@@ -190,6 +193,7 @@ function NoteTypesSection() {
 }
 
 function ExtensibilityBenefitsSection() {
+    const { t } = useTranslation();
     return (
         <>
             <Section className="benefits accented" title={t("extensibility_benefits.title")}>
@@ -205,6 +209,7 @@ function ExtensibilityBenefitsSection() {
 }
 
 function CollectionsSection() {
+    const { t } = useTranslation();
     return (
         <Section className="collections" title="Collections">
             <ListWithScreenshot items={[
@@ -247,6 +252,7 @@ function ListWithScreenshot({ items, horizontal, cardExtra }: {
     cardExtra?: ComponentChildren;
 }) {
     const [ selectedItem, setSelectedItem ] = useState(items[0]);
+    const { t } = useTranslation();
 
     return (
         <div className={`list-with-screenshot ${horizontal ? "horizontal" : ""}`}>
@@ -278,6 +284,7 @@ function ListWithScreenshot({ items, horizontal, cardExtra }: {
 }
 
 function FaqSection() {
+    const { t } = useTranslation();
     return (
         <Section className="faq" title={t("faq.title")}>
             <div class="grid-2-cols">
@@ -301,6 +308,7 @@ function FaqItem({ question, children }: { question: string; children: Component
 }
 
 function FinalCta() {
+    const { t } = useTranslation();
     return (
         <Section className="final-cta accented" title={t("final_cta.title")}>
             <p>{t("final_cta.description")}</p>

apps/website/src/pages/SupportUs/SupportUs.tsx

@@ -6,10 +6,10 @@ import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw";
 import Button, { Link } from "../../components/Button.js";
 import Card from "../../components/Card.js";
 import { usePageTitle } from "../../hooks.js";
-import { t } from "../../i18n.js";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 export default function Donate() {
+    const { t } = useTranslation();
     usePageTitle(t("support_us.title"));
 
     return (

apps/website/src/pages/_404.tsx

@@ -1,9 +1,10 @@
+import { useTranslation } from "react-i18next";
 import Section from "../components/Section.js";
 import { usePageTitle } from "../hooks.js";
-import { t } from "../i18n.js";
 import "./_404.css";
 
 export function NotFound() {
+    const { t } = useTranslation();
     usePageTitle(t("404.title"));
 
 	return (