Merge pull request #65 from private-attribution/tailwind-linting

Tailwind linting
private-attribution · Jul 5, 2024 · 17878b6 · 17878b6
2 parents 7c4f9cf + 4f2b1a3
commit 17878b6
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 89 deletions.
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -1,3 +1,7 @@
 # Prettier formatting errors
 32743cbd2f5dead77fd6ef7be25105f33c370f29
 be76190dd8ca29e9e7b63a3cd1126386b2fe5917
+# Tailwind formatting
+be06788c7b4a1041e2f13d2262eeccde74294c7f
+# Eslint warning
+e0721bc1c231d0eb9f3d5fe1dcbce6a0256a2879
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -25,6 +25,13 @@ repos:
       language: system
       types: [python]
       pass_filenames: false
+    - id: npm-lint
+      name: npm-lint
+      entry: npm --prefix server run lint
+      language: system
+      files: ^server/
+      types_or: [javascript, jsx, ts, tsx]
+      pass_filenames: false
     - id: npm-build
       name: npm-build
       entry: npm --prefix server run build
@@ -37,7 +44,7 @@ repos:
       entry: npx --prefix server prettier --config=server/.prettierrc --ignore-path=server/.prettierignore --check server
       language: system
       files: ^server/
-      types_or: [javascript, jsx, ts, tsx]
+      types_or: [javascript, jsx, ts, tsx, json]
     - id: jest-tests
       name: jest-tests
       entry: npm --prefix server run test

diff --git a/server/.eslintrc.json b/server/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]
 }
diff --git a/server/app/alert.tsx b/server/app/alert.tsx
@@ -5,9 +5,9 @@ export default function QueryStartedAlert({ queryId }: { queryId: string }) {
   return (
     <div className="rounded-md bg-green-50 p-4">
       <div className="flex">
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <CheckCircleIcon
-            className="h-5 w-5 text-green-400"
+            className="size-5 text-green-400"
             aria-hidden="true"
           />
         </div>
@@ -20,13 +20,13 @@ export default function QueryStartedAlert({ queryId }: { queryId: string }) {
           </p>
         </div>
         <div className="ml-auto pl-3">
-          <div className="-mx-1.5 -my-1.5">
+          <div className="-m-1.5">
             <button
               type="button"
               className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <XMarkIcon className="size-5" aria-hidden="true" />
             </button>
           </div>
         </div>

diff --git a/server/app/footer.tsx b/server/app/footer.tsx
@@ -1,19 +1,19 @@
 export default function Example() {
   return (
-    <footer className="bg-white dark:bg-slate-950 h-full sticky top-[100vh]">
+    <footer className="sticky top-[100vh] h-full bg-white dark:bg-slate-950">
       <div className="mx-auto max-w-7xl overflow-hidden px-6 py-4">
         <p className="text-center text-xs leading-5 text-gray-500">
           &copy; 2023. All rights reserved.{" "}
           <a
             href="https://github.com/eriktaubeneck/draft"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             draft
           </a>{" "}
           is an open source project issued under the{" "}
           <a
             href="https://github.com/eriktaubeneck/draft/blob/main/LICENSE.md"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             MIT License.
           </a>
@@ -22,7 +22,7 @@ export default function Example() {
           <a
             href="https://www.flaticon.com/free-icons/beer-tap"
             title="beer tap icons"
-            className="text-gray-800 dark:text-gray-200 hover:text-gray-600 hover:dark:text-gray-400"
+            className="text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-400"
           >
             Beer tap icons created by wanicon - Flaticon.
           </a>

diff --git a/server/app/header.tsx b/server/app/header.tsx
@@ -18,14 +18,14 @@ export default function Header({ user }: { user: any }) {
   return (
     <Disclosure
       as="nav"
-      className="border-b border-gray-200 dark:border-slate-800 bg-white dark:bg-slate-950"
+      className="border-b border-gray-200 bg-white dark:border-slate-800 dark:bg-slate-950"
     >
       {({ open }) => (
         <>
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="flex h-16 justify-between">
               <div className="flex">
-                <div className="flex flex-shrink-0 items-center">
+                <div className="flex shrink-0 items-center">
                   <Link href="/">
                     <Image
                       src={beerTap}
@@ -67,24 +67,25 @@ export default function Header({ user }: { user: any }) {
                 <div className="hidden sm:ml-6 sm:flex sm:items-center">
                   <button
                     type="button"
-                    className="relative rounded-full bg-white dark:bg-slate-950 p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-700 focus:ring-offset-2"
+                    className="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-slate-950 dark:focus:ring-indigo-700"
                   >
                     <span className="absolute -inset-1.5" />
                     <span className="sr-only">View notifications</span>
                     <BellIcon
-                      className="h-6 w-6 fill-white dark:fill-slate-900"
+                      className="size-6 fill-white dark:fill-slate-900"
                       aria-hidden="true"
                     />
                   </button>
 
                   {/* Profile dropdown */}
                   <Menu as="div" className="relative ml-3">
                     <div>
-                      <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-white dark:bg-slate-950 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-700 focus:ring-offset-2">
+                      <Menu.Button className="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-slate-950 dark:focus:ring-indigo-700">
                         <span className="absolute -inset-1.5" />
                         <span className="sr-only">Open user menu</span>
-                        <img
-                          className="h-8 w-8 rounded-full"
+                        <img // eslint-disable-line @next/next/no-img-element
+                          // loaded from github, so no need for next/Image
+                          className="size-8 rounded-full"
                           src={user.user_metadata.avatar_url}
                           alt=""
                         />
@@ -99,7 +100,7 @@ export default function Header({ user }: { user: any }) {
                       leaveFrom="transform opacity-100 scale-100"
                       leaveTo="transform opacity-0 scale-95"
                     >
-                      <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
                         {userNavigation.map((item) => (
                           <Menu.Item key={item.name}>
                             {({ active }) => (
@@ -125,9 +126,9 @@ export default function Header({ user }: { user: any }) {
                     <span className="absolute -inset-0.5" />
                     <span className="sr-only">Open main menu</span>
                     {open ? (
-                      <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                      <XMarkIcon className="block size-6" aria-hidden="true" />
                     ) : (
-                      <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                      <Bars3Icon className="block size-6" aria-hidden="true" />
                     )}
                   </Disclosure.Button>
                 </div>
@@ -156,9 +157,10 @@ export default function Header({ user }: { user: any }) {
             </div>
             <div className="border-t border-gray-200 pb-3 pt-4">
               <div className="flex items-center px-4">
-                <div className="flex-shrink-0">
-                  <img
-                    className="h-10 w-10 rounded-full"
+                <div className="shrink-0">
+                  <img // eslint-disable-line @next/next/no-img-element
+                    // loaded from github, so no need for next/Image
+                    className="size-10 rounded-full"
                     src={user.user_metadata.avatar_url}
                     alt=""
                   />
@@ -173,11 +175,11 @@ export default function Header({ user }: { user: any }) {
                 </div>
                 <button
                   type="button"
-                  className="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  className="relative ml-auto shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                 >
                   <span className="absolute -inset-1.5" />
                   <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
+                  <BellIcon className="size-6" aria-hidden="true" />
                 </button>
               </div>
               <div className="mt-3 space-y-1">

diff --git a/server/app/login/GitHubOAuthComponent.tsx b/server/app/login/GitHubOAuthComponent.tsx
@@ -37,7 +37,7 @@ export default function GitHubOAuthComponent() {
       className="flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-2 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
     >
       <GitHubIcon className="flex h-6 w-auto fill-white pr-1 align-[-1px]" />
-      <span className="text-md font-semibold leading-6">GitHub</span>
+      <span className="text-base font-semibold leading-6">GitHub</span>
     </button>
   );
 }
diff --git a/server/app/login/page.tsx b/server/app/login/page.tsx
@@ -30,12 +30,12 @@ export default async function LoginPage() {
 
   return (
     <>
-      <div className="px-6 py-12 shadow sm:rounded-lg sm:px-12 h-screen">
+      <div className="h-screen px-6 py-12 shadow sm:rounded-lg sm:px-12">
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
           <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
             <div className="flex min-h-full flex-1 flex-col justify-center py-6 sm:px-6 lg:px-8">
               <Link href="/" className="-m-1.5 pb-8">
-                <GlobeAltIcon className="h-12 w-12 stroke-indigo-500 mx-auto" />
+                <GlobeAltIcon className="mx-auto size-12 stroke-indigo-500" />
               </Link>
               <h2 className="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
                 Sign in with GitHub

diff --git a/server/app/page.tsx b/server/app/page.tsx
@@ -26,24 +26,24 @@ export default async function Example() {
   const isLoggedIn = Boolean(session?.user);
 
   return (
-    <div className="bg-gradient-to-b from-zinc-500 to-zinc-900 h-screen">
+    <div className="h-screen bg-gradient-to-b from-zinc-500 to-zinc-900">
       <main>
         {/* Hero section */}
         <div className="relative isolate h-screen overflow-hidden bg-gray-900 pb-16 pt-14 sm:pb-20">
           <Image
             src={background_img}
             alt=""
-            className="absolute inset-0 -z-10 h-full w-full object-cover blur brightness-50"
+            className="absolute inset-0 -z-10 size-full object-cover blur brightness-50"
           />
 
           <div className="mx-auto max-w-7xl px-6 lg:px-8">
             <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
               <div className="hidden sm:mb-8 sm:flex sm:justify-center">
                 <a href="https://github.com/private-attribution/draft/">
-                  <div className="relative rounded-full px-2 py-1 text-md text-white font-semibold leading-6 atext-gray-400 ring-1 ring-white/10 hover:ring-white/20">
+                  <div className="relative rounded-full px-2 py-1 text-base font-semibold leading-6 text-gray-300 ring-1 ring-white/10 hover:ring-white/20">
                     Check out <span className="font-mono font-thin">draft</span>{" "}
                     on Github
-                    <GitHubIcon className="inline-flex h-4 w-auto fill-white pl-1 mb-1" />
+                    <GitHubIcon className="mb-1 inline-flex h-4 w-auto fill-gray-300 pl-1" />
                   </div>
                 </a>
               </div>