typst-jp · 3w36zj6 · Aug 23, 2025 · Aug 15, 2025 · Aug 17, 2025 · Aug 17, 2025
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,6 @@ package-lock.json
 /result
 .direnv/
 
-# Documentation
-/assets/docs
-/assets/docs.json
+# Generated documentation
+/assets
+/docs.json
diff --git a/.mise.toml b/.mise.toml
@@ -9,14 +9,11 @@ yes = true
 idiomatic_version_file_enable_tools = []
 
 [tasks.generate-docs]
-run = "cargo test --package typst-docs --lib -- tests::test_docs --exact --nocapture"
+run = "cargo run --package typst-docs -- --assets-dir assets --out-file docs.json --base /docs/"
 
 [tasks.generate-web]
 depends = ["install-website"]
-run = [
-    "bun install --frozen-lockfile",
-    "bun run build",
-]
+run = ["bun run build"]
 dir = "./website"
 
 [tasks.generate]

diff --git a/website/.gitignore b/website/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 dist/
-public/assets/docs
+public/assets
+public/docs.json
diff --git a/website/bun.lockb b/website/bun.lockb
diff --git a/website/package.json b/website/package.json
@@ -6,15 +6,15 @@
 		"dev": "vite dev",
 		"build": "vite build && npm run update-search-index",
 		"preview": "vite preview",
-		"update-search-index": "pagefind --site ./dist/ --glob \"docs/**/*.html\"",
+		"update-search-index": "pagefind --site ./dist/ --glob \"**/*.html\"",
 		"check": "biome check .",
 		"check:write": "biome check --write .",
 		"test": "vitest"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@hono/ssg-plugins-essential": "^0.1.0",
-		"@hono/vite-dev-server": "^0.19.0",
+		"@hono/vite-dev-server": "^0.20.1",
 		"@hono/vite-ssg": "^0.2.0",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.5",
@@ -23,7 +23,7 @@
 		"pagefind": "^1.3.0",
 		"tailwind-merge": "^3.3.0",
 		"tailwindcss": "^4.1.5",
-		"vite": "^6.2.5",
+		"vite": "^7.1.2",
 		"vitest": "^3.1.4"
 	}
 }
diff --git a/website/public/assets/favicon.png → website/public/favicon.png b/website/public/assets/favicon.png → website/public/favicon.png
diff --git a/...nts/cascadia-code/CascadiaMono-Bold.woff2 → ...nts/cascadia-code/CascadiaMono-Bold.woff2 b/...nts/cascadia-code/CascadiaMono-Bold.woff2 → ...nts/cascadia-code/CascadiaMono-Bold.woff2
diff --git a/...cadia-code/CascadiaMono-Regular-Sub.woff2 → ...cadia-code/CascadiaMono-Regular-Sub.woff2 b/...cadia-code/CascadiaMono-Regular-Sub.woff2 → ...cadia-code/CascadiaMono-Regular-Sub.woff2
diff --git a/...public/assets/fonts/cascadia-code/LICENSE → website/public/fonts/cascadia-code/LICENSE b/...public/assets/fonts/cascadia-code/LICENSE → website/public/fonts/cascadia-code/LICENSE
diff --git a/...fonts/hanken-grotesk/HKGrotesk-Bold.woff2 → ...fonts/hanken-grotesk/HKGrotesk-Bold.woff2 b/...fonts/hanken-grotesk/HKGrotesk-Bold.woff2 → ...fonts/hanken-grotesk/HKGrotesk-Bold.woff2
diff --git a/...ts/hanken-grotesk/HKGrotesk-Regular.woff2 → ...ts/hanken-grotesk/HKGrotesk-Regular.woff2 b/...ts/hanken-grotesk/HKGrotesk-Regular.woff2 → ...ts/hanken-grotesk/HKGrotesk-Regular.woff2
diff --git a/...s/hanken-grotesk/HKGrotesk-SemiBold.woff2 → ...s/hanken-grotesk/HKGrotesk-SemiBold.woff2 b/...s/hanken-grotesk/HKGrotesk-SemiBold.woff2 → ...s/hanken-grotesk/HKGrotesk-SemiBold.woff2
diff --git a/...ublic/assets/fonts/hanken-grotesk/LICENSE → website/public/fonts/hanken-grotesk/LICENSE b/...ublic/assets/fonts/hanken-grotesk/LICENSE → website/public/fonts/hanken-grotesk/LICENSE
diff --git a/website/public/index.html b/website/public/index.html
diff --git a/website/src/components/templates/BaseTemplate.tsx b/website/src/components/templates/BaseTemplate.tsx
@@ -1,6 +1,8 @@
+import { html } from "hono/html";
 import type { FC, PropsWithChildren } from "hono/jsx";
-import { baseUrl, typstOfficialUrl } from "../../metadata";
+import { basePath, originUrl, typstOfficialDocsUrl } from "../../metadata";
 import type { Page } from "../../types/model";
+import { joinPath, removeBasePath } from "../../utils/path";
 import { getTranslationStatus } from "../../utils/translationStatus";
 import {
 	CaretRightCircleIcon,
@@ -42,9 +44,15 @@ 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();
+	const absoluteRouteUrl = new URL(route, originUrl).toString();
+	const faviconUrl = new URL(
+		joinPath(basePath, "/favicon.png"),
+		originUrl,
+	).toString();
+	const typstOfficialRouteUrl = joinPath(
+		typstOfficialDocsUrl,
+		removeBasePath(basePath, route),
+	);
-	const typstOfficialRouteUrl = joinPath(
-		typstOfficialDocsUrl,
-		removeBasePath(basePath, route),
-	);
+	const typstOfficialRouteUrl = new URL(
+		removeBasePath(basePath, route).replace(/^\//, ""),
+		typstOfficialDocsUrl,
+	).toString();
-	const typstOfficialRouteUrl = joinPath(
-		typstOfficialDocsUrl,
-		removeBasePath(basePath, route),
-	);
+	const typstOfficialRouteUrl = new URL(
+		removeBasePath(basePath, route).replace(/^\//, ""),
+		typstOfficialDocsUrl,
+	).toString();
 	return (
 		<html lang="ja" class="scroll-pt-24">
 			<head>
@@ -68,7 +76,6 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 				<meta name="twitter:card" content="summary_large_image" />
 				<link rel="canonical" href={absoluteRouteUrl} />
 				<meta name="robots" content="index, follow" />
-				<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
 				<meta
 					name="twitter:image:alt"
 					content="The left side of a text editor with colorful cursors, as well as the text 'Compose papers faster, Typst'"
@@ -77,46 +84,67 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 					rel="icon"
 					type="image/png"
 					sizes="32x32"
-					href="/assets/favicon.png"
+					href={joinPath(basePath, "/favicon.png")}
 				/>
 				<link
 					rel="preload"
-					href="/assets/fonts/hanken-grotesk/HKGrotesk-Regular.woff2"
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-Regular.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href="/assets/fonts/hanken-grotesk/HKGrotesk-Bold.woff2"
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-Bold.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href="/assets/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2"
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href="/assets/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2"
+					href={joinPath(
+						basePath,
+						"/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					href={
-						import.meta.env.DEV ? "/src/globals.css" : "/assets/globals.css"
+						import.meta.env.DEV
+							? joinPath(basePath, "/src/globals.css")
+							: joinPath(basePath, "/globals.css")
 					}
 					rel="stylesheet"
 				/>
 				<script
 					defer
 					src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
 				/>
+				{/* NOTE: @hono/vite-dev-server does not respect the base setting in the Vite configuration. */}
+				{import.meta.env.DEV &&
+					html`
+          <script>
+			import("${joinPath(basePath, "/@vite/client")}")
+          </script>
+        `}
 			</head>
 
 			<body
@@ -218,11 +246,11 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 								</a>
 							)}
 
-							{route === "/docs/" ? (
+							{route === basePath ? (
 								<div class="doc-categories grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
 									<a
 										class="doc-category flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
-										href="/docs/tutorial"
+										href={joinPath(basePath, "/tutorial/")}
 									>
 										<div class="flex items-center mb-3">
 											<div class="w-6 h-6 text-gray-800 mr-2">
@@ -238,7 +266,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 									</a>
 									<a
 										class="doc-category flex flex-col p-6 bg-white border border-gray-200 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200"
-										href="/docs/reference"
+										href={joinPath(basePath, "/reference/")}
 									>
 										<div class="flex items-center mb-3">
 											<div class="w-6 h-6 text-gray-800 mr-2">

diff --git a/website/src/components/ui/FunctionDefinition.tsx b/website/src/components/ui/FunctionDefinition.tsx
@@ -1,5 +1,7 @@
 import type { FC } from "hono/jsx";
+import { basePath } from "../../metadata";
 import type { Func } from "../../types/model";
+import { joinPath } from "../../utils/path";
 import { TypeIcon } from "./TypeIcon";
 import { genPath } from "./genPath";
 import { buildParamId, type2href } from "./type2href";
@@ -48,7 +50,9 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 										<TypeIcon
 											key={t}
 											type={t}
-											href={href ? `/docs/reference/${href}` : undefined}
+											href={
+												href ? joinPath(basePath, "reference", href) : undefined
+											}
 										/>
 									);
 								})}
@@ -72,7 +76,9 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 										<TypeIcon
 											key={ret}
 											type={ret}
-											href={href ? `/docs/reference/${href}` : undefined}
+											href={
+												href ? joinPath(basePath, "reference", href) : undefined
+											}
 										/>
 										{i < func.returns.length - 1 && (
 											<span class="text-gray-500 mx-1">,</span>

diff --git a/website/src/components/ui/FunctionParameters.tsx b/website/src/components/ui/FunctionParameters.tsx
@@ -1,5 +1,7 @@
 import type { FC } from "hono/jsx";
+import { basePath } from "../../metadata";
 import type { Func } from "../../types/model";
+import { joinPath } from "../../utils/path";
 import { ChevronRightIcon } from "../icons";
 import { HtmlContent } from "./HtmlContent";
 import { Tooltip } from "./Tooltip";
@@ -40,7 +42,9 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 										<TypeIcon
 											key={t}
 											type={t}
-											href={href ? `/docs/reference/${href}` : undefined}
+											href={
+												href ? joinPath(basePath, "reference", href) : undefined
+											}
 										/>
 									);
 								})}

diff --git a/website/src/components/ui/common/Breadcrumbs.tsx b/website/src/components/ui/common/Breadcrumbs.tsx
@@ -1,3 +1,4 @@
+import { basePath } from "../../../metadata";
 import type { Page } from "../../../types/model";
 import { ChevronRightIcon, HomeIcon } from "../../icons";
 
@@ -10,7 +11,7 @@ export const Breadcrumbs = ({ path }: BreadcrumbsProps) => {
 		<nav class="flex justify-between px-3.5 py-1 border border-neutral-200/60 rounded-md">
 			<ol class="inline-flex flex-wrap items-center space-x-1 text-sm text-gray-600">
 				<li class="flex items-center h-full">
-					<a href="/docs/" class="py-1 hover:text-gray-800 transition-colors">
+					<a href={basePath} class="py-1 hover:text-gray-800 transition-colors">
 						<div class="w-4 h-4">
 							<HomeIcon />
 						</div>

diff --git a/website/src/components/ui/common/SearchWindow.tsx b/website/src/components/ui/common/SearchWindow.tsx
@@ -1,11 +1,20 @@
 import type { FC } from "hono/jsx";
+import { basePath } from "../../../metadata";
+import { joinPath } from "../../../utils/path";
 import { CloseIcon } from "../../icons";
 
 export const SearchWindow: FC = () => {
 	return (
 		<div class="flex flex-col max-h-[80vh]">
-			<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
-			<script src="/pagefind/pagefind-ui.js" />
+			{import.meta.env.PROD && (
+				<>
+					<link
+						href={joinPath(basePath, "/pagefind/pagefind-ui.css")}
+						rel="stylesheet"
+					/>
+					<script src={joinPath(basePath, "/pagefind/pagefind-ui.js")} />
+				</>
+			)}
 			<div class="flex justify-between items-center p-4 border-b border-gray-200 flex-shrink-0">
 				<h2 class="text-lg font-semibold">検索</h2>
 				<button
@@ -20,17 +29,22 @@ export const SearchWindow: FC = () => {
 				</button>
 			</div>
 			<div class="p-4 overflow-y-auto flex-1">
+				{import.meta.env.DEV && (
+					<p>Search is disabled in the development environment.</p>
+				)}
 				<div id="search" />
 			</div>
-			<script
-				// biome-ignore lint/security/noDangerouslySetInnerHtml: pagefindで生成されたスクリプトを実行する
-				dangerouslySetInnerHTML={{
-					__html: `window.addEventListener('DOMContentLoaded', (event) => {
+			{!import.meta.env.DEV && (
+				<script
+					// biome-ignore lint/security/noDangerouslySetInnerHtml: pagefindで生成されたスクリプトを実行する
+					dangerouslySetInnerHTML={{
+						__html: `window.addEventListener('DOMContentLoaded', (event) => {
 	new PagefindUI({ element: "#search", showSubResults: true });
 });
 `,
-				}}
-			/>
+					}}
+				/>
+			)}
 		</div>
 	);
 };
diff --git a/website/src/components/ui/common/SiteTitle.tsx b/website/src/components/ui/common/SiteTitle.tsx
@@ -1,6 +1,7 @@
+import { basePath } from "../../../metadata";
 export const SiteTitle = () => {
 	return (
-		<a href="/docs" class="logo-box hover:opacity-80 transition-opacity">
+		<a href={basePath} class="logo-box hover:opacity-80 transition-opacity">
 			<div class="flex items-baseline">
 				<span class="text-base font-bold text-teal-600">Typst</span>
 				<span class="text-base font-medium text-gray-600 ml-1">

diff --git a/website/src/components/ui/type2href.ts b/website/src/components/ui/type2href.ts
@@ -45,16 +45,16 @@ export const type2href = (parameterType: string): string | null => {
 	const introspectionSet = new Set(["counter", "location", "state"]);
 
 	if (foundationSet.has(parameterType)) {
-		return `foundations/${parameterType}`;
+		return `foundations/${parameterType}/`;
 	}
 	if (layoutSet.has(parameterType)) {
-		return `layout/${parameterType}`;
+		return `layout/${parameterType}/`;
 	}
 	if (visualizeSet.has(parameterType)) {
-		return `visualize/${parameterType}`;
+		return `visualize/${parameterType}/`;
 	}
 	if (introspectionSet.has(parameterType)) {
-		return `introspection/${parameterType}`;
+		return `introspection/${parameterType}/`;
 	}
 	return null;
 };

diff --git a/website/src/globals.css b/website/src/globals.css
@@ -4,33 +4,31 @@
 /* Global font family */
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("/assets/fonts/hanken-grotesk/HKGrotesk-Regular.woff2")
-		format("woff2");
+	src: url("/fonts/hanken-grotesk/HKGrotesk-Regular.woff2") format("woff2");
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("/assets/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2")
-		format("woff2");
+	src: url("/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2") format("woff2");
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("/assets/fonts/hanken-grotesk/HKGrotesk-Bold.woff2") format("woff2");
+	src: url("/fonts/hanken-grotesk/HKGrotesk-Bold.woff2") format("woff2");
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Cascadia Mono";
-	src: url("/assets/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2")
+	src: url("/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2")
 		format("woff2");
 	font-weight: 400;
 	font-style: normal;