login update
This commit is contained in:
229
resources/views/web/stories/show.blade.php
Normal file
229
resources/views/web/stories/show.blade.php
Normal file
@@ -0,0 +1,229 @@
|
||||
{{--
|
||||
Single story page — /stories/{slug}
|
||||
Uses ContentLayout.
|
||||
Includes: Hero, Article content, Author box, Related stories, Share buttons.
|
||||
--}}
|
||||
@extends('layouts.nova.content-layout')
|
||||
|
||||
@php
|
||||
$hero_title = $story->title;
|
||||
@endphp
|
||||
|
||||
@push('head')
|
||||
{{-- OpenGraph --}}
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{ $story->title }}" />
|
||||
<meta property="og:description" content="{{ $story->meta_excerpt }}" />
|
||||
@if($story->cover_url)
|
||||
<meta property="og:image" content="{{ $story->cover_url }}" />
|
||||
@endif
|
||||
<meta property="og:url" content="{{ $story->url }}" />
|
||||
<meta property="og:site_name" content="Skinbase" />
|
||||
|
||||
@if($story->published_at)
|
||||
<meta property="article:published_time" content="{{ $story->published_at->toIso8601String() }}" />
|
||||
@endif
|
||||
@if($story->updated_at)
|
||||
<meta property="article:modified_time" content="{{ $story->updated_at->toIso8601String() }}" />
|
||||
@endif
|
||||
|
||||
{{-- Twitter / X card --}}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="{{ $story->title }}" />
|
||||
<meta name="twitter:description" content="{{ $story->meta_excerpt }}" />
|
||||
@if($story->cover_url)
|
||||
<meta name="twitter:image" content="{{ $story->cover_url }}" />
|
||||
@endif
|
||||
|
||||
{{-- Article structured data (schema.org) --}}
|
||||
<script type="application/ld+json">
|
||||
{!! json_encode(array_filter([
|
||||
'@context' => 'https://schema.org',
|
||||
'@type' => 'Article',
|
||||
'headline' => $story->title,
|
||||
'description' => $story->meta_excerpt,
|
||||
'image' => $story->cover_url,
|
||||
'datePublished' => $story->published_at?->toIso8601String(),
|
||||
'dateModified' => $story->updated_at?->toIso8601String(),
|
||||
'mainEntityOfPage' => $story->url,
|
||||
'author' => $story->author ? [
|
||||
'@type' => 'Person',
|
||||
'name' => $story->author->name,
|
||||
] : [
|
||||
'@type' => 'Organization',
|
||||
'name' => 'Skinbase',
|
||||
],
|
||||
'publisher' => [
|
||||
'@type' => 'Organization',
|
||||
'name' => 'Skinbase',
|
||||
'url' => url('/'),
|
||||
],
|
||||
]), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@section('page-content')
|
||||
|
||||
<div class="max-w-3xl mx-auto">
|
||||
|
||||
{{-- ── HERO ──────────────────────────────────────────────────────────────── --}}
|
||||
@if($story->cover_url)
|
||||
<div class="rounded-2xl overflow-hidden mb-8 aspect-video">
|
||||
<img src="{{ $story->cover_url }}" alt="{{ $story->title }}"
|
||||
class="w-full h-full object-cover"
|
||||
loading="eager" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Meta bar --}}
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/40 mb-6">
|
||||
@if($story->author)
|
||||
<a href="{{ $story->author->profile_url }}"
|
||||
class="flex items-center gap-2 hover:text-white/60 transition-colors">
|
||||
@if($story->author->avatar_url)
|
||||
<img src="{{ $story->author->avatar_url }}" alt="{{ $story->author->name }}"
|
||||
class="w-6 h-6 rounded-full object-cover" />
|
||||
@endif
|
||||
<span>{{ $story->author->name }}</span>
|
||||
</a>
|
||||
<span>·</span>
|
||||
@endif
|
||||
@if($story->published_at)
|
||||
<time datetime="{{ $story->published_at->toIso8601String() }}">
|
||||
{{ $story->published_at->format('F j, Y') }}
|
||||
</time>
|
||||
<span>·</span>
|
||||
@endif
|
||||
<span>{{ $story->reading_time }} min read</span>
|
||||
<span>·</span>
|
||||
<span><i class="fa-regular fa-eye mr-1 text-xs"></i>{{ number_format($story->views) }}</span>
|
||||
</div>
|
||||
|
||||
{{-- Tags --}}
|
||||
@if($story->tags->isNotEmpty())
|
||||
<div class="flex flex-wrap gap-2 mb-8">
|
||||
@foreach($story->tags as $tag)
|
||||
<a href="{{ $tag->url }}"
|
||||
class="rounded-full px-3 py-1 text-xs font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20 hover:bg-sky-500/20 transition-colors">
|
||||
#{{ $tag->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ── ARTICLE CONTENT ──────────────────────────────────────────────────── --}}
|
||||
<article class="prose prose-invert prose-headings:text-white prose-a:text-sky-400 hover:prose-a:text-sky-300 prose-p:text-white/70 prose-strong:text-white prose-blockquote:border-sky-500 prose-blockquote:text-white/60 max-w-none">
|
||||
@if($story->content)
|
||||
{!! $story->content !!}
|
||||
@else
|
||||
<p class="text-white/40 italic">Content not available.</p>
|
||||
@endif
|
||||
</article>
|
||||
|
||||
{{-- ── SHARE BUTTONS ────────────────────────────────────────────────────── --}}
|
||||
<div class="mt-12 pt-8 border-t border-white/[0.06]">
|
||||
<p class="text-sm text-white/40 mb-4">Share this story</p>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="https://twitter.com/intent/tweet?text={{ urlencode($story->title) }}&url={{ urlencode($story->url) }}"
|
||||
target="_blank" rel="noopener"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.03] px-4 py-2 text-sm text-white/60 hover:bg-white/[0.07] hover:text-white transition-colors">
|
||||
<i class="fa-brands fa-x-twitter text-xs"></i> Share on X
|
||||
</a>
|
||||
<a href="https://www.reddit.com/submit?title={{ urlencode($story->title) }}&url={{ urlencode($story->url) }}"
|
||||
target="_blank" rel="noopener"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.03] px-4 py-2 text-sm text-white/60 hover:bg-white/[0.07] hover:text-white transition-colors">
|
||||
<i class="fa-brands fa-reddit text-xs"></i> Reddit
|
||||
</a>
|
||||
<button type="button"
|
||||
onclick="navigator.clipboard.writeText('{{ $story->url }}').then(() => { this.textContent = '✓ Copied!'; setTimeout(() => { this.innerHTML = '<i class=\'fa-regular fa-link text-xs\'></i> Copy link'; }, 2000); })"
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.03] px-4 py-2 text-sm text-white/60 hover:bg-white/[0.07] hover:text-white transition-colors">
|
||||
<i class="fa-regular fa-link text-xs"></i> Copy link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── AUTHOR BOX ───────────────────────────────────────────────────────── --}}
|
||||
@if($story->author)
|
||||
<div class="mt-12 rounded-2xl border border-white/[0.06] bg-white/[0.02] p-6">
|
||||
<div class="flex items-start gap-5">
|
||||
@if($story->author->avatar_url)
|
||||
<img src="{{ $story->author->avatar_url }}" alt="{{ $story->author->name }}"
|
||||
class="w-16 h-16 rounded-full object-cover border border-white/10 flex-shrink-0" />
|
||||
@else
|
||||
<div class="w-16 h-16 rounded-full bg-nova-700 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-user text-xl text-white/30"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-xs uppercase tracking-widest text-white/30 mb-1">About the author</p>
|
||||
<h3 class="text-lg font-semibold text-white">{{ $story->author->name }}</h3>
|
||||
@if($story->author->bio)
|
||||
<p class="mt-2 text-sm text-white/55">{{ $story->author->bio }}</p>
|
||||
@endif
|
||||
<div class="mt-4 flex flex-wrap gap-3">
|
||||
@if($story->author->user)
|
||||
<a href="{{ $story->author->profile_url }}"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-sky-400 hover:text-sky-300 transition-colors">
|
||||
More from this artist <i class="fa-solid fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
@endif
|
||||
<a href="/stories/author/{{ $story->author->user?->username ?? urlencode($story->author->name) }}"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white/60 transition-colors">
|
||||
All stories
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ── RELATED STORIES ─────────────────────────────────────────────────── --}}
|
||||
@if($related->isNotEmpty())
|
||||
<div class="mt-12">
|
||||
<h2 class="text-lg font-semibold text-white mb-6">Related Stories</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
@foreach($related as $rel)
|
||||
<a href="{{ $rel->url }}"
|
||||
class="group block rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.05] transition-colors">
|
||||
@if($rel->cover_url)
|
||||
<div class="aspect-video overflow-hidden bg-nova-800">
|
||||
<img src="{{ $rel->cover_url }}" alt="{{ $rel->title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
@else
|
||||
<div class="aspect-video bg-gradient-to-br from-sky-900/20 to-indigo-900/20 flex items-center justify-center">
|
||||
<i class="fa-solid fa-feather-pointed text-2xl text-white/15"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="p-4">
|
||||
<h3 class="text-sm font-medium text-white group-hover:text-sky-300 transition-colors line-clamp-2 leading-snug">
|
||||
{{ $rel->title }}
|
||||
</h3>
|
||||
<div class="mt-2 flex items-center gap-2 text-xs text-white/30">
|
||||
@if($rel->published_at)
|
||||
<time datetime="{{ $rel->published_at->toIso8601String() }}">
|
||||
{{ $rel->published_at->format('M j, Y') }}
|
||||
</time>
|
||||
<span>·</span>
|
||||
@endif
|
||||
<span>{{ $rel->reading_time }} min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Back link --}}
|
||||
<div class="mt-12 pt-8 border-t border-white/[0.06]">
|
||||
<a href="/stories" class="inline-flex items-center gap-2 text-sm text-sky-400 hover:text-sky-300 transition-colors">
|
||||
<i class="fa-solid fa-arrow-left text-xs"></i>
|
||||
Back to Stories
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user