chore: fix code style

Author: HassanZahirnia

docs/src/styles/tailwind.css

@@ -79,8 +79,8 @@
     }
 
     & .heading-anchor {
-        @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none;
-        @apply lg:absolute lg:-left-7 lg:top-0;
+        @apply text-butter mr-2 inline-block align-baseline shadow-none dark:shadow-none;
+        @apply lg:absolute lg:top-0 lg:-left-7;
     }
 
     /* All `.prose` elements except `code` */
@@ -105,8 +105,8 @@
 
 @utility heading-anchor {
     .prose & {
-        @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none;
-        @apply lg:absolute lg:-left-7 lg:top-0;
+        @apply text-butter mr-2 inline-block align-baseline shadow-none dark:shadow-none;
+        @apply lg:absolute lg:top-0 lg:-left-7;
     }
 }
 
@@ -170,7 +170,7 @@
 
     p code,
     ul code {
-        @apply rounded bg-merino px-1.5 py-0.5;
+        @apply bg-merino rounded px-1.5 py-0.5;
     }
 
     p code::selection,

resources/views/articles/list-articles.blade.php

@@ -5,9 +5,7 @@
         :$starsCount
     />
 
-    <div
-        class="mx-auto mt-5 w-full max-w-330 border-t border-merino"
-    ></div>
+    <div class="border-merino mx-auto mt-5 w-full max-w-330 border-t"></div>
 
     <x-articles.list
         :$articles

resources/views/articles/view-article.blade.php

@@ -22,15 +22,15 @@
                 )
             }
         "
-        class="mx-auto w-full max-w-8xl px-5 sm:px-10"
+        class="max-w-8xl mx-auto w-full px-5 sm:px-10"
     >
         <div class="flex flex-wrap items-center justify-between gap-5 pt-20">
             {{-- Back Button --}}
             <a
                 x-on:mouseenter="back_button_is_hovering = true"
                 x-on:mouseleave="back_button_is_hovering = false"
                 href="{{ route('articles') }}"
-                class="flex items-center gap-3 p-1 text-dolphin transition duration-300 hover:-translate-x-2 hover:text-evening"
+                class="text-dolphin hover:text-evening flex items-center gap-3 p-1 transition duration-300 hover:-translate-x-2"
             >
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +77,7 @@ class="flex flex-col items-start gap-20 pt-7 transition duration-300 will-change
                 </div>
 
                 <div class="pt-2">
-                    <div class="text-base text-dolphin">
+                    <div class="text-dolphin text-base">
                         {{ $article->publish_date->toFormattedDateString() }}
                     </div>
                 </div>
@@ -132,7 +132,7 @@ class="grid h-9 w-9 place-items-center rounded-full bg-rose-200/50 text-rose-600
                                     {{ $article->isCompatibleWithLatestVersion() ? 'Compatible with the latest version' : 'Not compatible with the latest version' }}
                                 </div>
 
-                                <div class="text-xs text-dolphin/80">
+                                <div class="text-dolphin/80 text-xs">
                                     Supported versions:
                                     {{ implode(' - ', array_map(fn (int $version): string => $version . '.x', $article->versions)) }}
                                 </div>
@@ -145,7 +145,7 @@ class="grid h-9 w-9 place-items-center rounded-full bg-rose-200/50 text-rose-600
                 <div class="flex flex-wrap items-center gap-3.5 pt-6">
                     @foreach ($article->getCategories() as $category)
                         <div
-                            class="select-none rounded-full bg-stone-200/50 px-5 py-2.5 text-sm"
+                            class="rounded-full bg-stone-200/50 px-5 py-2.5 text-sm select-none"
                         >
                             <div class="text-sm">
                                 {{ $category->name }}
@@ -157,7 +157,7 @@ class="select-none rounded-full bg-stone-200/50 px-5 py-2.5 text-sm"
                 {{-- Content --}}
                 <div class="pt-8">
                     <div
-                        class="prose selection:bg-stone-500/30 prose-a:break-words prose-blockquote:not-italic prose-code:break-words prose-code:rounded-sm prose-code:bg-merino prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-code:before:hidden prose-code:after:hidden [&_p]:before:hidden [&_p]:after:hidden"
+                        class="prose prose-a:break-words prose-blockquote:not-italic prose-code:break-words prose-code:rounded-sm prose-code:bg-merino prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-code:before:hidden prose-code:after:hidden selection:bg-stone-500/30 [&_p]:before:hidden [&_p]:after:hidden"
                     >
                         {!! \App\Support\Markdown::parse($article->content) !!}
                     </div>
@@ -169,7 +169,7 @@ class="prose selection:bg-stone-500/30 prose-a:break-words prose-blockquote:not-
                 class="flex w-full flex-wrap items-center gap-12 lg:max-w-sm xl:max-w-md"
             >
                 {{-- Author --}}
-                <div class="w-full pt-10 text-evening">
+                <div class="text-evening w-full pt-10">
                     <div class="grid w-full place-items-center">
                         {{-- Avatar --}}
                         <div
@@ -195,7 +195,7 @@ class="aspect-square h-full w-full bg-cover bg-center bg-no-repeat"
                                 <a
                                     target="_blank"
                                     href="{{ $article->author->twitter_url }}"
-                                    class="grid h-8 w-8 place-items-center rounded-full bg-merino text-hurricane transition duration-200 hover:scale-110 hover:text-salmon"
+                                    class="bg-merino text-hurricane hover:text-salmon grid h-8 w-8 place-items-center rounded-full transition duration-200 hover:scale-110"
                                 >
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -217,7 +217,7 @@ class="grid h-8 w-8 place-items-center rounded-full bg-merino text-hurricane tra
                             <a
                                 target="_blank"
                                 href="{{ $article->author->github_url }}"
-                                class="grid h-8 w-8 place-items-center rounded-full bg-merino text-hurricane transition duration-200 hover:scale-110 hover:text-salmon"
+                                class="bg-merino text-hurricane hover:text-salmon grid h-8 w-8 place-items-center rounded-full transition duration-200 hover:scale-110"
                             >
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
@@ -242,7 +242,7 @@ class="grid h-8 w-8 place-items-center rounded-full bg-merino text-hurricane tra
                         </div>
 
                         <div
-                            class="mt-4 space-y-4 rounded-2xl bg-merino/50 p-6 text-center shadow-lg shadow-black/[0.01]"
+                            class="bg-merino/50 mt-4 space-y-4 rounded-2xl p-6 text-center shadow-lg shadow-black/[0.01]"
                         >
                             {{-- Bio --}}
                             @if ($article->author->getBio())
@@ -260,7 +260,7 @@ class="mt-4 space-y-4 rounded-2xl bg-merino/50 p-6 text-center shadow-lg shadow-
                                             {{ number_format($article->author->articles()->published()->count(),) }}
                                         </div>
                                         <div
-                                            class="text-sm font-medium text-hurricane/80"
+                                            class="text-hurricane/80 text-sm font-medium"
                                         >
                                             Articles
                                         </div>
@@ -272,7 +272,7 @@ class="text-sm font-medium text-hurricane/80"
                                             {{ number_format($article->author->getStarsCount()) }}
                                         </div>
                                         <div
-                                            class="text-sm font-medium text-hurricane/80"
+                                            class="text-hurricane/80 text-sm font-medium"
                                         >
                                             Stars
                                         </div>
@@ -289,7 +289,7 @@ class="group relative z-10 block text-white"
                                     >
                                         {{-- Button --}}
                                         <div
-                                            class="flex items-center justify-center gap-3 rounded-bl-3xl rounded-tr-3xl bg-midnight px-9 py-4 transition duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:transform-none"
+                                            class="bg-midnight flex items-center justify-center gap-3 rounded-tr-3xl rounded-bl-3xl px-9 py-4 transition duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:group-hover:transform-none"
                                         >
                                             <div>Sponsor</div>
                                             <div>
@@ -309,7 +309,7 @@ class="flex items-center justify-center gap-3 rounded-bl-3xl rounded-tr-3xl bg-m
 
                                         {{-- Shadow --}}
                                         <div
-                                            class="absolute inset-0 -z-10 h-full w-full -translate-x-1.5 translate-y-1.5 rounded-bl-3xl rounded-tr-3xl bg-rose-300 transition duration-300 group-hover:-translate-x-2 group-hover:translate-y-2 group-hover:bg-butter motion-reduce:transition-none motion-reduce:group-hover:transform-none"
+                                            class="group-hover:bg-butter absolute inset-0 -z-10 h-full w-full -translate-x-1.5 translate-y-1.5 rounded-tr-3xl rounded-bl-3xl bg-rose-300 transition duration-300 group-hover:-translate-x-2 group-hover:translate-y-2 motion-reduce:transition-none motion-reduce:group-hover:transform-none"
                                         ></div>
                                     </a>
                                 </div>
@@ -329,7 +329,7 @@ class="absolute inset-0 -z-10 h-full w-full -translate-x-1.5 translate-y-1.5 rou
                             @foreach ($otherArticles as $otherArticle)
                                 <a
                                     href="{{ route('articles.view', ['article' => $otherArticle]) }}"
-                                    class="relative block w-full rounded-2xl bg-white px-5 py-3 shadow-lg shadow-hurricane/5 transition duration-300 ease-out will-change-transform hover:translate-x-2"
+                                    class="shadow-hurricane/5 relative block w-full rounded-2xl bg-white px-5 py-3 shadow-lg transition duration-300 ease-out will-change-transform hover:translate-x-2"
                                 >
                                     <div
                                         class="flex w-full items-center justify-between gap-5"
@@ -357,20 +357,20 @@ class="text-peach-orange"
                                                 />
                                             </svg>
                                             <div
-                                                class="pt-0.5 text-sm font-medium text-dolphin"
+                                                class="text-dolphin pt-0.5 text-sm font-medium"
                                             >
                                                 {{ number_format($otherArticle->getStarsCount()) }}
                                             </div>
                                         </div>
                                     </div>
 
                                     {{-- Title --}}
-                                    <div class="px-1 pb-1 pt-4 font-medium">
+                                    <div class="px-1 pt-4 pb-1 font-medium">
                                         <div class="line-clamp-2">
                                             {{ $otherArticle->title }}
                                         </div>
                                         <div
-                                            class="pt-1 text-xs text-dolphin/80"
+                                            class="text-dolphin/80 pt-1 text-xs"
                                         >
                                             {{ $otherArticle->publish_date->diffForHumans() }}
                                         </div>

resources/views/components/admin-demo.blade.php

@@ -1,5 +1,5 @@
 @props([
-    'shadow-sm' => 'shadow-2xl shadow-primary-500/30',
+    'shadow-sm' => 'shadow-primary-500/30 shadow-2xl',
 ])
 
 <div
@@ -19,8 +19,8 @@ class="flex items-center justify-between space-x-4 rounded-t-2xl border-b px-5 p
         >
             <div class="flex space-x-2 py-4">
                 <div class="h-3 w-3 rounded-full bg-red-500"></div>
-                <div class="h-3 w-3 rounded-full bg-primary-300"></div>
-                <div class="h-3 w-3 rounded-full bg-success-400"></div>
+                <div class="bg-primary-300 h-3 w-3 rounded-full"></div>
+                <div class="bg-success-400 h-3 w-3 rounded-full"></div>
             </div>
 
             <button
@@ -32,7 +32,7 @@ class="flex items-center justify-between space-x-4 rounded-t-2xl border-b px-5 p
                     'dark:bg-white/10': theme === 'dark',
                 }"
                 type="button"
-                class="relative inline-flex w-14 shrink-0 cursor-pointer rounded-xl border-2 border-gray-300 border-transparent p-0.5 transition-colors duration-200 ease-in-out focus:border-primary-500 focus:outline-hidden focus:ring-2 focus:ring-primary-500"
+                class="focus:border-primary-500 focus:ring-primary-500 relative inline-flex w-14 shrink-0 cursor-pointer rounded-xl border-2 border-gray-300 border-transparent p-0.5 transition-colors duration-200 ease-in-out focus:ring-2 focus:outline-hidden"
             >
                 <span
                     x-bind:class="{
@@ -60,7 +60,7 @@ class="absolute inset-0 flex h-full w-full items-center justify-center transitio
                             'opacity-0 ease-out duration-100': theme === 'dark',
                         }"
                     >
-                        <x-heroicon-s-sun class="h-4 w-4 text-primary-600" />
+                        <x-heroicon-s-sun class="text-primary-600 h-4 w-4" />
                     </span>
                 </span>
             </button>
@@ -71,7 +71,7 @@ class="absolute inset-0 flex h-full w-full items-center justify-center transitio
             target="_blank"
             class="flex max-h-[190px] w-full overflow-hidden rounded-b-2xl sm:max-h-[300px] md:max-h-[400px] lg:max-h-[500px]"
         >
-            <div class="relative -ml-px -mr-px max-h-full overflow-hidden">
+            <div class="relative -mr-px -ml-px max-h-full overflow-hidden">
                 <img
                     src="/images/admin/demo/light-sidebar.jpg"
                     aria-hidden="true"
@@ -121,14 +121,14 @@ class="flex items-center rounded-lg bg-gray-900 px-4 py-2 font-medium text-white
     <div class="absolute -top-18 right-16 hidden md:flex">
         <div class="relative">
             <span
-                class="absolute right-18 top-1 whitespace-nowrap font-cursive text-2xl"
+                class="font-cursive absolute top-1 right-18 text-2xl whitespace-nowrap"
             >
                 it's open source
             </span>
 
             <img
                 src="/images/arrow-turn.svg"
-                class="h-20 -rotate-90 -scale-x-100"
+                class="h-20 -scale-x-100 -rotate-90"
             />
         </div>
     </div>

resources/views/components/articles/card.blade.php

@@ -1,11 +1,11 @@
 <a
     x-bind:href="'/community/' + article.slug"
-    class="rounded-2xl bg-white p-3 shadow-lg shadow-hurricane/5 transition duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl hover:shadow-hurricane/10"
+    class="shadow-hurricane/5 hover:shadow-hurricane/10 rounded-2xl bg-white p-3 shadow-lg transition duration-300 will-change-transform hover:-translate-y-1 hover:shadow-xl"
 >
-    <div class="px-1.5 pb-1 pt-2.5">
+    <div class="px-1.5 pt-2.5 pb-1">
         <div class="flex flex-wrap items-center justify-between gap-5">
             <div
-                class="flex select-none items-center justify-center gap-2 rounded-full py-2.5 pl-4 pr-5 text-xs"
+                class="flex items-center justify-center gap-2 rounded-full py-2.5 pr-5 pl-4 text-xs select-none"
                 x-bind:class="{
                     'bg-amber-100/80 text-amber-700': types[article.type].color === 'amber',
                     'bg-blue-100/80 text-blue-700': types[article.type].color === 'blue',
@@ -41,7 +41,7 @@ class="text-peach-orange"
                     />
                 </svg>
                 <div
-                    class="pt-0.5 text-sm font-medium text-dolphin"
+                    class="text-dolphin pt-0.5 text-sm font-medium"
                     x-text="article.stars_count"
                 ></div>
             </div>
@@ -50,7 +50,7 @@ class="pt-0.5 text-sm font-medium text-dolphin"
         {{-- Title --}}
         <div
             x-text="article.title"
-            class="line-clamp-2 pt-3.5 text-base font-medium text-evening"
+            class="text-evening line-clamp-2 pt-3.5 text-base font-medium"
         ></div>
 
         {{-- Author --}}
@@ -64,7 +64,7 @@ class="aspect-square h-full w-full bg-cover bg-center bg-no-repeat"
                 </template>
                 <template x-if="! article.author.avatar">
                     <div
-                        class="grid h-full w-full place-items-center bg-fair-pink text-salmon/50"
+                        class="bg-fair-pink text-salmon/50 grid h-full w-full place-items-center"
                     >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"