Add support for banner + article link

app/Http/Controllers/InsightsController.php

@@ -4,7 +4,9 @@
 
 use App\Models\ExternalFeedItem;
 use Illuminate\Contracts\View\View;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Pagination\Paginator;
+use Illuminate\Support\Facades\Blade;
 use Spatie\ContentApi\ContentApi;
 use Spatie\ContentApi\Data\Post;
 use Spatie\Feed\FeedItem;
@@ -42,9 +44,9 @@ public function all(): View
         ]);
     }
 
-    public function detail(string $slug): View
+    public function detail(string $slug): View|RedirectResponse
     {
-        $post = ContentApi::getPost('ray', $slug, theme: 'nord');
+        $post = self::getPost($slug);
 
         if (! $post && is_numeric(explode('-', $slug)[0])) {
             $parts = explode('-', $slug);
@@ -56,19 +58,22 @@ public function detail(string $slug): View
 
         abort_if(is_null($post), 404);
 
-        $otherPosts = ContentApi::getPosts('ray', 1, 3, theme: 'nord')
+        $content = $this->replaceComponents($post->content);
+
+        $otherPosts = self::getPosts()
             ->filter(function (Post $otherPost) use ($post) {
                 return $otherPost->slug !== $post->slug;
             })
             ->take(2);
 
         return view('front.pages.insights.show', [
             'post' => $post,
+            'content' => $content,
             'otherPosts' => $otherPosts,
         ]);
     }
 
-    public static function getFeedItems()
+    public static function getFeedItems(): Paginator
     {
         return self::getPosts()->map(function (Post $post) {
             return FeedItem::create()
@@ -81,13 +86,71 @@ public static function getFeedItems()
         });
     }
 
-    private static function getPosts(int $perPage = 500): Paginator
+    private static function getPost(string $slug): ?Post
+    {
+        return ContentApi::getPost('spatie', $slug, theme: 'github-light');
+    }
+
+    private static function getPosts(int $perPage = 100): Paginator
     {
         return ContentApi::getPosts(
-            product: 'ray',
+            product: 'spatie',
             page: request('page', 1),
             perPage: $perPage,
-            theme: 'nord',
+            theme: 'github-light',
         );
     }
+
+    private function replaceComponents(string $content): string
+    {
+        preg_match_all('/\[\[\[([^\n\[]*)]]]/', $content, $matches);
+
+        foreach ($matches[1] as $index => $match) {
+            $definition = explode(':', $match);
+
+            $method = "render" . ucfirst($definition[0]);
+            if (! method_exists($this, $method)) {
+                continue;
+            }
+
+            $component = $this->$method($definition[1] ?? null);
+            $content = str_replace($matches[0][$index], $component, $content);
+        }
+
+        return $content;
+    }
+
+    private function renderBanner(?string $type): string
+    {
+        $props = [
+            'ref' => 'insights',
+            'class' => 'my-6',
+            'thin' => true
+        ];
+
+        if (! $type || ! file_exists(base_path("resources/views/components/banners/{$type}.blade.php"))) {
+            return Blade::render('components.banners.randomBanner', $props);
+        }
+
+        return Blade::render("components.banners.{$type}", $props);
+    }
+
+    private function renderLink(?string $slug): string
+    {
+        if (! $slug) {
+            return '';
+        }
+
+        $post = self::getPost($slug);
+
+        if (! $post) {
+            return '';
+        }
+
+        return Blade::render("components.insights.list-item", [
+            'insight' => $post,
+            'border' => true,
+            //'class' => '-mx-12',
+        ]);
+    }
 }

resources/css/front/utilities/highlighthing.css

@@ -3,6 +3,10 @@ pre, code {
     background-color: #f3f3f3;
 }
 
+.shiki pre, .shiki code {
+    background-color: transparent;
+}
+
 .hl-keyword {
     color: #CF222E;
 }

resources/views/front/pages/docs/components/banner.blade.php → resources/views/components/banner.blade.php

@@ -4,6 +4,8 @@
     'description' => '',
     'href' => '',
     'color' => 'purple',
+    'class' => '',
+    'thin' => false,
 ])
 <!--
     bg-orange text-orange
@@ -12,16 +14,18 @@
     bg-pink text-pink
     bg-blue text-blue
 -->
-<aside class="flex w-full">
-    <div class="bg-{{ $color }} text-white flex flex-col justify-center rounded-lg p-5 gap-3 text-sm">
+<aside class="flex w-full {{ $class }}">
+    <div class="w-full bg-{{ $color }} text-white flex {{ $thin ? 'items-center justify-between' : 'flex-col justify-center' }} p-5 rounded-lg gap-3 text-sm">
         <div class="text-lg icon bg-white text-{{ $color }} rounded-full w-8 flex items-center justify-center h-8">
             {{ app_svg($icon) }}
         </div>
-        <div class="font-bold">
-            {{ $title }}
+        <div class="{{ $thin ? 'mr-auto' : '' }}">
+            <div class="font-bold">
+                {{ $title }}
+            </div>
+            <p>{{ $description }}</p>
         </div>
-        <p>{{ $description }}</p>
-        <a href="{{ $href }}" class="mt-2">
+        <a href="{{ $href }}" class="{{ $thin ? '' : 'mt-2' }}">
             <button type="button" class="px-4 py-2.5 rounded text-oss-royal-blue bg-white cursor-pointer">
                 Learn&nbsp;more
             </button>

resources/views/front/pages/docs/banners/crud.blade.php → resources/views/components/banners/crud.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/far-graduation-cap"
     color="purple"
     title="Laravel beyond CRUD"
     description="Check out our course on Laravel development for large apps"
-    href="https://laravel-beyond-crud.com?ref=spatie-docs"
+    href="https://laravel-beyond-crud.com?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

resources/views/front/pages/docs/banners/event-sourcing.blade.php → resources/views/components/banners/event-sourcing.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/far-graduation-cap"
     color="pink"
     title="Event Sourcing in Laravel"
     description="Check out our course Event Sourcing"
-    href="https://laravel-beyond-crud.com?ref=spatie-docs"
+    href="https://laravel-beyond-crud.com?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

resources/views/front/pages/docs/banners/flare.blade.php → resources/views/components/banners/flare.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/fas-caret-square-right"
     color="purple"
     title="Flare"
     description="An error tracker especially made for Laravel"
-    href="https://flareapp.io?ref=spatie-docs"
+    href="https://flareapp.io?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

resources/views/front/pages/docs/banners/mailcoach.blade.php → resources/views/components/banners/mailcoach.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/fas-caret-square-right"
     color="blue"
     title="Mailcoach"
     description="Check out our full-featured (self-hosted) email marketing solution"
-    href="https://mailcoach.app?ref=spatie-docs"
+    href="https://mailcoach.app?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

resources/views/components/banners/medialibrary.blade.php

@@ -0,0 +1,9 @@
+<x-banner
+    icon="icons/far-image"
+    color="orange"
+    title="Medialibrary.pro"
+    description="UI components for the Media Library"
+    href="https://medialibrary.pro?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
+/>

resources/views/components/banners/randomBanner.blade.php

@@ -0,0 +1,15 @@
+@if(isset($repository) && $repository->slug === 'laravel-medialibrary')
+    @include('components.banners.medialibrary')
+@elseif(isset($repository) && $repository->slug === 'laravel-event-sourcing')
+    @include('components.banners.event-sourcing')
+@else
+    @include(\Illuminate\Support\Arr::random([
+        'components.banners.medialibrary',
+        'components.banners.crud',
+        'components.banners.flare',
+        'components.banners.mailcoach',
+        'components.banners.ray',
+        'components.banners.testingLaravel',
+        'components.banners.writing-readable-php',
+    ]))
+@endif

resources/views/components/banners/ray.blade.php

@@ -0,0 +1,9 @@
+<x-banner
+    icon="icons/far-graduation-cap"
+    color="orange-dark"
+    title="Ray"
+    description="Debug your applications faster"
+    href="https://myray.app?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
+/>

resources/views/front/pages/docs/banners/testingLaravel.blade.php → resources/views/components/banners/testingLaravel.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/far-graduation-cap"
     color="pink"
     title="Testing Laravel"
     description="Learn how to write quality tests in Pest and PHPUnit in our video course"
-    href="https://testing-laravel.com?ref=spatie-docs"
+    href="https://testing-laravel.com?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

resources/views/front/pages/docs/banners/writing-readable-php.blade.php → resources/views/components/banners/writing-readable-php.blade.php

@@ -1,7 +1,9 @@
-<x-docs-banner
+<x-banner
     icon="icons/far-graduation-cap"
     color="pink"
     title="Writing Readable PHP"
     description="Learn everything about maintainable code in our online course"
-    href="https://writing-readable-php.com?ref=spatie-docs"
+    href="https://writing-readable-php.com?ref={{ $ref ?? 'spatie-docs' }}"
+    class="{{ $class ?? '' }}"
+    thin="{{ $thin ?? false }}"
 />

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

@@ -1,21 +1,23 @@
 <?php /** @var \Spatie\ContentApi\Data\Post $insight */ ?>
-<a wire:navigate href="{{ route('insights.show', $insight->slug) }}" 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>
+<div wire:navigate href="{{ route('insights.show', $insight->slug) }}" class="insights-list-item relative cursor-pointer flex gap-8 group p-9 {{ $class ?? '' }}">
+    <div class="absolute inset-0 rounded-[20px] pointer-events-none w-full h-full opacity-50 border {{ ($border ?? false) ? 'bg-link-card-light-hover border-oss-gray-dark' : 'border-transparent' }} group-hover:bg-link-card-light-hover group-hover:border-oss-gray-dark"></div>
     <figure class="pt-1">
-        <div class="w-[120px] h-[120px] bg-oss-green-pale rounded-8">
+        <a wire:navigate href="{{ route('insights.show', $insight->slug) }}" class="text-oss-royal-blue no-underline block 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>
+        </a>
     </figure>
     <div>
-        <h3 class="text-24 font-bold group-hover:text-oss-spatie-blue hover:text-oss-spatie-blue">
-            {{ $insight->title }}
+        <h3 class="text-24 font-bold normal-case mb-3 group-hover:text-oss-spatie-blue hover:text-oss-spatie-blue">
+            <a wire:navigate href="{{ route('insights.show', $insight->slug) }}" class="text-oss-royal-blue no-underline ">
+                {{ $insight->title }}
+            </a>
         </h3>
-        <div class="mt-3 [&_p]:mt-2 [&_code]:text-16 [&_code]:bg-transparent">
-            {!! strip_tags($insight->summary, ['p', 'strong', 'em', 'b', 'i', 'code']) !!}
-        </div>
-        <div class="mt-4 flex gap-3 text-14">
+        <a wire:navigate href="{{ route('insights.show', $insight->slug) }}" class="text-oss-royal-blue no-underline block mt-3 [&_p]:mt-2 [&_code]:text-16 [&_code]:bg-transparent">
+            {!! strip_tags(Str::limit($insight->summary, 180), ['p', 'strong', 'em', 'b', 'i', 'code']) !!}
+        </a>
+        <a wire:navigate href="{{ route('insights.show', $insight->slug) }}" class="text-oss-royal-blue no-underline mt-4 flex gap-3 text-14">
             @isset($insight->date)
                 <time datetime="{{ $insight->date->format('Y-m-d') }}">
                     {{ $insight->date->format('F d, Y') }}
@@ -28,6 +30,6 @@
                     @endforeach
                 </ul>
             @endif
-        </div>
+        </a>
     </div>
-</a>
+</div>