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

Save workspace changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-18 17:02:56 +02:00
parent f02ea9a711
commit 87d60af5a9
4220 changed files with 1388603 additions and 1554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
.deploy/artwork-evolution-release/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

98
.deploy/artwork-evolution-release/resources/views/web/stories/author.blade.php Normal file
View File

@@ -0,0 +1,98 @@
{{--
Author stories page — /stories/author/{username}
Uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')
@php
$authorDisplayName = $author->user?->username ?? $author->name;
$hero_title = 'Stories by ' . $authorDisplayName;
$hero_description = 'All stories and interviews by ' . $authorDisplayName . ' on Skinbase.';
@endphp
@section('page-content')
{{-- Author spotlight --}}
<div class="flex items-center gap-5 rounded-xl border border-white/[0.06] bg-white/[0.02] p-6 mb-10">
@if($author->avatar_url)
<img src="{{ $author->avatar_url }}" alt="{{ $author->name }}"
class="w-16 h-16 rounded-full object-cover border-2 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">
<h2 class="text-lg font-semibold text-white">{{ $author->name }}</h2>
@if($author->bio)
<p class="mt-1 text-sm text-white/50 line-clamp-2">{{ $author->bio }}</p>
@endif
@if($author->user)
<a href="{{ $author->profile_url }}" class="mt-2 inline-flex items-center gap-1 text-xs text-sky-400 hover:text-sky-300 transition-colors">
View profile <i class="fa-solid fa-arrow-right text-[10px]"></i>
</a>
@endif
</div>
</div>
{{-- Stories grid --}}
@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">
@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->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>
<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 published stories from this author yet.</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
@endsection

34
.deploy/artwork-evolution-release/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
.deploy/artwork-evolution-release/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
.deploy/artwork-evolution-release/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

129
.deploy/artwork-evolution-release/resources/views/web/stories/dashboard.blade.php Normal file
View File

@@ -0,0 +1,129 @@
@extends('layouts.nova')
@push('head')
<meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
@endpush
@section('content')
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(100vh-64px)]">
<main class="w-full">
<x-nova-page-header
section="Creator"
title="My Stories"
icon="fa-pen-nib"
:breadcrumbs="collect([
(object) ['name' => 'Creator', 'url' => route('creator.stories.index')],
(object) ['name' => 'My Stories', 'url' => route('creator.stories.index')],
])"
description="Drafts, published stories, and archived work in one creator dashboard."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
<i class="fa-solid fa-pen text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<section class="px-6 pb-16 pt-8 md:px-10">
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Drafts</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($drafts->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Published</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($publishedStories->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
<p class="text-xs uppercase tracking-widest text-white/35">Archived</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($archivedStories->count()) }}</p>
</div>
</div>
<div class="space-y-8">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] 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-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<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-white/[0.08] px-2 py-1 text-xs uppercase tracking-wide text-white/55">{{ 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-white/[0.06] bg-white/[0.02] 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-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<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-white/[0.06] bg-white/[0.02] 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-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<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>
</section>
</main>
</div>
</div>
</div>
</div>
@endsection

61
.deploy/artwork-evolution-release/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 = 'A focused writing studio with autosave, embeds, live preview, and a cleaner publish 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-7xl" 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

188
.deploy/artwork-evolution-release/resources/views/web/stories/index.blade.php Normal file
View File

@@ -0,0 +1,188 @@
@php
$useUnifiedSeo = true;
$seo = \App\Support\Seo\SeoDataBuilder::fromArray(
app(\App\Support\Seo\SeoFactory::class)->fromViewData(get_defined_vars())
)
->addJsonLd([
'@context' => 'https://schema.org',
'@type' => 'CollectionPage',
'name' => $page_title,
'description' => $page_meta_description,
'url' => $page_canonical,
])
->build();
@endphp
@extends('layouts.nova')
@section('content')
@php
$currentCategory = (string) (request()->route('category') ?? request()->query('category', ''));
$storyTabs = [
['label' => '🔥 Trending', 'href' => '#trending'],
['label' => '🚀 New & Hot', 'href' => '#featured'],
['label' => '⭐ Best', 'href' => '#latest'],
['label' => '🕐 Latest', 'href' => '#latest'],
];
@endphp
<x-nova-page-header
section="Stories"
title="Browse Stories"
icon="fa-newspaper"
:breadcrumbs="$breadcrumbs ?? collect()"
description="List of all published stories across tutorials, creator journals, interviews, and project breakdowns."
contentClass="max-w-3xl"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-pen-nib text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<div class="border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="px-6 md:px-10">
<nav data-stories-tabs class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist" aria-label="Stories sections">
@foreach($storyTabs as $index => $tab)
<a href="{{ $tab['href'] }}"
data-stories-tab
data-target="{{ ltrim($tab['href'], '#') }}"
role="tab"
aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
class="relative whitespace-nowrap px-5 py-4 text-sm font-medium {{ $index === 0 ? 'text-white' : 'text-neutral-400 hover:text-white' }}">
{{ $tab['label'] }}
<span data-tab-indicator class="absolute bottom-0 left-0 right-0 h-0.5 {{ $index === 0 ? 'bg-accent scale-x-100' : 'bg-transparent scale-x-0' }} transition-transform duration-300 origin-left rounded-full"></span>
</a>
@endforeach
</nav>
</div>
</div>
<div class="border-b border-white/10 bg-nova-900/70">
<div class="px-6 md:px-10 py-6">
<div class="flex gap-3 overflow-x-auto nb-scrollbar-none pb-1">
<a href="{{ route('stories.index') }}" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-semibold transition-colors {{ $currentCategory === '' ? 'bg-orange-500 text-white' : 'border border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/[0.1] hover:text-white' }}">All</a>
@foreach($categories as $category)
<a href="{{ route('stories.category', $category['slug']) }}" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm transition-colors {{ $currentCategory === $category['slug'] ? 'bg-orange-500 text-white font-semibold' : 'border border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/[0.1] hover:text-white' }}">
{{ $category['name'] }}
</a>
@endforeach
</div>
</div>
</div>
<div class="px-6 pb-16 md:px-10">
<div class="space-y-10">
@if($featured)
<section id="featured" 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
</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>
</section>
@endif
<section id="trending">
<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 id="latest">
<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>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
var tabLinks = Array.from(document.querySelectorAll('[data-stories-tab]'));
if (!tabLinks.length) return;
function setActiveTab(targetId) {
tabLinks.forEach(function (link) {
var isActive = link.getAttribute('data-target') === targetId;
link.setAttribute('aria-selected', isActive ? 'true' : 'false');
link.classList.toggle('text-white', isActive);
link.classList.toggle('text-neutral-400', !isActive);
var indicator = link.querySelector('[data-tab-indicator]');
if (!indicator) return;
indicator.classList.toggle('bg-accent', isActive);
indicator.classList.toggle('bg-transparent', !isActive);
indicator.classList.toggle('scale-x-100', isActive);
indicator.classList.toggle('scale-x-0', !isActive);
});
}
tabLinks.forEach(function (link) {
link.addEventListener('click', function () {
var targetId = link.getAttribute('data-target');
if (targetId) setActiveTab(targetId);
});
});
var sectionIds = Array.from(new Set(tabLinks.map(function (link) {
return link.getAttribute('data-target');
}).filter(Boolean)));
var sections = sectionIds
.map(function (id) { return document.getElementById(id); })
.filter(Boolean);
if (!sections.length) return;
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
setActiveTab(entry.target.id);
}
});
}, {
root: null,
rootMargin: '-35% 0px -55% 0px',
threshold: 0.01
});
sections.forEach(function (section) { observer.observe(section); });
});
</script>
@endpush

51
.deploy/artwork-evolution-release/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="story-prose prose prose-invert mt-6 max-w-none prose-a:text-sky-300 prose-pre:overflow-x-auto prose-pre:rounded-2xl prose-pre:border prose-pre:border-slate-700 prose-pre:bg-slate-950 prose-pre:px-8 prose-pre:py-6 prose-pre:text-slate-100 prose-pre:shadow-[0_24px_70px_rgba(2,6,23,0.45)] prose-pre:ring-1 prose-pre:ring-sky-500/10 prose-pre:font-mono prose-pre:text-[0.95rem] prose-pre:leading-8 prose-code:text-amber-200 prose-code:bg-white/[0.08] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-4 prose-blockquote:border-sky-400/55 prose-blockquote:bg-sky-400/[0.06] prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:rounded-r-xl prose-blockquote:text-white/82 prose-blockquote:italic prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-slate-100 prose-pre:prose-code:rounded-none [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_li]:text-white/85">
{!! $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

127
.deploy/artwork-evolution-release/resources/views/web/stories/show.blade.php Normal file
View File

@@ -0,0 +1,127 @@
@extends('layouts.nova.content-layout')
@php
$storySummary = $story->excerpt ?: \Illuminate\Support\Str::limit(trim(strip_tags($safeContent)), 160);
$storyUrl = $story->canonical_url ?: route('stories.show', ['slug' => $story->slug]);
$creatorName = $story->creator?->display_name ?: $story->creator?->username ?: 'Unknown creator';
$metaDescription = $story->meta_description ?: $storySummary;
$metaTitle = $story->meta_title ?: $story->title;
$ogImage = $story->og_image ?: $story->cover_url;
$creatorFollowProps = $story->creator ? [
'username' => $story->creator->username,
'following' => (bool) ($storySocialProps['state']['is_following_creator'] ?? false),
'followers_count' => (int) ($storySocialProps['creator']['followers_count'] ?? 0),
] : null;
$seo = \App\Support\Seo\SeoDataBuilder::fromArray(
app(\App\Support\Seo\SeoFactory::class)->fromViewData(get_defined_vars())
)
->og(
type: 'article',
title: $metaTitle,
description: $metaDescription,
url: $storyUrl,
image: $ogImage,
)
->addJsonLd(array_filter([
'@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,
], fn (mixed $value): bool => $value !== null && $value !== ''))
->build();
@endphp
@section('page-hero')
<div class="hidden" aria-hidden="true"></div>
@endsection
@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="story-prose mt-6 prose prose-invert max-w-none prose-a:text-sky-300 prose-pre:overflow-x-auto prose-pre:rounded-2xl prose-pre:border prose-pre:border-slate-700 prose-pre:bg-slate-950 prose-pre:px-8 prose-pre:py-6 prose-pre:text-slate-100 prose-pre:shadow-[0_24px_70px_rgba(2,6,23,0.45)] prose-pre:ring-1 prose-pre:ring-sky-500/10 prose-pre:font-mono prose-pre:text-[0.95rem] prose-pre:leading-8 prose-code:text-amber-200 prose-code:bg-white/[0.08] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-4 prose-blockquote:border-sky-400/55 prose-blockquote:bg-sky-400/[0.06] prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:rounded-r-xl prose-blockquote:text-white/82 prose-blockquote:italic prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-slate-100 prose-pre:prose-code:rounded-none [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-2 [&_li]:text-white/85">
{!! $safeContent !!}
</div>
</div>
</div>
<section class="mt-8" id="story-social-root" data-props='@json($storySocialProps)'></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)
<div class="mt-4" id="story-creator-follow-root" data-props='@json($creatorFollowProps)'></div>
@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

35
.deploy/artwork-evolution-release/resources/views/web/stories/tag.blade.php Normal file
View File

@@ -0,0 +1,35 @@
{{--
Tag stories page — /stories/tag/{tag}
Uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')
@php
$hero_title = '#' . $storyTag->name;
$hero_description = 'Stories tagged with "' . $storyTag->name . '".';
@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">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>
@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