feat: implement dynamic page title in Header component

- Added a function to dynamically set the page title based on the current route in the Header component.
- Removed unused imports and enabled JSON module resolution in TypeScript configuration.

docs/src/components/header/HeaderSearch.tsx

@@ -1,4 +1,4 @@
-import { TbSearch, TbX, TbLoader, TbLoaderQuarter } from "solid-icons/tb";
+import { TbSearch, TbX, TbLoaderQuarter } from "solid-icons/tb";
 import { createSignal, onMount } from "solid-js";
 import { detectOperatingSystem } from "~/utils/platform";
 import { IconButton } from "../button/IconButton";

docs/src/components/header/index.tsx

@@ -1,13 +1,29 @@
 import { createSignal } from "solid-js";
-import { TbSearch, TbX } from "solid-icons/tb";
-import { IconButton } from "../button/IconButton";
+import { useLocation } from "@solidjs/router";
 import { HeaderLogo } from "./HeaderLogo";
 import { HeaderSearch } from "./HeaderSearch";
 import { HeaderIcons } from "./HeaderIcons";
 import { HeaderTab } from "./HeaderTab";
+import { flattenDocPages } from "~/utils/doc-index";
+import docIndex from "../../../doc-index.json";
 
 export function Header() {
   const [isSearchOpen, setIsSearchOpen] = createSignal(false);
+  const location = useLocation();
+
+  const getPageTitle = () => {
+    const path = location.pathname;
+    if (path === "/") return "Tombi";
+    if (path === "/playground") return "Playground";
+
+    const flattenedPages = flattenDocPages(docIndex);
+    const page = flattenedPages.find((page) => {
+      console.log(`${import.meta.env.BASE_URL}${page.path}`, path);
+      return `${import.meta.env.BASE_URL}${page.path}` === path;
+    });
+    return page?.title || "Tombi";
+  };
+
   return (
     <header class="fixed top-0 left-0 right-0 bg-tombi-primary shadow-lg z-40">
       <nav class="max-w-7xl mx-auto">
@@ -22,7 +38,7 @@ export function Header() {
               !isSearchOpen() ? "w-full md:opacity-100" : "w-0 opacity-0"
             } flex justify-center text-white text-lg font-bold text-center md:hidden`}
           >
-            Tombi
+            {getPageTitle()}
           </h1>
           <HeaderSearch
             isSearchOpen={isSearchOpen()}

docs/tsconfig.json

@@ -12,6 +12,7 @@
     "noEmit": true,
     "types": ["vinxi/types/client"],
     "isolatedModules": true,
+    "resolveJsonModule": true,
     "paths": {
       "~/*": ["./src/*"]
     }