✨ ajout de l'affichage en card dans le listing des articles

Author: mckenziearts

app/Http/Livewire/Articles/Browse.php

@@ -44,6 +44,7 @@ public function validSort($sort): bool
     public function render(): View
     {
         $articles = Article::with('tags')
+            ->withCount(['views', 'reactions'])
             ->published()
             ->notPinned()
             ->orderByDesc('sponsored_at')

resources/views/components/articles/card-with-author.blade.php

@@ -1 +1,61 @@
 @props(['article'])
+
+<article class="pb-8 border-b border-skin-base" aria-labelledby="post-title-{{ $article->id }}">
+    <div>
+        <div class="flex space-x-3">
+            <div class="flex-shrink-0">
+                <img class="h-10 w-10 rounded-full" src="{{ $article->author->profile_photo_url }}" alt="{{ $article->author->name }}">
+            </div>
+            <div class="min-w-0 flex-1">
+                <p class="text-sm font-medium text-skin-inverted">
+                    <a href="{{ route('profile', $article->author->username) }}" class="hover:underline">{{ $article->author->name }}</a>
+                </p>
+                <p class="text-sm text-skin-base">
+                    <a href="#" class="hover:underline">
+                        <time datetime="{{ $article->publishedAt()->format('Y-m-d') }}">{{ $article->publishedAt()->format('j M, Y') }}</time>
+                    </a>
+                </p>
+            </div>
+        </div>
+        <h2 id="post-title-{{ $article->id }}" class="mt-4 text-lg leading-7 font-medium text-skin-inverted">
+            {{ $article->title }}
+        </h2>
+    </div>
+    <a href="{{ route('articles.show', $article) }}" class="block mt-2 group space-y-4">
+        <p class="text-sm text-skin-inverted-muted/70">
+            {!! $article->excerpt(190) !!}
+        </p>
+        <div class="relative h-96 overflow-hidden">
+            <img class="w-full h-full object-cover shadow-lg rounded-lg group-hover:opacity-75" src="{{ $article->getFirstMediaUrl('media') }}" alt="{{ $article->title }}" />
+        </div>
+        <div class="flex justify-between space-x-8">
+            <div class="flex space-x-6">
+                <span class="inline-flex items-center text-sm">
+                    <button type="button" class="inline-flex space-x-2 text-skin-muted hover:text-skin-base">
+                        <x-heroicon-o-thumb-up class="h-5 w-5" />
+                        <span class="font-medium text-skin-inverted">{{ $article->reactions_count }}</span>
+                        <span class="sr-only">likes</span>
+                    </button>
+                </span>
+                <span class="inline-flex items-center text-sm">
+                    <div class="inline-flex space-x-2 text-skin-muted">
+                        <x-heroicon-o-eye class="h-5 w-5" />
+                        <span class="font-medium text-skin-inverted">{{ $article->views_count }}</span>
+                        <span class="sr-only">views</span>
+                    </div>
+                </span>
+            </div>
+            <div class="flex items-center space-x-3">
+                @if ($article->tags->isNotEmpty())
+                    <div class="flex items-center space-x-2">
+                        @foreach ($article->tags as $tag)
+                            <x-tag :tag="$tag" />
+                        @endforeach
+                    </div>
+                @endif
+
+                <x-articles.sponsored :isSponsored="$article->isSponsored()" />
+            </div>
+        </div>
+    </a>
+</article>

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

@@ -20,10 +20,10 @@
         </div>
         <div class="mt-2">
             <a href="{{ route('articles.show', $article) }}" class="group">
-                <h4 class="text-lg leading-6 font-semibold font-sans text-skin-inverted group-hover:text-skin-primary">{{ $article->title }}</h4>
+                <h4 class="text-lg leading-7 font-semibold font-sans text-skin-inverted group-hover:text-skin-primary">{{ $article->title }}</h4>
             </a>
-            <p class="mt-1 text-sm font-normal text-skin-base leading-5">
-                {!! $article->excerpt() !!}
+            <p class="mt-1 text-sm text-skin-base leading-5">
+                {!! $article->excerpt(130) !!}
             </p>
             <div class="mt-3 flex items-center font-sans">
                 <div class="shrink-0">

resources/views/livewire/articles/browse.blade.php

@@ -41,7 +41,11 @@ class="lg:grid lg:grid-cols-8 lg:gap-8 lg:col-span-7"
 
             <div class="py-12 space-y-8 sm:space-y-10 max-w-lg mx-auto lg:max-w-none">
                 @foreach ($articles as $article)
-                    <x-articles.overview :article="$article" />
+                    @if($viewMode === 'card')
+                        <x-articles.card-with-author :article="$article" />
+                    @else
+                        <x-articles.overview :article="$article" />
+                    @endif
                 @endforeach
             </div>