Styling wip

app/Http/Controllers/InsightsController.php

@@ -11,11 +11,12 @@ class InsightsController
 {
     public function index()
     {
-        $posts = ContentApi::getPosts('ray', request('page', 1), theme: 'nord');
+        $insights = cache()->rememberForEver('insights', fn () => ContentApi::getPosts('ray', request('page', 1), theme: 'nord'));
 
         if (request('page', 1)) {
-            $firstPost = $posts->first();
-            unset($posts[0]);
+            $highlight = $insights->first();
+
+            unset($insights[0]);
         }
 
         $externalFeedItems = ExternalFeedItem::query()
@@ -24,8 +25,8 @@ public function index()
             ->get();
 
         return view('front.pages.insights.index', [
-            'posts' => $posts,
-            'firstPost' => $firstPost ?? null,
+            'insights' => $insights,
+            'highlight' => $highlight ?? null,
             'externalFeedItems' => $externalFeedItems,
         ]);
     }

app/Livewire/Newsletter.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Actions\SubscribeUserToNewsletterAction;
+use Livewire\Component;
+
+class Newsletter extends Component
+{
+    public string $email = '';
+
+    public bool $submitted = false;
+
+    public function subscribe(): void
+    {
+        $this->validate([
+            'email' => 'required|email',
+        ]);
+
+        app(SubscribeUserToNewsletterAction::class)
+            ->execute(email: $this->email);
+
+        $this->submitted = true;
+    }
+}

app/Providers/LivewireServiceProvider.php

@@ -5,7 +5,7 @@
 use App\Livewire\ActivationsComponent;
 use App\Livewire\DomainComponent;
 use App\Livewire\LessonCompletedButtonComponent;
-use App\Livewire\NewsletterComponent;
+use App\Livewire\Newsletter;
 use App\Livewire\RepositoriesComponent;
 use App\Livewire\SearchDocsComponent;
 use Illuminate\Support\ServiceProvider;
@@ -20,6 +20,6 @@ public function register(): void
         Livewire::component('domain', DomainComponent::class);
         Livewire::component('activations', ActivationsComponent::class);
         Livewire::component('search-docs', SearchDocsComponent::class);
-        Livewire::component('newsletter', NewsletterComponent::class);
+        Livewire::component('newsletter', Newsletter::class);
     }
 }

app/Providers/NavigationServiceProvider.php

@@ -26,7 +26,7 @@ public function register(): void
                 ->addItemClass('first:-m-1 first:p-1 rounded-sm')
                 ->route('vacancies.index', 'Vacancies')
                 ->route('about', 'About')
-                ->route('insights', 'insights')
+                ->route('insights', 'Insights')
                 ->route('docs', 'Docs')
                 ->route('guidelines', 'Guidelines')
                 ->addIf(auth()->check(), View::create('layout.partials.navigation.profileIcon', ['url' => route('profile')]))

composer.json

@@ -21,6 +21,7 @@
         "filament/filament": "^3.2",
         "filament/spatie-laravel-media-library-plugin": "^3.2",
         "flowframe/laravel-trend": "^0.2.0",
+        "gehrisandro/tailwind-merge-laravel": "^1.2",
         "geoip2/geoip2": "^2.13",
         "guzzlehttp/guzzle": "^7.5",
         "knplabs/github-api": "3.14.1",

resources/views/components/headers/h1.blade.php

@@ -0,0 +1,6 @@
+@php
+    $tag = $tag ?? 'h1';
+@endphp
+<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-72 lg:text-144 leading-80 font-bold') }}>
+    {{ $slot }}
+</{{ $tag }}>

resources/views/components/headers/h2.blade.php

@@ -0,0 +1,6 @@
+@php
+    $tag = $tag ?? 'h2';
+@endphp
+<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-72 leading-90 font-bold') }}>
+    {{ $slot }}
+</{{ $tag }}>

resources/views/components/insights/highlight.blade.php

@@ -0,0 +1,30 @@
+@php
+    /** @var Spatie\ContentApi\Data\Post $insight */
+@endphp
+
+<x-layout.wrapper as="article" :class="twMerge(['flex gap-16', $attributes->get('class')])">
+    <figure>
+        {{-- @todo Thumbnail --}}
+        <div class="w-[440px] h-[440px] bg-oss-green-pale rounded-8 shadow-oss-card"></div>
+    </figure>
+    <div class="pt-28 flex flex-col gap-9">
+        <p class="flex items-center gap-3">
+            <a href="{{ route('insights.show', $insight->slug) }}" class="bg-oss-green-pale font-semibold rounded-8 px-2 py-0.5">
+                Latest article
+            </a>
+            <a href="{{ route('insights.show', $insight->slug) }}">
+                <time datetime="{{ $insight->date->format('Y-m-d') }}">
+                    {{ $insight->date->format('F d, Y') }}
+                </time>
+            </a>
+        </p>
+        <x-headers.h2 class="w-2/3">
+            <a href="{{ route('insights.show', $insight->slug) }}">
+                {{ $insight->title }}
+            </a>
+        </x-headers.h2>
+        <div class="w-3/4">
+            {!! $insight->summary  !!}
+        </div>
+    </div>
+</x-layout.wrapper>

resources/views/components/insights/list-item.blade.php

@@ -0,0 +1,31 @@
+<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>
+    <div>
+        <h3 class="text-24 font-bold hover:text-oss-spatie-blue">
+            <a 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 !!}
+        </div>
+        <div class="mt-4 flex gap-3 text-14">
+            @isset($insight->date)
+                <a 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>
+        </div>
+    </div>
+</article>

resources/views/components/layout/wrapper.blade.php

@@ -0,0 +1,3 @@
+<div {{ $attributes->twMerge('w-full max-w-wrapper mx-auto') }}>
+    {{ $slot }}
+</div>