feat: add translation switcher to website (typst-jp#284)

3w36zj6 · Copilot · YDX-2147483647 · web-flow · commit 529c33dec006 · 2025-09-04T14:19:21.000+09:00
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
Co-authored-by: Y.D.X. &lt;73375426+YDX-2147483647@users.noreply.github.com&gt;
diff --git a/website/src/components/templates/BaseTemplate.tsx b/website/src/components/templates/BaseTemplate.tsx
@@ -1,7 +1,7 @@
 import { html } from "hono/html";
 import type { FC, PropsWithChildren } from "hono/jsx";
 import { basePath, originUrl, typstOfficialDocsUrl } from "../../metadata";
-import { Translation, translation } from "../../translation";
+import { Translation, translation } from "../../translation/";
 import type { Page } from "../../types/model";
 import { joinPath, removeBasePath } from "../../utils/path";
 import { getTranslationStatus } from "../../utils/translationStatus";
diff --git a/website/src/components/templates/CategoryTemplate.tsx b/website/src/components/templates/CategoryTemplate.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { Translation } from "../../translation";
+import { Translation } from "../../translation/";
 import type { CategoryBody, Page } from "../../types/model";
 import { HtmlContent } from "../ui/HtmlContent";
 import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
diff --git a/website/src/components/templates/FuncTemplate.tsx b/website/src/components/templates/FuncTemplate.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { Translation } from "../../translation";
+import { Translation } from "../../translation/";
 import type { Func, FuncBody, Page } from "../../types/model";
 import {
 	FunctionDefinition,
diff --git a/website/src/components/templates/TypeTemplate.tsx b/website/src/components/templates/TypeTemplate.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { Translation } from "../../translation";
+import { Translation } from "../../translation/";
 import type { Page, TypeBody } from "../../types/model";
 import { FunctionDisplay, Tooltip } from "../ui";
 import { HtmlContent } from "../ui/HtmlContent";
diff --git a/website/src/components/ui/FunctionDisplay.tsx b/website/src/components/ui/FunctionDisplay.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { Translation } from "../../translation";
+import { Translation } from "../../translation/";
 import type { Func } from "../../types/model";
 import { ChevronRightIcon } from "../icons";
 import { FunctionDefinition } from "./FunctionDefinition";
diff --git a/website/src/components/ui/FunctionParameters.tsx b/website/src/components/ui/FunctionParameters.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "hono/jsx";
 import { basePath } from "../../metadata";
-import { Translation } from "../../translation";
+import { Translation } from "../../translation/";
 import type { Func } from "../../types/model";
 import { joinPath } from "../../utils/path";
 import { ChevronRightIcon } from "../icons";
diff --git a/website/src/components/ui/Tooltip.tsx b/website/src/components/ui/Tooltip.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { Translation, translation } from "../../translation";
+import { Translation, translation } from "../../translation/";
 import { CloseIcon, HelpCircleIcon } from "../icons";
 
 export type TooltipProps = {
diff --git a/website/src/components/ui/common/Footer.tsx b/website/src/components/ui/common/Footer.tsx
@@ -3,6 +3,7 @@ import {
 	githubOrganizationUrl,
 	githubRepositoryUrl,
 } from "../../../metadata";
+import { Translation } from "../../../translation/";
 import { DiscordIcon, GitHubIcon } from "../../icons";
 
 export const Footer = () => {
@@ -32,13 +33,7 @@ export const Footer = () => {
 						</a>
 					</div>
 					<p class="mt-8 text-sm leading-6 text-center text-gray-600">
-						Translated by{" "}
-						<a
-							href={githubOrganizationUrl}
-							class="text-gray-600 hover:text-gray-800 transition-colors"
-						>
-							Typst Japanese Community
-						</a>
+						<Translation translationKey="footer" />
 					</p>
 				</div>
 			</section>
diff --git a/website/src/components/ui/common/Header.tsx b/website/src/components/ui/common/Header.tsx
@@ -5,7 +5,7 @@ import {
 	typstOfficialUrl,
 	version,
 } from "../../../metadata";
-import { Translation, translation } from "../../../translation";
+import { Translation, translation } from "../../../translation/";
 import { calculateTranslationProgressRate } from "../../../utils/translationStatus";
 import {
 	DiscordIcon,
diff --git a/website/src/components/ui/common/SearchWindow.tsx b/website/src/components/ui/common/SearchWindow.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "hono/jsx";
 import { basePath } from "../../../metadata";
-import { Translation, translation } from "../../../translation";
+import { Translation, translation } from "../../../translation/";
 import { joinPath } from "../../../utils/path";
 import { CloseIcon } from "../../icons";
 
diff --git a/website/src/components/ui/common/SiteNoticeBanner.tsx b/website/src/components/ui/common/SiteNoticeBanner.tsx
@@ -1,4 +1,4 @@
-import { Translation } from "../../../translation";
+import { Translation } from "../../../translation/";
 import { InfoCircleIcon } from "../../icons";
 
 export const SiteNoticeBanner = () => {
diff --git a/website/src/components/ui/common/SiteTitle.tsx b/website/src/components/ui/common/SiteTitle.tsx
@@ -1,5 +1,5 @@
 import { basePath } from "../../../metadata";
-import { Translation } from "../../../translation";
+import { Translation } from "../../../translation/";
 
 export const SiteTitle = () => {
 	return (
diff --git a/website/src/components/ui/common/TableOfContents.tsx b/website/src/components/ui/common/TableOfContents.tsx
@@ -1,4 +1,4 @@
-import { Translation } from "../../../translation";
+import { Translation } from "../../../translation/";
 import type { OutlineItem } from "../../../types/model";
 
 export type TableOfContentsProps = {
diff --git a/website/src/components/ui/common/TranslationStatusAlert.tsx b/website/src/components/ui/common/TranslationStatusAlert.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "hono/jsx";
 import { twMerge } from "tailwind-merge";
-import { Translation } from "../../../translation";
+import { Translation } from "../../../translation/";
 import type { TranslationStatus } from "../../../utils/translationStatus";
 import { LanguageIcon } from "../../icons";
 
diff --git a/website/src/translation/en-US.tsx b/website/src/translation/en-US.tsx
@@ -0,0 +1,205 @@
+import type { TooltipProps } from "../components/ui/Tooltip";
+import { githubOrganizationUrl } from "../metadata";
+import type { TranslationComponent, TranslationObject } from "./";
+
+export const translation: TranslationObject = {
+	htmlLang: () => "en",
+	documentationTitle: () => "Typst Documentation (English)",
+	close: () => "Close",
+	closeMenu: () => "Close menu",
+	closeSearch: () => "Close search",
+	openMenu: () => "Open menu",
+	openSearch: () => "Open search",
+	showInformation: (props: { name: string }) =>
+		`Show details for ${props.name}`,
+	tooltipKind: (props: { kind: TooltipProps["kind"] }) => {
+		switch (props.kind) {
+			case "element":
+				return "Element";
+			case "contextual":
+				return "Contextual";
+			case "definitions":
+				return "Definition";
+			case "parameters":
+				return "Parameter";
+			case "variadic":
+				return "Variadic";
+			case "settable":
+				return "Settable";
+			case "positional":
+				return "Positional";
+			case "required":
+				return "Required";
+			default:
+				return props.kind;
+		}
+	},
+} as const;
+
+export const Translation: TranslationComponent = (props) => {
+	switch (props.translationKey) {
+		case "definition":
+			return <>Definition</>;
+		case "constructor":
+			return <>Constructor</>;
+		case "definitionOf":
+			return (
+				<>
+					<code>{props.name}</code> Definition
+				</>
+			);
+		case "search":
+			return <>Search</>;
+		case "defaultValue":
+			return <>Default value:</>;
+		case "stringValues":
+			return <>Available string values:</>;
+		case "showExample":
+			return <>Show example</>;
+		case "tableOfContents":
+			return <>On this page</>;
+		case "nextPage":
+			return <>Next page</>;
+		case "previousPage":
+			return <>Previous page</>;
+		case "referenceDescription":
+			return (
+				<>
+					Detailed reference for all Typst syntax, concepts, types, and
+					functions.
+				</>
+			);
+		case "tutorialDescription":
+			return <>Learn how to use Typst step by step.</>;
+		case "tutorial":
+			return <>Tutorial</>;
+		case "openOfficialDocs":
+			return <>Open official docs</>;
+		case "reference":
+			return <>Reference</>;
+		case "typstOfficialDocs":
+			return <>Typst official docs</>;
+		case "typstOfficialWebsite":
+			return <>Typst official website</>;
+		case "untranslated":
+			return <>Untranslated</>;
+		case "untranslatedMessage":
+			return (
+				<>
+					This page has not been translated yet. The original content is shown.
+				</>
+			);
+		case "communityContent":
+			return <>Community original content</>;
+		case "contentAddedByCommunity":
+			return (
+				<>
+					This page contains content that is not part of the official
+					documentation, added independently by the community.
+				</>
+			);
+		case "partiallyTranslated":
+			return <>Partially translated</>;
+		case "partiallyTranslatedMessage":
+			return (
+				<>
+					This page is partially translated. Some original content is included.
+				</>
+			);
+		case "translated":
+			return <>Translated</>;
+		case "translatedMessage":
+			return <>This page has been translated into English.</>;
+		case "elementFunction":
+			return <>Element</>;
+		case "elementFunctionDescription":
+			return (
+				<>
+					Element functions can be customized with <code>set</code> and{" "}
+					<code>show</code> rules.
+				</>
+			);
+		case "contextFunction":
+			return <>Context</>;
+		case "contextFunctionDescription":
+			return <>Context functions can only be used when the context is known.</>;
+		case "definitionTooltip":
+			return <>Definition</>;
+		case "definitionTooltipDescription":
+			return (
+				<>
+					These functions and types can have related definitions. To access a
+					definition, specify the name of the function or type, followed by the
+					definition name separated by a period.
+				</>
+			);
+		case "argument":
+			return <>Parameter</>;
+		case "argumentDescription":
+			return (
+				<>
+					Parameters are input values for functions. Specify them in parentheses
+					after the function name.
+				</>
+			);
+		case "variadic":
+			return <>Variadic</>;
+		case "variadicDescription":
+			return <>Variadic parameters can be specified multiple times.</>;
+		case "positional":
+			return <>Positional</>;
+		case "positionalDescription":
+			return (
+				<>
+					Positional parameters can be set by specifying them in order, omitting
+					the parameter name.
+				</>
+			);
+		case "required":
+			return <>Required</>;
+		case "requiredDescription":
+			return (
+				<>Required parameters must be specified when calling the function.</>
+			);
+		case "document":
+			return <>Document</>;
+		case "langVersion":
+			return <>English</>;
+		case "translationRate":
+			return <>Translated</>;
+		case "settable":
+			return <>Settable</>;
+		case "settableDescription":
+			return (
+				<>
+					Settable parameters can be set using the <code>set</code> rule,
+					changing the default value used thereafter.
+				</>
+			);
+		case "siteNoticeBannerTitle":
+			return <>Info</>;
+		case "siteNoticeBannerDescription":
+			return (
+				<>
+					This site is generated using the static site generator developed by
+					the <a href="https://github.com/typst-community">Typst Community</a>.
+					Please adjust the text content of this banner according to your usage
+					requirements. At Typst GmbH's request, when publishing documentation,
+					you must clearly indicate that it is non-official and display the
+					version of Typst being documented. For details, refer to{" "}
+					<a href="https://github.com/typst/typst/issues/874#issuecomment-2273854138">
+						Issue #874 on typst/typst
+					</a>
+					.
+				</>
+			);
+		case "footer":
+			return (
+				<>
+					Translated by <a href={githubOrganizationUrl}>Typst Community</a>
+				</>
+			);
+		default:
+			return null;
+	}
+};
diff --git a/website/src/translation/index.tsx b/website/src/translation/index.tsx
diff --git a/website/src/translation/ja-JP.tsx b/website/src/translation/ja-JP.tsx
