41 lines
2.4 KiB
PHP
41 lines
2.4 KiB
PHP
 
|
<x-app-layout>
|
||
|
|
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
||
|
|
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<a href="{{ route('blog.index') }}" class="text-sm text-indigo-600 hover:text-indigo-500">← Back to blog</a>
|
||
|
|
<h1 class="mt-3 text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ $post->title }}</h1>
|
||
|
|
<div class="mt-2 text-sm text-gray-500">{{ $post->published_at?->format('M j, Y') }}@if($post->author) · {{ $post->author->name }} @endif</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
@if($post->cover_url)
|
||
|
|
<img src="{{ $post->cover_url }}" alt="{{ $post->title }}" class="w-full rounded-2xl object-cover aspect-[16/9] mb-8">
|
||
|
|
@endif
|
||
|
|
|
||
|
|
<div class="space-y-4 text-gray-800 dark:text-gray-200 leading-relaxed">
|
||
|
|
@php $body = trim((string) $post->body); @endphp
|
||
|
|
@foreach(preg_split('/\r?\n+/', $body) as $line)
|
||
|
|
@if(trim($line) !== '')<p>{{ $line }}</p>@endif
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if($relatedPosts->count())
|
||
|
|
<div class="mt-12 border-t border-gray-100 dark:border-gray-800 pt-8">
|
||
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">More posts</h2>
|
||
|
|
<div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||
|
|
@foreach($relatedPosts as $related)
|
||
|
|
<a href="{{ route('blog.show', $related->slug) }}" class="group rounded-2xl overflow-hidden bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700 hover:shadow-lg transition">
|
||
|
|
<div class="aspect-[16/9] overflow-hidden">
|
||
|
|
<img src="{{ $related->cover_url ?: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1200&auto=format&fit=crop' }}" alt="{{ $related->title }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||
|
|
</div>
|
||
|
|
<div class="p-3">
|
||
|
|
<div class="text-sm font-semibold text-gray-900 dark:text-white">{{ $related->title }}</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</section>
|
||
|
|
</x-app-layout>
|