Adds related posts section to posts.show (#364)

Author: sertxudev

app/Http/Controllers/PostController.php

@@ -18,6 +18,7 @@ public function show(Post $post): View
 
         return view('posts.show', [
             'post' => $post,
+            'relatedPosts' => $post->relatedPosts(),
         ]);
     }
 }

app/Http/Controllers/PostPreviewController.php

@@ -19,6 +19,7 @@ public function __invoke(Request $request, Post $post): View
 
         return view('posts.show', [
             'post' => $post,
+            'relatedPosts' => collect(),
         ]);
     }
 }

app/Models/Post.php

@@ -8,6 +8,7 @@
 use App\Models\Concerns\Tweetable;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -175,6 +176,31 @@ public function toSitemapTag(): Url
             ->setPriority(0.1);
     }
 
+    /**
+     * Get related posts based on shared tags.
+     *
+     * @return Collection<int, Post>
+     */
+    public function relatedPosts(): Collection
+    {
+        if ($this->tags->isEmpty()) {
+            return self::query()
+                ->wherePublished()
+                ->where('id', '!=', $this->id)
+                ->latest('published_at')
+                ->limit(3)
+                ->get();
+        }
+
+        return self::query()
+            ->wherePublished()
+            ->where('id', '!=', $this->id)
+            ->withAnyTags($this->tags)
+            ->latest('published_at')
+            ->limit(3)
+            ->get();
+    }
+
     /**
      * The attributes that should be cast.
      *

resources/views/posts/show.blade.php

@@ -21,5 +21,30 @@
         <section class="markup images-centered border-neutral-700 border-t pt-8">
             @markdown($post->text ?? '')
         </section>
+
+        @if($relatedPosts->isNotEmpty())
+            <section class="border-neutral-700 border-t pt-8 mt-8">
+                <h3 class="text-xl text-neutral-200 font-medium mb-6">Related Posts</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    @foreach($relatedPosts as $relatedPost)
+                        <a href="{{ route('posts.show', $relatedPost) }}" class="block group">
+                            @if($relatedPost->getFirstMedia('thumbnail'))
+                                <img
+                                    src="{{ $relatedPost->getFirstMedia('thumbnail')->getUrl('thumbnail') }}"
+                                    alt="{{ $relatedPost->title }}"
+                                    class="w-full h-40 object-cover rounded-lg mb-3"
+                                >
+                            @else
+                                <div class="w-full h-40 bg-neutral-800 rounded-lg mb-3 flex items-center justify-center">
+                                    <span class="text-neutral-500 text-sm">No image</span>
+                                </div>
+                            @endif
+                            <h4 class="text-neutral-200 group-hover:text-ocean transition-colors">{{ $relatedPost->title }}</h4>
+                            <span class="text-sm text-neutral-400">{{ $relatedPost->published_at->format('d M Y') }}</span>
+                        </a>
+                    @endforeach
+                </div>
+            </section>
+        @endif
     </div>
 </x-app-layout>