refactor: move translations to singlefile

website/src/components/icons/AlertTriangleIcon.tsx

@@ -9,8 +9,8 @@ export const AlertTriangleIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"
+			role="graphics-symbol"
 		>
-			<title>警告アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M12 9v4" />
 			<path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />

website/src/components/icons/CaretRightCircleIcon.tsx

@@ -9,8 +9,8 @@ export const CaretRightCircleIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-circle-caret-right"
+			role="graphics-symbol"
 		>
-			<title>再生アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M15 12l-4 -4v8z" />
 			<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />

website/src/components/icons/ChevronLeftIcon.tsx

@@ -9,8 +9,8 @@ export const ChevronLeftIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"
+			role="graphics-symbol"
 		>
-			<title>左矢印アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M15 6l-6 6l6 6" />
 		</svg>

website/src/components/icons/ChevronRightIcon.tsx

@@ -9,8 +9,8 @@ export const ChevronRightIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
+			role="graphics-symbol"
 		>
-			<title>右矢印アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M9 6l6 6l-6 6" />
 		</svg>

website/src/components/icons/CloseIcon.tsx

@@ -9,8 +9,8 @@ export const CloseIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-x"
+			role="graphics-symbol"
 		>
-			<title>閉じるアイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M18 6l-12 12" />
 			<path d="M6 6l12 12" />

website/src/components/icons/HelpCircleIcon.tsx

@@ -9,8 +9,8 @@ export const HelpCircleIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-help"
+			role="graphics-symbol"
 		>
-			<title>ヘルプアイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
 			<path d="M12 17l0 .01" />

website/src/components/icons/HomeIcon.tsx

@@ -9,8 +9,8 @@ export const HomeIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-home"
+			role="graphics-symbol"
 		>
-			<title>ホームアイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
 			<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />

website/src/components/icons/InfoCircleIcon.tsx

@@ -9,8 +9,8 @@ export const InfoCircleIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-info-circle"
+			role="graphics-symbol"
 		>
-			<title>情報アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
 			<path d="M12 9h.01" />

website/src/components/icons/LanguageIcon.tsx

@@ -8,8 +8,8 @@ export const LanguageIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-language-hiragana"
+			role="graphics-symbol"
 		>
-			<title>言語アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M4 5h7" />
 			<path d="M7 4c0 4.846 0 7 .5 8" />

website/src/components/icons/MenuIcon.tsx

@@ -9,8 +9,8 @@ export const MenuIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"
+			role="graphics-symbol"
 		>
-			<title>メニューアイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M4 6l16 0" />
 			<path d="M4 12l16 0" />

website/src/components/icons/SearchIcon.tsx

@@ -9,8 +9,8 @@ export const SearchIcon = () => {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			class="icon icon-tabler icons-tabler-outline icon-tabler-search"
+			role="graphics-symbol"
 		>
-			<title>検索アイコン</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 			<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
 			<path d="M21 21l-6 -6" />

website/src/components/templates/BaseTemplate.tsx

@@ -1,6 +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 type { Page } from "../../types/model";
 import { joinPath, removeBasePath } from "../../utils/path";
 import { getTranslationStatus } from "../../utils/translationStatus";
@@ -54,17 +55,19 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 		removeBasePath(basePath, route),
 	);
 	return (
-		<html lang="ja" class="scroll-pt-24">
+		<html lang={translation.htmlLang()} class="scroll-pt-24">
 			<head>
 				<meta charSet="utf-8" />
-				<title>{title} – Typstドキュメント日本語版</title>
+				<title>
+					{title} – {translation.documentationTitle()}
+				</title>
 				<meta name="description" content={description} />
 				<meta name="viewport" content="width=device-width,initial-scale=1" />
 				<meta name="theme-color" content="#239dad" />
 				<meta property="og:url" content={absoluteRouteUrl} />
 				<meta
 					property="og:title"
-					content={`${title} – Typstドキュメント日本語版`}
+					content={`${title} – ${translation.documentationTitle()}`}
 				/>
 				<meta property="og:site_name" content="Typst" />
 				<meta property="og:description" content={description} />
@@ -178,7 +181,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 									type="button"
 									class="text-gray-600"
 									x-on:click="sidebarOpen = false"
-									aria-label="メニューを閉じる"
+									aria-label={translation.closeMenu()}
 								>
 									<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
 										<CloseIcon />
@@ -218,7 +221,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 										<div class="w-4 h-4 mr-1 ">
 											<WorldIcon />
 										</div>
-										原文（英語）を開く
+										<Translation translationKey="openOfficialDocs" />
 									</a>
 								</div>
 							)}
@@ -238,7 +241,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 										<WorldIcon />
 									</div>
 									<span class="text-sm font-medium text-gray-800 group-hover:text-gray-900 transition-colors">
-										原文（英語）を開く
+										<Translation translationKey="openOfficialDocs" />
 									</span>
 									<div class="w-4 h-4 ml-2 text-gray-400 transition-colors">
 										<ChevronRightIcon />
@@ -257,11 +260,11 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 												<CaretRightCircleIcon />
 											</div>
 											<strong class="text-base font-semibold text-gray-800">
-												チュートリアル
+												<Translation translationKey="tutorial" />
 											</strong>
 										</div>
 										<p class="text-sm text-gray-600">
-											一歩一歩、Typstの使い方を学びましょう。
+											<Translation translationKey="tutorialDescription" />
 										</p>
 									</a>
 									<a
@@ -273,11 +276,11 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 												<InfoCircleIcon />
 											</div>
 											<strong class="text-base font-semibold text-gray-800">
-												リファレンス
+												<Translation translationKey="reference" />
 											</strong>
 										</div>
 										<p class="text-sm text-gray-600">
-											Typstのあらゆる構文、概念、型、関数についての詳細なリファレンスです。
+											<Translation translationKey="referenceDescription" />
 										</p>
 									</a>
 								</div>
@@ -294,7 +297,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 													<ChevronLeftIcon />
 												</div>
 												<strong class="text-base font-semibold text-gray-800">
-													前のページ
+													<Translation translationKey="previousPage" />
 												</strong>
 											</div>
 											<p class="text-sm text-gray-600">{previousPage.title}</p>
@@ -305,7 +308,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 										>
 											<div class="flex items-center mb-3 justify-between">
 												<strong class="text-base font-semibold text-gray-800">
-													次のページ
+													<Translation translationKey="nextPage" />
 												</strong>
 												<div class="w-6 h-6 text-gray-400">
 													<ChevronRightIcon />

website/src/components/templates/CategoryTemplate.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx";
+import { Translation } from "../../translation";
 import type { CategoryBody, Page } from "../../types/model";
 import { HtmlContent } from "../ui/HtmlContent";
 import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
@@ -26,7 +27,9 @@ export const CategoryTemplate: FC<CategoryTemplateProps> = ({
 		>
 			<h1 id="summary">{page.body.content.title}</h1>
 			<HtmlContent html={page.body.content.details} />
-			<h2 id="definitions">定義</h2>
+			<h2 id="definitions">
+				<Translation translationKey="definition" />
+			</h2>
 			<ul class="subgridded">
 				{page.body.content.items.map((item) => (
 					<li key={item.route}>

website/src/components/templates/FuncTemplate.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx";
+import { Translation } from "../../translation";
 import type { Func, FuncBody, Page } from "../../types/model";
 import {
 	FunctionDefinition,
@@ -52,7 +53,7 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 			</div>
 
 			<h2 id="parameters" class="flex items-baseline gap-1">
-				引数
+				<Translation translationKey="argument" />
 				<Tooltip kind="parameters" />
 			</h2>
 
@@ -82,7 +83,10 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 function ScopedDefinitions({
 	scope,
 	parent,
-}: { scope: Func[]; parent?: { name: string; id: string } | undefined }) {
+}: {
+	scope: Func[];
+	parent?: { name: string; id: string } | undefined;
+}) {
 	if (scope.length === 0) {
 		return null;
 	}
@@ -99,10 +103,10 @@ function ScopedDefinitions({
 					// Currently, the scope has at most two levels.
 					// Therefore, it is sufficient to only annotate the direct `parent`.
 					<>
-						<code>{parent.name}</code>の定義
+						<Translation translationKey="definitionOf" name={parent.name} />
 					</>
 				) : (
-					"定義"
+					<Translation translationKey="definition" />
 				)}
 				<Tooltip kind="definitions" />
 			</h2>

website/src/components/templates/TypeTemplate.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx";
+import { Translation } from "../../translation";
 import type { Page, TypeBody } from "../../types/model";
 import { FunctionDisplay, Tooltip } from "../ui";
 import { HtmlContent } from "../ui/HtmlContent";
@@ -38,7 +39,7 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 			{content.constructor && (
 				<>
 					<h2 id="constructor" class="flex items-center gap-1">
-						コンストラクタ
+						<Translation translationKey="constructor" />
 						<Tooltip kind="parameters" />
 					</h2>
 
@@ -53,7 +54,7 @@ export const TypeTemplate: FC<TypeTemplateProps> = ({
 			{content.scope.length > 0 && (
 				<>
 					<h2 id="definitions" class="flex items-center gap-1">
-						定義
+						<Translation translationKey="definition" />
 						<Tooltip kind="definitions" />
 					</h2>
 

website/src/components/ui/FunctionDisplay.tsx

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx";
+import { Translation } from "../../translation";
 import type { Func } from "../../types/model";
 import { ChevronRightIcon } from "../icons";
 import { FunctionDefinition } from "./FunctionDefinition";
@@ -35,7 +36,7 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
 						<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 							<ChevronRightIcon />
 						</div>
-						例を表示
+						<Translation translationKey="showExample" />
 					</summary>
 					<div class="mt-2 bg-white p-3 rounded-md border border-gray-200 text-sm">
 						<HtmlContent html={func.example} />

website/src/components/ui/FunctionParameters.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "hono/jsx";
 import { basePath } from "../../metadata";
+import { Translation } from "../../translation";
 import type { Func } from "../../types/model";
 import { joinPath } from "../../utils/path";
 import { ChevronRightIcon } from "../icons";
@@ -64,7 +65,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 					{param.strings.length > 0 && (
 						<div class="mt-3">
 							<h5 class="text-sm font-medium text-gray-700 mb-2">
-								使用可能な文字列値:
+								<Translation translationKey="stringValues" />:
 							</h5>
 							<ul class="type-args space-y-2 pl-4">
 								{param.strings.map((string) => (
@@ -85,7 +86,9 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 
 					{param.default && (
 						<p class="mt-3 text-sm">
-							<span class="font-medium">デフォルト値:</span>{" "}
+							<span class="font-medium">
+								<Translation translationKey="defaultValue" />:
+							</span>{" "}
 							<span class="text-gray-700">
 								<HtmlContent html={param.default} />
 							</span>
@@ -98,7 +101,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 								<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 									<ChevronRightIcon />
 								</div>
-								例を表示
+								<Translation translationKey="showExample" />
 							</summary>
 							<div class="mt-2 bg-white p-3 rounded-md border border-gray-200 text-sm">
 								<HtmlContent html={param.example} />