more fixes
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@section('content')
|
||||
<div class="mx-auto max-w-4xl px-4 py-8">
|
||||
<h1 class="mb-2 text-xl font-semibold text-gray-100">Story Comments Moderation</h1>
|
||||
<p class="text-sm text-gray-400">Story comments currently use the existing profile comment pipeline. Use this page as moderation entrypoint and link to the global comments moderation tools.</p>
|
||||
</div>
|
||||
@endsection
|
||||
8
resources/views/admin/stories/create.blade.php
Normal file
8
resources/views/admin/stories/create.blade.php
Normal file
@@ -0,0 +1,8 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@section('content')
|
||||
<div class="mx-auto max-w-4xl px-4 py-8">
|
||||
<h1 class="mb-4 text-xl font-semibold text-gray-100">Create Story</h1>
|
||||
@include('admin.stories.partials.form', ['action' => route('admin.stories.store'), 'method' => 'POST'])
|
||||
</div>
|
||||
@endsection
|
||||
21
resources/views/admin/stories/edit.blade.php
Normal file
21
resources/views/admin/stories/edit.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@section('content')
|
||||
<div class="mx-auto max-w-4xl px-4 py-8">
|
||||
<h1 class="mb-4 text-xl font-semibold text-gray-100">Edit Story</h1>
|
||||
@include('admin.stories.partials.form', ['action' => route('admin.stories.update', $story->id), 'method' => 'PUT'])
|
||||
|
||||
<div class="mt-4 flex items-center gap-3">
|
||||
<form method="POST" action="{{ route('admin.stories.publish', $story->id) }}">
|
||||
@csrf
|
||||
<button class="rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-4 py-2 text-emerald-200">Publish</button>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ route('admin.stories.destroy', $story->id) }}" onsubmit="return confirm('Delete this story?');">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2 text-rose-200">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
0
resources/views/admin/stories/index.blade.php
Normal file
0
resources/views/admin/stories/index.blade.php
Normal file
71
resources/views/admin/stories/partials/form.blade.php
Normal file
71
resources/views/admin/stories/partials/form.blade.php
Normal file
@@ -0,0 +1,71 @@
|
||||
<form method="POST" action="{{ $action }}" class="space-y-5 rounded-xl border border-gray-700 bg-gray-800/60 p-6">
|
||||
@csrf
|
||||
@if($method !== 'POST')
|
||||
@method($method)
|
||||
@endif
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm text-gray-200">Creator</label>
|
||||
<select name="creator_id" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" required>
|
||||
@foreach($creators as $creator)
|
||||
<option value="{{ $creator->id }}" @selected(old('creator_id', $story->creator_id ?? '') == $creator->id)>{{ $creator->username }}</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" required>
|
||||
@foreach(['draft', 'pending_review', 'published', 'scheduled', 'archived', 'rejected'] as $status)
|
||||
<option value="{{ $status }}" @selected(old('status', $story->status ?? 'draft') === $status)>{{ ucfirst($status) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 block text-sm text-gray-200">Title</label>
|
||||
<input name="title" value="{{ old('title', $story->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', $story->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', $story->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" required>
|
||||
@foreach(['creator_story', 'tutorial', 'interview', 'project_breakdown', 'announcement', 'resource'] as $type)
|
||||
<option value="{{ $type }}" @selected(old('story_type', $story->story_type ?? 'creator_story') === $type)>{{ str_replace('_', ' ', ucfirst($type)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm text-gray-200">Tags</label>
|
||||
<select name="tags[]" multiple class="min-h-24 w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
|
||||
@php
|
||||
$selectedTags = collect(old('tags', isset($story) ? $story->tags->pluck('id')->all() : []))->map(fn($id) => (int) $id)->all();
|
||||
@endphp
|
||||
@foreach($tags as $tag)
|
||||
<option value="{{ $tag->id }}" @selected(in_array($tag->id, $selectedTags, true))>{{ $tag->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-1 block text-sm text-gray-200">Content</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">{{ old('content', $story->content ?? '') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-4 py-2 text-sky-200">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
0
resources/views/admin/stories/review.blade.php
Normal file
0
resources/views/admin/stories/review.blade.php
Normal file
0
resources/views/admin/stories/show.blade.php
Normal file
0
resources/views/admin/stories/show.blade.php
Normal file
@@ -4,7 +4,7 @@
|
||||
<!-- Nova main preview ported into Blade (server-rendered) -->
|
||||
<div class="pt-0">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="flex min-h-[calc(100vh-64px)]">
|
||||
<div class="flex min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
||||
<!-- SIDEBAR -->
|
||||
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
|
||||
<div class="p-4">
|
||||
|
||||
38
resources/views/components/story-card.blade.php
Normal file
38
resources/views/components/story-card.blade.php
Normal file
@@ -0,0 +1,38 @@
|
||||
@props(['story'])
|
||||
|
||||
<a href="{{ route('stories.show', $story->slug) }}"
|
||||
class="group block overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition-transform duration-200 hover:scale-[1.02] hover:border-sky-500/40">
|
||||
@if($story->cover_url)
|
||||
<div class="aspect-video overflow-hidden bg-gray-900">
|
||||
<img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
|
||||
</div>
|
||||
@else
|
||||
<div class="aspect-video bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950"></div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-3 p-4">
|
||||
<h3 class="line-clamp-2 text-lg font-bold text-white">{{ $story->title }}</h3>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<img
|
||||
src="{{ $story->creator?->profile?->avatar_hash ? \App\Support\AvatarUrl::forUser((int) $story->creator->id, $story->creator->profile->avatar_hash, 48) : \App\Support\AvatarUrl::default() }}"
|
||||
alt="{{ $story->creator?->username ?? 'Creator' }}"
|
||||
class="h-6 w-6 rounded-full border border-gray-600 object-cover"
|
||||
/>
|
||||
<span>{{ $story->creator?->username ?? 'Unknown creator' }}</span>
|
||||
@if($story->published_at)
|
||||
<span class="text-gray-500">•</span>
|
||||
<time datetime="{{ $story->published_at->toIso8601String() }}" class="text-gray-400">
|
||||
{{ $story->published_at->format('M j, Y') }}
|
||||
</time>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400">
|
||||
<span>{{ $story->reading_time }} min read</span>
|
||||
<span>{{ number_format((int) $story->likes_count) }} likes</span>
|
||||
<span>{{ number_format((int) $story->comments_count) }} comments</span>
|
||||
<span>{{ number_format((int) $story->views) }} views</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,45 +1,21 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@push('head')
|
||||
@vite(['resources/js/dashboard/index.jsx'])
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
@php($page_title = 'Dashboard')
|
||||
<div
|
||||
id="dashboard-root"
|
||||
data-username="{{ $dashboard_user_name }}"
|
||||
data-is-creator="{{ $dashboard_is_creator ? '1' : '0' }}"
|
||||
></div>
|
||||
|
||||
<h2>Dashboard</h2>
|
||||
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success" role="status">{{ session('status') }}</div>
|
||||
@if (session('status'))
|
||||
<div class="mx-auto max-w-7xl px-4 mt-4">
|
||||
<div class="rounded-lg border border-emerald-500/30 bg-emerald-900/20 px-4 py-3 text-sm text-emerald-100" role="status">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="alert alert-info" role="status">
|
||||
You're logged in.
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Your content</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
<a class="btn btn-primary" href="{{ route('dashboard.artworks.index') }}">
|
||||
<i class="fa fa-picture-o fa-fw"></i> Manage My Artworks
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Account</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
<a class="btn btn-default" href="{{ route('profile.edit') }}">
|
||||
<i class="fa fa-user fa-fw"></i> Edit Profile
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="container-fluid legacy-page">
|
||||
<div class="pt-0">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="relative min-h-[calc(100vh-64px)]">
|
||||
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
||||
<main class="w-full">
|
||||
<div class="relative overflow-hidden nb-hero-radial">
|
||||
<div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Skinbase Email Verification</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#0f172a;color:#e2e8f0;font-family:Arial,sans-serif;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#0f172a;padding:24px;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:560px;background:#111827;border:1px solid #1f2937;border-radius:12px;overflow:hidden;">
|
||||
<tr>
|
||||
<td style="padding:24px;">
|
||||
<h1 style="margin:0 0 12px 0;font-size:20px;line-height:1.2;color:#f8fafc;">Verify your new email address</h1>
|
||||
<p style="margin:0 0 16px 0;font-size:14px;line-height:1.6;color:#cbd5e1;">Use this code to confirm your email change on Skinbase:</p>
|
||||
<p style="margin:0 0 16px 0;font-size:32px;line-height:1.2;font-weight:700;letter-spacing:4px;color:#f8fafc;">{{ $code }}</p>
|
||||
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;color:#cbd5e1;">This code expires in {{ $expiresInMinutes }} minutes.</p>
|
||||
<p style="margin:0;font-size:13px;line-height:1.5;color:#94a3b8;">If you did not request this change, you can ignore this email.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Skinbase Security Alert</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#0f172a;color:#e2e8f0;font-family:Arial,sans-serif;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#0f172a;padding:24px;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:560px;background:#111827;border:1px solid #1f2937;border-radius:12px;overflow:hidden;">
|
||||
<tr>
|
||||
<td style="padding:24px;">
|
||||
<h1 style="margin:0 0 12px 0;font-size:20px;line-height:1.2;color:#f8fafc;">Your Skinbase email address was changed</h1>
|
||||
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;color:#cbd5e1;">Your account email is now set to <strong>{{ $newEmail }}</strong>.</p>
|
||||
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;color:#cbd5e1;">If you did not perform this action, contact support immediately.</p>
|
||||
<p style="margin:0;font-size:13px;line-height:1.5;color:#94a3b8;">Support: {{ $supportEmail }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<div class="pt-0">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="relative min-h-[calc(100vh-64px)]">
|
||||
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
||||
|
||||
<main class="w-full">
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
<div class="pt-0">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="relative min-h-[calc(100vh-64px)]">
|
||||
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
|
||||
<main class="w-full">
|
||||
|
||||
{{-- ══ HERO HEADER ══ --}}
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-nova border-b border-panel">
|
||||
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
|
||||
<div class="mx-auto w-full h-full px-4 flex items-center gap-3">
|
||||
|
||||
<!-- Mobile hamburger -->
|
||||
<button id="btnSidebar"
|
||||
type="button"
|
||||
data-mobile-toggle
|
||||
class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
|
||||
aria-label="Open menu">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
aria-label="Open menu"
|
||||
aria-controls="mobileMenu"
|
||||
aria-expanded="false">
|
||||
<svg data-mobile-icon-hamburger class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg data-mobile-icon-close class="hidden w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 6l12 12M18 6L6 18" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Logo -->
|
||||
@@ -112,6 +119,12 @@
|
||||
<i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories
|
||||
</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('creator.stories.index') }}">
|
||||
<i class="fa-solid fa-rectangle-list w-4 text-center text-sb-muted"></i>My Stories
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('creator.stories.create') }}">
|
||||
<i class="fa-solid fa-pen-to-square w-4 text-center text-sb-muted"></i>Write Story
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.following') }}">
|
||||
<i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following
|
||||
</a>
|
||||
@@ -219,6 +232,9 @@
|
||||
@php
|
||||
$toolbarUsername = strtolower((string) (Auth::user()->username ?? ''));
|
||||
$routeUpload = Route::has('upload') ? route('upload') : '/upload';
|
||||
$routeDashboard = Route::has('dashboard') ? route('dashboard') : '/dashboard';
|
||||
$routeMyArtworks = Route::has('creator.artworks') ? route('creator.artworks') : '/creator/artworks';
|
||||
$routeMyStories = Route::has('creator.stories.index') ? route('creator.stories.index') : '/creator/stories';
|
||||
$routeDashboardFavorites = Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites';
|
||||
$routeEditProfile = Route::has('dashboard.profile')
|
||||
? route('dashboard.profile')
|
||||
@@ -233,6 +249,18 @@
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-upload text-xs text-sb-muted"></i></span>
|
||||
Upload
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeDashboard }}">
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-table-columns text-xs text-sb-muted"></i></span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeMyArtworks }}">
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-image text-xs text-sb-muted"></i></span>
|
||||
My Artworks
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeMyStories }}">
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-book-open text-xs text-sb-muted"></i></span>
|
||||
My Stories
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/studio/artworks">
|
||||
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-palette text-xs text-sb-muted"></i></span>
|
||||
Studio
|
||||
@@ -271,94 +299,115 @@
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<!-- Guest: Upload CTA + Join / Sign in -->
|
||||
<div class="hidden md:flex items-center gap-2">
|
||||
<!-- Guest auth toolbar: desktop CTA + secondary sign-in. -->
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<a href="/register"
|
||||
class="px-3 py-2 rounded-lg text-sm text-sb-muted hover:text-white hover:bg-white/5 transition-colors">Join</a>
|
||||
aria-label="Join Skinbase"
|
||||
class="inline-flex items-center px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold shadow-sm transition duration-200 ease-out hover:-translate-y-[1px] hover:shadow-[0_0_15px_rgba(99,102,241,0.7)] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40">
|
||||
Join Skinbase
|
||||
</a>
|
||||
<a href="/login"
|
||||
class="px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium transition-colors">Sign in</a>
|
||||
aria-label="Sign in"
|
||||
class="text-sm font-medium text-gray-300 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40 rounded-md px-1.5 py-1">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Guest auth on mobile: icon trigger with lightweight dropdown menu. -->
|
||||
<details class="relative md:hidden">
|
||||
<summary
|
||||
aria-label="Open authentication menu"
|
||||
class="list-none inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-300 hover:text-white hover:bg-white/5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 21a8 8 0 1 0-16 0" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="absolute right-0 mt-2 w-48 rounded-xl border border-white/10 bg-black/80 backdrop-blur p-2 shadow-sb">
|
||||
<a href="/register"
|
||||
aria-label="Join Skinbase"
|
||||
class="block px-3 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold transition duration-200 ease-out hover:shadow-[0_0_12px_rgba(59,130,246,0.6)] focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
Join Skinbase
|
||||
</a>
|
||||
<a href="/login"
|
||||
aria-label="Sign in"
|
||||
class="mt-1 block px-3 py-2 rounded-lg text-sm font-medium text-gray-300 transition-colors hover:text-white hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
@endauth
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- MOBILE MENU -->
|
||||
<div class="hidden fixed top-16 left-0 right-0 z-40 bg-nova border-b border-panel p-4 shadow-sb" id="mobileMenu">
|
||||
<div class="hidden fixed inset-x-0 top-16 bottom-0 z-40 overflow-y-auto overscroll-contain bg-nova border-b border-panel p-4 shadow-sb" id="mobileMenu">
|
||||
<div class="space-y-0.5 text-sm text-soft">
|
||||
|
||||
@guest
|
||||
<a class="block py-2.5 px-3 rounded-lg font-medium text-sky-400" href="/register">Join Skinbase</a>
|
||||
<a class="block py-2.5 px-3 rounded-lg" href="/login">Sign in</a>
|
||||
<div class="my-2 border-t border-panel"></div>
|
||||
@endguest
|
||||
|
||||
<div class="pt-1 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Discover</div>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/trending"><i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/rising"><i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/fresh"><i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/top-rated"><i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/most-downloaded"><i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/on-this-day"><i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('discover.for-you') }}"><i class="fa-solid fa-wand-magic-sparkles w-4 text-center text-yellow-400/70"></i>For You</a>
|
||||
@endauth
|
||||
|
||||
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Browse</div>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/browse"><i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/photography"><i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/wallpapers"><i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/skins"><i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/other"><i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/tags"><i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags</a>
|
||||
|
||||
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Creators</div>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/top"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/stories"><i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.following') }}"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following</a>
|
||||
@endauth
|
||||
|
||||
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Community</div>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/forum"><i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/news"><i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>Announcements</a>
|
||||
|
||||
@auth
|
||||
<div class="pt-4 pb-2">
|
||||
<a href="{{ route('upload') }}"
|
||||
class="flex items-center justify-center gap-2 w-full py-2.5 px-4 rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12h14" />
|
||||
</svg>
|
||||
Upload Artwork
|
||||
</a>
|
||||
<div class="pt-1">
|
||||
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionDiscover" aria-expanded="true" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
|
||||
<span>Discover</span>
|
||||
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform rotate-180"></i>
|
||||
</button>
|
||||
<div id="mobileSectionDiscover" data-mobile-section-panel class="mt-0.5 space-y-0.5">
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/trending"><i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/rising"><i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/fresh"><i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/top-rated"><i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/most-downloaded"><i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/on-this-day"><i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('discover.for-you') }}"><i class="fa-solid fa-wand-magic-sparkles w-4 text-center text-yellow-400/70"></i>For You</a>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-1">
|
||||
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionBrowse" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
|
||||
<span>Browse</span>
|
||||
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
|
||||
</button>
|
||||
<div id="mobileSectionBrowse" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/browse"><i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/photography"><i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/wallpapers"><i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/skins"><i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/other"><i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/tags"><i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-1">
|
||||
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionCreators" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
|
||||
<span>Creators</span>
|
||||
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
|
||||
</button>
|
||||
<div id="mobileSectionCreators" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/top"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/stories"><i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories</a>
|
||||
@auth
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('creator.stories.index') }}"><i class="fa-solid fa-rectangle-list w-4 text-center text-sb-muted"></i>My Stories</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('creator.stories.create') }}"><i class="fa-solid fa-pen-to-square w-4 text-center text-sb-muted"></i>Write Story</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.following') }}"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following</a>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-1">
|
||||
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionCommunity" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
|
||||
<span>Community</span>
|
||||
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
|
||||
</button>
|
||||
<div id="mobileSectionCommunity" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/forum"><i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/news"><i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>Announcements</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$mobileUsername = strtolower((string) (Auth::user()->username ?? ''));
|
||||
// Guard: username may be null for OAuth users still in onboarding.
|
||||
$mobileProfile = $mobileUsername !== ''
|
||||
? (Route::has('profile.show') ? route('profile.show', ['username' => $mobileUsername]) : '/@'.$mobileUsername)
|
||||
: route('setup.username.create');
|
||||
@endphp
|
||||
<div class="pt-1 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">My Account</div>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/studio/artworks">
|
||||
<i class="fa-solid fa-palette w-4 text-center text-sb-muted"></i>Studio
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites' }}">
|
||||
<i class="fa-solid fa-heart w-4 text-center text-sb-muted"></i>My Favorites
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ $mobileProfile }}">
|
||||
<i class="fa-solid fa-circle-user w-4 text-center text-sb-muted"></i>View Profile
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ Route::has('dashboard.profile') ? route('dashboard.profile') : (Route::has('settings') ? route('settings') : '/settings') }}">
|
||||
<i class="fa-solid fa-cog w-4 text-center text-sb-muted"></i>Settings
|
||||
</a>
|
||||
@if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true))
|
||||
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('admin.usernames.moderation') }}">
|
||||
<i class="fa-solid fa-user-shield w-4 text-center text-sb-muted"></i>Moderation
|
||||
</a>
|
||||
@endif
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
31
resources/views/news/_article_card.blade.php
Normal file
31
resources/views/news/_article_card.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
{{-- Reusable article card partial --}}
|
||||
<div class="card h-100 border-0 shadow-sm news-card">
|
||||
@if($article->cover_url)
|
||||
<a href="{{ route('news.show', $article->slug) }}">
|
||||
<img src="{{ $article->cover_url }}" class="card-img-top"
|
||||
alt="{{ $article->title }}"
|
||||
style="height:180px;object-fit:cover;">
|
||||
</a>
|
||||
@endif
|
||||
<div class="card-body d-flex flex-column">
|
||||
@if($article->category)
|
||||
<a href="{{ route('news.category', $article->category->slug) }}"
|
||||
class="badge badge-primary mb-2 align-self-start">{{ $article->category->name }}</a>
|
||||
@endif
|
||||
|
||||
<h6 class="card-title mb-1">
|
||||
<a href="{{ route('news.show', $article->slug) }}" class="text-dark text-decoration-none">
|
||||
{{ $article->title }}
|
||||
</a>
|
||||
</h6>
|
||||
|
||||
@if($article->excerpt)
|
||||
<p class="card-text text-muted small flex-grow-1">{{ Str::limit($article->excerpt, 100) }}</p>
|
||||
@endif
|
||||
|
||||
<div class="text-muted small mt-2 d-flex justify-content-between">
|
||||
<span>{{ $article->published_at?->format('d M Y') }}</span>
|
||||
<span><i class="fas fa-eye mr-1"></i>{{ number_format($article->views) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
59
resources/views/news/_sidebar.blade.php
Normal file
59
resources/views/news/_sidebar.blade.php
Normal file
@@ -0,0 +1,59 @@
|
||||
{{-- Sidebar partial for news frontend --}}
|
||||
|
||||
{{-- Categories widget --}}
|
||||
@if(!empty($categories) && $categories->isNotEmpty())
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><strong>Categories</strong></div>
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach($categories as $cat)
|
||||
<a href="{{ route('news.category', $cat->slug) }}"
|
||||
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
{{ $cat->name }}
|
||||
<span class="badge badge-secondary badge-pill">{{ $cat->published_articles_count ?? 0 }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Trending articles --}}
|
||||
@if(!empty($trending) && $trending->isNotEmpty())
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><strong><i class="fas fa-fire mr-1 text-danger"></i> Trending</strong></div>
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach($trending as $item)
|
||||
<a href="{{ route('news.show', $item->slug) }}"
|
||||
class="list-group-item list-group-item-action py-2">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<span class="font-weight-bold small">{{ Str::limit($item->title, 55) }}</span>
|
||||
<span class="badge badge-info badge-pill ml-2">{{ number_format($item->views) }}</span>
|
||||
</div>
|
||||
<small class="text-muted">{{ $item->published_at?->diffForHumans() }}</small>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Tags cloud --}}
|
||||
@if(!empty($tags) && $tags->isNotEmpty())
|
||||
<div class="card mb-4">
|
||||
<div class="card-header"><strong><i class="fas fa-tags mr-1"></i> Tags</strong></div>
|
||||
<div class="card-body">
|
||||
@foreach($tags as $tag)
|
||||
<a href="{{ route('news.tag', $tag->slug) }}" class="badge badge-secondary mr-1 mb-1">
|
||||
{{ $tag->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- RSS link --}}
|
||||
<div class="card mb-4">
|
||||
<div class="card-body text-center">
|
||||
<a href="{{ route('news.rss') }}" class="btn btn-outline-warning btn-sm" target="_blank">
|
||||
<i class="fas fa-rss mr-1"></i> RSS Feed
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
30
resources/views/news/category.blade.php
Normal file
30
resources/views/news/category.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
@extends('news.layout', [
|
||||
'metaTitle' => $category->name . ' — News',
|
||||
])
|
||||
|
||||
@section('news_content')
|
||||
<div class="container py-5">
|
||||
<h1 class="mb-1">{{ $category->name }}</h1>
|
||||
@if($category->description)
|
||||
<p class="text-muted mb-4">{{ $category->description }}</p>
|
||||
@endif
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
@forelse($articles as $article)
|
||||
<div class="col-sm-6 mb-4">
|
||||
@include('news._article_card', ['article' => $article])
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center text-muted py-5">No articles in this category.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="mt-3">{{ $articles->links() }}</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
@include('news._sidebar', ['categories' => $categories])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
69
resources/views/news/index.blade.php
Normal file
69
resources/views/news/index.blade.php
Normal file
@@ -0,0 +1,69 @@
|
||||
@extends('news.layout', [
|
||||
'metaTitle' => config('news.rss_title', 'News'),
|
||||
'metaDescription' => config('news.rss_description', ''),
|
||||
])
|
||||
|
||||
@section('news_content')
|
||||
<div class="news-index">
|
||||
<div class="container py-5">
|
||||
|
||||
{{-- Featured article --}}
|
||||
@if($featured)
|
||||
<section class="mb-5">
|
||||
<a href="{{ route('news.show', $featured->slug) }}" class="text-decoration-none">
|
||||
<div class="card border-0 shadow-sm overflow-hidden news-featured">
|
||||
@if($featured->cover_url)
|
||||
<img src="{{ $featured->cover_url }}" class="card-img" alt="{{ $featured->title }}"
|
||||
style="height:400px;object-fit:cover;">
|
||||
@endif
|
||||
<div class="card-img-overlay d-flex align-items-end p-4"
|
||||
style="background:linear-gradient(transparent,rgba(0,0,0,0.75))">
|
||||
<div class="text-white">
|
||||
@if($featured->category)
|
||||
<span class="badge badge-primary mb-2">{{ $featured->category->name }}</span>
|
||||
@endif
|
||||
<h2 class="font-weight-bold">{{ $featured->title }}</h2>
|
||||
<p class="mb-1">{{ Str::limit(strip_tags((string)$featured->excerpt), 180) }}</p>
|
||||
<small>
|
||||
{{ $featured->author?->name }} ·
|
||||
{{ $featured->published_at?->format('d M Y') }} ·
|
||||
{{ $featured->reading_time }} min read
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<div class="row">
|
||||
{{-- Articles grid --}}
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
@forelse($articles as $article)
|
||||
<div class="col-sm-6 mb-4">
|
||||
@include('news._article_card', ['article' => $article])
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center text-muted py-5">No news articles published yet.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
{{ $articles->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Sidebar --}}
|
||||
<div class="col-lg-4">
|
||||
@include('news._sidebar', [
|
||||
'categories' => $categories,
|
||||
'trending' => $trending,
|
||||
'tags' => $tags,
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
15
resources/views/news/layout.blade.php
Normal file
15
resources/views/news/layout.blade.php
Normal file
@@ -0,0 +1,15 @@
|
||||
{{--
|
||||
Frontend layout wrapper for the News section.
|
||||
Extends the main app layout.
|
||||
--}}
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $metaTitle ?? config('news.rss_title', 'News'))
|
||||
|
||||
@if(isset($metaDescription))
|
||||
@section('meta_description', $metaDescription)
|
||||
@endif
|
||||
|
||||
@section('content')
|
||||
@yield('news_content')
|
||||
@endsection
|
||||
113
resources/views/news/show.blade.php
Normal file
113
resources/views/news/show.blade.php
Normal file
@@ -0,0 +1,113 @@
|
||||
@extends('news.layout', [
|
||||
'metaTitle' => $article->meta_title ?: $article->title,
|
||||
'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
|
||||
])
|
||||
|
||||
@section('news_content')
|
||||
|
||||
{{-- OpenGraph meta --}}
|
||||
@push('head')
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:title" content="{{ $article->effective_og_title }}">
|
||||
<meta property="og:description" content="{{ $article->effective_og_description }}">
|
||||
@if($article->effective_og_image)
|
||||
<meta property="og:image" content="{{ $article->effective_og_image }}">
|
||||
@endif
|
||||
<meta property="article:published_time" content="{{ $article->published_at?->toIso8601String() }}">
|
||||
<meta property="article:author" content="{{ $article->author?->name }}">
|
||||
@if($article->meta_keywords)
|
||||
<meta name="keywords" content="{{ $article->meta_keywords }}">
|
||||
@endif
|
||||
@endpush
|
||||
|
||||
<div class="news-article">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
|
||||
{{-- Cover image --}}
|
||||
@if($article->cover_url)
|
||||
<img src="{{ $article->cover_url }}" class="img-fluid rounded mb-4 w-100"
|
||||
alt="{{ $article->title }}" style="max-height:450px;object-fit:cover;">
|
||||
@endif
|
||||
|
||||
{{-- Meta --}}
|
||||
<div class="d-flex align-items-center mb-3 text-muted small">
|
||||
@if($article->category)
|
||||
<a href="{{ route('news.category', $article->category->slug) }}"
|
||||
class="badge badge-primary mr-2">{{ $article->category->name }}</a>
|
||||
@endif
|
||||
<span>{{ $article->author?->name }}</span>
|
||||
<span class="mx-2">·</span>
|
||||
<span>{{ $article->published_at?->format('d M Y') }}</span>
|
||||
<span class="mx-2">·</span>
|
||||
<span><i class="fas fa-clock mr-1"></i>{{ $article->reading_time }} min read</span>
|
||||
<span class="mx-2">·</span>
|
||||
<span><i class="fas fa-eye mr-1"></i>{{ number_format($article->views) }}</span>
|
||||
</div>
|
||||
|
||||
<h1 class="mb-3">{{ $article->title }}</h1>
|
||||
|
||||
@if($article->excerpt)
|
||||
<p class="lead text-muted mb-4">{{ $article->excerpt }}</p>
|
||||
@endif
|
||||
|
||||
<div class="news-content">
|
||||
{!! $article->content !!}
|
||||
</div>
|
||||
|
||||
{{-- Tags --}}
|
||||
@if($article->tags->isNotEmpty())
|
||||
<div class="mt-4">
|
||||
<strong><i class="fas fa-tags mr-1"></i></strong>
|
||||
@foreach($article->tags as $tag)
|
||||
<a href="{{ route('news.tag', $tag->slug) }}"
|
||||
class="badge badge-secondary mr-1">{{ $tag->name }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Share buttons --}}
|
||||
<div class="mt-4 pt-4 border-top">
|
||||
<strong>Share:</strong>
|
||||
<a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}"
|
||||
class="btn btn-sm btn-info ml-2" target="_blank" rel="noopener noreferrer">
|
||||
<i class="fab fa-twitter"></i> Twitter
|
||||
</a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
|
||||
class="btn btn-sm btn-primary ml-2" target="_blank" rel="noopener noreferrer">
|
||||
<i class="fab fa-facebook"></i> Facebook
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Forum discussion link --}}
|
||||
@if($article->forum_thread_id)
|
||||
<div class="mt-4 alert alert-secondary">
|
||||
<i class="fas fa-comments mr-2"></i>
|
||||
<strong>Join the discussion:</strong>
|
||||
<a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="ml-1">
|
||||
Discussion: {{ $article->title }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Related articles --}}
|
||||
@if($related->isNotEmpty())
|
||||
<div class="mt-5">
|
||||
<h4 class="mb-3">Related Articles</h4>
|
||||
<div class="row">
|
||||
@foreach($related as $rel)
|
||||
<div class="col-sm-6 mb-3">
|
||||
@include('news._article_card', ['article' => $rel])
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>{{-- col-lg-8 --}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
29
resources/views/news/tag.blade.php
Normal file
29
resources/views/news/tag.blade.php
Normal file
@@ -0,0 +1,29 @@
|
||||
@extends('news.layout', [
|
||||
'metaTitle' => '#' . $tag->name . ' — News',
|
||||
])
|
||||
|
||||
@section('news_content')
|
||||
<div class="container py-5">
|
||||
<h1 class="mb-4">
|
||||
<i class="fas fa-tag mr-2"></i>#{{ $tag->name }}
|
||||
</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
@forelse($articles as $article)
|
||||
<div class="col-sm-6 mb-4">
|
||||
@include('news._article_card', ['article' => $article])
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center text-muted py-5">No articles with this tag.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="mt-3">{{ $articles->links() }}</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
@include('news._sidebar', ['categories' => $categories])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -6,73 +6,100 @@
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="px-6 py-8 md:px-10" id="search-page" data-q="{{ $q ?? '' }}">
|
||||
<div class="px-6 pt-10 pb-8 md:px-10" id="search-page" data-q="{{ $q ?? '' }}">
|
||||
@php
|
||||
$hasQuery = isset($q) && $q !== '';
|
||||
$resultCount = method_exists($artworks, 'total') ? (int) $artworks->total() : 0;
|
||||
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
|
||||
'id' => $art->id ?? null,
|
||||
'name' => $art->name ?? null,
|
||||
'thumb' => $art->thumb_url ?? $art->thumb ?? null,
|
||||
'thumb_srcset' => $art->thumb_srcset ?? null,
|
||||
'uname' => $art->uname ?? '',
|
||||
'username' => $art->username ?? $art->uname ?? '',
|
||||
'avatar_url' => $art->avatar_url ?? null,
|
||||
'category_name' => $art->category_name ?? '',
|
||||
'category_slug' => $art->category_slug ?? '',
|
||||
'slug' => $art->slug ?? '',
|
||||
'width' => $art->width ?? null,
|
||||
'height' => $art->height ?? null,
|
||||
'views' => $art->views ?? null,
|
||||
'likes' => $art->likes ?? null,
|
||||
'downloads' => $art->downloads ?? null,
|
||||
])->values();
|
||||
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
|
||||
@endphp
|
||||
|
||||
{{-- Search header --}}
|
||||
<div class="mb-8 max-w-2xl">
|
||||
<h1 class="text-2xl font-bold text-white mb-2">Search</h1>
|
||||
<form action="/search" method="GET" class="relative" role="search">
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-semibold uppercase tracking-widest text-white/30">Discover</p>
|
||||
<h1 class="flex items-center gap-3 text-3xl font-bold leading-tight text-white">
|
||||
<i class="fa-solid fa-magnifying-glass text-2xl text-sky-400"></i>
|
||||
Search
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-white/50">
|
||||
{{ $hasQuery ? 'Results for "' . $q . '"' : 'Find artworks, creators, and styles across Skinbase.' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="/search" method="GET" class="relative mt-5 max-w-3xl" role="search">
|
||||
<input
|
||||
type="search"
|
||||
name="q"
|
||||
value="{{ $q ?? '' }}"
|
||||
placeholder="Search artworks, artists, tags…"
|
||||
placeholder="Search artworks, artists, tags..."
|
||||
autofocus
|
||||
class="w-full bg-white/[0.05] border border-white/10 rounded-xl py-3 pl-4 pr-12 text-white placeholder-neutral-500 outline-none focus:border-sky-500 transition-colors"
|
||||
class="w-full rounded-xl border border-white/10 bg-white/[0.05] py-3 pl-4 pr-12 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-sky-500"
|
||||
>
|
||||
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-sky-400 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/></svg>
|
||||
@if($hasQuery)
|
||||
<input type="hidden" name="sort" value="{{ $sort ?? 'latest' }}">
|
||||
@endif
|
||||
<button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 transition-colors hover:text-sky-400">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@if(isset($q) && $q !== '')
|
||||
{{-- Sort + filter bar --}}
|
||||
<div class="flex flex-wrap items-center gap-3 mb-6">
|
||||
@if($hasQuery)
|
||||
<div class="mb-6 flex flex-wrap items-center gap-3">
|
||||
<span class="text-sm text-neutral-400">Sort by:</span>
|
||||
@foreach(['latest' => 'Newest', 'popular' => 'Most viewed', 'likes' => 'Most liked', 'downloads' => 'Most downloaded'] as $key => $label)
|
||||
<a href="{{ request()->fullUrlWithQuery(['sort' => $key]) }}"
|
||||
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors
|
||||
{{ ($sort ?? 'latest') === $key ? 'bg-sky-500 text-white' : 'bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white' }}">
|
||||
<a
|
||||
href="{{ request()->fullUrlWithQuery(['sort' => $key, 'page' => null]) }}"
|
||||
class="rounded-lg px-3 py-1.5 text-xs font-medium transition-colors {{ ($sort ?? 'latest') === $key ? 'bg-sky-500 text-white' : 'bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white' }}"
|
||||
>
|
||||
{{ $label }}
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
@if($artworks->total() > 0)
|
||||
<span class="ml-auto text-sm text-neutral-500">
|
||||
{{ number_format($artworks->total()) }} {{ Str::plural('result', $artworks->total()) }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Results grid --}}
|
||||
@if($artworks->isEmpty())
|
||||
<div class="rounded-xl bg-white/[0.03] border border-white/[0.06] p-14 text-center">
|
||||
<p class="text-neutral-400 text-lg mb-2">No results for <span class="text-white">"{{ $q }}"</span></p>
|
||||
<p class="text-sm text-neutral-500">Try a different keyword or browse by <a href="/browse" class="text-sky-400 hover:underline">category</a>.</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
|
||||
@foreach($artworks as $artwork)
|
||||
<x-artwork-card :art="$artwork" />
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-10">
|
||||
{{ $artworks->appends(request()->query())->links('pagination::tailwind') }}
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
{{-- No query: show popular --}}
|
||||
<div class="mb-4 flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-white/70 uppercase tracking-wide">Popular right now</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
|
||||
@foreach($popular as $artwork)
|
||||
<x-artwork-card :art="$artwork" />
|
||||
@endforeach
|
||||
<span class="ml-auto text-sm text-neutral-500">
|
||||
{{ number_format($resultCount) }} {{ $resultCount === 1 ? 'result' : 'results' }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($hasQuery && $resultCount === 0)
|
||||
<div class="rounded-xl border border-white/[0.06] bg-white/[0.03] p-14 text-center">
|
||||
<p class="mb-2 text-lg text-neutral-400">No results for <span class="text-white">"{{ $q }}"</span></p>
|
||||
<p class="text-sm text-neutral-500">Try a different keyword or browse <a href="/discover/trending" class="text-sky-400 hover:underline">trending artworks</a>.</p>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
data-react-masonry-gallery
|
||||
data-artworks="{{ json_encode($galleryArtworks) }}"
|
||||
data-gallery-type="search"
|
||||
@if($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
|
||||
data-limit="24"
|
||||
class="min-h-32"
|
||||
></div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@vite('resources/js/entry-masonry-gallery.jsx')
|
||||
@endpush
|
||||
|
||||
@@ -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
54
resources/views/web/stories/analytics.blade.php
Normal 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
34
resources/views/web/stories/category.blade.php
Normal 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
65
resources/views/web/stories/create.blade.php
Normal 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
30
resources/views/web/stories/creator.blade.php
Normal 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
91
resources/views/web/stories/dashboard.blade.php
Normal 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
61
resources/views/web/stories/editor.blade.php
Normal 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
|
||||
@@ -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
51
resources/views/web/stories/preview.blade.php
Normal 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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user