Insights index

spatie · Sep 6, 2024 · 8460d69 · 8460d69
1 parent f2ece84
commit 8460d69
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 67 deletions.
diff --git a/app/Http/Controllers/InsightsController.php b/app/Http/Controllers/InsightsController.php
@@ -3,26 +3,31 @@
 namespace App\Http\Controllers;
 
 use App\Models\ExternalFeedItem;
+use Illuminate\Http\Request;
 use Spatie\ContentApi\ContentApi;
 use Spatie\ContentApi\Data\Post;
 use Spatie\Feed\FeedItem;
 
 class InsightsController
 {
-    public function index()
+    public function index(Request $request)
     {
-        $insights = cache()->rememberForEver('insights', fn () => ContentApi::getPosts('ray', request('page', 1), theme: 'nord'));
+        $insights = ContentApi::getPosts(
+            product: 'ray',
+            page: request('page', 1),
+            perPage: 5,
+            theme: 'nord',
+        );
 
-        if (request('page', 1)) {
+        if ($request->get('page', 1) === 1) {
             $highlight = $insights->first();
 
             unset($insights[0]);
         }
 
         $externalFeedItems = ExternalFeedItem::query()
             ->orderBy('created_at', 'desc')
-            ->limit(6)
-            ->get();
+            ->paginate(7);
 
         return view('front.pages.insights.index', [
             'insights' => $insights,

diff --git a/database/factories/ExternalFeedItemFactory.php b/database/factories/ExternalFeedItemFactory.php
@@ -11,6 +11,12 @@ public function definition(): array
         return [
             'title' => $this->faker->sentence(),
             'url' => $this->faker->url(),
+            'website' => $this->faker->randomElement([
+                'rias.be',
+                'mailcoach.app',
+                'flareapp.io',
+                'sebastiandedeyne.com'
+            ]),
             'short_summary' => $this->faker->sentence(),
         ];
     }

diff --git a/resources/images/backgrounds/blog-index.png b/resources/images/backgrounds/blog-index.png
diff --git a/resources/images/backgrounds/blog-post.png b/resources/images/backgrounds/blog-post.png
diff --git a/resources/views/components/insights/list-item.blade.php b/resources/views/components/insights/list-item.blade.php
@@ -1,31 +1,41 @@
-<article class="flex gap-8">
-    <figure class="pt-1">
-        {{-- @todo Image --}}
-        <div class="w-[120px] h-[120px] bg-oss-green-pale rounded-8"></div>
-    </figure>
+<?php /** @var \Spatie\ContentApi\Data\Post $insight */ ?>
+<article class="relative flex gap-8 group p-9">
+    <div class="absolute inset-0 rounded-[20px] pointer-events-none w-full h-full opacity-50 border border-transparent group-hover:bg-link-card-light-hover group-hover:border-oss-gray-dark"></div>
+    <a wire:navigate href="{{ route('insights.show', $insight->slug) }}">
+        <figure class="pt-1">
+            <div class="w-[120px] h-[120px] bg-oss-green-pale rounded-8">
+                @if ($insight->header_image)
+                    <img class="w-full h-full object-cover" src="{{ $insight->header_image }}" alt="">
+                @endif
+            </div>
+        </figure>
+    </a>
     <div>
-        <h3 class="text-24 font-bold hover:text-oss-spatie-blue">
-            <a href="{{ route('insights.show', $insight->slug) }}">
+        <h3 class="text-24 font-bold group-hover:text-oss-spatie-blue hover:text-oss-spatie-blue">
+            <a wire:navigate href="{{ route('insights.show', $insight->slug) }}">
                 {{ $insight->title }}
             </a>
         </h3>
         <div class="mt-3 [&_p]:mt-2 [&_code]:text-16 [&_code]:bg-transparent">
-            {!! $insight->summary !!}
+            <a wire:navigate href="{{ route('insights.show', $insight->slug) }}">
+                {!! $insight->summary !!}
+            </a>
         </div>
         <div class="mt-4 flex gap-3 text-14">
             @isset($insight->date)
-                <a href="{{ route('insights.show', $insight->slug) }}">
+                <a wire:navigate href="{{ route('insights.show', $insight->slug) }}">
                     <time datetime="{{ $insight->date->format('Y-m-d') }}">
                         {{ $insight->date->format('F d, Y') }}
                     </time>
                 </a>
             @endisset
-            {{-- @todo Tags --}}
-            <ul class="contents font-bold">
-                <li>#postgresql</li>
-                <li>#backend</li>
-                <li>#databases</li>
-            </ul>
+            @if (count($insight->tags))
+                <ul class="contents font-bold">
+                    @foreach ($insight->tags as $tag)
+                    <li>#{{ $tag }}</li>
+                    @endforeach
+                </ul>
+            @endif
         </div>
     </div>
 </article>
diff --git a/resources/views/front/pages/insights/index.blade.php b/resources/views/front/pages/insights/index.blade.php
@@ -1,4 +1,9 @@
-<x-page title="Insights" background="/backgrounds/blogs.jpg" main-class="font-pt text-oss-royal-blue font-medium text-18 leading-140">
+<x-page
+    title="Insights"
+    background="/backgrounds/blog-index.png"
+    body-class="bg-oss-gray"
+    main-class="font-pt text-oss-royal-blue font-medium text-18 leading-140 antialiased"
+>
     <x-layout.wrapper class="mt-8 sm:mt-20 md:mt-28 px-7 lg:px-0">
         <x-headers.h1 class="text-right text-white">
             Insights
@@ -9,28 +14,44 @@
         <x-insights.highlight :insight="$highlight" class="-mt-8" />
     @endif
 
-    <x-layout.wrapper class="flex mt-20">
-        <h2 class="w-1/4 text-24 font-bold">More insights</h2>
-        <div class="flex-1 flex flex-col gap-16">
-            @foreach($insights as $insights)
-                <x-insights.list-item :insight="$insights" />
-            @endforeach
+    <x-layout.wrapper class="mt-20">
+        <div class="flex">
+            <h2 class="w-1/4 text-24 font-bold mt-9">More insights</h2>
+            <div class="flex-1 flex flex-col gap-6">
+                @foreach($insights as $insight)
+                    <x-insights.list-item :insight="$insight" />
+                @endforeach
+
+            </div>
         </div>
+        @if ($insights->hasMorePages())
+            <div class="mt-6 w-3/4 ml-auto pl-9">
+                <a href="{{ route('insights.all') }}" wire:navigate.hover class="flex w-full items-center justify-center py-6 text-blue bg-link-card-light border border-gray/25 rounded">
+                    View more
+                </a>
+            </div>
+        @endif
     </x-layout.wrapper>
 
-    <x-layout.wrapper>
+    <x-layout.wrapper class="mt-24">
         <livewire:newsletter />
     </x-layout.wrapper>
 
-    <h2>
-        From our team & products
-    </h2>
-
-    @foreach($externalFeedItems as $externalFeedItem)
-        @include('front.pages.insights.partials.externalFeedItem')
-    @endforeach
-
-    <a href="{{ route('external-feed-items') }}">View more</a>
-
-
+    <x-layout.wrapper class="mt-24 mb-20">
+        <div class="flex">
+            <h2 class="w-1/4 text-24 font-bold">From our team & products</h2>
+            <div class="flex-1 flex flex-col gap-10 pl-9">
+                @foreach($externalFeedItems as $externalFeedItem)
+                    @include('front.pages.insights.partials.externalFeedItem')
+                @endforeach
+            </div>
+        </div>
+        @if ($externalFeedItems->hasMorePages())
+            <div class="mt-6 w-3/4 ml-auto pl-9">
+                <a href="{{ route('external-feed-items') }}" wire:navigate.hover class="flex w-full items-center justify-center py-6 text-blue bg-link-card-light border border-gray/25 rounded">
+                    View more
+                </a>
+            </div>
+        @endif
+    </x-layout.wrapper>
 </x-page>
diff --git a/resources/views/front/pages/insights/partials/externalFeedItem.blade.php b/resources/views/front/pages/insights/partials/externalFeedItem.blade.php
@@ -1,10 +1,14 @@
 <div>
-    <a href="{{ $externalFeedItem->url }}">
-        {{ $externalFeedItem->title }}
+    <a class="group" href="{{ $externalFeedItem->url }}">
+        <span class="font-bold text-[20px] group-hover:text-oss-spatie-blue">{{ $externalFeedItem->title }}</span>
 
-        <div>
-            <time
-                datetime="{{ $externalFeedItem->created_at->format('Y-m-d') }}">{{ $externalFeedItem->created_at->format('d F Y') }}</time> {{ $externalFeedItem->website }}
+        <div class="mt-3 flex gap-4 items-center text-sm">
+            <time datetime="{{ $externalFeedItem->created_at->format('Y-m-d') }}">
+                {{ $externalFeedItem->created_at->format('d F Y') }}
+            </time>
+            <span class="text-oss-spatie-blue underline">
+                {{ $externalFeedItem->website }}
+            </span>
         </div>
     </a>
 </div>
diff --git a/resources/views/front/pages/insights/show.blade.php b/resources/views/front/pages/insights/show.blade.php
@@ -1,4 +1,4 @@
-<x-page title="{{ $post->title }}" background="/backgrounds/blogs.jpg">
+<x-page title="{{ $post->title }}" background="/backgrounds/blog-post.png">
     {{ $post->date?->format('d F Y') ?? 'Preview' }}
 
     <h1>{{ $post->title }}</h1>

diff --git a/resources/views/livewire/newsletter.blade.php b/resources/views/livewire/newsletter.blade.php
@@ -1,37 +1,42 @@
-<aside>
-    <header class="bg-oss-green-pale">
-        Get the latest from Spatie
-    </header>
-    <div class="flex gap-2">
-        {{-- @todo Mailcoach logo --}}
-        <div class="w-6 h-6 bg-blue-darker"></div>
-        <div>Powered by <a href="https://mailcoach.app">Mailcoach</a>, powerful email marketing tools to effortlessly
-            grow, connect and convert.
+<aside class="bg-oss-green-pale py-16 px-20 rounded-lg flex items-center gap-24">
+    <div class="w-1/3 flex-shrink-0">
+        <header class="text-oss-royal-blue font-bold text-[72px] leading-[65px] uppercase font-druk">
+            Get the latest from Spatie
+        </header>
+        <div class="mt-6 flex items-center gap-2">
+            <svg class="size-9 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 37"><g clip-path="url(#clip0_724_4187)"><path fill="#142D6F" d="M24 .5H12C5.371.5 0 5.872 0 12.5v12c0 6.628 5.372 12 12 12h12c6.628 0 12-5.372 12-12v-12c0-6.628-5.372-12-12-12Z"/><path fill="#fff" d="M12.65 19.99h-.008c-.984 0-1.905.38-2.593 1.068a3.64 3.64 0 0 0-1.069 2.596c0 .986.38 1.907 1.07 2.596a3.64 3.64 0 0 0 2.595 1.069c.986 0 1.907-.38 2.596-1.07l.031-.03a3.681 3.681 0 0 0-.03-5.158 3.66 3.66 0 0 0-2.591-1.075v.003Zm1.548 5.153-.031.031c-.401.4-.94.623-1.52.623a2.126 2.126 0 0 1-2.144-2.143c0-.58.223-1.12.623-1.52.401-.401.94-.623 1.52-.623.58.003 1.12.226 1.522.627.4.4.623.94.623 1.516 0 .576-.21 1.091-.592 1.49h-.001Zm11.752-4.08a3.663 3.663 0 0 0-2.59-1.074h-.01c-.983 0-1.905.381-2.592 1.069a3.64 3.64 0 0 0-1.069 2.596c0 .986.38 1.907 1.069 2.596a3.64 3.64 0 0 0 2.596 1.069c.986 0 1.891-.373 2.579-1.052h.001l.016-.017a3.646 3.646 0 0 0 1.068-2.598c0-.985-.38-1.9-1.071-2.591l.003.001Zm-1.075 4.111c-.4.402-.94.624-1.52.624a2.126 2.126 0 0 1-2.143-2.143 2.125 2.125 0 0 1 2.142-2.143 2.15 2.15 0 0 1 1.52.629c.402.402.624.94.624 1.514a2.14 2.14 0 0 1-.623 1.52Zm-.412-7.25.116-1.021.521-4.617.294-2.605-2.407 1.037L18 12.862l-4.986-2.144-2.408-1.037.294 2.605.522 4.617.115 1.02.99.275a11.183 11.183 0 0 1 4.455 2.46l1.018.918 1.018-.917a11.155 11.155 0 0 1 4.455-2.461l.99-.275ZM18 19.527a12.661 12.661 0 0 0-5.065-2.797l-.522-4.617L18 14.517l5.587-2.403-.521 4.617a12.657 12.657 0 0 0-5.067 2.797H18Z"/></g><defs><clipPath id="clip0_724_4187"><path fill="#fff" d="M0 .5h36v36H0z"/></clipPath></defs></svg>
+            <div class="text-sm leading-tight text-[#142D6F]">
+                Powered by <a class="underline" href="https://mailcoach.app">Mailcoach</a>, powerful email marketing tools to effortlessly
+                grow, connect and convert.
+            </div>
         </div>
     </div>
 
     @if($submitted)
-        <div>
-            <div>
-                <h2>Thank you for subscribing!</h2>
-                <p>You'll receive a confirmation email shortly.</p>
-            </div>
+        <div class="text-lg">
+            <h2>Thank you for subscribing!</h2>
+            <p>You'll receive a confirmation email shortly.</p>
         </div>
     @else
         <div>
             <div>
-                <div>
-                    <input name="email" wire:model="email" type="email" placeholder="Your email address">
-                    @error('email')
-                        <div>{{ $message }}</div>
-                    @enderror
+                <div class="bg-white/80 py-4 px-6 rounded-md w-full flex justify-between items-center">
+                    <div>
+                        <input class="bg-transparent h-full placeholder-oss-royal-blue-light" name="email" wire:model="email" type="email" placeholder="Your email address">
+                        @error('email')
+                            <p class="text-oss-red text-xs">{{ $message }}</p>
+                        @enderror
+                    </div>
 
-                    <button wire:click="subscribe">Subscribe</button>
+                    <button class="flex items-center gap-2 text-oss-spatie-blue hover:text-oss-royal-blue underline text-base underline-offset-2 " wire:click="subscribe">
+                        <svg class="size-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 19"><path fill="#197593" d="m12.686 9.5-.53.53-4.5 4.5-.532.532L6.063 14l.53-.53 3.97-3.97-3.968-3.97L6.063 5l1.061-1.062.53.53 4.5 4.5.532.532Z"/></svg>
+                        <span>Subscribe</span>
+                    </button>
                 </div>
             </div>
-            <div>
+            <div class="text-oss-royal-blue text-base leading-snug mt-5">
                 Sign up for occasional emails on Spatie products and promotions.
-                By submitting this from, you acknowledge our <a href="{{ route('legal.privacy') }}">Privacy Policy</a>.
+                By submitting this from, you acknowledge our <a class="underline" href="{{ route('legal.privacy') }}">Privacy Policy</a>.
             </div>
         </div>
     @endif

diff --git a/routes/web.php b/routes/web.php
@@ -46,6 +46,7 @@
 Route::feeds();
 
 Route::get('insights', [InsightsController::class, 'index'])->name('insights');
+Route::get('insights/all', [InsightsController::class, 'all'])->name('insights.all');
 Route::get('insights/{slug}', [InsightsController::class, 'detail'])->name('insights.show');
 Route::get('team-products', ExternalFeedItemsController::class)->name('external-feed-items');