diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 059d704..2341733 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,5 +10,6 @@ module.exports = {
     ],
     'prefer-arrow-callback': 'off',
     'react/display-name': 'off',
+    'tailwindcss/migration-from-tailwind-2': 0,
   },
 }
diff --git a/markdown/index.json b/markdown/index.json
index 4e411a0..c7c2a45 100644
--- a/markdown/index.json
+++ b/markdown/index.json
@@ -1,17 +1,19 @@
 [
   {
     "paths": [
-      "./sections/guide/what-this.md"
+      "what-this.md"
     ],
+    "slug": "guide",
     "title": "开始"
   },
   {
     "paths": [
-      "./sections/usage/markdown.md",
-      "./sections/usage/draw.md",
-      "./sections/usage/custom-component.md",
-      "./sections/usage/highlight.md"
+      "custom-component.md",
+      "draw.md",
+      "highlight.md",
+      "markdown.md"
     ],
+    "slug": "usage",
     "title": "使用"
   }
 ]
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index 571f2e3..3cd26f3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,10 @@
+import { bootstarp } from './plugins/json-watcher.mjs'
+
+bootstarp()
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: process.env.NODE_ENV === 'production' ? 'export' : 'standalone',
-  reactStrictMode: false,
 
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     config.plugins.push(
diff --git a/package.json b/package.json
index c0cb14b..827b968 100644
--- a/package.json
+++ b/package.json
@@ -37,11 +37,13 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@types/katex": "0.16.7",
     "camelcase-keys": "9.1.3",
+    "chokidar": "^3.6.0",
     "clsx": "2.1.1",
     "colorjs.io": "0.5.0",
     "devtools-detector": "2.0.17",
     "foxact": "0.2.33",
     "framer-motion": "11.2.4",
+    "globby": "^14.0.1",
     "immer": "10.1.1",
     "jotai": "2.8.0",
     "js-yaml": "4.1.0",
diff --git a/plugins/interface.d.ts b/plugins/interface.d.ts
new file mode 100644
index 0000000..2ad2d57
--- /dev/null
+++ b/plugins/interface.d.ts
@@ -0,0 +1,9 @@
+export type DocumentGraph = SingleDocumentTree[]
+
+export interface SingleDocumentTree {
+  title: string
+  paths: (string | PathWithMeta)[]
+  slug: string
+}
+interface PathMeta {}
+export type PathWithMeta = [string, PathMeta?]
diff --git a/plugins/json-watcher.mjs b/plugins/json-watcher.mjs
new file mode 100644
index 0000000..fe66979
--- /dev/null
+++ b/plugins/json-watcher.mjs
@@ -0,0 +1,234 @@
+import { existsSync, writeFileSync } from 'fs'
+import { readFile } from 'fs/promises'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { watch } from 'chokidar'
+import { globbySync } from 'globby'
+
+const __dirname = path.resolve(fileURLToPath(import.meta.url), '..')
+const dataJsonPath = path.resolve(__dirname, '../markdown/index.json')
+const workdirPath = path.resolve(__dirname, '../markdown/sections')
+const pathGlob = workdirPath + '/**/*.md'
+
+const readFsDataJsonData = async () => {
+  const hasFile = existsSync(dataJsonPath)
+
+  if (!hasFile) {
+    createDefaultDataJson()
+    return readFsDataJsonData()
+  }
+  const data = await readFile(dataJsonPath, 'utf8')
+
+  try {
+    return JSON.parse(data)
+  } catch {
+    console.error('JSON parser error.')
+    return []
+  }
+}
+
+/**
+ *
+ * @param {import('./interface').DocumentGraph} data
+ * @returns {Record<string, import('./interface').SingleDocumentTree & {pathSet: Set<string>}}
+ */
+const parseFsData = (data) => {
+  if (!Array.isArray(data)) throw new TypeError('exist data json is broken.')
+
+  const parsedMap = {}
+
+  data.forEach((item) => {
+    parsedMap[item.slug] = { ...item }
+
+    const pathSet = new Set()
+    parsedMap[item.slug].pathSet = pathSet
+
+    item.paths.forEach((path) => {
+      pathSet.add(Array.isArray(path) ? path[0] : path)
+    })
+  })
+
+  return parsedMap
+}
+
+export async function bootstarp() {
+  const patch = debounce(async () => {
+    const fsJsonData = await readFsDataJsonData()
+
+    const diffData = compareFsTreeWithExistJsonData(parseFsData(fsJsonData))
+    console.log('diff', diffData)
+    writeFileSync(
+      dataJsonPath,
+      JSON.stringify(patchDataJson(diffData, fsJsonData), null, 2),
+      'utf8',
+    )
+  }, 800)
+  await patch()
+  const watcher = watch(pathGlob)
+
+  watcher.on('add', (path) => {
+    patch()
+  })
+  watcher.on('unlink', (path) => {
+    patch()
+  })
+}
+
+/**
+ *
+ * @param {{add: Record<string,string[]>,remove:Record<string,string[]>}} diffData
+ * @param {import('./interface').DocumentGraph} fsJsonData
+ */
+function patchDataJson(diffData, fsJsonData) {
+  const { add, remove } = diffData
+
+  const clonedJsonData = [...fsJsonData]
+  const slugifyJsonMap = clonedJsonData.reduce((acc, cur) => {
+    acc[cur.slug] = cur
+    return acc
+  }, {})
+
+  for (const [slug, paths] of Object.entries(add)) {
+    if (!slugifyJsonMap[slug]) {
+      clonedJsonData.push({
+        paths,
+        slug,
+        title: slug,
+      })
+
+      continue
+    }
+
+    paths.forEach((path) => {
+      slugifyJsonMap[slug].paths.push(path)
+    })
+  }
+
+  for (const [slug, paths] of Object.entries(remove)) {
+    if (!slugifyJsonMap[slug]) continue
+
+    paths.forEach((path) => {
+      const index = slugifyJsonMap[slug].paths.findIndex(
+        (_path) => path === _path,
+      )
+      if (index > -1) {
+        slugifyJsonMap[slug].paths.splice(index, 1)
+      }
+    })
+  }
+
+  return clonedJsonData
+}
+
+/**
+ *
+ * @param {Record<string, import('./interface').SingleDocumentTree & {pathSet: Set<string>}} data
+ */
+function compareFsTreeWithExistJsonData(data) {
+  const diffAddPathMap = {}
+  const diffRemovePathMap = {}
+  const paths = globbySync(pathGlob, { onlyFiles: true })
+
+  const slugSetMap = {}
+  paths.forEach((fullPath) => {
+    const pathArr = fullPath.replace(workdirPath, '').split('/').filter(Boolean)
+
+    if (pathArr.length < 2) return
+    const slug = pathArr.shift()
+    if (!slug) return
+    slugSetMap[slug] ||= new Set()
+
+    slugSetMap[slug].add(`${pathArr.join('/')}`)
+  })
+
+  Object.keys(slugSetMap).map((slug) => {
+    if (!data[slug]) {
+      diffAddPathMap[slug] = Array.from(slugSetMap[slug])
+      return
+    }
+
+    slugSetMap[slug].forEach((path) => {
+      if (data[slug]?.pathSet.has(path)) {
+        return
+      }
+
+      diffAddPathMap[slug] ||= []
+      diffAddPathMap[slug].push(path)
+    })
+
+    data[slug]?.pathSet.forEach((path) => {
+      if (!slugSetMap[slug]) {
+        diffRemovePathMap[slug] = Array.from(data[slug].pathSet)
+        return
+      }
+
+      if (!slugSetMap[slug].has(path)) {
+        diffRemovePathMap[slug] ||= []
+        diffRemovePathMap[slug].push(path)
+      }
+    })
+  })
+
+  return {
+    add: diffAddPathMap,
+    remove: diffRemovePathMap,
+  }
+}
+
+function createDefaultDataJson() {
+  /**
+   * @type {import('./interface').DocumentGraph}
+   */
+  const jsonData = []
+  /**
+   * @type {Record<string, import('./interface').SingleDocumentTree>}
+   */
+  const slugToListMap = {}
+
+  globbySync(pathGlob, { onlyFiles: true }).map((fullPath) => {
+    const pathArr = fullPath.replace(workdirPath, '').split('/').filter(Boolean)
+
+    if (pathArr.length < 2) return
+    const slug = pathArr.shift()
+    if (!slug) return
+
+    let documentTree = slugToListMap[slug]
+
+    if (!documentTree) {
+      slugToListMap[slug] = {
+        slug,
+        paths: [],
+        title: slug,
+      }
+      documentTree = slugToListMap[slug]
+    }
+
+    documentTree.paths.push(`${pathArr.join('/')}`)
+
+    return pathArr
+  })
+
+  Object.values(slugToListMap).forEach((value) => {
+    jsonData.push(value)
+  })
+
+  writeFileSync(dataJsonPath, JSON.stringify(jsonData, null, 2), 'utf8')
+}
+
+function debounce(fn, wait) {
+  let callback = fn
+  let timerId = null
+
+  function debounced() {
+    let context = this
+
+    let args = arguments
+
+    clearTimeout(timerId)
+    timerId = setTimeout(function () {
+      callback.apply(context, args)
+    }, wait)
+  }
+
+  return debounced
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 39203f2..b59f69b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       camelcase-keys:
         specifier: 9.1.3
         version: 9.1.3
+      chokidar:
+        specifier: ^3.6.0
+        version: 3.6.0
       clsx:
         specifier: 2.1.1
         version: 2.1.1
@@ -44,6 +47,9 @@ importers:
       framer-motion:
         specifier: 11.2.4
         version: 11.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      globby:
+        specifier: ^14.0.1
+        version: 14.0.1
       immer:
         specifier: 10.1.1
         version: 10.1.1
@@ -1006,6 +1012,10 @@ packages:
   '@shikijs/transformers@1.5.2':
     resolution: {integrity: sha512-/Sh64rKOFGMQLCvtHeL1Y7EExdq8LLxcdVkvoGx2aMHsYMOn8DckYl2gYKMHRBu/YUt1C38/Amd1Jdh48tWHgw==}
 
+  '@sindresorhus/merge-streams@2.3.0':
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
+
   '@stitches/core@1.2.8':
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
 
@@ -2091,6 +2101,10 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
+  globby@14.0.1:
+    resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==}
+    engines: {node: '>=18'}
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -2833,6 +2847,10 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  path-type@5.0.0:
+    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
+    engines: {node: '>=12'}
+
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3366,6 +3384,10 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
   slice-ansi@5.0.0:
     resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
     engines: {node: '>=12'}
@@ -3596,6 +3618,10 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
   unified@11.0.4:
     resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==}
 
@@ -4690,6 +4716,8 @@ snapshots:
     dependencies:
       shiki: 1.5.2
 
+  '@sindresorhus/merge-streams@2.3.0': {}
+
   '@stitches/core@1.2.8': {}
 
   '@swc/counter@0.1.3': {}
@@ -5962,6 +5990,15 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  globby@14.0.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      path-type: 5.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.1.0
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4
@@ -6854,6 +6891,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  path-type@5.0.0: {}
+
   picocolors@1.0.0: {}
 
   picomatch@2.3.1: {}
@@ -7405,6 +7444,8 @@ snapshots:
 
   slash@3.0.0: {}
 
+  slash@5.1.0: {}
+
   slice-ansi@5.0.0:
     dependencies:
       ansi-styles: 6.2.1
@@ -7667,6 +7708,8 @@ snapshots:
 
   undici-types@5.26.5: {}
 
+  unicorn-magic@0.1.0: {}
+
   unified@11.0.4:
     dependencies:
       '@types/unist': 3.0.2
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index da4116b..aded820 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -34,7 +34,7 @@ export default async (props: PropsWithChildren) => {
         <AccentColorStyleInjector />
       </head>
 
-      <body className="m-0 flex h-full flex-grow flex-col p-0 font-sans">
+      <body className="m-0 flex h-full grow flex-col p-0 font-sans">
         <Providers>
           {props.children}
           <Analyze />
diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
index daf4f91..a814c5b 100644
--- a/src/components/banner/Banner.tsx
+++ b/src/components/banner/Banner.tsx
@@ -62,7 +62,7 @@ export const Banner: FC<{
       {showIcon && (
         <Icon
           className={clsx(
-            `flex-shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
+            `shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
             iconColorMap[nextType] || iconColorMap.info,
           )}
         />
diff --git a/src/components/button/MotionButton.tsx b/src/components/button/MotionButton.tsx
index 42b06a2..b37a77b 100644
--- a/src/components/button/MotionButton.tsx
+++ b/src/components/button/MotionButton.tsx
@@ -1,25 +1,23 @@
 'use client'
 
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { m } from 'framer-motion'
-import type { ForwardRefComponent, HTMLMotionProps } from 'framer-motion'
+import type { HTMLMotionProps } from 'framer-motion'
 
-export const MotionButtonBase: ForwardRefComponent<
-  HTMLButtonElement,
-  HTMLMotionProps<'button'>
-> = forwardRef(({ children, ...rest }, ref) => {
-  return (
-    <m.button
-      initial={true}
-      whileFocus={{ scale: 1.02 }}
-      whileHover={{ scale: 1.02 }}
-      whileTap={{ scale: 0.95 }}
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </m.button>
-  )
-})
-
-MotionButtonBase.displayName = 'MotionButtonBase'
+export const MotionButtonBase = forwardRef<any, HTMLMotionProps<'button'>>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <m.button
+        initial={true}
+        whileFocus={{ scale: 1.02 }}
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.95 }}
+        {...rest}
+        // @ts-ignore
+        ref={ref}
+      >
+        {children}
+      </m.button>
+    )
+  },
+)
diff --git a/src/components/button/StyledButton.tsx b/src/components/button/StyledButton.tsx
index 7eed9de..2f0887a 100644
--- a/src/components/button/StyledButton.tsx
+++ b/src/components/button/StyledButton.tsx
@@ -13,14 +13,14 @@ const variantStyles = tv({
     variant: {
       primary: clsx(
         'bg-accent text-zinc-100',
-        'active:contrast-125 hover:contrast-[1.10]',
+        'hover:contrast-[1.10] active:contrast-125',
         'font-semibold',
-        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50 disabled:cursor-not-allowed',
+        'disabled:cursor-not-allowed disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50',
         'dark:text-neutral-800',
       ),
       secondary: clsx(
         'group rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20',
-        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50 disabled:cursor-not-allowed',
+        'disabled:cursor-not-allowed disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50',
       ),
     },
   },
@@ -75,7 +75,7 @@ const LoadingButtonWrapper: FC<PropsWithChildren> = ({ children }) => {
       {children}
 
       <div className="absolute inset-0 z-[1] flex items-center justify-center">
-        <div className="loading loading-spinner h-5 w-5" />
+        <div className="loading loading-spinner size-5" />
       </div>
     </div>
   )
diff --git a/src/components/code-highlighter/CodeBlockWrapper.tsx b/src/components/code-highlighter/CodeBlockWrapper.tsx
index f859e4f..9d0a5ae 100644
--- a/src/components/code-highlighter/CodeBlockWrapper.tsx
+++ b/src/components/code-highlighter/CodeBlockWrapper.tsx
@@ -89,9 +89,9 @@ export const CodeBlockWrapper: FC<CodeBlockProps> = (props) => {
     <div className={clsx(styles['code-card'], 'group')}>
       {!!filename && (
         <div className="flex w-full items-center justify-between rounded-t-xl bg-accent/20 px-4 py-2 text-sm">
-          <span className="shrink-0 flex-grow truncate">{filename}</span>
+          <span className="shrink-0 grow truncate">{filename}</span>
           <span
-            className="pointer-events-none flex-shrink-0 flex-grow-0 text-[20px]"
+            className="pointer-events-none shrink-0 grow-0 text-[20px]"
             aria-hidden
           >
             {langIcon}
@@ -102,7 +102,7 @@ export const CodeBlockWrapper: FC<CodeBlockProps> = (props) => {
       {!filename && !!language && (
         <div
           aria-hidden
-          className="pointer-events-none absolute bottom-3 right-3 text-[20px] text-sm opacity-60"
+          className="pointer-events-none absolute bottom-3 right-3 text-sm opacity-60"
         >
           {langIcon}
         </div>
@@ -111,20 +111,20 @@ export const CodeBlockWrapper: FC<CodeBlockProps> = (props) => {
         <MotionButtonBase
           onClick={handleCopy}
           className={clsxm(
-            'absolute right-2 top-2 z-[1] flex rounded border border-current p-2 text-xs center',
+            'absolute right-2 top-2 z-[1] flex text-xs center',
             'rounded-md border border-black/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200 dark:border-white/10',
             'opacity-0 group-hover:opacity-100',
             filename && 'top-12',
           )}
         >
-          <i className="icon-[mingcute--copy-2-fill] h-4 w-4" />
+          <i className="icon-[mingcute--copy-2-fill] size-4" />
         </MotionButtonBase>
         <AutoResizeHeight spring className="relative">
           <div
             ref={codeBlockRef}
             className={clsxm(
-              'relative max-h-[50vh] w-full flex-grow overflow-auto scrollbar-none',
-              !isCollapsed ? '!max-h-[100%]' : isOverflow ? maskClassName : '',
+              'relative max-h-[50vh] w-full grow overflow-auto scrollbar-none',
+              !isCollapsed ? '!max-h-full' : isOverflow ? maskClassName : '',
             )}
             dangerouslySetInnerHTML={{
               __html: renderedHtml,
@@ -133,7 +133,7 @@ export const CodeBlockWrapper: FC<CodeBlockProps> = (props) => {
 
           {isOverflow && isCollapsed && (
             <div
-              className={`absolute bottom-0 left-0 right-0 flex justify-center py-2 duration-200 ${
+              className={`absolute inset-x-0 bottom-0 flex justify-center py-2 duration-200 ${
                 ['mask-both-lg', 'mask-b-lg'].includes(maskClassName)
                   ? ''
                   : 'pointer-events-none opacity-0'
diff --git a/src/components/collapse/Collapse.tsx b/src/components/collapse/Collapse.tsx
index a0fdcba..4af3069 100644
--- a/src/components/collapse/Collapse.tsx
+++ b/src/components/collapse/Collapse.tsx
@@ -19,14 +19,9 @@ export const Collapse: Component<{
         className="flex w-full cursor-pointer items-center justify-between"
         onClick={() => setIsOpened((v) => !v)}
       >
-        <span className="w-0 flex-shrink flex-grow truncate">
-          {props.title}
-        </span>
+        <span className="w-0 shrink grow truncate">{props.title}</span>
         <div
-          className={clsx(
-            'flex-shrink-0 text-gray-400',
-            isOpened && 'rotate-180 transform',
-          )}
+          className={clsx('shrink-0 text-gray-400', isOpened && 'rotate-180')}
         >
           <IonIosArrowDown />
         </div>
diff --git a/src/components/excalidraw/Excalidraw.tsx b/src/components/excalidraw/Excalidraw.tsx
index edce37a..e6fdf71 100644
--- a/src/components/excalidraw/Excalidraw.tsx
+++ b/src/components/excalidraw/Excalidraw.tsx
@@ -134,7 +134,7 @@ const ExcalidrawImpl = forwardRef<InternelExcalidrawRefObject, ExcalidrawProps>(
         className={clsxm('relative h-[500px] w-full', className)}
       >
         {loading && (
-          <div className="absolute inset-0 z-[10] flex center">
+          <div className="absolute inset-0 z-10 flex center">
             <div className="loading loading-spinner" />
           </div>
         )}
@@ -193,7 +193,7 @@ const ExcalidrawImpl = forwardRef<InternelExcalidrawRefObject, ExcalidrawProps>(
               }
             }}
             className={clsxm(
-              'absolute bottom-2 right-2 z-10 box-content flex h-5 w-5 rounded-md border p-2 center',
+              'absolute bottom-2 right-2 z-10 box-content flex size-5 rounded-md border p-2 center',
               'border-zinc-200 bg-base-100 text-zinc-600',
               'dark:border-neutral-800 dark:text-zinc-500',
             )}
diff --git a/src/components/fab/FABContainer.tsx b/src/components/fab/FABContainer.tsx
index 43846c3..11e75ec 100644
--- a/src/components/fab/FABContainer.tsx
+++ b/src/components/fab/FABContainer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-contradicting-classname */
 'use client'
 
 import React, { useEffect, useId, useRef } from 'react'
@@ -48,7 +49,7 @@ export const FABBase = typescriptHappyForwardRef(
             exit={{ opacity: 0.3, scale: 0.8 }}
             className={clsxm(
               'mt-2 flex items-center justify-center',
-              'h-12 w-12 text-lg md:h-10 md:w-10 md:text-base',
+              'size-12 text-lg md:size-10 md:text-base',
               'border border-accent outline-accent hover:opacity-100 focus:opacity-100 focus:outline-none',
               'rounded-xl border border-zinc-400/20 shadow-lg backdrop-blur-lg dark:border-zinc-500/30 dark:bg-zinc-800/80 dark:text-zinc-200',
               'bg-zinc-50/80 shadow-lg dark:bg-neutral-900/80',
diff --git a/src/components/header/MobileHeader.tsx b/src/components/header/MobileHeader.tsx
index dbcbd5b..a00b540 100644
--- a/src/components/header/MobileHeader.tsx
+++ b/src/components/header/MobileHeader.tsx
@@ -32,7 +32,7 @@ export const MobileHeader = () => {
           <HeaderMeta />
         </HeaderLogoArea>
 
-        <div className="flex h-full w-full items-center justify-center">
+        <div className="flex size-full items-center justify-center">
           <AsideDonateButton />
         </div>
       </div>
diff --git a/src/components/header/internal/HeaderActionButton.tsx b/src/components/header/internal/HeaderActionButton.tsx
index f8e5e01..954e98d 100644
--- a/src/components/header/internal/HeaderActionButton.tsx
+++ b/src/components/header/internal/HeaderActionButton.tsx
@@ -1,15 +1,15 @@
 import { forwardRef } from 'react'
 import clsx from 'clsx'
-import type { ForwardRefComponent } from 'framer-motion'
+import type { MotionProps } from 'framer-motion'
 
-export const HeaderActionButton: ForwardRefComponent<
-  HTMLButtonElement,
-  JSX.IntrinsicElements['button']
-> = forwardRef(({ children, ...rest }, ref) => {
+export const HeaderActionButton = forwardRef<
+  any,
+  MotionProps & React.JSX.IntrinsicElements['button']
+>(({ children, ...rest }, ref) => {
   return (
     <button
       className={clsx(
-        'group h-10 w-10 rounded-full bg-gradient-to-b',
+        'group size-10 rounded-full bg-gradient-to-b',
         'px-3 text-sm ring-1 ring-zinc-900/5 backdrop-blur transition dark:ring-white/10 dark:hover:ring-white/20',
 
         'flex center',
diff --git a/src/components/header/internal/HeaderArea.tsx b/src/components/header/internal/HeaderArea.tsx
index 20b1508..27b239e 100644
--- a/src/components/header/internal/HeaderArea.tsx
+++ b/src/components/header/internal/HeaderArea.tsx
@@ -9,9 +9,7 @@ export const HeaderLogoArea: Component = ({ children }) => {
   return (
     <div className={clsxm('relative', styles['header--grid__logo'])}>
       <div
-        className={clsxm(
-          'relative flex h-full w-full items-center justify-center',
-        )}
+        className={clsxm('relative flex size-full items-center justify-center')}
       >
         {children}
       </div>
@@ -23,7 +21,7 @@ export const HeaderLeftButtonArea: Component = ({ children }) => {
   return (
     <div
       className={clsxm(
-        'relative flex h-full w-full items-center justify-center xl:hidden',
+        'relative flex size-full items-center justify-center xl:hidden',
       )}
     >
       {children}
@@ -34,8 +32,8 @@ export const HeaderLeftButtonArea: Component = ({ children }) => {
 export const HeaderCenterArea: Component = ({ children }) => {
   return (
     <OnlyDesktop>
-      <div className="flex min-w-0 flex-grow">
-        <div className="relative flex flex-grow items-center justify-center">
+      <div className="flex min-w-0 grow">
+        <div className="relative flex grow items-center justify-center">
           {children}
         </div>
       </div>
diff --git a/src/components/header/internal/HeaderMeta.tsx b/src/components/header/internal/HeaderMeta.tsx
index e631be4..fd7cfa6 100644
--- a/src/components/header/internal/HeaderMeta.tsx
+++ b/src/components/header/internal/HeaderMeta.tsx
@@ -34,22 +34,22 @@ export const HeaderMeta = () => {
     <AnimatePresence>
       {show && (
         <m.div
-          className="absolute inset-0 flex min-w-0 items-center justify-between px-0 lg:px-[4rem]"
+          className="absolute inset-0 flex min-w-0 items-center justify-between px-0 lg:px-16"
           data-testid="header-meta"
           {...animationProps}
         >
-          <div className="align-center flex min-w-0 flex-shrink flex-grow flex-col">
+          <div className="align-center flex min-w-0 shrink grow flex-col">
             <small className="min-w-0 truncate">
               <span className="text-gray-600/60 dark:text-gray-300/60">
                 {description}
               </span>
             </small>
-            <h2 className="min-w-0 truncate text-[1.2rem] font-medium leading-[1.5]">
+            <h2 className="min-w-0 truncate text-[1.2rem] font-medium leading-normal">
               {title}
             </h2>
           </div>
 
-          <div className="hidden min-w-0 flex-shrink flex-col text-right leading-5 lg:flex">
+          <div className="hidden min-w-0 shrink flex-col text-right leading-5 lg:flex">
             <small className="min-w-0 truncate whitespace-pre text-gray-600/60 dark:text-gray-300/60">
               {' '}
               {slug}
diff --git a/src/components/header/internal/HeaderWithShadow.tsx b/src/components/header/internal/HeaderWithShadow.tsx
index 0115bb0..37b8885 100644
--- a/src/components/header/internal/HeaderWithShadow.tsx
+++ b/src/components/header/internal/HeaderWithShadow.tsx
@@ -16,7 +16,7 @@ export const HeaderWithShadow: Component = ({ children }) => {
     <header
       data-hide-print
       className={clsx(
-        'fixed left-0 right-0 top-0 z-[9] h-[4.5rem] overflow-hidden transition-shadow duration-200 lg:ml-[calc(100vw-100%)]',
+        'fixed inset-x-0 top-0 z-[9] h-[4.5rem] overflow-hidden transition-shadow duration-200 lg:ml-[calc(100vw-100%)]',
         showShadow &&
           'shadow-none shadow-neutral-100 dark:shadow-neutral-800/50 lg:shadow-sm',
       )}
diff --git a/src/components/link-card/LinkCard.tsx b/src/components/link-card/LinkCard.tsx
index 7b10e65..95a3e92 100644
--- a/src/components/link-card/LinkCard.tsx
+++ b/src/components/link-card/LinkCard.tsx
@@ -227,9 +227,9 @@ const fetchGitHubRepoData: FetchObject = {
         title: (
           <span className="flex items-center gap-2">
             <span className="flex-1">{data.name}</span>
-            <span className="flex-shrink-0 self-end justify-self-end">
+            <span className="shrink-0 self-end justify-self-end">
               {data.stargazersCount > 0 && (
-                <span className="inline-flex flex-shrink-0 items-center gap-1 self-center text-sm text-orange-400 dark:text-yellow-500">
+                <span className="inline-flex shrink-0 items-center gap-1 self-center text-sm text-orange-400 dark:text-yellow-500">
                   <i className="icon-[mingcute--star-line]" />
                   <span className="font-sans font-medium">
                     {data.stargazersCount}
diff --git a/src/components/markdown/parsers/alert.tsx b/src/components/markdown/parsers/alert.tsx
index bdced68..8f43d77 100644
--- a/src/components/markdown/parsers/alert.tsx
+++ b/src/components/markdown/parsers/alert.tsx
@@ -67,7 +67,7 @@ export const AlertsRule: MarkdownToJSX.Rule = {
         >
           <Icon
             className={clsx(
-              `flex-shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
+              `shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
               typedIconMap[type] || typedIconMap.info,
             )}
           />
diff --git a/src/components/markdown/renderers/LinkRenderer.tsx b/src/components/markdown/renderers/LinkRenderer.tsx
index acd2cf2..ef0dc1a 100644
--- a/src/components/markdown/renderers/LinkRenderer.tsx
+++ b/src/components/markdown/renderers/LinkRenderer.tsx
@@ -63,7 +63,7 @@ export const BlockLinkRenderer = async ({
         <FixedRatioContainer>
           <iframe
             src={`https://www.youtube.com/embed/${id}`}
-            className="absolute inset-0 h-full w-full border-0"
+            className="absolute inset-0 size-full border-0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
             title="YouTube video player"
@@ -79,7 +79,7 @@ export const BlockLinkRenderer = async ({
       return (
         <FixedRatioContainer>
           <iframe
-            className="absolute inset-0 h-full w-full rounded-md border-0"
+            className="absolute inset-0 size-full rounded-md border-0"
             src={`https://codesandbox.io/embed/${url.pathname.slice(
               2,
             )}?fontsize=14&hidenavigation=1&theme=dark${url.search}`}
@@ -93,7 +93,7 @@ export const BlockLinkRenderer = async ({
       return (
         <FixedRatioContainer>
           <iframe
-            className="absolute inset-0 h-full w-full rounded-md border-0"
+            className="absolute inset-0 size-full rounded-md border-0"
             src={`${url.href}?embed=1`}
             title="next.js-page-router"
             allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
diff --git a/src/components/markdown/renderers/collapse.tsx b/src/components/markdown/renderers/collapse.tsx
index 0877d43..8bf8e77 100644
--- a/src/components/markdown/renderers/collapse.tsx
+++ b/src/components/markdown/renderers/collapse.tsx
@@ -30,7 +30,7 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
       >
         <i
           className={clsx(
-            'icon-[mingcute--align-arrow-down-line] mr-2 transform transition-transform duration-500',
+            'icon-[mingcute--align-arrow-down-line] mr-2 transition-transform duration-500',
             !open && '-rotate-90',
           )}
         >
diff --git a/src/components/shared/ArticleRightAside.tsx b/src/components/shared/ArticleRightAside.tsx
index fcda1b2..7c31cd9 100644
--- a/src/components/shared/ArticleRightAside.tsx
+++ b/src/components/shared/ArticleRightAside.tsx
@@ -25,7 +25,7 @@ const ArticleRightAsideImpl: FC<{
         <TocAside
           as="div"
           className="static ml-4"
-          treeClassName={clsx('absolute h-full min-h-[120px] flex flex-col')}
+          treeClassName={clsx('absolute flex h-full min-h-[120px] flex-col')}
           accessory={ReadIndicator}
         />
       </div>
diff --git a/src/components/shared/ReadIndicator.tsx b/src/components/shared/ReadIndicator.tsx
index 72075e4..9bb6408 100644
--- a/src/components/shared/ReadIndicator.tsx
+++ b/src/components/shared/ReadIndicator.tsx
@@ -46,20 +46,20 @@ export const ReadIndicator: Component<{
     >
       {currentPost && (
         <>
-          <div className="flex flex-shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-1">
             <i className="icon-[mingcute--text-line]" /> {currentPost.count}
           </div>{' '}
-          <div className="flex flex-shrink-0 items-center gap-1">
+          <div className="flex shrink-0 items-center gap-1">
             <i className="icon-[mingcute--alarm-2-line]" />{' '}
             {currentPost.readingTime}Min
           </div>
         </>
       )}
 
-      <div className="flex flex-shrink-0 items-center gap-1">
+      <div className="flex shrink-0 items-center gap-1">
         {ProgressIcon} {readPercent}%
       </div>
-      {!inView && <ReadIndicatorVertical className="right-[1px]" />}
+      {!inView && <ReadIndicatorVertical className="right-px" />}
     </As>
   )
 }
@@ -71,7 +71,7 @@ const ReadIndicatorVertical: Component = ({ className }) => {
     <RootPortal>
       <div
         className={clsxm(
-          'fixed bottom-0 right-0 top-0 z-[99] w-[1px] transition-opacity duration-200 ease-in-out',
+          'fixed inset-y-0 right-0 z-[99] w-px transition-opacity duration-200 ease-in-out',
           isEOA ? 'opacity-0' : 'opacity-100',
           className,
         )}
diff --git a/src/components/toc/TocItem.tsx b/src/components/toc/TocItem.tsx
index 65e0e25..46e9966 100644
--- a/src/components/toc/TocItem.tsx
+++ b/src/components/toc/TocItem.tsx
@@ -8,8 +8,8 @@ import { clsxm } from '~/lib/helper'
 
 const styles = tv({
   base: clsxm(
-    'leading-normal mb-[1.5px] text-neutral-content inline-block relative max-w-full min-w-0',
-    'truncate text-left opacity-50 transition-all tabular-nums hover:opacity-80 duration-500',
+    'relative mb-[1.5px] inline-block min-w-0 max-w-full leading-normal text-neutral-content',
+    'truncate text-left tabular-nums opacity-50 transition-all duration-500 hover:opacity-80',
   ),
   variants: {
     status: {
diff --git a/src/components/toc/TocTree.tsx b/src/components/toc/TocTree.tsx
index 4e31d99..8b1e26b 100644
--- a/src/components/toc/TocTree.tsx
+++ b/src/components/toc/TocTree.tsx
@@ -133,10 +133,7 @@ export const TocTree: Component<
 
   return (
     <ul
-      className={clsxm(
-        'flex flex-grow flex-col px-2 scrollbar-none',
-        className,
-      )}
+      className={clsxm('flex grow flex-col px-2 scrollbar-none', className)}
       ref={containerRef}
     >
       <ul
@@ -156,7 +153,7 @@ export const TocTree: Component<
         })}
       </ul>
       {accessoryElement && (
-        <li className="flex-shrink-0">
+        <li className="shrink-0">
           {!!toc.length && <Divider />}
           {accessoryElement}
         </li>
@@ -217,7 +214,7 @@ const MemoedItem = memo<{
         <m.span
           layoutId="active-toc-item"
           layout
-          className="absolute bottom-[3px] left-0 top-[3px] w-[2px] rounded-sm bg-accent"
+          className="absolute inset-y-[3px] left-0 w-[2px] rounded-sm bg-accent"
         />
       )}
       <TocItem
diff --git a/src/components/typography/EllipsisWithTooltip.tsx b/src/components/typography/EllipsisWithTooltip.tsx
index 77bc74f..20add24 100644
--- a/src/components/typography/EllipsisWithTooltip.tsx
+++ b/src/components/typography/EllipsisWithTooltip.tsx
@@ -52,7 +52,7 @@ export const EllipsisTextWithTooltip = (props: EllipsisProps) => {
   return (
     <FloatPopover
       type="tooltip"
-      wrapperClassName={clsxm('truncate min-w-0 w-full', wrapperClassName)}
+      wrapperClassName={clsxm('w-full min-w-0 truncate', wrapperClassName)}
       placement={props.placement}
       isDisabled={!isOverflowed || disabled}
       triggerElement={
diff --git a/src/core/index.ts b/src/core/index.ts
index f8d62e3..f475434 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -9,9 +9,15 @@ import {
   removeYamlFrontMatter,
 } from '~/lib/remark'
 
+interface PageMeta {
+  hide?: boolean
+}
+export type PathWithMeta = [string, PageMeta?]
+
 interface Tree {
   title: string
-  paths: string[]
+  slug: string
+  paths: (string | PathWithMeta)[]
   children?: Tree[]
 }
 type JSONData = Tree[]
@@ -58,17 +64,23 @@ export const buildSectionData = () => {
 
   const dfs = (tree: Tree, depth = 1, parentPath?: string) => {
     const paths = tree.paths
+    const slug = tree.slug
     const section: Section = {
       items: [],
       title: tree.title,
     }
     for (const path of paths) {
-      const file = importMarkdownFile(path)
+      const nextPath = `./sections/${slug}/${Array.isArray(path) ? path[0] : path}`
+
+      const pageMeta = Array.isArray(path) ? path[1] ?? {} : ({} as PageMeta)
+
+      if (pageMeta.hide) continue
+      const file = importMarkdownFile(nextPath)
 
-      const appPath = path.replace('.md', '').replace('./sections/', '')
+      const appPath = nextPath.replace('.md', '').replace('./sections/', '')
 
-      const meta = parseYamlFrontMatterSync(file)
-      const fileOriginPath = join('markdown/', path)
+      const meta = Object.assign({}, parseYamlFrontMatterSync(file), pageMeta)
+      const fileOriginPath = join('markdown/', nextPath)
       const gitUpdateTime = getLastGitUpdateTime(fileOriginPath)
 
       const item: PostItem = {
@@ -83,7 +95,7 @@ export const buildSectionData = () => {
         parent: parentPath || null,
 
         title: meta?.title || extractFirstHeadingText(file) || '',
-        rawFilePath: path,
+        rawFilePath: nextPath,
 
         meta,
 
diff --git a/src/layout/components/ArticleRightAside.tsx b/src/layout/components/ArticleRightAside.tsx
index 66dfbee..8cb1500 100644
--- a/src/layout/components/ArticleRightAside.tsx
+++ b/src/layout/components/ArticleRightAside.tsx
@@ -24,7 +24,7 @@ export const ArticleRightAside: FC<{
           <TocAside
             as="div"
             className="static ml-4"
-            treeClassName={clsx('absolute h-full min-h-[120px] flex flex-col')}
+            treeClassName={clsx('absolute flex h-full min-h-[120px] flex-col')}
             accessory={ReadIndicator}
           />
         </div>
diff --git a/src/layout/components/LeftAside.tsx b/src/layout/components/LeftAside.tsx
index 0157547..57b2d27 100644
--- a/src/layout/components/LeftAside.tsx
+++ b/src/layout/components/LeftAside.tsx
@@ -10,7 +10,7 @@ export const LeftAside = async ({ asWeight }: { asWeight?: boolean }) => {
   return (
     <aside className={asWeight ? '' : 'sticky top-16 mt-16 min-h-[300px]'}>
       <h1 className="text-center text-lg font-bold lg:text-left">
-        {SEO.title}
+        {SEO.title.absolute}
       </h1>
       <Divider className="scale-x-50" />
       <ul