diff --git a/apps/website/package.json b/apps/website/package.json index 14cb094d1..4dcb83c00 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -5,6 +5,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "test": "vitest", "preview": "pnpm build && vite preview" }, "dependencies": { diff --git a/apps/website/public/translations/en/translation.json b/apps/website/public/translations/en/translation.json index 929a307a8..7fec3eb89 100644 --- a/apps/website/public/translations/en/translation.json +++ b/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" diff --git a/apps/website/public/translations/ro/translation.json b/apps/website/public/translations/ro/translation.json index 18e47da9e..a60937a3f 100644 --- a/apps/website/public/translations/ro/translation.json +++ b/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" diff --git a/apps/website/src/components/Card.tsx b/apps/website/src/components/Card.tsx index 593a9025b..721cf4241 100644 --- a/apps/website/src/components/Card.tsx +++ b/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, "title"> { title: ComponentChildren; @@ -13,6 +13,8 @@ interface CardProps extends Omit, "title"> { } export default function Card({ title, children, imageUrl, iconSvg, className, moreInfoUrl, ...restProps }: CardProps) { + const { t } = useTranslation(); + return (
{imageUrl && } diff --git a/apps/website/src/components/DownloadButton.tsx b/apps/website/src/components/DownloadButton.tsx index 75fbeff18..883adcdd1 100644 --- a/apps/website/src/components/DownloadButton.tsx +++ b/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(); useEffect(() => { - getRecommendedDownload()?.then(setRecommendedDownload); - }, []); + getRecommendedDownload(t)?.then(setRecommendedDownload); + }, [ t ]); return (recommendedDownload && <> @@ -35,7 +38,7 @@ export default function DownloadButton({ big }: DownloadButtonProps) { ) : (