✨ Refactor article and blog components to use new sidebar and article card structure

Author: HassanZahirnia

resources/views/article.blade.php

@@ -121,38 +121,7 @@ class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-heading
             </article>
 
             {{-- Sidebar --}}
-            <div
-                x-init="
-                    () => {
-                        motion.inView($el, () => {
-                            gsap.fromTo(
-                                $el,
-                                { autoAlpha: 0, x: 5 },
-                                { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
-                            )
-                        })
-                    }
-                "
-                class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
-            >
-                {{-- Sponsors --}}
-                <h3 class="flex items-center gap-1.5 opacity-60">
-                    {{-- Icon --}}
-                    <x-icons.star-circle class="size-6" />
-                    {{-- Label --}}
-                    <div>Sponsors</div>
-                </h3>
-
-                {{-- List --}}
-                <div class="space-y-3 pt-2.5">
-                    <x-sponsors.lists.docs.featured-sponsors />
-                </div>
-
-                {{-- List --}}
-                <div class="space-y-3 pt-2.5">
-                    <x-sponsors.lists.docs.corporate-sponsors />
-                </div>
-            </div>
+            <x-blog.sidebar />
         </div>
     </section>
 </x-layout>

resources/views/blog.blade.php

@@ -121,46 +121,18 @@ class="sr-only"
                     class="flex grow flex-col gap-5"
                 >
                     @foreach ($articles as $article)
-                        <x-article-card
+                        <x-blog.article-card
                             :title="$article->title"
                             :url="route('article', $article)"
                             :date="$article->published_at"
                         >
                             {{ $article->excerpt }}
-                        </x-article-card>
+                        </x-blog.article-card>
                     @endforeach
                 </div>
+
                 {{-- Sidebar --}}
-                <div
-                    x-init="
-                        () => {
-                            motion.inView($el, () => {
-                                gsap.fromTo(
-                                    $el,
-                                    { autoAlpha: 0, x: 5 },
-                                    { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
-                                )
-                            })
-                        }
-                    "
-                    class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
-                >
-                    {{-- Sponsors --}}
-                    <h3 class="flex items-center gap-1.5 opacity-60">
-                        {{-- Icon --}}
-                        <x-icons.star-circle class="size-6" />
-                        {{-- Label --}}
-                        <div>Sponsors</div>
-                    </h3>
-                    {{-- List --}}
-                    <div class="space-y-3 pt-2.5">
-                        <x-sponsors.lists.docs.featured-sponsors />
-                    </div>
-                    {{-- List --}}
-                    <div class="space-y-3 pt-2.5">
-                        <x-sponsors.lists.docs.corporate-sponsors />
-                    </div>
-                </div>
+                <x-blog.sidebar />
             </div>
             {{-- Pagination --}}
             <nav

resources/views/components/article-card.blade.php renamed to resources/views/components/blog/article-card.blade.php

@@ -0,0 +1,30 @@
+<aside
+    x-init="
+        () => {
+            motion.inView($el, () => {
+                gsap.fromTo(
+                    $el,
+                    { autoAlpha: 0, x: 5 },
+                    { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
+                )
+            })
+        }
+    "
+    class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
+>
+    {{-- Sponsors --}}
+    <h3 class="flex items-center gap-1.5 opacity-60">
+        {{-- Icon --}}
+        <x-icons.star-circle class="size-6" />
+        {{-- Label --}}
+        <div>Sponsors</div>
+    </h3>
+    {{-- List --}}
+    <div class="space-y-3 pt-2.5">
+        <x-sponsors.lists.docs.featured-sponsors />
+    </div>
+    {{-- List --}}
+    <div class="space-y-3 pt-2.5">
+        <x-sponsors.lists.docs.corporate-sponsors />
+    </div>
+</aside>