Internationalization improvements for the website (#7515)

Author: eliandoran

apps/website/package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
+		"test": "vitest",
 		"preview": "pnpm build && vite preview"
 	},
 	"dependencies": {

apps/website/public/translations/en/translation.json

@@ -39,6 +39,7 @@
     "web_clipper_content": "Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension."
   },
   "note_types": {
+    "title": "Multiple ways to represent your information",
     "text_title": "Text notes",
     "text_description": "The notes are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions, code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or using slash commands.",
     "code_title": "Code notes",
@@ -65,6 +66,7 @@
     "api_description": "Interact with Trilium programatically using its builtin REST API."
   },
   "collections": {
+    "title": "Collections",
     "calendar_title": "Calendar",
     "calendar_description": "Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events.",
     "table_title": "Table",
@@ -106,6 +108,11 @@
     "linux_small": "for Linux",
     "more_platforms": "More platforms & server setup"
   },
+  "header": {
+    "get-started": "Get started",
+    "documentation": "Documentation",
+    "support-us": "Support us"
+  },
   "footer": {
     "copyright_and_the": " and the ",
     "copyright_community": "community"

apps/website/public/translations/ro/translation.json

@@ -106,6 +106,11 @@
         "linux_small": "pentru Linux",
         "more_platforms": "Mai multe platforme și instalarea server-ului"
     },
+    "header": {
+      "get-started": "Primii pași",
+      "documentation": "Documentație",
+      "support-us": "Sprijină-ne"
+    },
     "footer": {
         "copyright_and_the": " și ",
         "copyright_community": "comunitatea"

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

@@ -3,18 +3,21 @@ import "./DownloadButton.css";
 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 { useContext, useEffect, useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
+import { LocaleContext } from "../index.js";
 
 interface DownloadButtonProps {
     big?: boolean;
 }
 
 export default function DownloadButton({ big }: DownloadButtonProps) {
+    const locale = useContext(LocaleContext);
+    const { t } = useTranslation();
     const [ recommendedDownload, setRecommendedDownload ] = useState<RecommendedDownload | null>();
     useEffect(() => {
-        getRecommendedDownload()?.then(setRecommendedDownload);
-    }, []);
+        getRecommendedDownload(t)?.then(setRecommendedDownload);
+    }, [ t ]);
 
     return (recommendedDownload &&
         <>
@@ -35,7 +38,7 @@ export default function DownloadButton({ big }: DownloadButtonProps) {
             ) : (
                 <Button
                     className={`download-button desktop-only ${big ? "big" : ""}`}
-                    href="/get-started/"
+                    href={`/${locale}/get-started/`}
                     iconSvg={downloadIcon}
                     text={<>
                             {t("download_now.text")}

apps/website/src/components/Footer.css

@@ -5,17 +5,26 @@ footer {
     color: var(--muted-color);
     font-size: 0.8em;
 
-    .content-wrapper {
+    .row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-direction: column-reverse;
         gap: 2em;
+        margin-bottom: 1em;
 
         @media (min-width: 720px) {
             flex-direction: row;
         }
     }
+
+    nav.languages {
+        flex-grow: 1;
+        justify-content: center;
+        flex-wrap: wrap;
+        display: flex;
+        gap: 0.5em 1em;
+    }
 }
 
 .social-buttons {

apps/website/src/components/Footer.tsx

@@ -5,24 +5,46 @@ 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 { t } from "../i18n";
+import { LOCALES, swapLocaleInUrl } from "../i18n";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "preact-iso";
+import { useContext } from "preact/hooks";
+import { LocaleContext } from "..";
 
 export default function Footer() {
+    const { t } = useTranslation();
+    const { url } = useLocation();
+    const currentLocale = useContext(LocaleContext);
+
     return (
         <footer>
             <div class="content-wrapper">
-                <div class="footer-text">
-                    © 2024-2025 <Link href="https://github.com/eliandoran" openExternally>Elian Doran</Link>{t("footer.copyright_and_the")}<Link href="https://github.com/TriliumNext/Trilium/graphs/contributors" openExternally>{t("footer.copyright_community")}</Link>.<br />
-                    © 2017-2024 <Link href="https://github.com/zadam" openExternally>zadam</Link>.
+                <div class="row">
+                    <div class="footer-text">
+                        © 2024-2025 <Link href="https://github.com/eliandoran" openExternally>Elian Doran</Link>{t("footer.copyright_and_the")}<Link href="https://github.com/TriliumNext/Trilium/graphs/contributors" openExternally>{t("footer.copyright_community")}</Link>.<br />
+                        © 2017-2024 <Link href="https://github.com/zadam" openExternally>zadam</Link>.
+                    </div>
+
+                    <SocialButtons />
                 </div>
 
-                <SocialButtons />
+                <div class="row">
+                    <nav class="languages">
+                        {LOCALES.map(locale => (
+                            locale.id !== currentLocale
+                            ? <Link href={swapLocaleInUrl(url, locale.id)}>{locale.name}</Link>
+                            : <span className="active">{locale.name}</span>
+                        ))}
+                    </nav>
+                </div>
             </div>
         </footer>
     )
 }
 
 export function SocialButtons({ className, withText }: { className?: string, withText?: boolean }) {
+    const { t } = useTranslation();
+
     return (
         <div className={`social-buttons ${className}`}>
             <SocialButton

apps/website/src/components/Header.tsx

@@ -1,35 +1,43 @@
 import "./Header.css";
 import { Link } from "./Button.js";
 import { SocialButtons, SocialButton } from "./Footer.js";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { useLocation } from 'preact-iso';
 import DownloadButton from './DownloadButton.js';
 import githubIcon from "../assets/boxicons/bx-github.svg?raw";
 import Icon from "./Icon.js";
 import logoPath from "../assets/icon-color.svg";
 import menuIcon from "../assets/boxicons/bx-menu.svg?raw";
+import { LocaleContext } from "..";
+import { useTranslation } from "react-i18next";
+import { swapLocaleInUrl } from "../i18n";
 
 interface HeaderLink {
     url: string;
     text: string;
     external?: boolean;
 }
 
-const HEADER_LINKS: HeaderLink[] = [
-    { url: "/get-started/", text: "Get started" },
-    { url: "https://docs.triliumnotes.org/", text: "Documentation", external: true },
-    { url: "/support-us/", text: "Support us" }
-]
-
 export function Header(props: {repoStargazersCount: number}) {
 	const { url } = useLocation();
+    const { t } = useTranslation();
+    const locale = useContext(LocaleContext);
     const [ mobileMenuShown, setMobileMenuShown ] = useState(false);
 
+    const [ headerLinks, setHeaderLinks ] = useState<HeaderLink[]>([]);
+    useEffect(() => {
+        setHeaderLinks([
+            { url: "/get-started", text: t("header.get-started") },
+            { url: "https://docs.triliumnotes.org/", text: t("header.documentation"), external: true },
+            { url: "/support-us", text: t("header.support-us") }
+        ]);
+    }, [ locale, t ]);
+
 	return (
 		<header>
             <div class="content-wrapper">
                 <div class="first-row">
-                    <a class="banner" href="/">
+                    <a class="banner" href={`/${locale}/`}>
                         <img src={logoPath} width="300" height="300" alt="Trilium Notes logo" />&nbsp;<span>Trilium Notes</span>
                     </a>
 
@@ -46,16 +54,17 @@ export function Header(props: {repoStargazersCount: number}) {
                 </div>
 
                 <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
-                    {HEADER_LINKS.map(link => (
-                        <Link
-                            href={link.url}
-                            className={url === link.url ? "active" : ""}
+                    {headerLinks.map(link => {
+                        const linkHref = link.external ? link.url : swapLocaleInUrl(link.url, locale);
+                        return (<Link
+                            href={linkHref}
+                            className={url === linkHref ? "active" : ""}
                             openExternally={link.external}
                             onClick={() => {
                                 setMobileMenuShown(false);
                             }}
-                        >{link.text}</Link>
-                    ))}
+                        >{link.text}</Link>)
+                    })}
 
                     <SocialButtons className="mobile-only" withText />
                 </nav>
@@ -74,4 +83,4 @@ export function Header(props: {repoStargazersCount: number}) {
             </div>
 		</header>
 	);
-}
+}