160 lines
8.2 KiB
PHP
160 lines
8.2 KiB
PHP
@extends('layouts.nova.content-layout')
|
|
|
|
@php
|
|
$hero_title = $story->title;
|
|
$hero_description = $story->excerpt ?: \Illuminate\Support\Str::limit(strip_tags((string) $story->content), 160);
|
|
@endphp
|
|
|
|
@push('head')
|
|
@php
|
|
$storyUrl = $story->canonical_url ?: route('stories.show', ['slug' => $story->slug]);
|
|
$creatorName = $story->creator?->display_name ?: $story->creator?->username ?: 'Unknown creator';
|
|
$metaDescription = $story->meta_description ?: $hero_description;
|
|
$metaTitle = $story->meta_title ?: $story->title;
|
|
$ogImage = $story->og_image ?: $story->cover_url;
|
|
@endphp
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="{{ $metaTitle }}" />
|
|
<meta property="og:description" content="{{ $metaDescription }}" />
|
|
<meta property="og:url" content="{{ $storyUrl }}" />
|
|
@if($ogImage)
|
|
<meta property="og:image" content="{{ $ogImage }}" />
|
|
@endif
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="{{ $metaTitle }}" />
|
|
<meta name="twitter:description" content="{{ $metaDescription }}" />
|
|
@if($ogImage)
|
|
<meta name="twitter:image" content="{{ $ogImage }}" />
|
|
@endif
|
|
<script type="application/ld+json">
|
|
{!! json_encode([
|
|
'@context' => 'https://schema.org',
|
|
'@type' => 'Article',
|
|
'headline' => $story->title,
|
|
'description' => $metaDescription,
|
|
'image' => $ogImage,
|
|
'author' => [
|
|
'@type' => 'Person',
|
|
'name' => $creatorName,
|
|
],
|
|
'datePublished' => optional($story->published_at)->toIso8601String(),
|
|
'dateModified' => optional($story->updated_at)->toIso8601String(),
|
|
'mainEntityOfPage' => $storyUrl,
|
|
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
|
|
</script>
|
|
@endpush
|
|
|
|
@section('page-content')
|
|
<div class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-12">
|
|
<article class="lg:col-span-8">
|
|
<div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70">
|
|
@if($story->cover_url)
|
|
<img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-72 w-full object-cover" loading="lazy" />
|
|
@endif
|
|
<div class="p-6">
|
|
<div class="mb-4 flex flex-wrap items-center gap-3 text-xs text-gray-300">
|
|
<span class="rounded-full border border-gray-600 px-2 py-1">{{ str_replace('_', ' ', $story->story_type) }}</span>
|
|
@if($story->published_at)
|
|
<span>{{ $story->published_at->format('M d, Y') }}</span>
|
|
@endif
|
|
<span>{{ (int) $story->reading_time }} min read</span>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-semibold leading-tight tracking-tight text-white">{{ $story->title }}</h1>
|
|
@if($story->excerpt)
|
|
<p class="mt-3 text-gray-300">{{ $story->excerpt }}</p>
|
|
@endif
|
|
|
|
<div class="mt-6 prose prose-invert max-w-none prose-a:text-sky-300 prose-pre:bg-gray-900">
|
|
{!! $safeContent !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="mt-8 rounded-xl border border-gray-700 bg-gray-800/60 p-6">
|
|
<h2 class="mb-5 text-xl font-semibold tracking-tight text-white">Discussion</h2>
|
|
@if($comments->isEmpty())
|
|
<p class="text-sm text-gray-400">No comments yet.</p>
|
|
@else
|
|
<div class="space-y-4">
|
|
@foreach($comments as $comment)
|
|
<div class="rounded-lg border border-gray-700 bg-gray-900/60 p-4">
|
|
<div class="mb-2 text-xs text-gray-400">
|
|
{{ $comment->author_username ?? 'User' }}
|
|
<span class="mx-1">•</span>
|
|
{{ optional($comment->created_at)->diffForHumans() }}
|
|
</div>
|
|
<p class="text-sm leading-relaxed text-gray-200">{{ $comment->body }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@auth
|
|
@if($story->creator)
|
|
<form method="POST" action="{{ url('/@' . $story->creator->username . '/comment') }}" class="mt-5 space-y-3">
|
|
@csrf
|
|
<textarea name="body" rows="3" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white" placeholder="Add a comment for this creator"></textarea>
|
|
<button class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-4 py-2 text-sm text-sky-200 transition hover:scale-[1.01]">Post comment</button>
|
|
</form>
|
|
@endif
|
|
@endauth
|
|
</section>
|
|
</article>
|
|
|
|
<aside class="space-y-8 lg:col-span-4">
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Creator</h3>
|
|
<a href="{{ route('stories.creator', ['username' => $story->creator?->username]) }}" class="mt-2 inline-flex items-center gap-2 text-base text-white hover:text-sky-300">
|
|
<span>{{ $story->creator?->display_name ?: $story->creator?->username }}</span>
|
|
</a>
|
|
@if($story->creator)
|
|
<form method="POST" action="{{ url('/@' . $story->creator->username . '/follow') }}" class="mt-4">
|
|
@csrf
|
|
<button class="w-full rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sm text-sky-200 transition hover:scale-[1.01]">Follow Creator</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Tags</h3>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
@forelse($story->tags as $tag)
|
|
<a href="{{ route('stories.tag', ['tag' => $tag->slug]) }}" class="rounded-full border border-gray-600 px-2 py-1 text-xs text-gray-200 hover:border-sky-400 hover:text-sky-300">#{{ $tag->name }}</a>
|
|
@empty
|
|
<span class="text-sm text-gray-400">No tags</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Report Story</h3>
|
|
@auth
|
|
<form method="POST" action="{{ url('/api/reports') }}" class="mt-3 space-y-3">
|
|
@csrf
|
|
<input type="hidden" name="target_type" value="story" />
|
|
<input type="hidden" name="target_id" value="{{ $story->id }}" />
|
|
<textarea name="reason" rows="3" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white" placeholder="Reason for report"></textarea>
|
|
<button class="w-full rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-200 transition hover:scale-[1.01]">Submit report</button>
|
|
</form>
|
|
@else
|
|
<p class="mt-3 text-sm text-gray-400">
|
|
<a href="{{ route('login') }}" class="text-sky-300 hover:text-sky-200">Sign in</a> to report this story.
|
|
</p>
|
|
@endauth
|
|
</div>
|
|
|
|
@if($relatedStories->isNotEmpty())
|
|
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-5">
|
|
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-300">Related Stories</h3>
|
|
<div class="space-y-3">
|
|
@foreach($relatedStories as $item)
|
|
<a href="{{ route('stories.show', ['slug' => $item->slug]) }}" class="block rounded-lg border border-gray-700 bg-gray-900/50 p-3 text-sm text-gray-200 hover:border-sky-400 hover:text-white">{{ $item->title }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</aside>
|
|
</div>
|
|
@endsection
|