feat(website/i18n): translate support us

apps/website/package.json

@@ -12,7 +12,8 @@
 		"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

@@ -124,9 +124,19 @@
   },
   "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",
+    "buy_me_a_coffee": "Buy Me A Coffee"
-    "other_ways_to_contribute": "Other ways to contribute"
+  },
+  "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."
   }
 }

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/i18n.ts

@@ -1,7 +1,11 @@
 import { default as i18next } from "i18next";
 import HttpApi from 'i18next-http-backend';
+import { initReactI18next } from "react-i18next";
+
+i18next
+    .use(HttpApi)
+    .use(initReactI18next);
 
-i18next.use(HttpApi)
 await i18next.init({
     debug: true,
     lng: "en",

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

@@ -7,6 +7,7 @@ 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";
 
 export default function Donate() {
     usePageTitle(t("support_us.title"));
@@ -15,13 +16,20 @@ export default function Donate() {
         <>
             <Section title={t("support_us.title")} className="donate fill">
                 <div class="grid-2-cols">
-                    <Card title="Financial donations">
+                    <Card title={t("support_us.financial_donations_title")}>
                         <p>
-                            Trilium is built and maintained with <Link href="https://github.com/TriliumNext/Trilium/graphs/commit-activity" openExternally>hundreds of hours of work</Link>.
+                            <Trans
-                            Your support keeps it open-source, improves features, and covers costs such as hosting.
+                                i18nKey="support_us.financial_donations_description"
+                                components={{ Link: <Link href="https://github.com/TriliumNext/Trilium/graphs/commit-activity" openExternally /> }}
+                            />
                         </p>
 
-                        <p>Consider supporting the main developer (<Link href="https://github.com/eliandoran" openExternally>eliandoran</Link>) of the application via:</p>
+                        <p>
+                            <Trans
+                                i18nKey="support_us.financial_donations_cta"
+                                components={{ Link: <Link href="https://github.com/eliandoran" openExternally /> }}
+                            />
+                        </p>
 
                         <ul class="donate-buttons">
                             <li>
@@ -55,13 +63,27 @@ export default function Donate() {
                         </ul>
                     </Card>
 
-                    <Card title={t("support_us.other_ways_to_contribute")}>
+                    <Card title={t("contribute.title")}>
                         <ul>
-                            <li>Translate the application into your native language via <Link href="https://hosted.weblate.org/engage/trilium/" openExternally>Weblate</Link>.</li>
+                            <li>
-                            <li>Interact with the community on <Link href="https://github.com/orgs/TriliumNext/discussions" openExternally>GitHub Discussions</Link> or on <Link href="https://matrix.to/#/#triliumnext:matrix.org" openExternally>Matrix</Link>.</li>
+                                <Trans i18nKey="contribute.way_translate"
-                            <li>Report bugs via <Link href="https://github.com/TriliumNext/Trilium/issues" openExternally>GitHub issues</Link>.</li>
+                                    components={{ Link: <Link href="https://hosted.weblate.org/engage/trilium/" openExternally /> }} />
-                            <li>Improve the documentation by informing us on gaps in the documentation or contributing guides, FAQs or tutorials.</li>
+                            </li>
-                            <li>Spread the word: Share Trilium Notes with friends, or on blogs and social media.</li>
+                            <li>
+                                <Trans i18nKey="contribute.way_community"
+                                    components={{
+                                        Discussions: <Link href="https://github.com/orgs/TriliumNext/discussions" openExternally />,
+                                        Matrix: <Link href="https://matrix.to/#/#triliumnext:matrix.org" openExternally />
+                                    }}
+                                />
+                            </li>
+                            <li>
+                                <Trans i18nKey="contribute.way_reports"
+                                    components={{ Link: <Link href="https://github.com/TriliumNext/Trilium/issues" openExternally /> }}
+                                />
+                            </li>
+                            <li><Trans i18nKey="contribute.way_document" /></li>
+                            <li><Trans i18nKey="contribute.way_market" /></li>
                         </ul>
                     </Card>
                 </div>

pnpm-lock.yaml

@@ -780,6 +780,9 @@ importers:
       preact-render-to-string:
         specifier: 6.6.2
         version: 6.6.2(preact@10.27.2)
+      react-i18next:
+        specifier: 16.0.0
+        version: 16.0.0(i18next@25.6.0(typescript@5.9.3))(react-dom@19.1.0(react@16.14.0))(react@16.14.0)(typescript@5.9.3)
     devDependencies:
       '@preact/preset-vite':
         specifier: 2.10.2
@@ -14697,6 +14700,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.0.0
       '@ckeditor/ckeditor5-utils': 47.0.0
       ckeditor5: 47.0.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.0.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -14949,6 +14954,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.0.0
       ckeditor5: 47.0.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-multi-root@47.0.0':
     dependencies:
@@ -14971,6 +14978,8 @@ snapshots:
       '@ckeditor/ckeditor5-table': 47.0.0
       '@ckeditor/ckeditor5-utils': 47.0.0
       ckeditor5: 47.0.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-emoji@47.0.0':
     dependencies:
@@ -15442,6 +15451,8 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.0.0
       '@ckeditor/ckeditor5-utils': 47.0.0
       ckeditor5: 47.0.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.0.0':
     dependencies: