From 295462c0c631df05594eb3927569fc13440ac461 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Sun, 18 Aug 2024 08:42:12 +0200
Subject: [PATCH] prettier all

---
 .lintstagedrc.mjs                             |  6 ++---
 .prettierrc.mjs                               |  4 ++-
 bin/build.mjs                                 |  2 +-
 next-env.d.ts                                 | 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 +-
 23 files changed, 101 insertions(+), 99 deletions(-)

diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs
index 34d1439f..274c24d5 100644
--- a/.lintstagedrc.mjs
+++ b/.lintstagedrc.mjs
@@ -1,6 +1,6 @@
 /** @type {import("lint-staged").Config} */
 const config = {
-  "*": ["prettier --ignore-path .gitignore --ignore-unknown --write"],
-};
+  '*': ['prettier --ignore-path .gitignore --ignore-unknown --write'],
+}
 
-export default config;
+export default config
diff --git a/.prettierrc.mjs b/.prettierrc.mjs
index 1bd426bb..2a12bbd5 100644
--- a/.prettierrc.mjs
+++ b/.prettierrc.mjs
@@ -3,7 +3,9 @@ const config = {
   semi: false,
   singleQuote: true,
   printWidth: 100,
-  plugins: ['prettier-plugin-tailwindcss'],
+  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/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>`,
   )