Add translation support for the website

.vscode/i18n-ally-custom-framework.yml

@@ -14,6 +14,7 @@ usageMatchRegex:
   # the `{key}` will be placed by a proper keypath matching regex,
   # you can ignore it and use your own matching rules as well
   - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+  - <Trans\s*i18nKey="({key})"[^>]*>
 
 # A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
 # and works like how the i18next framework identifies the namespace scope from the

.vscode/settings.json

@@ -5,7 +5,8 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations"
+        "apps/client/src/translations",
+        "apps/website/public/translations"
     ],
     "npm.exclude": [
         "**/dist",

apps/website/package.json

@@ -8,9 +8,12 @@
 		"preview": "pnpm build && vite preview"
 	},
 	"dependencies": {
+		"i18next": "25.6.0",
+		"i18next-http-backend": "3.0.2",
 		"preact": "10.27.2",
 		"preact-iso": "2.11.0",
-		"preact-render-to-string": "6.6.2"
+		"preact-render-to-string": "6.6.2",
+		"react-i18next": "16.0.0"
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "2.10.2",

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

@@ -0,0 +1,199 @@
+{
+  "get-started": {
+    "title": "Get started",
+    "desktop_title": "Download the desktop application (v{{version}})",
+    "architecture": "Architecture:",
+    "older_releases": "See older releases",
+    "server_title": "Set up a server for access on multiple devices"
+  },
+  "hero_section": {
+    "title": "Organize your thoughts. Build your personal knowledge base.",
+    "subtitle": "Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.",
+    "get_started": "Get started",
+    "github": "GitHub",
+    "dockerhub": "Docker Hub",
+    "screenshot_alt": "Screenshot of the Trilium Notes desktop application"
+  },
+  "organization_benefits": {
+    "title": "Organization",
+    "note_structure_title": "Note structure",
+    "note_structure_description": "Notes can be arranged hierarchically. There's no need for folders, since each note can contain sub-notes. A single note can be added in multiple places in the hierarchy.",
+    "attributes_title": "Note labels and relationships",
+    "attributes_description": "Use relations between notes or add labels for easy categorization. Use promoted attributes to enter structured information which can be used in tables, boards.",
+    "hoisting_title": "Workspaces and hoisting",
+    "hoisting_description": "Easily separate your personal and work notes by grouping them under a workspace, which focuses your note tree to only show a specific set of notes."
+  },
+  "productivity_benefits": {
+    "title": "Productivity and safety",
+    "revisions_title": "Note revisions",
+    "revisions_content": "Notes are periodically saved in the background and revisions can be used for review or to undo accidental changes. Revisions can also be created on-demand.",
+    "sync_title": "Synchronization",
+    "sync_content": "Use a self-hosted or cloud instance to easily synchronize your notes across multiple devices, and to access it from your mobile phone using a PWA.",
+    "protected_notes_title": "Protected notes",
+    "protected_notes_content": "Protect sensitive personal information by encrypting the notes and locking them behind a password-protected session.",
+    "jump_to_title": "Quick search and commands",
+    "jump_to_content": "Jump quickly to notes or UI commands across the hierarchy by searching for their title, with fuzzy matching to account for typos or slight differences.",
+    "search_title": "Powerful search",
+    "search_content": "Or search for text inside notes and narrow down the search by filtering by the parent note, or by depth.",
+    "web_clipper_title": "Web clipper",
+    "web_clipper_content": "Grab web pages (or screenshots) and place them directly into Trilium using the web clipper browser extension."
+  },
+  "note_types": {
+    "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",
+    "code_description": "Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes.",
+    "file_title": "File notes",
+    "file_description": "Embed multimedia files such as PDFs, images, videos with an in-application preview.",
+    "canvas_title": "Canvas",
+    "canvas_description": "Arrange shapes, images and text across an infinite canvas, using the same technology behind excalidraw.com. Ideal for diagrams, sketches and visual planning.",
+    "mermaid_title": "Mermaid diagrams",
+    "mermaid_description": "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax.",
+    "mindmap_title": "Mindmap",
+    "mindmap_description": "Organize your thoughts visually or do a brainstorming session.",
+    "others_prefix": "and others: ",
+    "others_separator": ", ",
+    "others_note_map": "note map",
+    "others_relation_map": "relation map",
+    "others_saved_searches": "saved searches",
+    "others_render_note": "render note",
+    "others_webview": "web views",
+    "others_list": "and others: <0>note map</0>, <1>relation map</1>, <2>saved searches</2>, <3>render note</3>, and <4>web views</4>."
+  },
+  "extensibility_benefits": {
+    "title": "Sharing & extensibility",
+    "import_export_title": "Import/export",
+    "import_export_description": "Easily interact with other applications using Markdown, ENEX, OML formats.",
+    "share_title": "Share notes on the web",
+    "share_description": "If you have a server, it can be used to share a subset of your notes with other people.",
+    "scripting_title": "Advanced scripting",
+    "scripting_description": "Build your own integrations within Trilium with custom widgets, or server-side logic.",
+    "api_title": "REST API",
+    "api_description": "Interact with Trilium programatically using its builtin REST API."
+  },
+  "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",
+    "table_description": "Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date & time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table.",
+    "board_title": "Board",
+    "board_description": "Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board.",
+    "geomap_title": "Geomap",
+    "geomap_description": "Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries."
+  },
+  "faq": {
+    "title": "Frequently Asked Questions",
+    "mobile_question": "Is there a mobile application?",
+    "mobile_answer": "Currently there is no official mobile application. However, if you have a server instance you can access it using a web browser and even install it as a PWA. For Android, there is an unofficial application called TriliumDroid that even works offline (same as a desktop client).",
+    "database_question": "Where is the data stored?",
+    "database_answer": "All your notes will be stored in an SQLite database in an application folder. The reasoning why Trilium uses a database instead of plain text files is both performance and some features would be much more difficult to implement such as clones (same note in multiple places in the tree). To find the application folder, simply go to the About window.",
+    "server_question": "Do I need a server to use Trilium?",
+    "server_answer": "No, the server allows access via a web browser and manages the synchronization if you have multiple devices. To get started, it's enough to download the desktop application and start using it.",
+    "scaling_question": "How well does the application scale with a large amount of notes?",
+    "scaling_answer": "Depending on usage, the application should be able to handle at least 100,000 notes without an issue. Do note that the sync process can sometimes fail if uploading many large files (1 GB per file) since Trilium is meant more as a knowledge base application rather than a file store (like NextCloud, for example).",
+    "network_share_question": "Can I share my database over a network drive?",
+    "network_share_answer": "No, it's generally not a good idea to share a SQLite database over a network drive. Although sometimes it might work, there are chances that the database will get corrupted due to imperfect file locks over a network.",
+    "security_question": "How is my data protected?",
+    "security_answer": "By default, notes are not encrypted and can be read directly from the database. Once a note is marked as encrypted, the note is encrypted using AES-128-CBC."
+  },
+  "final_cta": {
+    "title": "Ready to get started with Trilium Notes?",
+    "description": "Build your personal knowledge base with powerful features and full privacy.",
+    "get_started": "Get started"
+  },
+  "components": {
+    "link_learn_more": "Learn more...",
+    "list_with_screenshot_alt": "Screenshot of the feature being selected"
+  },
+  "download_now": {
+    "text": "Download now ",
+    "platform_big": "v{{version}} for {{platform}}",
+    "platform_small": "for {{platform}}",
+    "linux_big": "v{{version}} for Linux",
+    "linux_small": "for Linux",
+    "more_platforms": "More platforms & server setup"
+  },
+  "footer": {
+    "copyright_and_the": " and the ",
+    "copyright_community": "community"
+  },
+  "social_buttons": {
+    "github": "GitHub",
+    "github_discussions": "GitHub Discussions",
+    "matrix": "Matrix",
+    "reddit": "Reddit"
+  },
+  "support_us": {
+    "title": "Support us",
+    "financial_donations_title": "Financial donations",
+    "financial_donations_description": "Trilium is built and maintained with <Link>hundreds of hours of work</Link>. Your support keeps it open-source, improves features, and covers costs such as hosting.",
+    "financial_donations_cta": "Consider supporting the main developer (<Link>eliandoran</Link>) of the application via:",
+    "github_sponsors": "GitHub Sponsors",
+    "paypal": "PayPal",
+    "buy_me_a_coffee": "Buy Me A Coffee"
+  },
+  "contribute": {
+    "title": "Other ways to contribute",
+    "way_translate": "Translate the application into your native language via <Link>Weblate</Link>.",
+    "way_community": "Interact with the community on <Discussions>GitHub Discussions</Discussions> or on <Matrix>Matrix</Matrix>.",
+    "way_reports": "Report bugs via <Link>GitHub issues</Link>.",
+    "way_document": "Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.",
+    "way_market": "Spread the word: Share Trilium Notes with friends, or on blogs and social media."
+  },
+  "404": {
+    "title": "404: Not Found",
+    "description": "The page you were looking for could not be found. Maybe it was deleted or the URL is incorrect."
+  },
+  "download_helper_desktop_windows": {
+    "title_x64": "Windows 64-bit",
+    "title_arm64": "Windows on ARM",
+    "description_x64": "Compatible with Intel or AMD devices running Windows 10 and 11.",
+    "description_arm64": "Compatible with ARM devices (e.g. with Qualcomm Snapdragon).",
+    "quick_start": "To install via Winget:",
+    "download_exe": "Download Installer (.exe)",
+    "download_zip": "Portable (.zip)",
+    "download_scoop": "Scoop"
+  },
+  "download_helper_desktop_linux": {
+    "title_x64": "Linux 64-bit",
+    "title_arm64": "Linux on ARM",
+    "description_x64": "For most Linux distributions, compatible with x86_64 architecture.",
+    "description_arm64": "For ARM-based Linux distributions, compatible with aarch64 architecture.",
+    "quick_start": "Select an appropriate package format, depending on your distribution:",
+    "download_deb": ".deb",
+    "download_rpm": ".rpm",
+    "download_flatpak": ".flatpak",
+    "download_zip": "Portable (.zip)",
+    "download_nixpkgs": "nixpkgs",
+    "download_aur": "AUR"
+  },
+  "download_helper_desktop_macos": {
+    "title_x64": "macOS for Intel",
+    "title_arm64": "macOS for Apple Silicon",
+    "description_x64": "For Intel-based Macs running macOS Big Sur or later.",
+    "description_arm64": "For Apple Silicon Macs such as those with M1 and M2 chips.",
+    "quick_start": "To install via Homebrew:",
+    "download_dmg": "Download Installer (.dmg)",
+    "download_homebrew_cask": "Homebrew Cask",
+    "download_zip": "Portable (.zip)"
+  },
+  "download_helper_server_docker": {
+    "title": "Self-hosted using Docker",
+    "description": "Easily deploy on Windows, Linux or macOS using a Docker container.",
+    "download_dockerhub": "Docker Hub",
+    "download_ghcr": "ghcr.io"
+  },
+  "download_helper_server_linux": {
+    "title": "Self-hosted on Linux",
+    "description": "Deploy Trilium Notes on your own server or VPS, compatible with most distributions.",
+    "download_tar_x64": "x64 (.tar.xz)",
+    "download_tar_arm64": "ARM (.tar.xz)",
+    "download_nixos": "NixOS module"
+  },
+  "download_helper_server_hosted": {
+    "title": "Paid hosting",
+    "description": "Trilium Notes hosted on PikaPods, a paid service for easy access and management. Not directly affiliated with the Trilium team.",
+    "download_pikapod": "Set up on PikaPods",
+    "download_triliumcc": "Alternatively see trilium.cc"
+  }
+}

apps/website/src/components/Button.tsx

@@ -6,7 +6,7 @@ interface LinkProps {
     className?: string;
     href?: string;
     openExternally?: boolean;
-    children: ComponentChildren;
+    children?: ComponentChildren;
     title?: string;
     onClick?: (e: MouseEvent) => void;
 }

apps/website/src/components/Card.tsx

@@ -1,6 +1,7 @@
 import { ComponentChildren, HTMLAttributes } from "preact";
 import { Link } from "./Button.js";
 import Icon from "./Icon.js";
+import { t } from "../i18n.js";
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: ComponentChildren;
@@ -28,7 +29,7 @@ export default function Card({ title, children, imageUrl, iconSvg, className, mo
 
                 {moreInfoUrl && (
                     <div className="more-info-container">
-                        <Link href={moreInfoUrl} className="more-info" openExternally>Learn more...</Link>
+                        <Link href={moreInfoUrl} className="more-info" openExternally>{t("components.link_learn_more")}</Link>
                     </div>
                 )}
             </div>

apps/website/src/components/DownloadButton.tsx

@@ -4,6 +4,7 @@ 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";
 
 interface DownloadButtonProps {
     big?: boolean;
@@ -24,10 +25,10 @@ export default function DownloadButton({ big }: DownloadButtonProps) {
                     href={recommendedDownload.url}
                     iconSvg={downloadIcon}
                     text={<>
-                            Download now{" "}
+                            {t("download_now.text")}
                             {big
-                            ? <span class="platform">v{packageJson.version} for {recommendedDownload.name}</span>
-                            : <span class="platform">for {recommendedDownload.name}</span>
+                            ? <span class="platform">{t("download_now.platform_big", { version: packageJson.version, platform: recommendedDownload.name })}</span>
+                            : <span class="platform">{t("download_now.platform_small", { platform: recommendedDownload.name })}</span>
                             }
                     </>}
                 />
@@ -37,17 +38,17 @@ export default function DownloadButton({ big }: DownloadButtonProps) {
                     href="/get-started/"
                     iconSvg={downloadIcon}
                     text={<>
-                            Download now{" "}
+                            {t("download_now.text")}
                             {big
-                            ? <span class="platform">v{packageJson.version} for Linux</span>
-                            : <span class="platform">for Linux</span>
+                            ? <span class="platform">{t("download_now.linux_big", { version: packageJson.version })}</span>
+                            : <span class="platform">{t("download_now.linux_small")}</span>
                             }
                     </>}
                 />
             )}
 
             {big && (
-                <a class="more-download-options desktop-only" href="./get-started/">More platforms & server setup</a>
+                <a class="more-download-options desktop-only" href="./get-started/">{t("download_now.more_platforms")}</a>
             )}
         </>
     )

apps/website/src/components/Footer.tsx

@@ -5,13 +5,14 @@ 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";
 
 export default function Footer() {
     return (
         <footer>
             <div class="content-wrapper">
                 <div class="footer-text">
-                    © 2024-2025 <Link href="https://github.com/eliandoran" openExternally>Elian Doran</Link> and the <Link href="https://github.com/TriliumNext/Trilium/graphs/contributors" openExternally>community</Link>.<br />
+                    © 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>
 
@@ -25,28 +26,28 @@ export function SocialButtons({ className, withText }: { className?: string, wit
     return (
         <div className={`social-buttons ${className}`}>
             <SocialButton
-                name="GitHub"
+                name={t("social_buttons.github")}
                 iconSvg={githubIcon}
                 url="https://github.com/TriliumNext/Trilium"
                 withText={withText}
             />
 
             <SocialButton
-                name="GitHub Discussions"
+                name={t("social_buttons.github_discussions")}
                 iconSvg={githubDiscussionsIcon}
                 url="https://github.com/orgs/TriliumNext/discussions"
                 withText={withText}
             />
 
             <SocialButton
-                name="Matrix"
+                name={t("social_buttons.matrix")}
                 iconSvg={matrixIcon}
                 url="https://matrix.to/#/#triliumnext:matrix.org"
                 withText={withText}
             />
 
             <SocialButton
-                name="Reddit"
+                name={t("social_buttons.reddit")}
                 iconSvg={redditIcon}
                 url="https://www.reddit.com/r/Trilium/"
                 withText={withText}
@@ -63,7 +64,7 @@ export function SocialButton({ name, iconSvg, url, withText, counter }: { name:
             title={!withText ? name : undefined}
         >
             <Icon svg={iconSvg} />
-            {counter && <span class="counter">{counter}</span>}             
+            {counter && <span class="counter">{counter}</span>}
             {withText && name}
         </Link>
     )