From 87647a521d5e8450602f5a28d6b970d9585ebab4 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Sun, 18 Aug 2024 08:47:44 +0200
Subject: [PATCH] chore: Tooling (#286)

* husky + lint-staged

* prettier all
---
 .husky/pre-commit                             |   4 +
 .lintstagedrc.mjs                             |   6 +
 .prettierrc                                   |   5 -
 .prettierrc.mjs                               |  11 +
 bin/build.mjs                                 |   2 +-
 next-env.d.ts                                 |  10 +-
 package-lock.json                             | 729 +++++++++++++++++-
 package.json                                  |  10 +-
 src/app/[...slug]/Menu.tsx                    |  24 +-
 src/app/[...slug]/layout.tsx                  |  12 +-
 src/app/[...slug]/page.tsx                    |   6 +-
 src/app/globals.css                           |  14 +-
 src/app/page.tsx                              |  26 +-
 src/components/Codesandbox.tsx                |  10 +-
 src/components/Nav.tsx                        |   8 +-
 src/components/Search/SearchItem.tsx          |   6 +-
 src/components/Search/SearchModal.tsx         |  16 +-
 .../Search/SearchModalContainer.tsx           |   2 +-
 src/components/Search/index.tsx               |   8 +-
 src/components/Toc.tsx                        |   6 +-
 src/components/ToggleTheme.tsx                |   2 +-
 src/components/mdx/Grid.tsx                   |  10 +-
 src/components/mdx/Hint.tsx                   |   2 +-
 src/components/mdx/index.tsx                  |  14 +-
 src/utils/docs.tsx                            |   6 +-
 src/utils/icon.ts                             |   4 +-
 src/utils/text.ts                             |   2 +-
 27 files changed, 842 insertions(+), 113 deletions(-)
 create mode 100644 .husky/pre-commit
 create mode 100644 .lintstagedrc.mjs
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.mjs

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 00000000..67fe97b8
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+echo "🪝 .husky/pre-commit hook is running"
+
+npx tsc --noEmit
+npx lint-staged
\ No newline at end of file
diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs
new file mode 100644
index 00000000..274c24d5
--- /dev/null
+++ b/.lintstagedrc.mjs
@@ -0,0 +1,6 @@
+/** @type {import("lint-staged").Config} */
+const config = {
+  '*': ['prettier --ignore-path .gitignore --ignore-unknown --write'],
+}
+
+export default config
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 75a894a2..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100
-}
diff --git a/.prettierrc.mjs b/.prettierrc.mjs
new file mode 100644
index 00000000..2a12bbd5
--- /dev/null
+++ b/.prettierrc.mjs
@@ -0,0 +1,11 @@
+/** @type {import("prettier").Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  plugins: [
+    'prettier-plugin-tailwindcss', // MUST come last
+  ],
+}
+
+export default config
diff --git a/bin/build.mjs b/bin/build.mjs
index c6faee4b..470a9392 100755
--- a/bin/build.mjs
+++ b/bin/build.mjs
@@ -85,7 +85,7 @@ cmd.on('exit', async (code) => {
   console.log('Build completed successfully.')
 
   await exec(
-    `mkdir -p ${outHostDirAbsolute}; cp -rf ${outLocalDirAbsolute}/* ${outHostDirAbsolute}`
+    `mkdir -p ${outHostDirAbsolute}; cp -rf ${outLocalDirAbsolute}/* ${outHostDirAbsolute}`,
   )
   console.log(`Preview: \`npx -y serve ${outHostDirAbsolute}\``)
 })
diff --git a/next-env.d.ts b/next-env.d.ts
index 62b8a52d..4f11a03d 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,5 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index f2b46ecd..9e5e0459 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,11 +34,14 @@
         "autoprefixer": "^10.4.20",
         "eslint": "^8.57.0",
         "eslint-config-next": "^14.2.5",
+        "husky": "^9.1.4",
+        "lint-staged": "^15.2.9",
         "minimist": "^1.2.8",
         "postcss": "^8.4.41",
-        "prettier": "^2.8.8",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.6",
         "semantic-release": "^24.0.0",
-        "tailwindcss": "^3.4.9",
+        "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4"
       },
       "engines": {
@@ -2126,6 +2129,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/cli-highlight": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/cli-highlight/-/cli-highlight-2.1.11.tgz",
@@ -2274,6 +2293,77 @@
         "node": ">=8"
       }
     },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2362,6 +2452,13 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -3728,6 +3825,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/execa": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-9.3.0.tgz",
@@ -4106,6 +4210,19 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
+      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -4652,6 +4769,22 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.4.tgz",
+      "integrity": "sha512-bho94YyReb4JV7LYWRWxZ/xr6TtOTt8cMfmQ39MQYJ7f/YE268s3GdghGwi+y4zAeqewE5zYLvuhV0M0ijsDEA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -5606,6 +5739,246 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/lint-staged": {
+      "version": "15.2.9",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.9.tgz",
+      "integrity": "sha512-BZAt8Lk3sEnxw7tfxM7jeZlPRuT4M68O0/CwZhhaw6eeWu0Lz5eERE3m386InivXB64fp/mDID452h48tvKlRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.6",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.2",
+        "listr2": "~8.2.4",
+        "micromatch": "~4.0.7",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.5.0"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/lint-staged/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/lint-staged/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.4.tgz",
+      "integrity": "sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -5715,6 +6088,144 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -6910,6 +7421,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -10246,6 +10770,19 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -10530,21 +11067,100 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
+      "integrity": "sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-ms": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.1.0.tgz",
@@ -11040,6 +11656,39 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -11050,6 +11699,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -11501,6 +12157,49 @@
         "node": ">=8"
       }
     },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -11630,6 +12329,16 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -12001,9 +12710,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.9.tgz",
-      "integrity": "sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
diff --git a/package.json b/package.json
index b86b3fd0..b1f1721f 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,14 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.9",
     "minimist": "^1.2.8",
     "postcss": "^8.4.41",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "semantic-release": "^24.0.0",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   },
   "dependencies": {
@@ -42,7 +45,8 @@
     "start": "next start",
     "build": "next build",
     "format": "prettier -w src/",
-    "lint": "eslint src/**/*.{ts,tsx} && prettier . --check"
+    "lint": "eslint src/**/*.{ts,tsx} && prettier . --check",
+    "prepare": "husky"
   },
   "engines": {
     "node": ">=20"
diff --git a/src/app/[...slug]/Menu.tsx b/src/app/[...slug]/Menu.tsx
index 18b26fe1..f0bcd76a 100644
--- a/src/app/[...slug]/Menu.tsx
+++ b/src/app/[...slug]/Menu.tsx
@@ -31,11 +31,11 @@ export function Menu({
 
   return (
     <>
-      <header className="sticky top-0 flex flex-none w-full mx-auto border-b border-gray-200 bg-white max-w-8xl z-40 lg:z-50 dark:bg-gray-900 dark:border-gray-800 dark:text-gray-100">
-        <div className="flex justify-between items-center w-full pr-2">
+      <header className="max-w-8xl sticky top-0 z-40 mx-auto flex w-full flex-none border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 lg:z-50">
+        <div className="flex w-full items-center justify-between pr-2">
           {header}
           <button
-            className="block lg:hidden p-2 mr-2 ml-2"
+            className="ml-2 mr-2 block p-2 lg:hidden"
             onClick={() => setMenuOpen((v) => !v)}
             type="button"
             aria-label="Menu"
@@ -45,22 +45,22 @@ export function Menu({
         </div>
       </header>
 
-      <div className="w-full mx-auto max-w-8xl dark:bg-gray-900 dark:text-gray-100">
+      <div className="max-w-8xl mx-auto w-full dark:bg-gray-900 dark:text-gray-100">
         <div className="lg:flex">
           <div
             id="sidebar"
             className={clsx(
-              'fixed inset-0 z-40 flex-none w-full h-full bg-opacity-25  lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block bg-white dark:!bg-gray-900 dark:text-gray-100',
-              !menuOpen && 'hidden'
+              'fixed inset-0 z-40 h-full w-full flex-none bg-white bg-opacity-25 dark:!bg-gray-900 dark:text-gray-100 lg:static lg:block lg:h-auto lg:w-60 lg:overflow-y-visible lg:pt-0 xl:w-72',
+              !menuOpen && 'hidden',
             )}
           >
             <div
               id="nav-wrapper"
-              className="overflow-hidden overflow-y-auto h-full mr-24 scrolling-touch lg:h-auto lg:block lg:sticky lg:bg-transparent lg:top-16 lg:mr-0 z-10 relative bg-white dark:bg-gray-900"
+              className="scrolling-touch relative z-10 mr-24 h-full overflow-hidden overflow-y-auto bg-white dark:bg-gray-900 lg:sticky lg:top-16 lg:mr-0 lg:block lg:h-auto lg:bg-transparent"
             >
               <nav
                 id="nav"
-                className="overflow-y-auto px-4 font-medium text-base lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-16) z-10 relative"
+                className="sticky?lg:h-(screen-16) relative z-10 overflow-y-auto px-4 pb-10 text-base font-medium lg:pb-14 lg:text-sm"
               >
                 {nav}
               </nav>
@@ -68,20 +68,20 @@ export function Menu({
             <button
               onClick={() => setMenuOpen(false)}
               className={clsx(
-                'w-screen h-screen z-0 fixed top-0 right-0 bg-gray-900 opacity-0 dark:bg-gray-200',
-                !menuOpen && 'hidden'
+                'fixed right-0 top-0 z-0 h-screen w-screen bg-gray-900 opacity-0 dark:bg-gray-200',
+                !menuOpen && 'hidden',
               )}
             />
           </div>
           <div id="content-wrapper" className={clsx('flex-auto', menuOpen && 'overflow-hidden')}>
             <div className="flex w-full">
-              <main className="flex-auto min-w-0 px-4 pt-8 pb-24 sm:px-6 xl:px-8 lg:pb-16">
+              <main className="min-w-0 flex-auto px-4 pb-24 pt-8 sm:px-6 lg:pb-16 xl:px-8">
                 <div>{children}</div>
 
                 <footer>{footer}</footer>
               </main>
 
-              <aside className="flex-none hidden w-64 pl-8 pr-8 xl:text-sm xl:block">{aside}</aside>
+              <aside className="hidden w-64 flex-none pl-8 pr-8 xl:block xl:text-sm">{aside}</aside>
             </div>
           </div>
         </div>
diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
index 4ae6d35a..032e1382 100644
--- a/src/app/[...slug]/layout.tsx
+++ b/src/app/[...slug]/layout.tsx
@@ -37,7 +37,7 @@ export default async function Layout({ params, children }: Props) {
           <Menu
             header={
               <>
-                <div className="h-full flex items-center flex-none p-2 pl-4 sm:pl-6 xl:pl-4 lg:w-60 xl:w-72">
+                <div className="flex h-full flex-none items-center p-2 pl-4 sm:pl-6 lg:w-60 xl:w-72 xl:pl-4">
                   <Link href="/" aria-label="Poimandres Docs">
                     <span className="font-bold">
                       {NEXT_PUBLIC_LIBNAME_SHORT && (
@@ -46,7 +46,7 @@ export default async function Layout({ params, children }: Props) {
                       <span
                         className={cn(
                           NEXT_PUBLIC_LIBNAME_SHORT ? 'hidden' : undefined,
-                          'lg:inline'
+                          'lg:inline',
                         )}
                       >
                         {NEXT_PUBLIC_LIBNAME}
@@ -78,7 +78,7 @@ export default async function Layout({ params, children }: Props) {
             footer={
               <>
                 {!!currentPage && (
-                  <div className="flex justify-end w-full max-w-3xl pb-10 mx-auto mt-24">
+                  <div className="mx-auto mt-24 flex w-full max-w-3xl justify-end pb-10">
                     <a
                       target="_blank"
                       rel="noopener noreferrer"
@@ -91,10 +91,10 @@ export default async function Layout({ params, children }: Props) {
                 )}
 
                 {(!!previousPage || !!nextPage) && (
-                  <nav className="flex justify-between w-full max-w-3xl mx-auto mt-12">
+                  <nav className="mx-auto mt-12 flex w-full max-w-3xl justify-between">
                     {!!previousPage && (
                       <div className="">
-                        <label className="mb-2 text-xs font-bold leading-4 text-gray-500 uppercase">
+                        <label className="mb-2 text-xs font-bold uppercase leading-4 text-gray-500">
                           Previous
                         </label>
                         <div className="text-xl">
@@ -109,7 +109,7 @@ export default async function Layout({ params, children }: Props) {
                     )}
                     {!!nextPage && (
                       <div className="ml-auto text-right">
-                        <label className="mb-2 text-xs font-bold leading-4 text-gray-500 uppercase">
+                        <label className="mb-2 text-xs font-bold uppercase leading-4 text-gray-500">
                           Next
                         </label>
                         <div className="text-xl">
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 3d66d4d5..156723f4 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -39,11 +39,11 @@ export default async function Page({ params }: Props) {
 
   return (
     <>
-      <div className="max-w-3xl mx-auto">
-        <div className="pb-6 mb-4 border-b dark:border-gray-700 post-header ">
+      <div className="mx-auto max-w-3xl">
+        <div className="post-header mb-4 border-b pb-6 dark:border-gray-700">
           <h1 className="mb-4 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
           {!!doc?.description?.length && (
-            <p className="text-base text-gray-400 leading-5">{doc.description}</p>
+            <p className="text-base leading-5 text-gray-400">{doc.description}</p>
           )}
         </div>
         <div className="content-container">{doc ? <Post doc={doc} /> : 'empty doc'}</div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 71ebf595..ced774ae 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -28,7 +28,7 @@ code span {
 
 /* Inline code */
 :not(pre) > code {
-  @apply py-0.5 px-1.5 rounded-md bg-gray-100 dark:bg-gray-800 dark:text-gray-300;
+  @apply rounded-md bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800 dark:text-gray-300;
 }
 
 /* Start purging... */
@@ -37,7 +37,7 @@ code span {
 
 /* Write your own custom component styles here */
 .btn-blue {
-  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
+  @apply rounded bg-blue-500 px-4 py-2 font-bold text-white;
 }
 
 /* Start purging... */
@@ -72,7 +72,7 @@ code span {
 
 .content-container ul > li:before {
   content: '—';
-  @apply inline-block mr-3 text-gray-300;
+  @apply mr-3 inline-block text-gray-300;
 }
 
 .content-container :is(pre, code) {
@@ -80,7 +80,7 @@ code span {
 }
 
 .content-container pre {
-  @apply p-4 mb-8 overflow-hidden overflow-x-auto bg-gray-900 rounded;
+  @apply mb-8 overflow-hidden overflow-x-auto rounded bg-gray-900 p-4;
 }
 
 main a {
@@ -88,7 +88,7 @@ main a {
 }
 
 .content-container .heading {
-  @apply block font-bold text-gray-900 dark:text-gray-300 no-underline hover:underline;
+  @apply block font-bold text-gray-900 no-underline hover:underline dark:text-gray-300;
 }
 
 blockquote p {
@@ -100,11 +100,11 @@ details {
 }
 
 summary {
-  @apply select-none cursor-pointer mb-2 -ml-4;
+  @apply -ml-4 mb-2 cursor-pointer select-none;
 }
 
 th {
-  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide;
+  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500;
 }
 
 thead {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 45339b28..5bda704b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -152,25 +152,25 @@ export default function Page() {
   return (
     <>
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 dark:text-gray-100">
-        <div className="px-4 py-8 pb-12 lg:py-12 lg:pb-20 lg:px-28">
-          <header className="text-3xl text-center lg:text-left">
+        <div className="px-4 py-8 pb-12 lg:px-28 lg:py-12 lg:pb-20">
+          <header className="text-center text-3xl lg:text-left">
             <Link href="/" aria-label="Poimandres Docs" className="font-bold">
               Documentation
             </Link>
             .<Link href="https://pmnd.rs">pmndrs</Link>
           </header>
 
-          <main className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-8 lg:gap-12 w-full max-w-8xl mt-8 lg:mt-10">
+          <main className="max-w-8xl mt-8 grid w-full grid-cols-1 gap-8 lg:mt-10 lg:grid-cols-2 lg:gap-12 2xl:grid-cols-3">
             {Object.entries(libs).map(([id, data]) => (
               <div
                 key={id}
-                className="relative shadow-lg border border-gray-200 bg-white rounded-md font-normal overflow-hidden dark:bg-gray-800/30 dark:border-gray-700"
+                className="relative overflow-hidden rounded-md border border-gray-200 bg-white font-normal shadow-lg dark:border-gray-700 dark:bg-gray-800/30"
               >
-                <div className="relative z-10 flex flex-col justify-between h-full">
-                  <div className="flex justify-between items-center px-6">
+                <div className="relative z-10 flex h-full flex-col justify-between">
+                  <div className="flex items-center justify-between px-6">
                     <div className="max-w-md">
-                      <div className="pt-4 font-bold text-lg">{data.title}</div>
-                      <div className="flex-grow pr-4 pt-1 pb-4 text-base text-gray-500 !leading-relaxed">
+                      <div className="pt-4 text-lg font-bold">{data.title}</div>
+                      <div className="flex-grow pb-4 pr-4 pt-1 text-base !leading-relaxed text-gray-500">
                         {data.description}
                       </div>
                     </div>
@@ -179,11 +179,11 @@ export default function Page() {
                         href={data.github}
                         target="_blank"
                         rel="noopener"
-                        className="block relative flex-shrink-0 w-20 h-20"
+                        className="relative block h-20 w-20 flex-shrink-0"
                       >
                         <Image
                           src={data.icon}
-                          className="absolute inset-0 w-full h-full object-contain"
+                          className="absolute inset-0 h-full w-full object-contain"
                           alt={data.title}
                           aria-hidden
                           width={data.iconWidth}
@@ -192,10 +192,10 @@ export default function Page() {
                       </a>
                     )}
                   </div>
-                  <div className="flex w-full border-t border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700">
+                  <div className="flex w-full divide-x divide-gray-200 border-t border-gray-200 dark:divide-gray-700 dark:border-gray-700">
                     <Link
                       href={data.url}
-                      className="inline-flex items-center space-x-2 flex-1 px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                      className="inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                     >
                       <Icon icon="docs" />
                       <span className="sm:hidden">Docs</span>
@@ -205,7 +205,7 @@ export default function Page() {
                       href={data.github}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center space-x-2 flex-1 px-6 py-4 hover:bg-gray-50 transition-colors dark:hover:bg-gray-800"
+                      className="inline-flex flex-1 items-center space-x-2 px-6 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                     >
                       <Icon icon="github" />
                       <span>GitHub</span>
diff --git a/src/components/Codesandbox.tsx b/src/components/Codesandbox.tsx
index 8d41f841..32b96265 100644
--- a/src/components/Codesandbox.tsx
+++ b/src/components/Codesandbox.tsx
@@ -29,7 +29,7 @@ export default function Codesandbox({
       {embed ? (
         <iframe
           src={`https://codesandbox.io/embed/${id}`}
-          className="w-full h-[500px]"
+          className="h-[500px] w-full"
           title={title}
           allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -52,15 +52,15 @@ export default function Codesandbox({
 
       {!hideTitle && (
         <>
-          <h6 className="text-gray-700 font-bold mt-4">{title}</h6>
-          <p className="text-gray-700 mt-1">{description}</p>
+          <h6 className="mt-4 font-bold text-gray-700">{title}</h6>
+          <p className="mt-1 text-gray-700">{description}</p>
           <div className="w-full">
             {tags.map((tag, i) => (
               <span
                 key={i}
                 className={clsx(
-                  'inline-block mt-2 text-gray-500 bg-gray-100 rounded px-1 py-1 text-xs',
-                  i !== tags.length - 1 && 'mr-1'
+                  'mt-2 inline-block rounded bg-gray-100 px-1 py-1 text-xs text-gray-500',
+                  i !== tags.length - 1 && 'mr-1',
                 )}
               >
                 {tag}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index c553a937..29cabef5 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -15,8 +15,8 @@ function NavItem({ doc, asPath }: NavItemProps) {
     <Link
       href={doc.url ?? '/'}
       className={clsx(
-        'rounded-md block px-6 py-2 text-gray-800 font-normal hover:bg-gray-50 cursor-pointer dark:text-gray-400 dark:hover:bg-gray-700 mb-1',
-        active && 'bg-gray-100 dark:bg-gray-700'
+        'mb-1 block cursor-pointer rounded-md px-6 py-2 font-normal text-gray-800 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700',
+        active && 'bg-gray-100 dark:bg-gray-700',
       )}
     >
       {doc.title}
@@ -41,14 +41,14 @@ function Nav({ docs, asPath }: { docs: Doc[]; asPath: string }) {
 
         return acc
       }, {} as NavList),
-    [docs]
+    [docs],
   )
 
   return (
     <ul>
       {Object.entries(nav).map(([key, doc]) => (
         <li key={key}>
-          <h3 className="px-6 mt-8 mb-2 text-sm lg:text-xs text-gray-900 uppercase tracking-wide font-semibold dark:text-gray-300">
+          <h3 className="mb-2 mt-8 px-6 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-gray-300 lg:text-xs">
             {key.replace(/\-/g, ' ')}
           </h3>
           {doc.url ? (
diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
index 38e34543..6b5dc526 100644
--- a/src/components/Search/SearchItem.tsx
+++ b/src/components/Search/SearchItem.tsx
@@ -19,11 +19,11 @@ function SearchItem({ search, result }: SearchItemProps) {
   return (
     <Link
       href={result.url}
-      className="block no-underline search-item outline-none"
+      className="search-item block no-underline outline-none"
       target={result.url.startsWith('http') ? '_blank' : undefined}
     >
       <li className="px-2 py-1">
-        <div className="p-4 py-5 rounded-md bg-gray-100 hover:bg-gray-800 hover:text-gray-200 flex justify-between items-center transition-all dark:bg-gray-900/50 dark:text-gray-100 dark:hover:bg-gray-900/70">
+        <div className="flex items-center justify-between rounded-md bg-gray-100 p-4 py-5 transition-all hover:bg-gray-800 hover:text-gray-200 dark:bg-gray-900/50 dark:text-gray-100 dark:hover:bg-gray-900/70">
           <span
             className="pr-3"
             dangerouslySetInnerHTML={{
@@ -40,7 +40,7 @@ function SearchItem({ search, result }: SearchItemProps) {
           />
           {result.image ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img className="rounded max-w-[40%]" src={result.image} alt={result.title} />
+            <img className="max-w-[40%] rounded" src={result.image} alt={result.title} />
           ) : (
             <Icon icon="enter" className="text-gray-400" />
           )}
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index 30e5f459..565364f2 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -12,11 +12,11 @@ export interface SearchModelProps {
 
 function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
   return (
-    <div className="absolute top-0 left-0 bottom-0 right-0 w-screen h-screen z-[99]">
-      <button type="button" className="opacity-50 bg-gray-900 w-full h-full" onClick={onClose} />
-      <div className="absolute top-20 bottom-20 overflow-y-auto left-2/4 w-[500px] max-w-[90%] z-100 -translate-x-1/2 transform">
-        <div className="mt-1 relative rounded-md shadow-sm">
-          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+    <div className="absolute bottom-0 left-0 right-0 top-0 z-[99] h-screen w-screen">
+      <button type="button" className="h-full w-full bg-gray-900 opacity-50" onClick={onClose} />
+      <div className="z-100 absolute bottom-20 left-2/4 top-20 w-[500px] max-w-[90%] -translate-x-1/2 transform overflow-y-auto">
+        <div className="relative mt-1 rounded-md shadow-sm">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
             <Icon icon="search" className="text-gray-300" />
           </div>
           <input
@@ -24,8 +24,8 @@ function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
             name="search"
             id="search"
             className={clsx(
-              'outline-none focus:ring-gray-200 focus:border-gray-200 block w-full pl-10 sm:text-sm border-gray-300 dark:bg-gray-800 dark:text-gray-400 px-4 py-6 text-gray-700',
-              results.length > 0 ? 'rounded-t-md' : 'rounded-md'
+              'block w-full border-gray-300 px-4 py-6 pl-10 text-gray-700 outline-none focus:border-gray-200 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 sm:text-sm',
+              results.length > 0 ? 'rounded-t-md' : 'rounded-md',
             )}
             autoComplete="off"
             autoFocus
@@ -33,7 +33,7 @@ function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
             onChange={onChange}
           />
           {results.length > 0 && (
-            <ul className="list-none p-0 m-0 absolute left-0 bg-white pb-1 z-2 w-full rounded-b-md dark:bg-gray-800 dark:text-gray-400">
+            <ul className="z-2 absolute left-0 m-0 w-full list-none rounded-b-md bg-white p-0 pb-1 dark:bg-gray-800 dark:text-gray-400">
               {results.map((result, index) => (
                 <SearchItem key={`search-item-${index}`} search={search} result={result} />
               ))}
diff --git a/src/components/Search/SearchModalContainer.tsx b/src/components/Search/SearchModalContainer.tsx
index 13d24956..00e91f54 100644
--- a/src/components/Search/SearchModalContainer.tsx
+++ b/src/components/Search/SearchModalContainer.tsx
@@ -34,7 +34,7 @@ export const SearchModalContainer = ({ onClose }: SearchModalContainerProps) =>
 
       // Search
       let candidateResults = docs.flatMap(
-        ({ tableOfContents }) => tableOfContents
+        ({ tableOfContents }) => tableOfContents,
       ) satisfies SearchResult[]
       // console.log('candidateResults', candidateResults)
       candidateResults = candidateResults.filter((entry) => entry.description.length > 0)
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index edf1bd5c..c03ac42d 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -39,16 +39,16 @@ function Search() {
         />
       )}
       <div className="relative grow">
-        <div className="flex items-center justify-between flex-auto h-16 px-4">
+        <div className="flex h-16 flex-auto items-center justify-between px-4">
           <button
             type="button"
             onClick={() => setShowSearchModal(true)}
-            className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 text-gray-400 hover:text-gray-600 transition-colors duration-200 w-full py-2 dark:text-gray-500 dark:hover:text-gray-400"
+            className="group flex w-full items-center space-x-3 py-2 font-medium leading-6 text-gray-400 transition-colors duration-200 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 sm:space-x-4"
             onFocus={() => setShowSearchModal(true)}
           >
             <Icon
               icon="search"
-              className="h-6 w-6 text-gray-400 group-hover:text-gray-500 transition-colors duration-200 dark:group-hover:text-gray-400 dark:text-gray-500"
+              className="h-6 w-6 text-gray-400 transition-colors duration-200 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400"
             />
             <span>
               Quick search
@@ -56,7 +56,7 @@ function Search() {
             </span>
             <span
               style={{ opacity: 1 }}
-              className="hidden sm:block text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md dark:border-gray-700"
+              className="hidden rounded-md border border-gray-300 px-1.5 py-0.5 text-sm leading-5 text-gray-400 dark:border-gray-700 sm:block"
             >
               <span className="sr-only">Press </span>
               <kbd className="font-sans">
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index 8569a875..f4f75f81 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -30,8 +30,8 @@ function Toc({ toc }: ToCProps) {
   }, [toc])
 
   return (
-    <div className="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-16) pb-6 top-16">
-      <label className="text-gray-900 uppercase tracking-wide font-semibold mt-12 mb-2 text-sm lg:text-xs dark:text-gray-300">
+    <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
+      <label className="mb-2 mt-12 text-sm font-semibold uppercase tracking-wide text-gray-900 dark:text-gray-300 lg:text-xs">
         On This Page
       </label>
       {toc.map((item, index) => (
@@ -42,7 +42,7 @@ function Toc({ toc }: ToCProps) {
             className={clsx(
               'block py-1 text-sm font-normal leading-6 text-gray-500 hover:underline',
               item.parent && 'ml-4',
-              index === activeIndex && 'text-gray-900 dark:text-gray-200'
+              index === activeIndex && 'text-gray-900 dark:text-gray-200',
             )}
             href={`#${item.id}`}
           >
diff --git a/src/components/ToggleTheme.tsx b/src/components/ToggleTheme.tsx
index a5593b6d..a68cddac 100644
--- a/src/components/ToggleTheme.tsx
+++ b/src/components/ToggleTheme.tsx
@@ -25,7 +25,7 @@ const ToggleTheme = () => {
 
   return (
     <button
-      className="h-9 w-9 flex items-center justify-center"
+      className="flex h-9 w-9 items-center justify-center"
       onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
     >
       {isDark !== undefined ? (
diff --git a/src/components/mdx/Grid.tsx b/src/components/mdx/Grid.tsx
index f0dfe91e..e60bea8c 100644
--- a/src/components/mdx/Grid.tsx
+++ b/src/components/mdx/Grid.tsx
@@ -4,11 +4,11 @@ export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?:
       cols === 4
         ? 'md:grid-cols-4'
         : cols === 3
-        ? 'md:grid-cols-3'
-        : cols === 2
-        ? 'md:grid-cols-2'
-        : 'md:grid-cols-1'
-    } gap-4 text-sm text-gray-700 grid-list`}
+          ? 'md:grid-cols-3'
+          : cols === 2
+            ? 'md:grid-cols-2'
+            : 'md:grid-cols-1'
+    } grid-list gap-4 text-sm text-gray-700`}
     style={{ marginBottom: '1rem' }}
   >
     {children}
diff --git a/src/components/mdx/Hint.tsx b/src/components/mdx/Hint.tsx
index e88d076a..12ec0f44 100644
--- a/src/components/mdx/Hint.tsx
+++ b/src/components/mdx/Hint.tsx
@@ -1,6 +1,6 @@
 export const Hint = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="hint overflow-clip bg-yellow-100 rounded-lg px-6 py-4 my-6 dark:text-gray-500">
+    <div className="hint my-6 overflow-clip rounded-lg bg-yellow-100 px-6 py-4 dark:text-gray-500">
       {children}
     </div>
   )
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 339920d4..444e53b8 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -4,26 +4,26 @@ export * from './Grid'
 export * from './Hint'
 
 export const h2 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading text-3xl mb-6 mt-8 tracking-light">
+  <a href={`#${id}`} className="heading tracking-light mb-6 mt-8 text-3xl">
     <h2 id={id}>{children}</h2>
   </a>
 )
 export const h3 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading text-xl mb-4 mt-6 tracking-light">
+  <a href={`#${id}`} className="heading tracking-light mb-4 mt-6 text-xl">
     <h3 id={id}>{children}</h3>
   </a>
 )
 export const h4 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading text-base mb-4 mt-4 tracking-light">
+  <a href={`#${id}`} className="heading tracking-light mb-4 mt-4 text-base">
     <h4 id={id}>{children}</h4>
   </a>
 )
 
 export const ul = ({ children }: { children: React.ReactNode }) => (
-  <ul className="px-4 mb-8">{children}</ul>
+  <ul className="mb-8 px-4">{children}</ul>
 )
 export const ol = ({ children }: { children: React.ReactNode }) => (
-  <ol className="px-4 mb-8">{children}</ol>
+  <ol className="mb-8 px-4">{children}</ol>
 )
 export const li = ({ children }: { children: React.ReactNode }) => (
   <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
@@ -34,11 +34,11 @@ export const p = ({ children }: { children: React.ReactNode }) => (
 )
 
 export const blockquote = ({ children }: { children: React.ReactNode }) => (
-  <blockquote className="mb-8 text-base pl-4 border-l-4 border-gray-600">{children}</blockquote>
+  <blockquote className="mb-8 border-l-4 border-gray-600 pl-4 text-base">{children}</blockquote>
 )
 
 export const table = ({ children }: { children: React.ReactNode }) => (
-  <div className="my-8 overflow-auto rounded-lg border-gray-200 border dark:border-gray-700">
+  <div className="my-8 overflow-auto rounded-lg border border-gray-200 dark:border-gray-700">
     <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">{children}</table>
   </div>
 )
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
index 167748c1..436beccf 100644
--- a/src/utils/docs.tsx
+++ b/src/utils/docs.tsx
@@ -61,7 +61,7 @@ const MDX_BASEURL = process.env.MDX_BASEURL
 async function _getDocs(
   root: string,
   slugOfInterest: string[] | null,
-  slugOnly = false
+  slugOnly = false,
 ): Promise<Doc[]> {
   const files = await crawl(root, MARKDOWN_REGEX)
   // console.log('files', files)
@@ -146,7 +146,7 @@ async function _getDocs(
         (_input, prefix: string, src: string, suffix: string) => {
           const url = resolveMdxUrl(src, relFilePath, MDX_BASEURL)
           return `${prefix}${url}${suffix}`
-        }
+        },
       )
 
       const boxes: string[] = []
@@ -197,7 +197,7 @@ async function _getDocs(
         boxes,
         tableOfContents,
       }
-    })
+    }),
   )
   // console.log('docs', docs)
 
diff --git a/src/utils/icon.ts b/src/utils/icon.ts
index c047a851..272d7b59 100644
--- a/src/utils/icon.ts
+++ b/src/utils/icon.ts
@@ -26,8 +26,8 @@ export const svg = (emoji: string, { env, shift }: Options = { env: 'production'
     
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}">
       <text x="${w / 2}" y="${
-    h / 2
-  }" font-size="100" dominant-baseline="central" baseline-shift="-${shift}%" text-anchor="middle">${emoji}</text>
+        h / 2
+      }" font-size="100" dominant-baseline="central" baseline-shift="-${shift}%" text-anchor="middle">${emoji}</text>
     </svg>
     
     <style>
diff --git a/src/utils/text.ts b/src/utils/text.ts
index aa3c9423..42a639d7 100644
--- a/src/utils/text.ts
+++ b/src/utils/text.ts
@@ -9,5 +9,5 @@ export const escape = (text: string) => text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$
 export const highlight = (text: string, target: string) =>
   text.replace(
     new RegExp(target, 'gi'),
-    (match: string) => `<span class="font-bold">${match}</span>`
+    (match: string) => `<span class="font-bold">${match}</span>`,
   )