klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

more fixes

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-12 07:22:38 +01:00
parent 547215cbe8
commit 4f576ceb04
226 changed files with 14380 additions and 4453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/web/explore/index.blade.php
View File

@@ -15,7 +15,7 @@
</div>
<div class="flex gap-4 overflow-x-auto nb-scrollbar-none pb-2">
@foreach($spotlight as $item)
<a href="{{ $item->slug ? route('artwork.show', $item->slug) : '#' }}"
<a href="{{ !empty($item->id) ? route('art.show', ['id' => $item->id, 'slug' => $item->slug ?? null]) : '#' }}"
class="group relative flex-none w-44 md:w-52 rounded-xl overflow-hidden
bg-neutral-800 border border-white/10 hover:border-amber-400/40
hover:shadow-lg hover:shadow-amber-500/10 transition-all duration-200"

54
resources/views/web/stories/analytics.blade.php Normal file
View File

@@ -0,0 +1,54 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = 'Story Analytics';
$hero_description = 'Performance metrics for "' . $story->title . '".';
@endphp
@section('page-content')
<div class="space-y-6">
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Views</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['views']) }}</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Likes</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['likes']) }}</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Comments</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['comments']) }}</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Read Time</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['read_time']) }} min</p>
</div>
</div>
<div class="grid gap-4 md:grid-cols-3">
<div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Views (7 days)</p>
<p class="mt-2 text-xl font-semibold text-sky-300">{{ number_format($metrics['views_last_7_days']) }}</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Views (30 days)</p>
<p class="mt-2 text-xl font-semibold text-emerald-300">{{ number_format($metrics['views_last_30_days']) }}</p>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
<p class="text-xs uppercase tracking-wide text-gray-400">Estimated Read Minutes</p>
<p class="mt-2 text-xl font-semibold text-violet-300">{{ number_format($metrics['estimated_total_read_minutes']) }}</p>
</div>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<div class="flex flex-wrap gap-3 text-sm">
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="rounded-xl border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sky-200 transition hover:scale-[1.02]">Back to editor</a>
<a href="{{ route('creator.stories.preview', ['story' => $story->id]) }}" class="rounded-xl border border-gray-500/40 bg-gray-700/30 px-3 py-2 text-gray-100 transition hover:scale-[1.02]">Preview story</a>
@if($story->status === 'published' || $story->status === 'scheduled')
<a href="{{ route('stories.show', ['slug' => $story->slug]) }}" class="rounded-xl border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-emerald-200 transition hover:scale-[1.02]">Open published page</a>
@endif
</div>
</div>
</div>
@endsection

34
resources/views/web/stories/category.blade.php Normal file
View File

@@ -0,0 +1,34 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = ucfirst(str_replace('_', ' ', $category)) . ' Stories';
$hero_description = 'Stories in the ' . str_replace('_', ' ', $category) . ' category.';
@endphp
@section('page-content')
<div class="space-y-8">
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-4">
<div class="flex flex-wrap gap-2">
@foreach($categories as $item)
<a href="{{ route('stories.category', $item['slug']) }}" class="rounded-lg border px-3 py-2 text-sm {{ $item['slug'] === $category ? 'border-sky-400/50 bg-sky-500/10 text-sky-200' : 'border-gray-700 bg-gray-800 text-gray-300 hover:text-white' }}">
{{ $item['name'] }}
</a>
@endforeach
</div>
</div>
@if($stories->isNotEmpty())
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($stories as $story)
<x-story-card :story="$story" />
@endforeach
</div>
<div class="mt-8">{{ $stories->links() }}</div>
@else
<div class="rounded-xl border border-gray-700 bg-gray-800/50 px-8 py-16 text-center text-sm text-gray-300">
No stories found in this category.
</div>
@endif
</div>
@endsection

65
resources/views/web/stories/create.blade.php Normal file
View File

@@ -0,0 +1,65 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = 'Create Story';
$hero_description = 'Write a new creator story for your audience.';
@endphp
@section('page-content')
<div class="mx-auto max-w-3xl rounded-xl border border-gray-700 bg-gray-800/60 p-6">
<form method="POST" action="{{ route('creator.stories.store') }}" class="space-y-5">
@csrf
<div>
<label class="mb-1 block text-sm text-gray-200">Title</label>
<input name="title" value="{{ old('title') }}" required class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" />
</div>
<div>
<label class="mb-1 block text-sm text-gray-200">Cover image URL</label>
<input name="cover_image" value="{{ old('cover_image') }}" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" />
</div>
<div>
<label class="mb-1 block text-sm text-gray-200">Excerpt</label>
<textarea name="excerpt" rows="3" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">{{ old('excerpt') }}</textarea>
</div>
<div class="grid gap-4 md:grid-cols-2">
<div>
<label class="mb-1 block text-sm text-gray-200">Story type</label>
<select name="story_type" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
@foreach($storyTypes as $type)
<option value="{{ $type['slug'] }}">{{ $type['name'] }}</option>
@endforeach
</select>
</div>
<div>
<label class="mb-1 block text-sm text-gray-200">Status</label>
<select name="status" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
<option value="draft">Draft</option>
<option value="published">Published</option>
<option value="scheduled">Scheduled</option>
<option value="archived">Archived</option>
</select>
</div>
</div>
<div>
<label class="mb-1 block text-sm text-gray-200">Tags</label>
<select name="tags[]" multiple class="min-h-28 w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
@foreach($tags as $tag)
<option value="{{ $tag->id }}">{{ $tag->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="mb-1 block text-sm text-gray-200">Content (Markdown/HTML)</label>
<textarea name="content" rows="14" required class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" placeholder="Write your story...">{{ old('content') }}</textarea>
</div>
<button class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-4 py-2 text-sky-200 transition hover:scale-[1.02]">Save story</button>
</form>
</div>
@endsection

30
resources/views/web/stories/creator.blade.php Normal file
View File

@@ -0,0 +1,30 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = 'Stories by @' . $creator->username;
$hero_description = 'Creator stories published by @' . $creator->username . '.';
@endphp
@section('page-content')
<div class="space-y-8">
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-6">
<h2 class="text-xl font-semibold tracking-tight text-white">Creator Stories</h2>
<p class="mt-2 text-sm text-gray-300">Browse long-form stories from this creator.</p>
<a href="/{{ '@' . strtolower((string) $creator->username) }}" class="mt-3 inline-flex text-sm text-sky-300 hover:text-sky-200">View profile</a>
</div>
@if($stories->isNotEmpty())
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($stories as $story)
<x-story-card :story="$story" />
@endforeach
</div>
<div class="mt-8">{{ $stories->links() }}</div>
@else
<div class="rounded-xl border border-gray-700 bg-gray-800/50 px-8 py-16 text-center text-sm text-gray-300">
No stories published by this creator yet.
</div>
@endif
</div>
@endsection

91
resources/views/web/stories/dashboard.blade.php Normal file
View File

@@ -0,0 +1,91 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = 'My Stories';
$hero_description = 'Drafts, published stories, and archived work in one creator dashboard.';
@endphp
@section('page-content')
<div class="space-y-8">
<div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<div>
<h2 class="text-lg font-semibold text-white">Creator Story Dashboard</h2>
<p class="text-sm text-gray-300">Write, schedule, review, and track your stories.</p>
</div>
<a href="{{ route('creator.stories.create') }}" class="rounded-xl border border-sky-400/40 bg-sky-500/15 px-4 py-2 text-sm font-semibold text-sky-200 transition hover:scale-[1.02] hover:bg-sky-500/25">Write Story</a>
</div>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Drafts</h3>
@if($drafts->isEmpty())
<p class="text-sm text-gray-400">No drafts yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($drafts as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-gray-600 px-2 py-1 text-xs uppercase tracking-wide text-gray-300">{{ str_replace('_', ' ', $story->status) }}</span>
</div>
<p class="mt-2 text-xs text-gray-400">Last edited {{ optional($story->updated_at)->diffForHumans() }}</p>
@if($story->rejected_reason)
<p class="mt-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-2 text-xs text-rose-200">Rejected: {{ \Illuminate\Support\Str::limit($story->rejected_reason, 180) }}</p>
@endif
<div class="mt-3 flex flex-wrap gap-3 text-xs">
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-sky-300 hover:text-sky-200">Edit</a>
<a href="{{ route('creator.stories.preview', ['story' => $story->id]) }}" class="text-gray-300 hover:text-white">Preview</a>
<form method="POST" action="{{ route('creator.stories.submit-review', ['story' => $story->id]) }}">
@csrf
<button class="text-amber-300 hover:text-amber-200">Submit Review</button>
</form>
</div>
</article>
@endforeach
</div>
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Published Stories</h3>
@if($publishedStories->isEmpty())
<p class="text-sm text-gray-400">No published stories yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($publishedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-emerald-500/40 px-2 py-1 text-xs uppercase tracking-wide text-emerald-200">{{ str_replace('_', ' ', $story->status) }}</span>
</div>
<p class="mt-2 text-xs text-gray-400">{{ number_format((int) $story->views) }} views · {{ number_format((int) $story->likes_count) }} likes</p>
<div class="mt-3 flex flex-wrap gap-3 text-xs">
<a href="{{ route('stories.show', ['slug' => $story->slug]) }}" class="text-sky-300 hover:text-sky-200">View</a>
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-gray-300 hover:text-white">Edit</a>
<a href="{{ route('creator.stories.analytics', ['story' => $story->id]) }}" class="text-violet-300 hover:text-violet-200">Analytics</a>
</div>
</article>
@endforeach
</div>
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Archived Stories</h3>
@if($archivedStories->isEmpty())
<p class="text-sm text-gray-400">No archived stories.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($archivedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<p class="mt-2 text-xs text-gray-400">Archived {{ optional($story->updated_at)->diffForHumans() }}</p>
<div class="mt-3 flex flex-wrap gap-3 text-xs">
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-sky-300 hover:text-sky-200">Open</a>
</div>
</article>
@endforeach
</div>
@endif
</section>
</div>
@endsection

61
resources/views/web/stories/editor.blade.php Normal file
View File

@@ -0,0 +1,61 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = $mode === 'create' ? 'Write Story' : 'Edit Story';
$hero_description = 'Medium-style editor with autosave, slash commands, artwork embeds, and publishing workflow.';
@endphp
@section('page-content')
@php
$initialContent = $story->content;
if (is_string($initialContent)) {
$decodedContent = json_decode($initialContent, true);
if (json_last_error() !== JSON_ERROR_NONE || ! is_array($decodedContent)) {
$initialContent = [
'type' => 'doc',
'content' => [
['type' => 'paragraph', 'content' => [['type' => 'text', 'text' => strip_tags($initialContent)]],],
],
];
} else {
$initialContent = $decodedContent;
}
}
$storyPayload = [
'id' => $story->id,
'title' => old('title', (string) $story->title),
'excerpt' => old('excerpt', (string) ($story->excerpt ?? '')),
'cover_image' => old('cover_image', (string) ($story->cover_image ?? '')),
'story_type' => old('story_type', (string) ($story->story_type ?? 'creator_story')),
'tags_csv' => old('tags_csv', (string) ($story->tags?->pluck('name')->implode(', ') ?? '')),
'meta_title' => old('meta_title', (string) ($story->meta_title ?? $story->title ?? '')),
'meta_description' => old('meta_description', (string) ($story->meta_description ?? $story->excerpt ?? '')),
'canonical_url' => old('canonical_url', (string) ($story->canonical_url ?? '')),
'og_image' => old('og_image', (string) ($story->og_image ?? $story->cover_image ?? '')),
'status' => old('status', (string) ($story->status ?? 'draft')),
'scheduled_for' => old('scheduled_for', optional($story->scheduled_for)->format('Y-m-d\\TH:i')),
'content' => $initialContent,
];
$endpointPayload = [
'create' => url('/api/stories/create'),
'update' => url('/api/stories/update'),
'autosave' => url('/api/stories/autosave'),
'uploadImage' => url('/api/story/upload-image'),
'artworks' => url('/api/story/artworks'),
'previewBase' => url('/creator/stories'),
'analyticsBase' => url('/creator/stories'),
];
@endphp
<div class="mx-auto max-w-3xl" id="story-editor-react-root"
data-mode="{{ $mode }}"
data-story='@json($storyPayload)'
data-story-types='@json($storyTypes)'
data-endpoints='@json($endpointPayload)'>
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-6 text-gray-200 shadow-lg">
Loading editor...
</div>
</div>
@endsection

191
resources/views/web/stories/index.blade.php
View File

@@ -1,155 +1,62 @@
{{--
Stories index — /stories
Uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')
@php
$hero_title = 'Skinbase Stories';
$hero_description = 'Artist interviews, community spotlights, tutorials and announcements.';
$hero_title = 'Creator Stories';
$hero_description = 'Articles, tutorials, interviews, and project breakdowns from the Skinbase creator community.';
@endphp
@push('head')
{{-- WebSite / Blog structured data --}}
<script type="application/ld+json">
{!! json_encode([
'@context' => 'https://schema.org',
'@type' => 'Blog',
'name' => 'Skinbase Stories',
'description' => 'Artist interviews, community spotlights, tutorials and announcements from Skinbase.',
'url' => url('/stories'),
'publisher' => ['@type' => 'Organization', 'name' => 'Skinbase', 'url' => url('/')],
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endpush
@section('page-content')
{{-- Featured story hero --}}
@if($featured)
<a href="{{ $featured->url }}"
class="group block rounded-2xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.04] transition-colors mb-10">
<div class="md:flex">
@if($featured->cover_url)
<div class="md:w-1/2 aspect-video md:aspect-auto overflow-hidden bg-nova-900">
<img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
loading="eager" />
</div>
@else
<div class="md:w-1/2 aspect-video md:aspect-auto bg-gradient-to-br from-sky-900/40 to-purple-900/40 flex items-center justify-center">
<i class="fa-solid fa-star text-4xl text-white/20"></i>
</div>
@endif
<div class="md:w-1/2 p-8 flex flex-col justify-center">
<div class="mb-3">
<span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-yellow-400/10 text-yellow-300 border border-yellow-400/20">
<i class="fa-solid fa-star text-[10px]"></i> Featured
</span>
</div>
<h2 class="text-2xl font-bold text-white group-hover:text-sky-300 transition-colors leading-snug">
{{ $featured->title }}
</h2>
@if($featured->excerpt)
<p class="mt-3 text-sm text-white/50 line-clamp-3">{{ $featured->excerpt }}</p>
@endif
<div class="mt-5 flex items-center gap-3 text-xs text-white/30">
@if($featured->author)
<span class="flex items-center gap-1.5">
@if($featured->author->avatar_url)
<img src="{{ $featured->author->avatar_url }}" alt="{{ $featured->author->name }}"
class="w-5 h-5 rounded-full object-cover" />
@endif
{{ $featured->author->name }}
</span>
<span>·</span>
<div class="space-y-10">
@if($featured)
<section class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
<a href="{{ route('stories.show', $featured->slug) }}" class="grid gap-0 lg:grid-cols-2">
<div class="aspect-video overflow-hidden bg-gray-900">
@if($featured->cover_url)
<img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" />
@endif
@if($featured->published_at)
<time datetime="{{ $featured->published_at->toIso8601String() }}">
{{ $featured->published_at->format('M j, Y') }}
</time>
<span>·</span>
@endif
<span>{{ $featured->reading_time }} min read</span>
</div>
</div>
</div>
</a>
@endif
{{-- Stories grid --}}
@if($stories->isNotEmpty())
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@foreach($stories as $story)
@if($featured && $story->id === $featured->id)
@continue
@endif
<a href="{{ $story->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($story->cover_url)
<div class="aspect-video bg-nova-800 overflow-hidden">
<img src="{{ $story->cover_url }}" alt="{{ $story->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-3xl text-white/15"></i>
</div>
@endif
<div class="p-5">
{{-- Tags --}}
@if($story->tags->isNotEmpty())
<div class="flex flex-wrap gap-1.5 mb-3">
@foreach($story->tags->take(3) as $tag)
<span class="rounded-full px-2 py-0.5 text-[11px] font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20">
#{{ $tag->name }}
</span>
@endforeach
</div>
@endif
<h2 class="text-base font-semibold text-white group-hover:text-sky-300 transition-colors line-clamp-2 leading-snug">
{{ $story->title }}
</h2>
@if($story->excerpt)
<p class="mt-2 text-sm text-white/45 line-clamp-2">{{ $story->excerpt }}</p>
@endif
<div class="mt-4 flex items-center gap-2 text-xs text-white/30">
@if($story->author)
<span class="flex items-center gap-1.5">
@if($story->author->avatar_url)
<img src="{{ $story->author->avatar_url }}" alt="{{ $story->author->name }}"
class="w-4 h-4 rounded-full object-cover" />
@endif
{{ $story->author->name }}
</span>
<span>·</span>
@endif
@if($story->published_at)
<time datetime="{{ $story->published_at->toIso8601String() }}">
{{ $story->published_at->format('M j, Y') }}
</time>
<span>·</span>
@endif
<span>{{ $story->reading_time }} min read</span>
</div>
<div class="flex flex-col justify-center space-y-4 p-6">
<span class="inline-flex w-fit rounded-full border border-sky-400/30 bg-sky-500/10 px-3 py-1 text-xs font-semibold text-sky-300">Featured Story</span>
<h2 class="text-2xl font-bold text-white">{{ $featured->title }}</h2>
<p class="text-gray-300">{{ $featured->excerpt }}</p>
<p class="text-sm text-gray-400">by @{{ $featured->creator?->username ?? 'unknown' }} • {{ $featured->reading_time }} min read • {{ number_format((int) $featured->views) }} views</p>
</div>
</a>
@endforeach
</div>
</section>
@endif
<div class="mt-10 flex justify-center">
{{ $stories->withQueryString()->links() }}
</div>
@else
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-16 text-center">
<i class="fa-solid fa-feather-pointed text-4xl text-white/20 mb-4 block"></i>
<p class="text-white/40 text-sm">No stories published yet. Check back soon!</p>
</div>
@endif
<section>
<div class="mb-5 flex items-center justify-between">
<h3 class="text-2xl font-semibold tracking-tight text-white">Trending Stories</h3>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($trendingStories as $story)
<x-story-card :story="$story" />
@endforeach
</div>
</section>
<section>
<h3 class="mb-5 text-2xl font-semibold tracking-tight text-white">Categories</h3>
<div class="flex flex-wrap gap-2">
@foreach($categories as $category)
<a href="{{ route('stories.category', $category['slug']) }}" class="rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 transition-colors hover:border-sky-500/40 hover:text-white">
{{ $category['name'] }}
</a>
@endforeach
</div>
</section>
<section>
<h3 class="mb-5 text-2xl font-semibold tracking-tight text-white">Latest Stories</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($latestStories as $story)
<x-story-card :story="$story" />
@endforeach
</div>
<div class="mt-8">
{{ $latestStories->links() }}
</div>
</section>
</div>
@endsection

51
resources/views/web/stories/preview.blade.php Normal file
View File

@@ -0,0 +1,51 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = 'Story Preview';
$hero_description = 'This preview mirrors the final published layout.';
@endphp
@section('page-content')
<div class="mx-auto grid max-w-7xl gap-6 lg:grid-cols-12">
<article class="lg:col-span-8">
<div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
@if($story->cover_image)
<img src="{{ $story->cover_image }}" alt="{{ $story->title }}" class="h-72 w-full object-cover" />
@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>
<span>{{ (int) $story->reading_time }} min read</span>
<span class="rounded-full border border-amber-500/40 px-2 py-1 text-amber-200">Preview</span>
</div>
<h1 class="text-3xl font-semibold tracking-tight text-white">{{ $story->title }}</h1>
@if($story->excerpt)
<p class="mt-3 text-gray-300">{{ $story->excerpt }}</p>
@endif
<div class="prose prose-invert mt-6 max-w-none prose-a:text-sky-300 prose-pre:bg-gray-900">
{!! $safeContent !!}
</div>
</div>
</div>
</article>
<aside class="space-y-4 lg:col-span-4">
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Preview Actions</h3>
<div class="mt-3 flex flex-col gap-2 text-sm">
<a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sky-200 transition hover:scale-[1.02]">Back to editor</a>
<a href="{{ route('creator.stories.analytics', ['story' => $story->id]) }}" class="rounded-lg border border-violet-500/40 bg-violet-500/10 px-3 py-2 text-violet-200 transition hover:scale-[1.02]">Story analytics</a>
</div>
</div>
<div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-300">Status</h3>
<p class="mt-2 text-sm text-gray-200">{{ str_replace('_', ' ', ucfirst($story->status)) }}</p>
@if($story->rejected_reason)
<p class="mt-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-2 text-xs text-rose-200">{{ $story->rejected_reason }}</p>
@endif
</div>
</aside>
</div>
@endsection

334
resources/views/web/stories/show.blade.php
View File

@@ -1,229 +1,159 @@
{{--
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;
$hero_description = $story->excerpt ?: \Illuminate\Support\Str::limit(strip_tags((string) $story->content), 160);
@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 }}" />
@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 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() }}" />
<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
@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) !!}
{!! 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="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>
<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
<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>
<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>
@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>
<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>
</a>
@endforeach
@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>
@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 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

73
resources/views/web/stories/tag.blade.php
View File

@@ -5,64 +5,31 @@
@extends('layouts.nova.content-layout')
@php
$hero_title = '#' . $storyTag->name;
$hero_description = 'Stories tagged with "' . $storyTag->name . '" on Skinbase.';
$hero_title = '#' . $storyTag->name;
$hero_description = 'Stories tagged with "' . $storyTag->name . '".';
@endphp
@section('page-content')
@if($stories->isNotEmpty())
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@foreach($stories as $story)
<a href="{{ $story->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($story->cover_url)
<div class="aspect-video bg-nova-800 overflow-hidden">
<img src="{{ $story->cover_url }}" alt="{{ $story->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-3xl text-white/15"></i>
</div>
@endif
<div class="p-5">
<h2 class="text-base font-semibold text-white group-hover:text-sky-300 transition-colors line-clamp-2 leading-snug">
{{ $story->title }}
</h2>
@if($story->excerpt)
<p class="mt-2 text-sm text-white/45 line-clamp-2">{{ $story->excerpt }}</p>
@endif
<div class="mt-4 flex items-center gap-2 text-xs text-white/30">
@if($story->author)
<span>{{ $story->author->name }}</span>
<span>·</span>
@endif
@if($story->published_at)
<time datetime="{{ $story->published_at->toIso8601String() }}">
{{ $story->published_at->format('M j, Y') }}
</time>
<span>·</span>
@endif
<span>{{ $story->reading_time }} min read</span>
</div>
</div>
</a>
@endforeach
<div class="space-y-8">
<div class="rounded-xl border border-gray-700 bg-gray-800/60 p-6">
<h2 class="text-xl font-semibold tracking-tight text-white">Tagged Stories</h2>
<p class="mt-2 text-sm text-gray-300">Browsing stories tagged with <span class="text-sky-300">#{{ $storyTag->name }}</span>.</p>
</div>
<div class="mt-10 flex justify-center">
{{ $stories->withQueryString()->links() }}
</div>
@else
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-16 text-center">
<i class="fa-solid fa-tag text-4xl text-white/20 mb-4 block"></i>
<p class="text-white/40 text-sm">No stories found for this tag.</p>
<a href="/stories" class="mt-4 inline-block text-sm text-sky-400 hover:text-sky-300 transition-colors">
Browse all stories →
</a>
</div>
@endif
@if($stories->isNotEmpty())
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($stories as $story)
<x-story-card :story="$story" />
@endforeach
</div>
<div class="mt-8">{{ $stories->links() }}</div>
@else
<div class="rounded-xl border border-gray-700 bg-gray-800/50 px-8 py-16 text-center text-sm text-gray-300">
No stories found for this tag.
</div>
@endif
</div>
@endsection