refactor: improve translation structure and type definitions

Author: 3w36zj6

website/src/translations.tsx renamed to website/src/translation.tsx

@@ -1,32 +1,30 @@
-import type { FC, JSX, PropsWithChildren } from "hono/jsx";
+import type { FC } from "hono/jsx";
 import {
 	discordServerUrl,
 	githubOrganizationUrl,
 	githubRepositoryUrl,
 	typstOfficialDocsUrl,
 } from "./metadata";
 
-type MyMap = {
-	[key: string]: string;
-};
-
-export const menuTranslations: MyMap = {
-	lang: "ja",
-	ariaCloseMenu: "メニューを閉じる",
-	documentationTitle: "Typstドキュメント日本語版",
-	ariaShowInformation: "の詳細情報を表示",
-	ariaClose: "閉じる",
-	ariaOpenSearch: "検索を開く",
-	ariaOpenMenu: "メニューを開く",
-	ariaCloseSearch: "検索を閉じる",
-};
-
-export const t = (key: keyof MyMap) => {
-	if (typeof menuTranslations[key] === "string") {
-		return menuTranslations[key];
-	}
-	throw new Error(`Not translation found for ${key}`);
-};
+/**
+ * Translation dictionary for UI attributes and aria labels.
+ *
+ * @example
+ * translation.ariaCloseMenu()
+ * translation.ariaShowInformation({ name: "foo" })
+ */
+export const translation = {
+	lang: () => "ja",
+	ariaCloseMenu: () => "メニューを閉じる",
+	documentationTitle: () => "Typstドキュメント日本語版",
+	ariaShowInformation: (props: {
+		name: string;
+	}) => `${props.name}の詳細情報を表示`,
+	ariaClose: () => "閉じる",
+	ariaOpenSearch: () => "検索を開く",
+	ariaOpenMenu: () => "メニューを開く",
+	ariaCloseSearch: () => "検索を閉じる",
+} as const;
 
 type TranslationKey =
 	| "definition"
@@ -80,21 +78,15 @@ type TranslationKey =
 
 export type TranslationProps =
 	| { translationKey: TranslationKey }
-	| PropsWithChildren<{ translationKey: "banner"; version: string }>;
-
-/*
-This is inferred as the following type:
-
-type TranslationProps = {
-    translationKey: "lang";
-} |
-	...
-| {
-    translationKey: "banner";
-    children?: string | number | boolean | Promise<string> | JSXNode | Child[] | null;
-}
-*/
+	| { translationKey: "banner"; version: string };
 
+/**
+ * Translation component for UI text, descriptions, and other content to be embedded as JSX.
+ *
+ * @example
+ * <Translation translationKey="definition" />
+ * <Translation translationKey="banner" version="1.0.0" />
+ */
 export const Translation: FC<TranslationProps> = (props) => {
 	switch (props.translationKey) {
 		case "definition":
@@ -240,6 +232,6 @@ export const Translation: FC<TranslationProps> = (props) => {
 		case "information":
 			return <>情報</>;
 		default:
-			throw new Error("No translationKey found for Translation Element");
+			return null;
 	}
 };