refactor: use metadata constants for absolute URLs in website (#266)

Its-Just-Nans · 3w36zj6 · web-flow · commit a51a13514db7 · 2025-08-18T11:47:01.000+09:00
Co-authored-by: 3w36zj6 &lt;52315048+3w36zj6@users.noreply.github.com&gt;
diff --git a/website/src/components/templates/BaseTemplate.tsx b/website/src/components/templates/BaseTemplate.tsx
@@ -1,4 +1,5 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
+import { baseUrl, typstOfficialUrl } from "../../metadata";
 import type { Page } from "../../types/model";
 import { getTranslationStatus } from "../../utils/translationStatus";
 import {
@@ -41,6 +42,9 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 	const route = page.route;
 	const outline = page.outline;
 	const translationStatus = getTranslationStatus(route);
+	const absoluteRouteUrl = new URL(route, baseUrl).toString();
+	const faviconUrl = new URL("/assets/favicon.png", baseUrl).toString();
+	const typstOfficialRouteUrl = new URL(route, typstOfficialUrl).toString();
 	return (
 		<html lang="ja" class="scroll-pt-24">
 			<head>
@@ -49,26 +53,20 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 				<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={`https://typst-jp.github.io${route}`}
-				/>
+				<meta property="og:url" content={absoluteRouteUrl} />
 				<meta
 					property="og:title"
 					content={`${title} – Typstドキュメント日本語版`}
 				/>
 				<meta property="og:site_name" content="Typst" />
 				<meta property="og:description" content={description} />
 				<meta property="og:type" content="" />
-				<meta
-					property="og:image"
-					content="https://typst-jp.github.io/assets/favicon.png"
-				/>
+				<meta property="og:image" content={faviconUrl} />
 				<meta property="og:image:width" content="1200" />
 				<meta property="og:image:height" content="630" />
 				<meta name="twitter:site" content="@typstapp" />
 				<meta name="twitter:card" content="summary_large_image" />
-				<link rel="canonical" href={`https://typst-jp.github.io${route}`} />
+				<link rel="canonical" href={absoluteRouteUrl} />
 				<meta name="robots" content="index, follow" />
 				<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
 				<meta
@@ -184,7 +182,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 							{translationStatus !== "community" && (
 								<div class="flex">
 									<a
-										href={`https://typst.app${route}`}
+										href={typstOfficialRouteUrl}
 										target="_blank"
 										rel="noopener noreferrer"
 										class="inline-flex items-center text-sm  underline text-gray-400 hover:text-gray-600 transition-colors"
@@ -203,7 +201,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 
 							{translationStatus !== "community" && (
 								<a
-									href={`https://typst.app${route}`}
+									href={typstOfficialRouteUrl}
 									target="_blank"
 									rel="noopener noreferrer"
 									class="group inline-flex items-center px-3 py-2 rounded-md border border-gray-200 bg-white hover:border-gray-500 hover:bg-gray-50 transition-all duration-200 w-fit"
diff --git a/website/src/metadata.ts b/website/src/metadata.ts
@@ -7,3 +7,4 @@ export const githubOrganizationUrl = "https://github.com/typst-jp";
 export const githubRepositoryUrl =
 	"https://github.com/typst-jp/typst-jp.github.io";
 export const discordServerUrl = "https://discord.gg/9xF7k4aAuH";
+export const baseUrl = "https://typst-jp.github.io/";
diff --git a/website/vite.config.ts b/website/vite.config.ts
@@ -7,6 +7,7 @@ import devServer from "@hono/vite-dev-server";
 import ssg from "@hono/vite-ssg";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
+import { baseUrl } from "./src/metadata";
 
 // typst-docsが生成したドキュメントのアセットをassets/docsにシンボリックリンクする
 const assetsDocsPath = resolve(__dirname, "../assets/docs/");
@@ -15,17 +16,19 @@ const publicAssetsDocsPath = resolve(__dirname, "./public/assets/docs/");
 rmSync(publicAssetsDocsPath, { recursive: true, force: true });
 symlinkSync(assetsDocsPath, publicAssetsDocsPath, "dir");
 
+const sitemapUrl = new URL("/sitemap.xml", baseUrl).href;
+
 export default defineConfig({
 	plugins: [
 		tailwindcss(),
 		ssg({
 			plugins: [
 				sitemapPlugin({
-					baseUrl: "https://typst-jp.github.io/",
+					baseUrl,
 				}),
 				robotsTxtPlugin({
 					rules: [{ userAgent: "*", allow: ["/"] }],
-					sitemapUrl: "https://typst-jp.github.io/sitemap.xml",
+					sitemapUrl,
 				}),
 			],
 		}),
