prettier all

pmndrs · Aug 18, 2024 · 295462c · 295462c
1 parent 53d0212
commit 295462c
Show file tree

Hide file tree

Showing 23 changed files with 101 additions and 99 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,43 +45,43 @@ 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>
             </div>
             <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
@@ -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
@@ -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
@@ -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,23 +72,23 @@ 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) {
   @apply text-sm;
 }
 
 .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 {
   @apply text-blue-400;
 }
 
 .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
@@ -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
@@ -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
@@ -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
@@ -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" />
           )}