Reorder HTML attributes using Prettier

pindab0ter · Oct 23, 2023 · d5756ce · d5756ce
1 parent bcbaf3b
commit d5756ce
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 43 deletions.
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,9 @@
 {
-  "plugins": ["prettier-plugin-go-template", "prettier-plugin-tailwindcss"],
+  "plugins": [
+    "prettier-plugin-go-template",
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-organize-attributes"
+  ],
   "overrides": [
     {
       "files": ["*.html"],

diff --git a/content/nieuws/2023-01-18-de-kittens-zijn-er/index.html b/content/nieuws/2023-01-18-de-kittens-zijn-er/index.html
@@ -18,8 +18,8 @@
 
 <p>
   <a
-    href="/kittens"
     class="whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
+    href="/kittens"
   >
     De kittens van Hamana
   </a>

diff --git a/layouts/faq/single.html b/layouts/faq/single.html
@@ -4,9 +4,9 @@
       <div class="mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
         {{ with (resources.Get "photos/yuki-ginny-balcony.png").Process "resize 640x webp" }}
           <img
+            class="aspect-[21/9] w-full object-cover lg:hidden"
             src="{{ .RelPermalink }}"
             alt="Yuki en Ginny op het balkon"
-            class="aspect-[21/9] w-full object-cover lg:hidden"
             style="object-position: 100% 12%"
           />
 
@@ -20,9 +20,9 @@ <h1 class="mt-0">
           </div>
 
           <img
+            class="hidden aspect-[16/9] w-full object-cover lg:block"
             src="{{ .RelPermalink }}"
             alt="Yuki en Ginny op het balkon"
-            class="hidden aspect-[16/9] w-full object-cover lg:block"
             style="object-position: 100% 12%"
           />
         {{ end }}

diff --git a/layouts/index.html b/layouts/index.html
@@ -4,9 +4,9 @@
     <div class="max-w-screen-xl lg:mb-24">
       {{ with (resources.Get "photos/yuki-basking-bed-ginny-washing-in-bg.jpg").Process "webp" }}
         <img
+          class="aspect-video w-full object-cover object-top lg:aspect-[21/9]"
           src="{{ .RelPermalink }}"
           alt="Yuki basking in the sun on bed"
-          class="aspect-video w-full object-cover object-top lg:aspect-[21/9]"
           style="object-position: 100% 7%"
         />
       {{ end }}
@@ -22,14 +22,14 @@ <h1 class="mb-8 text-start">Over ons</h1>
 
           <div class="-ml-4 mt-16 flex flex-wrap">
             <a
-              href="/nieuws"
               class="m-2 whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
+              href="/nieuws"
               >Het laatste nieuws</a
             >
 
             <a
-              href="/kittens/"
               class="m-2 rounded-full border border-orange px-4 py-3 font-light text-orange transition hover:bg-orange hover:text-white"
+              href="/kittens/"
               >Kittens</a
             >
           </div>
@@ -38,9 +38,9 @@ <h1 class="mb-8 text-start">Over ons</h1>
         <div class="hidden content-center bg-white lg:flex">
           {{ with (resources.Get "logo-text.png").Process "webp drawing" }}
             <img
+              class="object-contain"
               src="{{ .RelPermalink }}"
               alt="Cattery Hamana"
-              class="object-contain"
             />
           {{ end }}
         </div>
@@ -58,8 +58,8 @@ <h1 class="mb-8 text-start">Over ons</h1>
             class="grid h-full w-full place-content-center bg-orange/75 backdrop-blur-xs"
           >
             <a
-              href="/faq/"
               class="rounded-full border-2 border-white px-4 py-2 font-light text-white transition hover:bg-white hover:text-current"
+              href="/faq/"
               >Veelgestelde vragen</a
             >
           </div>
@@ -75,8 +75,8 @@ <h1 class="mb-8 text-start">Over ons</h1>
             class="grid h-full w-full place-content-center bg-orange/75 backdrop-blur-xs"
           >
             <a
-              href="/kittens/"
               class="rounded-full border-2 border-white px-4 py-2 font-light text-white transition hover:bg-white hover:text-current"
+              href="/kittens/"
               >Kittens</a
             >
           </div>
@@ -92,8 +92,8 @@ <h1 class="mb-8 text-start">Over ons</h1>
             class="grid h-full w-full place-content-center bg-orange/75 backdrop-blur-xs"
           >
             <a
-              href="/onze-poezen/"
               class="rounded-full border-2 border-white px-4 py-2 font-light text-white transition hover:bg-white hover:text-current"
+              href="/onze-poezen/"
               >Onze poezen</a
             >
           </div>

diff --git a/layouts/kittenbeleid/single.html b/layouts/kittenbeleid/single.html
@@ -4,9 +4,9 @@
       <div class="mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
         {{ with (resources.Get "photos/avatar-kitten-portret.jpg").Process "resize 640x webp" }}
           <img
+            class="aspect-[21/9] w-full object-cover lg:hidden"
             src="{{ .RelPermalink }}"
             alt="Jonge Ginny"
-            class="aspect-[21/9] w-full object-cover lg:hidden"
             style="object-position: 100% 28%"
           />
 
@@ -15,9 +15,9 @@ <h1 class="my-16">Ons kittenbeleid</h1>
           </div>
 
           <img
+            class="hidden aspect-[16/9] w-full object-cover lg:block"
             src="{{ .RelPermalink }}"
             alt="Jonge Ginny"
-            class="hidden aspect-[16/9] w-full object-cover lg:block"
             style="object-position: 100% 24%"
           />
         {{ end }}

diff --git a/layouts/kittens/section.html b/layouts/kittens/section.html
@@ -4,9 +4,9 @@
       <div class="mx-auto max-w-screen-xl lg:grid lg:grid-cols-2">
         {{ with (resources.Get "photos/avatar-kittens-groep.jpg").Process "resize 640x webp" }}
           <img
+            class="aspect-[21/9] w-full object-cover lg:hidden"
             src="{{ .RelPermalink }}"
             alt="De Avatarkittensk"
-            class="aspect-[21/9] w-full object-cover lg:hidden"
           />
 
           <div class="grid place-content-center lg:px-16">
@@ -16,8 +16,8 @@ <h1 class="mt-0">De kittens van Hamana</h1>
 
               <div class="block">
                 <a
-                  href="/nieuws"
                   class="whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
+                  href="/nieuws"
                 >
                   Het laatste nieuws
                 </a>
@@ -26,9 +26,9 @@ <h1 class="mt-0">De kittens van Hamana</h1>
           </div>
 
           <img
+            class="hidden aspect-[16/9] w-full object-cover lg:block"
             src="{{ .RelPermalink }}"
             alt="De Avatarkittensk"
-            class="hidden aspect-[16/9] w-full object-cover lg:block"
           />
         {{ end }}
       </div>
@@ -39,9 +39,9 @@ <h1 class="mt-0">De kittens van Hamana</h1>
         <div class="flex flex-col">
           {{ with .Resources.Get "photo" }}
             <img
+              class="mx-auto mb-8 mt-16 h-full w-full object-cover lg:max-w-lg"
               src="{{ (.Process "resize 512x webp drawing").RelPermalink }}"
               alt="{{ .Title }}"
-              class="mx-auto mb-8 mt-16 h-full w-full object-cover lg:max-w-lg"
             />
           {{ end }}
 

diff --git a/layouts/nieuws/section.html b/layouts/nieuws/section.html
@@ -11,9 +11,9 @@ <h1>Nieuws</h1>
           <div class="bg-white lg:hidden">
             {{ with .Resources.Get "photo" }}
               <img
+                class="h-full w-full object-cover"
                 src="{{ (.Process "resize 576x webp").RelPermalink }}"
                 alt="{{ .Title }}"
-                class="h-full w-full object-cover"
               />
             {{ end }}
             <div class="py-14">
@@ -46,9 +46,9 @@ <h2 class="text-center">
 
             {{ with .Resources.Get "photo" }}
               <img
+                class="h-full w-full object-cover"
                 src="{{ (.Process "resize 576x webp").RelPermalink }}"
                 alt="{{ .Title }}"
-                class="h-full w-full object-cover"
               />
             {{ end }}
           </div>

diff --git a/layouts/onze-poezen/section.html b/layouts/onze-poezen/section.html
@@ -4,9 +4,9 @@
       <div class="absolute aspect-auto h-48 w-full">
         {{ with (resources.Get "photos/yuki-ginny-close-up.jpg").Process "resize 1024x webp" }}
           <img
+            class="z-0 h-full w-full object-cover"
             src="{{ .RelPermalink }}"
             alt="Yuki and Ginny close up"
-            class="z-0 h-full w-full object-cover"
           />
         {{ end }}
       </div>
@@ -26,9 +26,9 @@ <h1 class="text-white">Onze poezen</h1>
           <div class="lg:hidden">
             {{ with (.Resources.Get "photo").Process "resize 576x webp" }}
               <img
+                class="aspect-square h-fit w-full object-cover"
                 src="{{ .RelPermalink }}"
                 alt="{{ .Title }}"
-                class="aspect-square h-fit w-full object-cover"
               />
             {{ end }}
             <div class="py-14">
@@ -45,9 +45,9 @@ <h2 class="mt-0 text-center">{{ .Title }}</h2>
             <div>
               {{ with (.Resources.Get "photo").Process "resize 576x webp" }}
                 <img
+                  class="aspect-square h-fit w-full object-cover"
                   src="{{ .RelPermalink }}"
                   alt="{{ .Title }}"
-                  class="aspect-square h-fit w-full object-cover"
                 />
               {{ end }}
             </div>

diff --git a/layouts/partials/contact-button.html b/layouts/partials/contact-button.html
@@ -1,8 +1,8 @@
 <div class="grid place-content-center bg-beige py-16 text-center">
   <h2 class="mt-0">Nog vragen?</h2>
   <a
-    href="/contact"
     class="m-2 whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
+    href="/contact"
   >
     Contact
   </a>

diff --git a/layouts/partials/contact-form.html b/layouts/partials/contact-form.html
@@ -2,9 +2,9 @@
   {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "webp" }}
     <div class="mb-16 mt-8 flex content-center bg-white lg:hidden">
       <img
+        class="w-100 aspect-[16/9] object-cover"
         src="{{ .RelPermalink }}"
         alt="Yuki and Ginny looking outside from the balcony together"
-        class="w-100 aspect-[16/9] object-cover"
         style="object-position: 100% 30%"
       />
     </div>
@@ -16,63 +16,63 @@ <h1 class="mt-0 text-center">Contact</h1>
     <div class="flex justify-center">
       <div class="mx-2 h-5 w-5">
         <a
+          class="text-stone-700"
           href="https://www.facebook.com/CatteryHamana"
           target="_blank"
           aria-label="Cattery Hamana Facebook"
-          class="text-stone-700"
         >
           {{- partial "facebook-logo" . -}}
         </a>
       </div>
       <div class="mx-2 h-5 w-5">
         <a
+          class="text-stone-700"
           href="https://instagram.com/attack.of.the.fluff"
           target="_blank"
           aria-label="Cattery Hamana Instagram"
-          class="text-stone-700"
         >
           {{- partial "instagram-logo" . -}}
         </a>
       </div>
     </div>
 
     <form
+      class="mt-16 flex flex-col"
       method="post"
       action="https://forms.un-static.com/forms/1b7b3742d437de093ac5c3507131de88ae85602d"
-      class="mt-16 flex flex-col"
     >
       <input
+        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         type="text"
         name="Naam"
         placeholder="Vul je naam in"
-        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         required
       />
       <input
+        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         type="email"
         name="Email"
         placeholder="Vul je e-mailadres in"
-        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         required
       />
       <input
+        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         type="text"
         name="Onderwerp"
         placeholder="Vul het onderwerp in"
-        class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         required
       />
       <textarea
+        class="mx-2 mb-2 resize-none border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         name="Bericht"
         cols="40"
         rows="5"
         placeholder="Typ hier je bericht…"
-        class="mx-2 mb-2 resize-none border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
       ></textarea>
       <div class="text-center">
         <button
-          type="submit"
           class="my-4 whitespace-nowrap rounded-full bg-orange px-6 py-4 font-light text-white transition hover:bg-orange/75"
+          type="submit"
         >
           Verstuur
         </button>
@@ -83,9 +83,9 @@ <h1 class="mt-0 text-center">Contact</h1>
   <div class="hidden content-center bg-white lg:flex">
     {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "resize 640x fit webp" }}
       <img
+        class="object-cover"
         src="{{ .RelPermalink }}"
         alt="Yuki and Ginny looking outside from the balcony together"
-        class="object-cover"
       />
     {{ end }}
   </div>