chore: organize translations keys

- Classify translation keys into categories
- Correct a few errors on singular/plural forms in `en-US.tsx`
- Merge the duplicate keys `definition` and `definitionTooltip` into `definitions`
- Refactor a switch-key-case-return into a `Record<Key, string>`, making it sensitive to missing keys

Author: YDX-2147483647

src/components/templates/CategoryTemplate.tsx

@@ -30,7 +30,7 @@ export const CategoryTemplate: FC<CategoryTemplateProps> = ({
 			{page.body.content.items.length > 0 && (
 				<>
 					<h2 id="definitions">
-						<Translation translationKey="definition" />
+						<Translation translationKey="definitions" />
 					</h2>
 					<ul class="subgridded">
 						{page.body.content.items.map((item) => (

src/components/templates/FuncTemplate.tsx

@@ -53,7 +53,7 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 			</div>
 
 			<h2 id="parameters" class="flex items-baseline gap-1">
-				<Translation translationKey="argument" />
+				<Translation translationKey="parameters" />
 				<Tooltip kind="parameters" />
 			</h2>
 
@@ -102,9 +102,9 @@ function ScopedDefinitions({
 				{parent ? (
 					// Currently, the scope has at most two levels.
 					// Therefore, it is sufficient to only annotate the direct `parent`.
-					<Translation translationKey="definitionOf" name={parent.name} />
+					<Translation translationKey="definitionsOf" name={parent.name} />
 				) : (
-					<Translation translationKey="definition" />
+					<Translation translationKey="definitions" />
 				)}
 				<Tooltip kind="definitions" />
 			</h2>

src/components/templates/TypeTemplate.tsx

@@ -53,7 +53,7 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 			{content.scope.length > 0 && (
 				<>
 					<h2 id="definitions" class="flex items-center gap-1">
-						<Translation translationKey="definition" />
+						<Translation translationKey="definitions" />
 						<Tooltip kind="definitions" />
 					</h2>
 

src/components/ui/Tooltip.tsx

@@ -3,11 +3,13 @@ import { Translation, translation } from "../../translation/";
 import { CloseIcon, HelpCircleIcon } from "../icons";
 
 export type TooltipProps = {
-	kind:
+	kind: // Function tooltips
 		| "element"
 		| "contextual"
+		// Section tooltips
 		| "definitions"
 		| "parameters"
+		// Parameter tooltips
 		| "variadic"
 		| "settable"
 		| "positional"
@@ -39,15 +41,15 @@ const tooltipContent: Record<
 		textColor: "text-indigo-700",
 	},
 	definitions: {
-		label: <Translation translationKey="definitionTooltip" />,
-		desc: <Translation translationKey="definitionTooltipDescription" />,
+		label: <Translation translationKey="definitions" />,
+		desc: <Translation translationKey="definitionsDescription" />,
 		isShowLabel: false,
 		bgColor: "bg-gray-100",
 		textColor: "text-gray-700",
 	},
 	parameters: {
-		label: <Translation translationKey="argument" />,
-		desc: <Translation translationKey="argumentDescription" />,
+		label: <Translation translationKey="parameters" />,
+		desc: <Translation translationKey="parametersDescription" />,
 		isShowLabel: false,
 		bgColor: "bg-gray-100",
 		textColor: "text-gray-700",

src/translation/en-US.tsx

@@ -14,39 +14,28 @@ export const translation: TranslationObject = {
 	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;
-		}
+		const map: Record<TooltipProps["kind"], string> = {
+			element: "Element",
+			contextual: "Contextual",
+			definitions: "Definitions",
+			parameters: "Parameters",
+			variadic: "Variadic",
+			settable: "Settable",
+			positional: "Positional",
+			required: "Required",
+		};
+		return map[props.kind];
 	},
 } as const;
 
 export const Translation: TranslationComponent = (props) => {
 	switch (props.translationKey) {
-		case "definition":
-			return <Fragment>Definition</Fragment>;
 		case "constructor":
 			return <Fragment>Constructor</Fragment>;
-		case "definitionOf":
+		case "definitionsOf":
 			return (
 				<Fragment>
-					<code>{props.name}</code> Definition
+					Definitions of <code>{props.name}</code>
 				</Fragment>
 			);
 		case "search":
@@ -128,19 +117,19 @@ export const Translation: TranslationComponent = (props) => {
 					Context functions can only be used when the context is known.
 				</Fragment>
 			);
-		case "definitionTooltip":
-			return <Fragment>Definition</Fragment>;
-		case "definitionTooltipDescription":
+		case "definitions":
+			return <Fragment>Definitions</Fragment>;
+		case "definitionsDescription":
 			return (
 				<Fragment>
 					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.
 				</Fragment>
 			);
-		case "argument":
+		case "parameters":
 			return <Fragment>Parameter</Fragment>;
-		case "argumentDescription":
+		case "parametersDescription":
 			return (
 				<Fragment>
 					Parameters are input values for functions. Specify them in parentheses

src/translation/index.tsx

@@ -30,62 +30,68 @@ export type TranslationObject = {
 };
 
 type TranslationComponentKey =
-	| "definition"
-	| "constructor"
-	| "tableOfContents"
-	| "untranslated"
-	| "untranslatedMessage"
-	| "document"
-	| "langVersion"
+	// Function tooltips
 	| "elementFunction"
 	| "elementFunctionDescription"
 	| "contextFunction"
 	| "contextFunctionDescription"
-	| "definitionTooltip"
-	| "definitionTooltipDescription"
+	// Section tooltips
+	| "constructor"
+	| "definitions" // See also `definitionsOf`
+	| "definitionsDescription"
+	| "parameters"
+	| "parametersDescription"
+	// Parameter tooltips
 	| "variadic"
-	| "translationRate"
 	| "variadicDescription"
-	| "typstOfficialDocs"
-	| "typstOfficialWebsite"
+	| "settable"
+	| "settableDescription"
+	| "positional"
+	| "positionalDescription"
+	| "required"
+	| "requiredDescription"
+	// Other texts in documentation
+	| "tutorial"
+	| "tutorialDescription"
+	| "reference"
+	| "referenceDescription"
+	| "defaultValue"
+	| "stringValues"
+	| "showExample"
+	// Translation statuses
+	| "untranslated"
+	| "untranslatedMessage"
 	| "communityContent"
 	| "contentAddedByCommunity"
 	| "partiallyTranslated"
 	| "partiallyTranslatedMessage"
 	| "translated"
 	| "translatedMessage"
-	| "siteNoticeBannerTitle"
-	| "siteNoticeBannerDescription"
-	| "tutorial"
-	| "tutorialDescription"
-	| "referenceDescription"
-	| "reference"
-	| "openOfficialDocs"
+	// Header, sidebar, and footer
+	| "document"
+	| "langVersion"
+	| "translationRate"
 	| "search"
-	| "argument"
-	| "argumentDescription"
-	| "required"
-	| "requiredDescription"
-	| "positional"
-	| "positionalDescription"
-	| "defaultValue"
-	| "stringValues"
-	| "showExample"
-	| "settable"
-	| "settableDescription"
+	| "typstOfficialWebsite"
+	| "typstOfficialDocs"
+	| "openOfficialDocs"
+	| "tableOfContents"
+	| "footer"
 	| "previousPage"
 	| "nextPage"
-	| "footer";
+	// Site notice
+	| "siteNoticeBannerTitle"
+	| "siteNoticeBannerDescription";
 
 export type TranslationComponentProps =
 	| { translationKey: TranslationComponentKey }
-	| { translationKey: "definitionOf"; name: string };
+	| { translationKey: "definitionsOf"; name: string };
 
 /**
  * Translation component for UI text, descriptions, and other content to be embedded as JSX.
  *
  * @example
- * <Translation translationKey="definition" />
+ * <Translation translationKey="definitions" />
  */
 export type TranslationComponent = FC<TranslationComponentProps>;
 

src/translation/ja-JP.tsx

@@ -19,36 +19,25 @@ export const translation: TranslationObject = {
 	openSearch: () => "検索を開く",
 	showInformation: (props: { name: string }) => `${props.name}の詳細情報を表示`,
 	tooltipKind: (props: { kind: TooltipProps["kind"] }) => {
-		switch (props.kind) {
-			case "element":
-				return "要素関数";
-			case "contextual":
-				return "コンテキスト関数";
-			case "definitions":
-				return "定義";
-			case "parameters":
-				return "引数";
-			case "variadic":
-				return "可変長引数";
-			case "settable":
-				return "設定可能引数";
-			case "positional":
-				return "位置引数";
-			case "required":
-				return "必須引数";
-			default:
-				return props.kind;
-		}
+		const map: Record<TooltipProps["kind"], string> = {
+			element: "要素関数",
+			contextual: "コンテキスト関数",
+			definitions: "定義",
+			parameters: "引数",
+			variadic: "可変長引数",
+			settable: "設定可能引数",
+			positional: "位置引数",
+			required: "必須引数",
+		};
+		return map[props.kind];
 	},
 } as const;
 
 export const Translation: TranslationComponent = (props) => {
 	switch (props.translationKey) {
-		case "definition":
-			return <Fragment>定義</Fragment>;
 		case "constructor":
 			return <Fragment>コンストラクタ</Fragment>;
-		case "definitionOf":
+		case "definitionsOf":
 			return (
 				<Fragment>
 					<code>{props.name}</code>の定義
@@ -131,17 +120,17 @@ export const Translation: TranslationComponent = (props) => {
 					コンテキスト関数は、コンテキストが既知の場合にのみ使用できます。
 				</Fragment>
 			);
-		case "definitionTooltip":
+		case "definitions":
 			return <Fragment>定義</Fragment>;
-		case "definitionTooltipDescription":
+		case "definitionsDescription":
 			return (
 				<Fragment>
 					これらの関数や型には、関連する定義を持たせることができます。定義にアクセスするには、対象の関数や型の名前を指定した後に、ピリオド区切りで定義名を記述します。
 				</Fragment>
 			);
-		case "argument":
+		case "parameters":
 			return <Fragment>引数</Fragment>;
-		case "argumentDescription":
+		case "parametersDescription":
 			return (
 				<Fragment>
 					引数は関数への入力値です。関数名の後に括弧で囲んで指定します。