Skip to content

Commit

Permalink
Insights index
Browse files Browse the repository at this point in the history
  • Loading branch information
riasvdv committed Sep 6, 2024
1 parent f2ece84 commit 8460d69
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 67 deletions.
15 changes: 10 additions & 5 deletions app/Http/Controllers/InsightsController.php
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions database/factories/ExternalFeedItemFactory.php
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
];
}
Expand Down
Binary file added resources/images/backgrounds/blog-index.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/backgrounds/blog-post.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 25 additions & 15 deletions resources/views/components/insights/list-item.blade.php
Original file line number Diff line number Diff line change
@@ -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>
59 changes: 40 additions & 19 deletions resources/views/front/pages/insights/index.blade.php
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion resources/views/front/pages/insights/show.blade.php
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
49 changes: 27 additions & 22 deletions resources/views/livewire/newsletter.blade.php
Original file line number Diff line number Diff line change
@@ -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
Expand Down
1 change: 1 addition & 0 deletions routes/web.php
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down

0 comments on commit 8460d69

Please sign in to comment.