fix: sidebar expand

Author: MaxtuneLee

package.json

@@ -20,7 +20,8 @@
     "format": "prettier --write \"src/**/*.ts\" ",
     "lint": "eslint --fix",
     "preinstall": "sh scripts/preinstall.sh",
-    "prepare": "simple-git-hooks"
+    "prepare": "simple-git-hooks",
+    "update:lastmodified": "tsx scripts/update-lastmodified.ts"
   },
   "dependencies": {
     "@afilmory/builder": "workspace:*",
@@ -51,7 +52,7 @@
     "vite-tsconfig-paths": "5.1.4"
   },
   "simple-git-hooks": {
-    "pre-commit": "pnpm exec lint-staged"
+    "pre-commit": "tsx scripts/update-lastmodified.ts && pnpm exec lint-staged"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

packages/docs/contents/deployment/docker.mdx

@@ -0,0 +1,8 @@
+---
+title: Docker
+description: Guide to deploying Afilmory via Docker.
+createdAt: 2025-07-20T22:35:03+08:00
+lastModified: 2025-08-08T08:28:42.778+08:00
+---
+
+# Docker Deployment

packages/docs/contents/deployment/index.mdx

@@ -1,10 +1,16 @@
 ---
 title: Deployment
-description: Guide to deploying Afilmory Builder in production environments, including Docker and configuration options.
+description: Guide to deploying Afilmory in production environments, including Docker and configuration options.
 createdAt: 2025-07-20T22:35:03+08:00
-lastModified: 2025-07-20T22:35:03+08:00
+lastModified: 2025-08-08T08:28:42.778+08:00
 ---
 
 # Deployment
 
-Deploying Afilmory in production involves 
+Deploying Afilmory can be accomplished through various methods, you can choose the one that best fits your needs. Below are the common deployment methods:
+
+- [Docker Deployment](/deployment/docker)
+- [Github Action Deployment](/deployment/github-action)
+- [Github Pages Deployment](/deployment/github-pages)
+- [Vercel Deployment](/deployment/vercel)
+- [Cloudflare Pages Deployment](/deployment/cloudflare-pages)

packages/docs/scripts/build.ts

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-import { mkdir,readFile, writeFile } from 'node:fs/promises'
-import { dirname,join } from 'node:path'
-import { fileURLToPath, pathToFileURL  } from 'node:url'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
 
-import type {RouteConfig} from '../src/routes';
+import type { RouteConfig } from '../src/routes'
 import routes from '../src/routes.json'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
@@ -31,9 +31,9 @@ async function build() {
         .replace('<!--app-html-->', html)
         .replace(
           '<!--app-title-->',
-          (route.meta?.title as string) ||
-            route.title ||
-            'Afilmory Documentation',
+          `${
+            (route.meta?.title as string) || route.title || 'Docs'
+          } | Afilmory Docs`,
         )
         .replace('<!--app-head-->', generateMetaTags(route))
 
@@ -64,7 +64,10 @@ function generateMetaTags(route: Omit<RouteConfig, 'component'>): string {
   const title = meta.title as string
 
   if (description) {
-    tags.push(`<meta name="description" content="${description}">`, `<meta property="og:description" content="${description}">`)
+    tags.push(
+      `<meta name="description" content="${description}">`,
+      `<meta property="og:description" content="${description}">`,
+    )
   }
 
   if (title) {

packages/docs/src/App.tsx

@@ -1,28 +1,18 @@
 import { AlignLeftIcon, ArrowRight } from 'lucide-react'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { MDX } from './components'
 import { DocumentFooter } from './components/DocumentFooter'
 import { MobileTableOfContents } from './components/MobileTableOfContents'
 import { Sidebar } from './components/Sidebar'
 import { TableOfContents } from './components/TableOfContents'
-import routes from './routes'
 import { getRandomKaomoji } from './utils/kaomoji'
+import { getMatchedRoute } from './utils/routes'
 
 function App({ url }: { url?: string }) {
   const [currentPath, setCurrentPath] = useState(url || '/')
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
-  const matchedRoute = routes.find((route) => {
-    const normalizedCurrentPath =
-      currentPath.endsWith('/') && currentPath !== '/'
-        ? currentPath.slice(0, -1)
-        : currentPath
-    const normalizedRoutePath =
-      route.path.endsWith('/') && route.path !== '/'
-        ? route.path.slice(0, -1)
-        : route.path
-    return normalizedRoutePath === normalizedCurrentPath
-  })
+  const matchedRoute = getMatchedRoute(currentPath)
   const mainContentRef = useRef<HTMLDivElement>(null)
 
   const handleScrollMainContent = (top: number) => {
@@ -51,6 +41,14 @@ function App({ url }: { url?: string }) {
     setIsSidebarOpen(!isSidebarOpen)
   }, [isSidebarOpen])
 
+  useEffect(() => {
+    if (matchedRoute) {
+      document.title = `${matchedRoute.title || 'Docs'} | Afilmory Docs`
+    } else {
+      document.title = '404 Page Not Found | Afilmory Docs'
+    }
+  }, [matchedRoute])
+
   if (!matchedRoute) {
     return (
       <div className="bg-background flex h-screen">

packages/docs/src/components/DocumentFooter.tsx

@@ -24,7 +24,6 @@ export function DocumentFooter({ createdAt, lastModified }: DocumentMetaProps) {
       return dateString
     }
   }
-  console.info('Current theme:', theme)
   const themeOptions = [
     { value: 'light', icon: Sun, label: 'Light' },
     { value: 'system', icon: Monitor, label: 'System' },

packages/docs/src/components/Sidebar.tsx

@@ -1,8 +1,9 @@
 import { ChevronRight } from 'lucide-react'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import type { RouteConfig } from '../routes'
 import { routes } from '../routes'
+import { getMatchedRoute } from '../utils/routes'
 
 interface SidebarProps {
   currentPath?: string
@@ -94,9 +95,16 @@ function NavigationItemComponent({
   }, [currentPath, item.path, item.children])
 
   const [isExpanded, setIsExpanded] = useState(shouldExpand)
-  const isActive = currentPath === item.path
+  const isActive = currentPath
+    ? getMatchedRoute(currentPath)?.path === item.path
+    : false
   const hasChildren = item.children && item.children.length > 0
 
+  // 当 currentPath 改变时，重新计算是否应该展开
+  useEffect(() => {
+    setIsExpanded(shouldExpand())
+  }, [shouldExpand])
+
   const handleTitleClick = () => {
     onNavigate?.(item.path)
   }

packages/docs/src/routes.json

@@ -13,9 +13,19 @@
     "title": "Deployment",
     "meta": {
       "title": "Deployment",
-      "description": "Guide to deploying Afilmory Builder in production environments, including Docker and configuration options.",
+      "description": "Guide to deploying Afilmory in production environments, including Docker and configuration options.",
       "createdAt": "2025-07-20T22:35:03+08:00",
-      "lastModified": "2025-07-20T22:35:03+08:00"
+      "lastModified": "2025-08-08T08:28:42.778+08:00"
+    }
+  },
+  {
+    "path": "/deployment/docker",
+    "title": "Docker",
+    "meta": {
+      "title": "Docker",
+      "description": "Guide to deploying Afilmory via Docker.",
+      "createdAt": "2025-07-20T22:35:03+08:00",
+      "lastModified": "2025-08-08T08:28:42.778+08:00"
     }
   }
 ]

packages/docs/src/routes.ts

@@ -2,6 +2,7 @@
 // This file is automatically generated by the route-generator plugin
 // Do not edit manually - your changes will be overwritten
 
+import Route2 from '../contents/deployment/docker.mdx'
 import Route1 from '../contents/deployment/index.mdx'
 import Route0 from '../contents/index.mdx'
 
@@ -30,9 +31,20 @@ export const routes: RouteConfig[] = [
     meta: {
       title: 'Deployment',
       description:
-        'Guide to deploying Afilmory Builder in production environments, including Docker and configuration options.',
+        'Guide to deploying Afilmory in production environments, including Docker and configuration options.',
       createdAt: '2025-07-20T22:35:03+08:00',
-      lastModified: '2025-07-20T22:35:03+08:00',
+      lastModified: '2025-08-08T08:28:42.778+08:00',
+    },
+  },
+  {
+    path: '/deployment/docker',
+    component: Route2,
+    title: 'Docker',
+    meta: {
+      title: 'Docker',
+      description: 'Guide to deploying Afilmory via Docker.',
+      createdAt: '2025-07-20T22:35:03+08:00',
+      lastModified: '2025-08-08T08:28:42.778+08:00',
     },
   },
 ]

packages/docs/src/toc-data.ts

@@ -199,6 +199,19 @@ export const tocData: FileToc[] = [
       },
     ],
   },
+  {
+    file: 'deployment/docker.mdx',
+    path: '/deployment/docker',
+    title: 'Docker',
+    toc: [
+      {
+        id: 'heading-docker-deployment',
+        level: 1,
+        text: 'Docker Deployment',
+        children: [],
+      },
+    ],
+  },
 ]
 
 // Helper function to find TOC data by file path