typst-jp · 3w36zj6 · May 25, 2025 · May 24, 2025 · May 24, 2025 · May 24, 2025
diff --git a/website/README.md b/website/README.md
@@ -2,6 +2,9 @@
 
 ## Develop
 
+> [!NOTE]
+> 全文検索のインデックスは[pagefind](https://pagefind.app/)で生成していますが、インデックスの出力先が`dist/`になっているため、現在は開発サーバーで全文検索が機能しません。検索機能関連の開発をする場合は、`bun run build`を実行してから、`bun run preview`でビルド後の状態を確認してください。
+
 ```sh
 bun run dev
 ```

diff --git a/website/bun.lockb b/website/bun.lockb
diff --git a/website/package.json b/website/package.json
@@ -4,8 +4,9 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build && bun run update-search-index",
 		"preview": "vite preview",
+		"update-search-index": "pagefind --site ./dist/ --glob \"docs/**/*.html\"",
 		"check": "biome check .",
 		"check:write": "biome check --write ."
 	},
@@ -17,6 +18,7 @@
 		"@tailwindcss/vite": "^4.1.5",
 		"@types/bun": "latest",
 		"hono": "^4.6.13",
+		"pagefind": "^1.3.0",
 		"tailwind-merge": "^3.3.0",
 		"tailwindcss": "^4.1.5",
 		"vite": "^6.2.5"

diff --git a/website/src/components/icons/SearchIcon.tsx b/website/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,19 @@
+export const SearchIcon = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="icon icon-tabler icons-tabler-outline icon-tabler-search"
+		>
+			<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" />
+		</svg>
+	);
+};
diff --git a/website/src/components/icons/index.ts b/website/src/components/icons/index.ts
@@ -9,6 +9,7 @@ export { ChevronRightIcon } from "./ChevronRightIcon";
 export { AlertTriangleIcon } from "./AlertTriangleIcon";
 export { MenuIcon } from "./MenuIcon";
 export { CloseIcon } from "./CloseIcon";
+export { SearchIcon } from "./SearchIcon";
 
 // Simple Icons
 // https://simpleicons.org/

diff --git a/website/src/components/templates/BaseTemplate.tsx b/website/src/components/templates/BaseTemplate.tsx
@@ -11,6 +11,7 @@ import {
 	Breadcrumbs,
 	Footer,
 	Header,
+	SearchWindow,
 	SideNavigation,
 	SiteNoticeBanner,
 	TableOfContents,
@@ -118,7 +119,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 
 			<body
 				class="no-js docs has-outline min-h-screen flex flex-col"
-				x-data="{ sidebarOpen: false }"
+				x-data="{ sidebarOpen: false, searchOpen: false }"
 			>
 				<SiteNoticeBanner />
 				<Header />
@@ -254,6 +255,32 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 					</div>
 				</div>
 
+				<div
+					class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-16"
+					x-show="searchOpen"
+					x-cloak
+					x-transition:enter="ease-out duration-300"
+					x-transition:enter-start="opacity-0"
+					x-transition:enter-end="opacity-100"
+					x-transition:leave="ease-in duration-200"
+					x-transition:leave-start="opacity-100"
+					x-transition:leave-end="opacity-0"
+					x-on:click="searchOpen = false"
+				>
+					<div
+						class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4"
+						x-on:click="$event.stopPropagation()"
+						x-transition:enter="ease-out duration-300"
+						x-transition:enter-start="opacity-0 scale-95"
+						x-transition:enter-end="opacity-100 scale-100"
+						x-transition:leave="ease-in duration-200"
+						x-transition:leave-start="opacity-100 scale-100"
+						x-transition:leave-end="opacity-0 scale-95"
+					>
+						<SearchWindow />
+					</div>
+				</div>
+
 				<Footer />
 			</body>
 		</html>

diff --git a/website/src/components/ui/common/Header.tsx b/website/src/components/ui/common/Header.tsx
@@ -5,7 +5,7 @@ import {
 	typstOfficialUrl,
 	version,
 } from "../../../metadata";
-import { DiscordIcon, GitHubIcon, MenuIcon } from "../../icons";
+import { DiscordIcon, GitHubIcon, MenuIcon, SearchIcon } from "../../icons";
 import { SiteTitle } from "./SiteTitle";
 
 const VersionBadge = () => (
@@ -19,9 +19,21 @@ export const Header = () => {
 		<>
 			<header class="boring sticky top-0 z-40 bg-white border-b border-gray-200 hidden lg:block">
 				<div class="flex justify-between items-center py-3 px-6">
-					<div class="flex items-center">
-						<SiteTitle />
-						<VersionBadge />
+					<div class="flex items-center gap-4">
+						<div class="flex items-center">
+							<SiteTitle />
+							<VersionBadge />
+						</div>
+						<button
+							type="button"
+							class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-md hover:border-gray-300 transition-colors w-48"
+							x-on:click="searchOpen = true"
+						>
+							<div class="w-4 h-4 text-gray-600">
+								<SearchIcon />
+							</div>
+							<span class="text-left flex-1">検索...</span>
+						</button>
 					</div>
 					<nav class="ml-auto">
 						<ul class="flex items-center gap-4">
@@ -72,16 +84,28 @@ export const Header = () => {
 						<SiteTitle />
 						<VersionBadge />
 					</div>
-					<button
-						type="button"
-						class="p-1 bg-white rounded-md border border-gray-200"
-						x-on:click="sidebarOpen = !sidebarOpen"
-						aria-label="メニューを開く"
-					>
-						<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
-							<MenuIcon />
-						</div>
-					</button>
+					<div class="flex items-center gap-2">
+						<button
+							type="button"
+							class="p-2 text-gray-600 hover:text-gray-800 transition-colors"
+							x-on:click="searchOpen = true"
+							aria-label="検索を開く"
+						>
+							<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
+								<SearchIcon />
+							</div>
+						</button>
+						<button
+							type="button"
+							class="p-1 bg-white rounded-md border border-gray-200"
+							x-on:click="sidebarOpen = !sidebarOpen"
+							aria-label="メニューを開く"
+						>
+							<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
+								<MenuIcon />
+							</div>
+						</button>
+					</div>
 				</div>
 			</header>
 		</>

diff --git a/website/src/components/ui/common/SearchWindow.tsx b/website/src/components/ui/common/SearchWindow.tsx
@@ -0,0 +1,36 @@
+import type { FC } from "hono/jsx";
+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" />
+			<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
+					type="button"
+					class="text-gray-400 hover:text-gray-600"
+					x-on:click="searchOpen = false"
+					aria-label="検索を閉じる"
+				>
+					<div class="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors">
+						<CloseIcon />
+					</div>
+				</button>
+			</div>
+			<div class="p-4 overflow-y-auto flex-1">
+				<div id="search" />
+			</div>
+			<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/index.ts b/website/src/components/ui/common/index.ts
@@ -5,3 +5,4 @@ export { SideNavigation, type SideNavigationProps } from "./SideNavigation";
 export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";
 export { TableOfContents, type TableOfContentsProps } from "./TableOfContents";
 export { Footer } from "./Footer";
+export { SearchWindow } from "./SearchWindow";