feat: add working posts index

This commit adds pagination functionality to the posts index page. The code changes include: - Sorting the posts by descending date - Paginating the posts with 6 items per page - Creating a new component called "Listposts" for rendering the paginated posts - Adding a new view file for the "Listposts" component - Updating the blade template of the posts index page to use the "Listposts" component and pass in the paginated posts The purpose of these changes is to improve user experience by displaying a limited number of posts per page and providing navigation links for easier browsing.
2025-12-06 10:10:48 +01:00 · 2023-12-12 12:32:42 +01:00
parent 25c3675c2b
commit 5fe3fcac61
7 changed files with 134 additions and 16 deletions
--- a/app/Http/Controllers/PostsController.php
+++ b/app/Http/Controllers/PostsController.php
@@ -4,14 +4,18 @@ namespace App\Http\Controllers;

 use Spatie\Sheets\Facades\Sheets;
 use Spatie\Sheets\Sheet;
+use CreativeCrafts\Paginate\Facades\Paginate;

 class PostsController extends Controller
 {
    public function index()
    {
-        $posts = Sheets::all();
-        
-        return view('posts.index', compact('posts'));
+        $posts = Sheets::all()->sortByDesc('date');
+        $paginatedPosts = Paginate::collection($posts, 6);
+
+        return view('posts.index', [
+            'posts' => $paginatedPosts,
+        ]);
    }

    public function show(Sheet $post)
--- a/app/View/Components/Posts/Listposts.php
+++ b/app/View/Components/Posts/Listposts.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\View\Components\Posts;
+
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Collection;
+use Illuminate\View\Component;
+use Spatie\Sheets\Facades\Sheets;
+
+class Listposts extends Component
+{
+    public function __construct(public LengthAwarePaginator $posts)
+    {
+    }
+
+    public function render(): View
+    {
+        return view('components.posts.listposts');
+    }
+}
--- a/composer.json
+++ b/composer.json
@@ -12,6 +12,7 @@
        "andcarpi/laravel-popper": "^0.9.4",
        "anhskohbo/no-captcha": "^3.5",
        "blade-ui-kit/blade-icons": "^1.5",
+        "creativecrafts/laravel-paginate-collection": "^0.2.4",
        "cviebrock/eloquent-sluggable": "^10.0",
        "dolejska-daniel/riot-api": "^5",
        "guzzlehttp/guzzle": "^7.2",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "b84d17c5f2668acd3b38779559962eb9",
+    "content-hash": "977c4e8990bc192edf2ad99855f154dc",
    "packages": [
        {
            "name": "andcarpi/laravel-popper",
@@ -405,6 +405,77 @@
            },
            "time": "2023-09-17T07:26:20+00:00"
        },
+        {
+            "name": "creativecrafts/laravel-paginate-collection",
+            "version": "0.2.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/CreativeCrafts/laravel-paginate-collection.git",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/CreativeCrafts/laravel-paginate-collection/zipball/ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "reference": "ee750374a8a02820c1f86e80a88bdc1e2fefcaf1",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1",
+                "spatie/laravel-package-tools": "^1.14.0"
+            },
+            "require-dev": {
+                "laravel/pint": "^1.4",
+                "nunomaduro/collision": "^6.4",
+                "nunomaduro/larastan": "^2.4",
+                "orchestra/testbench": "^8.0",
+                "pestphp/pest": "^1.22",
+                "pestphp/pest-plugin-laravel": "^1.4",
+                "phpstan/extension-installer": "^1.2",
+                "phpstan/phpstan-deprecation-rules": "^1.1",
+                "phpstan/phpstan-phpunit": "^1.3",
+                "phpunit/phpunit": "^9.5",
+                "spatie/laravel-ray": "^1.32"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "CreativeCrafts\\Paginate\\PaginateServiceProvider"
+                    ],
+                    "aliases": {
+                        "Paginate": "CreativeCrafts\\Paginate\\Facades\\Paginate"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "CreativeCrafts\\Paginate\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Godspower",
+                    "email": "oduose4eva@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A handy package to paginate laravel collection",
+            "homepage": "https://github.com/creativecrafts/laravel-paginate-collection",
+            "keywords": [
+                "creativeCrafts",
+                "laravel",
+                "laravel-paginate-collection"
+            ],
+            "support": {
+                "issues": "https://github.com/CreativeCrafts/laravel-paginate-collection/issues",
+                "source": "https://github.com/CreativeCrafts/laravel-paginate-collection/tree/0.2.4"
+            },
+            "time": "2023-02-21T20:22:50+00:00"
+        },
        {
            "name": "cviebrock/eloquent-sluggable",
            "version": "10.0.0",
--- a/content/posts/hello-world.md
+++ b/content/posts/hello-world.md
@@ -1,9 +1,10 @@
 ---
-title: Hello, world!
-description: Welcome to Sheets!
-date: 2020-07-01
+title: Hello, I am a cat!
+description: Thumbnail is a cat.
+thumbnail: 'https://placekitten.com/1920/1080'
+date: 2022-10-01 # YYYY-MM-DD HH:MM:SS
 ---

 # Hello, world!

-Welcome to Sheets!
+meow?
--- a/resources/views/components/posts/listposts.blade.php
+++ b/resources/views/components/posts/listposts.blade.php
@@ -0,0 +1,24 @@
+@php use Carbon\Carbon; @endphp
+<div class="container mx-auto p-4 flex flex-col items-center justify-center mt-3">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 auto-cols-max w-full">
+        @foreach($posts as $post)
+            <article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800
+                hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
+                <span
+                    class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
+                    <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
+                </span>
+                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="w-full h-48 object-cover rounded-t-2xl">
+                <div class="p-4">
+                    <h2 class="text-xl font-bold mb-2 line-clamp-1" itemprop="name">{{ $post->title }}</h2>
+                    <p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
+                </div>
+                <a href="{{ route('posts.show', $post->slug)}}" itemprop="url"
+                   class="absolute bottom-4 right-4 text-sm text-orange-400 hover:text-orange-600">Read more</a>
+            </article>
+        @endforeach
+    </div>
+    <div class="mt-4">
+        {{ $posts->links() }}
+    </div>
+</div>
--- a/resources/views/posts/index.blade.php
+++ b/resources/views/posts/index.blade.php
@@ -1,8 +1,7 @@
@extends('layouts.app')

@section('title', 'Heimerdinger.LoL • Posts')
-@section('description', 'Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins
-such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
+@section('description', 'Explore all our blog posts on Heimerdinger.LoL. Posts about League of Legends and more.')

@section('content')
    <section class="max-w-screen-xl mx-auto mt-12">
@@ -10,11 +9,8 @@ such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
            class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
            Posts</h1>
-        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Latest posts about League of Legends</h2>
-        @foreach($posts as $post)
-            {{ $post->title }}
-            {{ $post->description}}
-
-        @endforeach
+        <h2 class="text-center text-orange-400 text-sm uppercase font-medium">Our latest posts about League of
+            Legends</h2>
+        <x-posts.listposts :posts="$posts"/>
    </section>
@endsection