feat: add translation switcher to website

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";

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";

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,

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";

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";

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";

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 = {

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,

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";
 

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 = () => {

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 (

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 = {

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";
 

website/src/translation/en-US.tsx

@@ -0,0 +1,198 @@
+import type { TooltipProps } from "../components/ui/Tooltip";
+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 "Context";
+			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>
+					.
+				</>
+			);
+		default:
+			return null;
+	}
+};

website/src/translation/index.tsx

@@ -0,0 +1,85 @@
+import type { FC } from "hono/jsx";
+import type { TooltipProps } from "../components/ui/Tooltip";
+
+/**
+ * Translation dictionary for UI attributes and aria labels.
+ *
+ * @example
+ * translation.closeMenu()
+ * translation.showInformation({ name: "foo" })
+ */
+export type TranslationObject = {
+	htmlLang: () => string;
+	documentationTitle: () => string;
+	close: () => string;
+	closeMenu: () => string;
+	closeSearch: () => string;
+	openMenu: () => string;
+	openSearch: () => string;
+	showInformation: (props: { name: string }) => string;
+	tooltipKind: (props: { kind: TooltipProps["kind"] }) => string;
+};
+
+type TranslationComponentKey =
+	| "definition"
+	| "constructor"
+	| "tableOfContents"
+	| "untranslated"
+	| "untranslatedMessage"
+	| "document"
+	| "langVersion"
+	| "elementFunction"
+	| "elementFunctionDescription"
+	| "contextFunction"
+	| "contextFunctionDescription"
+	| "definitionTooltip"
+	| "definitionTooltipDescription"
+	| "variadic"
+	| "translationRate"
+	| "variadicDescription"
+	| "typstOfficialDocs"
+	| "typstOfficialWebsite"
+	| "communityContent"
+	| "contentAddedByCommunity"
+	| "partiallyTranslated"
+	| "partiallyTranslatedMessage"
+	| "translated"
+	| "translatedMessage"
+	| "siteNoticeBannerTitle"
+	| "siteNoticeBannerDescription"
+	| "tutorial"
+	| "tutorialDescription"
+	| "referenceDescription"
+	| "reference"
+	| "openOfficialDocs"
+	| "search"
+	| "argument"
+	| "argumentDescription"
+	| "required"
+	| "requiredDescription"
+	| "positional"
+	| "positionalDescription"
+	| "defaultValue"
+	| "stringValues"
+	| "showExample"
+	| "settable"
+	| "settableDescription"
+	| "previousPage"
+	| "nextPage";
+
+export type TranslationComponentProps =
+	| { translationKey: TranslationComponentKey }
+	| { translationKey: "definitionOf"; name: string };
+
+/**
+ * Translation component for UI text, descriptions, and other content to be embedded as JSX.
+ *
+ * @example
+ * <Translation translationKey="definition" />
+ */
+export type TranslationComponent = FC<TranslationComponentProps>;
+
+/**
+ * Switch translation language here.
+ */
+export { translation, Translation } from "./ja-JP";