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

updated gallery

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-17 18:34:26 +01:00
parent 7b37259a2c
commit 7da0fd39f7
52 changed files with 1216 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/_legacy/_toolbar.blade.php
View File

@@ -44,7 +44,8 @@
<div class="divider"></div>
<ul class="submenu">
<li><a href="/forum"><i class="fa fa-comments fa-fw"></i> Forum</a></li>
<li><a href="/chat"><i class="fa fa-comments fa-fw"></i> Chat</a></li>
<li><a href="{{ route('community.chat') }}"><i class="fa fa-comments fa-fw"></i> Chat</a></li>
<li><a href="/community/activity"><i class="fa fa-wave-square fa-fw"></i> Activity Feed</a></li>
<li><a href="/browse-categories"><i class="fa fa-cloud fa-fw"></i> Categories</a></li>
<li><a href="/latest-artworks"><i class="fa fa-trophy fa-fw"></i> Latest Uploads</a></li>
<li><a href="/daily-uploads"><i class="fa fa-trophy fa-fw"></i> Recent Uploads</a></li>
@@ -59,7 +60,7 @@
<li><a href="/interviews"><i class="fa fa-users fa-fw"></i> Interviews</a></li>
<li><a href="/Members/MembersPhotos/545"><i class="fa fa-users fa-fw"></i> Members Photos</a></li>
<li><a href="/top-authors"><i class="fa fa-users fa-fw"></i> Top Authors</a></li>
<li><a href="/latest-comments"><i class="fa fa-bar-chart fa-fw"></i> Latest Comments</a></li>
<li><a href="/community/activity"><i class="fa fa-wave-square fa-fw"></i> Activity Feed</a></li>
<li><a href="/monthly-commentators"><i class="fa fa-bar-chart fa-fw"></i> Monthly Top Comments</a></li>
</ul>
</div>

23
resources/views/_legacy/latest-comments.blade.php
View File

@@ -1,13 +1,22 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title, 'url' => route('legacy.latest_comments')],
]);
@endphp
@section('content')
<div class="container-fluid legacy-page">
<div class="effect2 page-header-wrap">
<header class="page-heading">
<h1 class="page-header">{{ $page_title }}</h1>
<p>List of artwork with latest comments received.</p>
</header>
</div>
<x-nova-page-header
section="Comments"
:title="$page_title"
icon="fa-comments"
:breadcrumbs="$headerBreadcrumbs"
description="List of artwork with latest comments received."
headerClass="pb-6"
/>
<div class="container-fluid legacy-page pt-8">
<div class="masonry">
@foreach ($comments as $comment)

23
resources/views/_legacy/monthly-commentators.blade.php
View File

@@ -1,13 +1,22 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title, 'url' => route('legacy.monthly_commentators')],
]);
@endphp
@section('content')
<div class="container-fluid legacy-page">
<div class="effect2 page-header-wrap">
<header class="page-heading">
<h1 class="page-header">{{ $page_title }}</h1>
<p>List of users who post the most comments in the current month.</p>
</header>
</div>
<x-nova-page-header
section="Comments"
:title="$page_title"
icon="fa-ranking-star"
:breadcrumbs="$headerBreadcrumbs"
description="List of users who post the most comments in the current month."
headerClass="pb-6"
/>
<div class="container-fluid legacy-page pt-8">
<div class="container-main">
<div class="panel panel-default effect2">

1
resources/views/_legacy/profile.blade.php
View File

@@ -690,5 +690,4 @@
@endsection
@push('scripts')
<script src="/js/legacy-gallery-init.js" defer></script>
@endpush

29
resources/views/dashboard/comments.blade.php
View File

@@ -1,17 +1,30 @@
@extends('layouts.nova')
@section('content')
<div class="container mx-auto py-8">
<h1 class="text-2xl font-semibold mb-4">Comments</h1>
<x-nova-page-header
section="Dashboard"
title="Comments"
icon="fa-comments"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Comments', 'url' => route('dashboard.comments')],
])"
description="Comments across your dashboard activity and conversations."
/>
<div class="px-6 pb-16 pt-8 md:px-10">
@if(empty($comments))
<p class="text-sm text-gray-500">No comments to show.</p>
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-sm text-white/40">No comments to show.</p>
</div>
@else
<ul class="space-y-2">
@foreach($comments as $c)
<li>{{ $c }}</li>
@endforeach
</ul>
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-6">
<ul class="space-y-2">
@foreach($comments as $c)
<li class="text-sm text-white/75">{{ $c }}</li>
@endforeach
</ul>
</div>
@endif
</div>
@endsection

67
resources/views/dashboard/favorites.blade.php
View File

@@ -25,59 +25,32 @@
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush
@push('head')
<style>
.nb-hero-fade {
background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(7,10,15,0.9) 60%, rgba(7,10,15,1) 100%);
}
.nb-hero-gradient {
background: linear-gradient(135deg, rgba(224,122,33,0.08) 0%, rgba(15,23,36,0) 50%, rgba(21,36,58,0.4) 100%);
animation: nb-hero-shimmer 8s ease-in-out infinite alternate;
}
@keyframes nb-hero-shimmer {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
</style>
@endpush
@section('content')
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(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>
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>
<div class="relative px-6 py-10 md:px-10 md:py-14">
<nav class="flex items-center gap-1.5 flex-wrap text-sm text-neutral-400" aria-label="Breadcrumb">
<a class="hover:text-white transition-colors" href="/browse">Gallery</a>
<span class="opacity-40" aria-hidden="true">›</span>
<span class="text-white/85">Favourites</span>
</nav>
<div class="mt-4 py-5">
<h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white/95 leading-tight">
My Favourites
</h1>
<p class="mt-2 text-sm leading-6 text-neutral-400 max-w-xl">
Artworks you saved, displayed in the same gallery layout as Browse.
</p>
@if($artworks->total() > 0)
<div class="mt-3 flex items-center gap-1.5 text-xs text-neutral-500">
<svg class="h-3.5 w-3.5 text-accent/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>{{ number_format($artworks->total()) }} artworks</span>
</div>
@endif
</div>
</div>
<div class="absolute left-0 right-0 bottom-0 h-16 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
</div>
<x-nova-page-header
section="Dashboard"
title="My Favourites"
icon="fa-heart"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Favourites', 'url' => route('dashboard.favorites')],
])"
description="Artworks you saved, displayed in the same gallery layout as Browse."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
@if($artworks->total() > 0)
<div class="inline-flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-sm text-white/60">
<i class="fa-solid fa-images text-xs text-sky-300"></i>
<span>{{ number_format($artworks->total()) }} artworks</span>
</div>
@endif
</x-slot>
</x-nova-page-header>
<section class="px-6 pb-10 pt-8 md:px-10">
@if($artworks->isEmpty())

181
resources/views/dashboard/following.blade.php
View File

@@ -1,94 +1,111 @@
@extends('layouts.nova')
@section('content')
<div class="px-6 pt-10 pb-16 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Dashboard</p>
<h1 class="text-3xl font-bold text-white leading-tight">People I Follow</h1>
<p class="mt-1 text-sm text-white/50">Creators and members you follow, with quick stats and recent follow time.</p>
</div>
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
<main class="w-full">
<x-nova-page-header
section="Dashboard"
title="People I Follow"
icon="fa-user-group"
:breadcrumbs="collect([
(object) ['name' => 'Dashboard', 'url' => '/dashboard'],
(object) ['name' => 'Following', 'url' => route('dashboard.following')],
])"
description="Creators and members you follow, with quick stats and recent follow time."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('discover.trending') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-compass text-xs"></i>
Discover creators
</a>
</x-slot>
</x-nova-page-header>
<a href="{{ route('discover.trending') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-compass text-xs"></i>
Discover creators
</a>
</div>
<section class="px-6 pb-16 pt-8 md:px-10">
@if($following->isEmpty())
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-white/40 text-sm">You are not following anyone yet.</p>
<a href="{{ route('discover.trending') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-compass text-xs"></i>
Start following creators
</a>
</div>
@else
@php
$firstFollow = $following->getCollection()->first();
$latestFollowedAt = $firstFollow && !empty($firstFollow->followed_at)
? \Carbon\Carbon::parse($firstFollow->followed_at)->diffForHumans()
: null;
@endphp
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Following</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->total()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">On this page</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
<p class="text-xs uppercase tracking-widest text-white/35">Last followed</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ $latestFollowedAt ?? '—' }}</p>
</div>
</div>
<div class="rounded-xl border border-white/[0.06] overflow-hidden">
<div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-3 bg-white/[0.03] border-b border-white/[0.06]">
<span class="text-xs font-semibold uppercase tracking-widest text-white/30">Creator</span>
<span class="hidden sm:block text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Stats</span>
<span class="text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Followed</span>
</div>
<div class="divide-y divide-white/[0.04]">
@foreach($following as $f)
@php
$displayName = $f->name ?: $f->uname;
@endphp
<a href="{{ $f->profile_url }}"
class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-4 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-3 min-w-0">
<img src="{{ $f->avatar_url }}"
alt="{{ $displayName }}"
class="w-11 h-11 rounded-full object-cover flex-shrink-0 ring-1 ring-white/[0.10]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'">
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-white/90">{{ $displayName }}</div>
@if(!empty($f->username))
<div class="truncate text-xs text-white/35">{{ '@' . $f->username }}</div>
@endif
@if($following->isEmpty())
<div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
<p class="text-white/40 text-sm">You are not following anyone yet.</p>
<a href="{{ route('discover.trending') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-compass text-xs"></i>
Start following creators
</a>
</div>
</div>
@else
@php
$firstFollow = $following->getCollection()->first();
$latestFollowedAt = $firstFollow && !empty($firstFollow->followed_at)
? \Carbon\Carbon::parse($firstFollow->followed_at)->diffForHumans()
: null;
@endphp
<div class="hidden sm:block text-right text-xs text-white/55">
{{ number_format((int) $f->uploads) }} uploads · {{ number_format((int) $f->followers_count) }} followers
</div>
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Following</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->total()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">On this page</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
<p class="text-xs uppercase tracking-widest text-white/35">Last followed</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ $latestFollowedAt ?? '—' }}</p>
</div>
</div>
<div class="text-right text-xs text-white/45 whitespace-nowrap">
{{ !empty($f->followed_at) ? \Carbon\Carbon::parse($f->followed_at)->diffForHumans() : '—' }}
</div>
</a>
@endforeach
<div class="rounded-xl border border-white/[0.06] overflow-hidden">
<div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-3 bg-white/[0.03] border-b border-white/[0.06]">
<span class="text-xs font-semibold uppercase tracking-widest text-white/30">Creator</span>
<span class="hidden sm:block text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Stats</span>
<span class="text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Followed</span>
</div>
<div class="divide-y divide-white/[0.04]">
@foreach($following as $f)
@php
$displayName = $f->name ?: $f->uname;
@endphp
<a href="{{ $f->profile_url }}"
class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-4 hover:bg-white/[0.03] transition-colors">
<div class="flex items-center gap-3 min-w-0">
<img src="{{ $f->avatar_url }}"
alt="{{ $displayName }}"
class="w-11 h-11 rounded-full object-cover flex-shrink-0 ring-1 ring-white/[0.10]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'">
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-white/90">{{ $displayName }}</div>
@if(!empty($f->username))
<div class="truncate text-xs text-white/35">{{ '@' . $f->username }}</div>
@endif
</div>
</div>
<div class="hidden sm:block text-right text-xs text-white/55">
{{ number_format((int) $f->uploads) }} uploads · {{ number_format((int) $f->followers_count) }} followers
</div>
<div class="text-right text-xs text-white/45 whitespace-nowrap">
{{ !empty($f->followed_at) ? \Carbon\Carbon::parse($f->followed_at)->diffForHumans() : '—' }}
</div>
</a>
@endforeach
</div>
</div>
<div class="mt-8 flex justify-center">
{{ $following->links() }}
</div>
@endif
</section>
</main>
</div>
</div>
<div class="mt-8 flex justify-center">
{{ $following->links() }}
</div>
@endif
</div>
</div>
@endsection

48
resources/views/layouts/nova/content-layout.blade.php
View File

@@ -42,17 +42,21 @@
{{-- Minimal hero --}}
@if(!empty($center_content))
<x-centered-content :max="$center_max ?? '3xl'" class="pt-10 pb-6" style="padding-top:2.5rem;padding-bottom:1.5rem;">
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
@hasSection('page-hero')
@yield('page-hero')
@else
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
@endif
</x-centered-content>
{{-- Page body (centered) --}}
@@ -61,17 +65,21 @@
</x-centered-content>
@else
<div class="px-6 pt-10 pb-6 md:px-10">
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
@hasSection('page-hero')
@yield('page-hero')
@else
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
@endif
</div>
{{-- Page body --}}

12
resources/views/layouts/nova/toolbar.blade.php
View File

@@ -75,11 +75,11 @@
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'browse' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="browse"
{{ $navSection === 'browse' ? 'aria-current=page' : '' }}>
Browse
Explore
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-browse" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/browse">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/explore">
<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 px-4 py-2.5 text-sm hover:bg-white/5" href="/photography">
@@ -135,11 +135,14 @@
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-community" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('community.activity') }}">
<i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm 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 px-4 py-2.5 text-sm hover:bg-white/5" href="/news">
<i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>Announcements
<i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>News
</a>
</div>
</div>
@@ -394,8 +397,9 @@
<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="{{ route('community.activity') }}"><i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed</a>
<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>
<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>News</a>
</div>
</div>

54
resources/views/news/_article_card.blade.php
View File

@@ -1,31 +1,37 @@
{{-- 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
<article class="group overflow-hidden rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] shadow-[0_18px_45px_rgba(0,0,0,0.22)] transition hover:-translate-y-0.5 hover:border-white/[0.12]">
<a href="{{ route('news.show', $article->slug) }}" class="block">
<div class="relative aspect-[16/9] overflow-hidden bg-black/20">
@if($article->cover_url)
<img src="{{ $article->cover_url }}" alt="{{ $article->title }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]">
@else
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.92),rgba(2,6,23,0.98))]"></div>
@endif
<div class="absolute inset-0 bg-gradient-to-t from-[#020611cc] via-transparent to-transparent"></div>
</div>
</a>
<h6 class="card-title mb-1">
<a href="{{ route('news.show', $article->slug) }}" class="text-dark text-decoration-none">
{{ $article->title }}
</a>
</h6>
<div class="flex h-full flex-col p-5">
<div class="flex flex-wrap items-center gap-2">
@if($article->category)
<a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-sky-200">{{ $article->category->name }}</a>
@endif
<span class="text-[11px] uppercase tracking-[0.16em] text-white/30">{{ $article->published_at?->format('d M Y') }}</span>
</div>
<h3 class="mt-3 text-xl font-semibold leading-tight text-white/95">
<a href="{{ route('news.show', $article->slug) }}" class="transition hover:text-sky-200">{{ $article->title }}</a>
</h3>
@if($article->excerpt)
<p class="card-text text-muted small flex-grow-1">{{ Str::limit($article->excerpt, 100) }}</p>
<p class="mt-3 flex-1 text-sm leading-7 text-white/55">{{ Str::limit(strip_tags((string) $article->excerpt), 135) }}</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 class="mt-4 flex items-center justify-between gap-3 text-sm text-white/40">
<span class="truncate">{{ $article->author?->name ?? 'Skinbase' }}</span>
<span class="shrink-0 inline-flex items-center gap-1.5">
<i class="fa-regular fa-eye text-[11px]"></i>
{{ number_format((int) $article->views) }}
</span>
</div>
</div>
</div>
</article>

75
resources/views/news/_sidebar.blade.php
View File

@@ -1,59 +1,58 @@
{{-- 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">
<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
<div class="mb-4 flex items-center justify-between gap-3">
<h2 class="text-sm font-semibold uppercase tracking-[0.18em] text-white/45">Categories</h2>
<span class="text-xs text-white/30">{{ $categories->count() }}</span>
</div>
<div class="space-y-1.5">
@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 href="{{ route('news.category', $cat->slug) }}" class="flex items-center justify-between rounded-2xl px-3 py-2.5 text-sm text-white/65 transition hover:bg-white/[0.04] hover:text-white">
<span>{{ $cat->name }}</span>
<span class="rounded-full border border-white/[0.06] bg-white/[0.04] px-2 py-0.5 text-[11px] text-white/45">{{ number_format((int) ($cat->published_articles_count ?? 0)) }}</span>
</a>
@endforeach
</div>
</div>
</section>
@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">
<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
<div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-white/45">
<i class="fa-solid fa-fire text-[11px] text-rose-300"></i>
Trending
</div>
<div class="space-y-3">
@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>
<a href="{{ route('news.show', $item->slug) }}" class="block rounded-2xl border border-white/[0.04] bg-black/10 px-4 py-3 transition hover:border-white/[0.08] hover:bg-white/[0.03]">
<div class="flex items-start justify-between gap-3">
<span class="text-sm font-medium leading-6 text-white/80">{{ Str::limit($item->title, 70) }}</span>
<span class="shrink-0 rounded-full border border-sky-400/20 bg-sky-500/10 px-2 py-0.5 text-[11px] text-sky-200">{{ number_format((int) $item->views) }}</span>
</div>
<small class="text-muted">{{ $item->published_at?->diffForHumans() }}</small>
<p class="mt-1 text-xs text-white/35">{{ $item->published_at?->diffForHumans() }}</p>
</a>
@endforeach
</div>
</div>
</section>
@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">
<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
<div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-white/45">
<i class="fa-solid fa-tags text-[11px] text-sky-300"></i>
Topics
</div>
<div class="flex flex-wrap gap-2">
@foreach($tags as $tag)
<a href="{{ route('news.tag', $tag->slug) }}" class="badge badge-secondary mr-1 mb-1">
{{ $tag->name }}
</a>
<a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $tag->name }}</a>
@endforeach
</div>
</div>
</section>
@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>
<section class="rounded-[24px] border border-amber-400/20 bg-amber-500/10 p-5 text-center">
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-amber-100/70">Stay updated</p>
<a href="{{ route('news.rss') }}" class="mt-3 inline-flex items-center gap-2 rounded-full border border-amber-300/25 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-100 transition hover:bg-amber-500/20" target="_blank" rel="noopener noreferrer">
<i class="fa-solid fa-rss text-xs"></i>
RSS Feed
</a>
</section>

54
resources/views/news/category.blade.php
View File

@@ -1,30 +1,44 @@
@extends('news.layout', [
'metaTitle' => $category->name . ' — News',
'metaDescription' => $category->description ?: ('Announcements in the ' . $category->name . ' category.'),
'metaCanonical' => route('news.category', $category->slug),
])
@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
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Community', 'url' => route('community.activity')],
(object) ['name' => 'Announcements', 'url' => route('news.index')],
(object) ['name' => $category->name, 'url' => route('news.category', $category->slug)],
]);
@endphp
<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])
<x-nova-page-header
section="Community"
:title="$category->name"
icon="fa-folder-open"
:breadcrumbs="$headerBreadcrumbs"
:description="$category->description ?: ('Announcements filed under ' . $category->name . '.')"
headerClass="pb-6"
/>
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
<section>
@if($articles->isEmpty())
<div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">No articles in this category yet.</div>
@else
<div class="grid gap-5 md:grid-cols-2">
@foreach($articles as $article)
@include('news._article_card', ['article' => $article])
@endforeach
</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 class="mt-8 flex justify-center">{{ $articles->links() }}</div>
@endif
</section>
<aside class="space-y-4">
@include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
</aside>
</div>
</div>
@endsection

128
resources/views/news/index.blade.php
View File

@@ -1,69 +1,105 @@
@extends('news.layout', [
'metaTitle' => config('news.rss_title', 'News'),
'metaDescription' => config('news.rss_description', ''),
'metaCanonical' => route('news.index'),
])
@section('news_content')
<div class="news-index">
<div class="container py-5">
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Community', 'url' => route('community.activity')],
(object) ['name' => 'Announcements', 'url' => route('news.index')],
]);
@endphp
{{-- 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>
<x-nova-page-header
section="Community"
title="News"
icon="fa-newspaper"
:breadcrumbs="$headerBreadcrumbs"
:description="config('news.rss_description', 'Latest news, feature rollouts, and team updates from Skinbase.')"
headerClass="pb-6"
>
<x-slot name="actions">
<div class="flex flex-wrap items-center gap-2 text-sm">
@if(($articles->total() ?? 0) > 0)
<span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/65">
<i class="fa-solid fa-file-lines text-xs text-sky-300"></i>
{{ number_format($articles->total()) }} articles
</span>
@endif
<a href="{{ route('news.rss') }}" class="inline-flex items-center gap-2 rounded-lg border border-amber-400/20 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-200 transition hover:bg-amber-500/15">
<i class="fa-solid fa-rss text-xs"></i>
RSS feed
</a>
</div>
</x-slot>
</x-nova-page-header>
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
@if($featured)
<section class="mb-8">
<a href="{{ route('news.show', $featured->slug) }}" class="group block overflow-hidden rounded-[32px] border border-white/[0.08] bg-white/[0.03] shadow-[0_24px_60px_rgba(0,0,0,0.24)] transition hover:border-white/[0.12]">
<div class="grid lg:grid-cols-[1.25fr_0.95fr]">
<div class="relative min-h-[280px] overflow-hidden bg-black/20">
@if($featured->cover_url)
<img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
@else
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98))]"></div>
@endif
<div class="absolute inset-0 bg-gradient-to-t from-[#020611] via-[#02061166] to-transparent"></div>
</div>
<div class="flex flex-col justify-between gap-5 p-6 lg:p-8">
<div>
<div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/45">
<span class="text-sky-300">Featured story</span>
@if($featured->category)
<span class="rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] tracking-[0.12em] text-sky-200">{{ $featured->category->name }}</span>
@endif
</div>
<h2 class="mt-4 text-3xl font-bold leading-tight text-white/95">{{ $featured->title }}</h2>
@if($featured->excerpt)
<p class="mt-4 text-sm leading-7 text-white/60">{{ Str::limit(strip_tags((string) $featured->excerpt), 220) }}</p>
@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 }} &middot;
{{ $featured->published_at?->format('d M Y') }} &middot;
{{ $featured->reading_time }} min read
</small>
</div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
<span>{{ $featured->author?->name ?? 'Skinbase' }}</span>
<span>{{ $featured->published_at?->format('d M Y') }}</span>
<span>{{ $featured->reading_time }} min read</span>
<span>{{ number_format((int) $featured->views) }} views</span>
</div>
</div>
</div>
</a>
</section>
@endif
@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">
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
<section>
@if($articles->isEmpty())
<div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">
No announcements have been published yet.
</div>
@else
<div class="grid gap-5 md:grid-cols-2">
@foreach($articles as $article)
@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
@endforeach
</div>
<div class="mt-3">
<div class="mt-8 flex justify-center">
{{ $articles->links() }}
</div>
</div>
{{-- Sidebar --}}
<div class="col-lg-4">
@include('news._sidebar', [
'categories' => $categories,
'trending' => $trending,
'tags' => $tags,
])
</div>
</div>
@endif
</section>
<aside class="space-y-4">
@include('news._sidebar', [
'categories' => $categories,
'trending' => $trending,
'tags' => $tags,
])
</aside>
</div>
</div>
@endsection

17
resources/views/news/layout.blade.php
View File

@@ -1,14 +1,11 @@
{{--
Frontend layout wrapper for the News section.
Extends the main app layout.
--}}
@extends('layouts.app')
@extends('layouts.nova')
@section('title', $metaTitle ?? config('news.rss_title', 'News'))
@if(isset($metaDescription))
@section('meta_description', $metaDescription)
@endif
@php
$page_title = $metaTitle ?? config('news.rss_title', 'News');
$page_meta_description = $metaDescription ?? config('news.rss_description', 'Latest announcements and community updates from Skinbase.');
$page_canonical = $metaCanonical ?? url()->current();
$page_robots = $metaRobots ?? 'index,follow';
@endphp
@section('content')
@yield('news_content')

138
resources/views/news/show.blade.php
View File

@@ -1,10 +1,22 @@
@extends('news.layout', [
'metaTitle' => $article->meta_title ?: $article->title,
'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
'metaCanonical' => route('news.show', $article->slug),
])
@section('news_content')
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Community', 'url' => route('community.activity')],
(object) ['name' => 'Announcements', 'url' => route('news.index')],
$article->category
? (object) ['name' => $article->category->name, 'url' => route('news.category', $article->category->slug)]
: null,
(object) ['name' => $article->title, 'url' => route('news.show', $article->slug)],
])->filter()->values();
@endphp
{{-- OpenGraph meta --}}
@push('head')
<meta property="og:type" content="article">
@@ -20,94 +32,102 @@
@endif
@endpush
<div class="news-article">
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<x-nova-page-header
section="Community"
:title="$article->title"
icon="fa-newspaper"
:breadcrumbs="$headerBreadcrumbs"
:description="$article->excerpt ? Str::limit(strip_tags((string) $article->excerpt), 180) : 'Latest Skinbase announcement and community update.'"
headerClass="pb-6"
>
<x-slot name="actions">
<div class="flex flex-wrap items-center gap-2 text-sm text-white/60">
@if($article->category)
<a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1.5 text-sky-200">{{ $article->category->name }}</a>
@endif
<span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5">
<i class="fa-regular fa-clock text-xs"></i>
{{ $article->reading_time }} min read
</span>
</div>
</x-slot>
</x-nova-page-header>
{{-- 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
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
<article class="min-w-0">
@if($article->cover_url)
<div class="overflow-hidden rounded-[32px] border border-white/[0.06] bg-black/20 shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
<img src="{{ $article->cover_url }}" alt="{{ $article->title }}" class="h-auto max-h-[520px] w-full object-cover">
</div>
@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">&middot;</span>
<div class="mt-6 rounded-[32px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] p-6 shadow-[0_18px_45px_rgba(0,0,0,0.2)] sm:p-8">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
<span>{{ $article->author?->name ?? 'Skinbase' }}</span>
<span>{{ $article->published_at?->format('d M Y') }}</span>
<span class="mx-2">&middot;</span>
<span><i class="fas fa-clock mr-1"></i>{{ $article->reading_time }} min read</span>
<span class="mx-2">&middot;</span>
<span><i class="fas fa-eye mr-1"></i>{{ number_format($article->views) }}</span>
<span>{{ number_format((int) $article->views) }} views</span>
</div>
<h1 class="mb-3">{{ $article->title }}</h1>
@if($article->excerpt)
<p class="lead text-muted mb-4">{{ $article->excerpt }}</p>
<p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
@endif
<div class="news-content">
<div class="prose prose-invert prose-sky mt-8 max-w-none prose-p:text-white/72 prose-li:text-white/70 prose-strong:text-white prose-a:text-sky-300 hover:prose-a:text-sky-200 prose-headings:text-white">
{!! $article->content !!}
</div>
{{-- Tags --}}
@if($article->tags->isNotEmpty())
<div class="mt-4">
<strong><i class="fas fa-tags mr-1"></i></strong>
<div class="mt-8 flex flex-wrap gap-2 border-t border-white/[0.06] pt-6">
@foreach($article->tags as $tag)
<a href="{{ route('news.tag', $tag->slug) }}"
class="badge badge-secondary mr-1">{{ $tag->name }}</a>
<a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $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
<div class="mt-8 flex flex-wrap items-center gap-3 border-t border-white/[0.06] pt-6">
<span class="text-sm font-medium text-white/55">Share</span>
<a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}" class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-4 py-2 text-sm text-sky-200 transition hover:bg-sky-500/15" target="_blank" rel="noopener noreferrer">
<i class="fab fa-twitter text-xs"></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 href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" class="inline-flex items-center gap-2 rounded-full border border-blue-400/20 bg-blue-500/10 px-4 py-2 text-sm text-blue-200 transition hover:bg-blue-500/15" target="_blank" rel="noopener noreferrer">
<i class="fab fa-facebook text-xs"></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">
<div class="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-4 text-sm text-emerald-100/90">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-solid fa-comments text-xs"></i>
<span class="font-medium">Join the discussion</span>
</div>
<a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="mt-2 inline-flex items-center gap-2 text-emerald-200 transition hover:text-white">
Discussion: {{ $article->title }}
<i class="fa-solid fa-arrow-right text-[11px]"></i>
</a>
</div>
@endif
</div>
{{-- 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>
@if($related->isNotEmpty())
<section class="mt-8">
<div class="mb-4 flex items-center justify-between gap-3">
<h2 class="text-lg font-semibold text-white/90">Related Articles</h2>
</div>
@endif
<div class="grid gap-5 md:grid-cols-2">
@foreach($related as $rel)
@include('news._article_card', ['article' => $rel])
@endforeach
</div>
</section>
@endif
</article>
</div>{{-- col-lg-8 --}}
</div>
<aside class="space-y-4">
@include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
</aside>
</div>
</div>
@endsection

53
resources/views/news/tag.blade.php
View File

@@ -1,29 +1,44 @@
@extends('news.layout', [
'metaTitle' => '#' . $tag->name . ' — News',
'metaDescription' => 'Announcements tagged with ' . $tag->name . '.',
'metaCanonical' => route('news.tag', $tag->slug),
])
@section('news_content')
<div class="container py-5">
<h1 class="mb-4">
<i class="fas fa-tag mr-2"></i>#{{ $tag->name }}
</h1>
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Community', 'url' => route('community.activity')],
(object) ['name' => 'Announcements', 'url' => route('news.index')],
(object) ['name' => '#' . $tag->name, 'url' => route('news.tag', $tag->slug)],
]);
@endphp
<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])
<x-nova-page-header
section="Community"
:title="'#' . $tag->name"
icon="fa-tag"
:breadcrumbs="$headerBreadcrumbs"
:description="'Stories and announcements tagged with #' . $tag->name . '.'"
headerClass="pb-6"
/>
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
<section>
@if($articles->isEmpty())
<div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">No articles are using this tag yet.</div>
@else
<div class="grid gap-5 md:grid-cols-2">
@foreach($articles as $article)
@include('news._article_card', ['article' => $article])
@endforeach
</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 class="mt-8 flex justify-center">{{ $articles->links() }}</div>
@endif
</section>
<aside class="space-y-4">
@include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
</aside>
</div>
</div>
@endsection

45
resources/views/web/authors/top.blade.php
View File

@@ -3,16 +3,29 @@
@section('content')
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
<h1 class="text-3xl font-bold text-white leading-tight">Top Authors</h1>
<p class="mt-1 text-sm text-white/50">Most popular members ranked by artwork {{ $metric === 'downloads' ? 'downloads' : 'views' }}.</p>
</div>
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Creators', 'url' => '/creators/top'],
(object) ['name' => 'Top Creators', 'url' => route('creators.top')],
]);
@endphp
{{-- Metric switcher --}}
<nav class="flex items-center gap-2" aria-label="Ranking metric">
<x-nova-page-header
section="Creators"
title="Top Creators"
icon="fa-star"
:breadcrumbs="$headerBreadcrumbs"
:description="'Most popular creators ranked by artwork ' . ($metric === 'downloads' ? 'downloads' : 'views') . '.'"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creators.rising') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-arrow-trend-up text-xs"></i>
Rising Creators
</a>
<nav class="flex flex-wrap items-center gap-2" aria-label="Ranking metric">
<a href="{{ request()->fullUrlWithQuery(['metric' => 'views']) }}"
class="inline-flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-medium border transition-colors
{{ $metric === 'views' ? 'bg-sky-500/15 text-sky-300 border-sky-500/30' : 'border-white/[0.08] bg-white/[0.04] text-white/55 hover:text-white hover:bg-white/[0.08]' }}">
@@ -31,11 +44,11 @@
Downloads
</a>
</nav>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Leaderboard ── --}}
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($authors->currentPage() - 1) * $authors->perPage();
$isFirstPage = $authors->currentPage() === 1;
@@ -73,15 +86,17 @@
</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center justify-between gap-4">
<img src="{{ $avatarUrl }}" alt="{{ $author->uname }}"
class="w-14 h-14 rounded-full object-cover ring-1 ring-white/[0.12]">
<div class="min-w-0">
<div class="min-w-0 flex-1">
<div class="truncate text-base font-semibold text-white">{{ $author->uname ?? 'Unknown' }}</div>
@if (!empty($author->username))
<div class="truncate text-xs text-white/40">{{ '@' . $author->username }}</div>
@endif
<div class="mt-1 text-lg font-bold {{ $metric === 'downloads' ? 'text-emerald-400' : 'text-sky-400' }}">
</div>
<div class="shrink-0 text-right">
<div class="text-lg font-bold {{ $metric === 'downloads' ? 'text-emerald-400' : 'text-sky-400' }}">
{{ number_format($author->total ?? 0) }}
</div>
</div>

1
resources/views/web/category.blade.php
View File

@@ -77,5 +77,4 @@
@endsection
@push('scripts')
<script src="/js/legacy-gallery-init.js"></script>
@endpush

30
resources/views/web/comments/monthly.blade.php
View File

@@ -1,26 +1,32 @@
@extends('layouts.nova')
@section('content')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Monthly Top Commentators', 'url' => route('legacy.monthly_commentators')],
]);
@endphp
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
<h1 class="text-3xl font-bold text-white leading-tight">Monthly Top Commentators</h1>
<p class="mt-1 text-sm text-white/50">Members who posted the most comments in the last 30 days.</p>
</div>
@section('content')
<x-nova-page-header
section="Community"
:title="$page_title ?? 'Monthly Top Commentators'"
icon="fa-ranking-star"
:breadcrumbs="$headerBreadcrumbs"
description="Members who posted the most comments in the last 30 days."
headerClass="pb-6"
>
<x-slot name="actions">
<span class="flex-shrink-0 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-violet-500/10 text-violet-300 ring-1 ring-violet-500/25">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
Last 30 days
</span>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Leaderboard ── --}}
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($rows->currentPage() - 1) * $rows->perPage();
$isFirstPage = $rows->currentPage() === 1;

39
resources/views/web/creators/rising.blade.php
View File

@@ -2,25 +2,30 @@
@section('content')
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Creators</p>
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
<i class="fa-solid fa-arrow-trend-up text-sky-400 text-2xl"></i>
Rising Creators
</h1>
<p class="mt-1 text-sm text-white/50">Creators gaining momentum with the most views over the last 90 days.</p>
</div>
@php
$headerBreadcrumbs = collect([
(object) ['name' => 'Creators', 'url' => '/creators/top'],
(object) ['name' => 'Rising Creators', 'url' => route('creators.rising')],
]);
@endphp
<x-nova-page-header
section="Creators"
title="Rising Creators"
icon="fa-arrow-trend-up"
:breadcrumbs="$headerBreadcrumbs"
description="Creators gaining momentum with the most views over the last 90 days."
>
<x-slot name="actions">
<a href="{{ route('creators.top') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-star text-xs"></i>
Top Creators
</a>
</div>
</div>
</x-slot>
</x-nova-page-header>
<div class="px-6 pb-16 md:px-10">
<div class="px-6 pt-8 pb-16 md:px-10">
@php
$offset = ($creators->currentPage() - 1) * $creators->perPage();
$isFirstPage = $creators->currentPage() === 1;
@@ -56,16 +61,18 @@
<span class="text-xs font-semibold uppercase tracking-widest text-sky-300/80">Recent Views</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center justify-between gap-4">
<img src="{{ $avatarUrl }}" alt="{{ $creator->uname }}"
class="w-14 h-14 rounded-full object-cover ring-1 ring-white/[0.12]"
onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'" />
<div class="min-w-0">
<div class="min-w-0 flex-1">
<div class="truncate text-base font-semibold text-white">{{ $creator->uname ?? 'Unknown' }}</div>
@if($creator->username ?? null)
<div class="truncate text-xs text-white/40">{{ '@' . $creator->username }}</div>
@endif
<div class="mt-1 text-lg font-bold text-sky-400">{{ number_format($creator->total ?? 0) }}</div>
</div>
<div class="shrink-0 text-right">
<div class="text-lg font-bold text-sky-400">{{ number_format($creator->total ?? 0) }}</div>
</div>
</div>
</a>

35
resources/views/web/daily-uploads.blade.php
View File

@@ -1,27 +1,36 @@
@extends('layouts.nova')
@php
$headerBreadcrumbs = collect([
(object) ['name' => $page_title ?? 'Daily Uploads', 'url' => route('legacy.daily_uploads')],
]);
@endphp
@section('content')
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Skinbase</p>
<h1 class="text-3xl font-bold text-white leading-tight">Daily Uploads</h1>
<p class="mt-1 text-sm text-white/50">Browse all artworks uploaded on a specific date.</p>
</div>
<a href="{{ route('uploads.latest') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<x-nova-page-header
section="Uploads"
:title="$page_title ?? 'Daily Uploads'"
icon="fa-calendar-day"
:breadcrumbs="$headerBreadcrumbs"
description="Browse all artworks uploaded on a specific date."
headerClass="pb-6"
>
<x-slot name="actions">
<a
href="{{ route('uploads.latest') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Latest Uploads
</a>
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Date strip ── --}}
<div class="px-6 md:px-10 pb-5">
<div class="px-6 pt-8 md:px-10 pb-5">
<div class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none" id="dateStrip">
@foreach($dates as $i => $d)
<button type="button"

55
resources/views/web/discover/for-you.blade.php
View File

@@ -1,23 +1,28 @@
@extends('layouts.nova')
@php
$discoverBreadcrumbs = collect([
(object) ['name' => 'Discover', 'url' => '/discover/trending'],
(object) ['name' => 'For You', 'url' => '/discover/for-you'],
]);
@endphp
@section('content')
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Discover</p>
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
<i class="fa-solid fa-wand-magic-sparkles text-yellow-400 text-2xl"></i>
For You
</h1>
<p class="mt-1 text-sm text-white/50">Artworks picked for you based on your taste.</p>
</div>
{{-- Section switcher pills --}}
<x-nova-page-header
section="Discover"
title="For You"
icon="fa-wand-magic-sparkles"
:breadcrumbs="$discoverBreadcrumbs"
description="Artworks picked for you based on your taste."
headerClass="pb-6"
actionsClass="lg:pt-8"
iconClass="text-yellow-400"
>
<x-slot name="actions">
@include('web.discover._nav', ['section' => 'for-you'])
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
@@ -36,15 +41,17 @@
'height' => $art->height ?? null,
])->values();
@endphp
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="for-you"
data-cursor-endpoint="{{ route('discover.for-you') }}"
@if (!empty($next_cursor)) data-next-cursor="{{ $next_cursor }}" @endif
data-limit="40"
class="min-h-32"
></div>
<section class="px-6 pt-8 md:px-10">
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="for-you"
data-cursor-endpoint="{{ route('discover.for-you') }}"
@if (!empty($next_cursor)) data-next-cursor="{{ $next_cursor }}" @endif
data-limit="40"
class="min-h-32"
></div>
</section>
@endsection

54
resources/views/web/discover/index.blade.php
View File

@@ -1,25 +1,27 @@
@extends('layouts.nova')
@php
$discoverBreadcrumbs = collect([
(object) ['name' => 'Discover', 'url' => '/discover/trending'],
(object) ['name' => $page_title ?? 'Discover', 'url' => request()->path()],
]);
@endphp
@section('content')
{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Discover</p>
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
<i class="fa-solid {{ $icon ?? 'fa-compass' }} text-sky-400 text-2xl"></i>
{{ $page_title ?? 'Discover' }}
</h1>
@isset($description)
<p class="mt-1 text-sm text-white/50">{{ $description }}</p>
@endisset
</div>
{{-- Section switcher pills --}}
<x-nova-page-header
section="Discover"
:title="$page_title ?? 'Discover'"
:icon="$icon ?? 'fa-compass'"
:breadcrumbs="$discoverBreadcrumbs"
:description="$description ?? null"
headerClass="pb-6"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
@include('web.discover._nav', ['section' => $section ?? ''])
</div>
</div>
</x-slot>
</x-nova-page-header>
{{-- ── Artwork grid (React MasonryGallery) ── --}}
@php
@@ -39,14 +41,16 @@
])->values();
$galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="{{ $section ?? 'discover' }}"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="24"
class="min-h-32"
></div>
<section class="px-6 pt-8 md:px-10">
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="{{ $section ?? 'discover' }}"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="24"
class="min-h-32"
></div>
</section>
@endsection

119
resources/views/web/featured-artworks.blade.php
View File

@@ -1,49 +1,84 @@
@extends('layouts.nova')
@php
$featuredBreadcrumbs = collect([
(object) ['name' => 'Featured', 'url' => request()->path()],
(object) ['name' => $page_title ?? 'Featured Artworks', 'url' => request()->fullUrl()],
]);
$galleryArtworks = collect($artworks->items())->map(fn ($art) => [
'id' => $art->id,
'name' => $art->name ?? null,
'slug' => $art->slug ?? null,
'url' => $art->url ?? null,
'thumb' => $art->thumb_url ?? null,
'thumb_url' => $art->thumb_url ?? 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 ?? '',
'width' => $art->width ?? null,
'height' => $art->height ?? null,
])->values();
$galleryNextPageUrl = $artworks->nextPageUrl();
@endphp
@section('content')
<div class="container-fluid legacy-page">
<div class="effect2 page-header-wrap">
<header class="page-heading">
<h1 class="page-header">{{ $page_title ?? 'Featured Artworks' }}</h1>
</header>
<div class="mb-3">
<strong>Show:</strong>
<ul id="recentTab" class="list-inline">
@foreach($artworkTypes as $k => $label)
<li class="list-inline-item">
<a href="/featured-artworks?type={{ (int)$k }}" @if((int)$k === (int)$type) class="active" @endif>{{ $label }}</a>
</li>
@endforeach
</ul>
<br style="clear:both">
</div>
</div>
@if($artworks)
<div class="container_photo gallery_box">
@foreach($artworks as $art)
@php
$card = (object) [
'url' => url('/art/' . ($art->id ?? '') . '/' . \Illuminate\Support\Str::slug($art->name ?? '')),
'thumb' => $art->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp',
'thumb_srcset' => $art->thumb_srcset ?? null,
'name' => $art->name ?? '',
'uname' => $art->uname ?? 'Unknown',
'gid_num' => $art->gid_num ?? 0,
'category_name' => $art->category_name ?? '',
];
@endphp
@include('web.partials._artwork_card', ['art' => $card])
<x-nova-page-header
section="Featured"
:title="$page_title ?? 'Featured Artworks'"
icon="fa-star"
:breadcrumbs="$featuredBreadcrumbs"
description="Browse staff-picked and community-highlighted artwork in the shared gallery feed."
headerClass="pb-6"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<div class="flex flex-wrap items-center gap-2 text-sm">
@foreach($artworkTypes as $k => $label)
<a
href="{{ url()->current() }}?type={{ (int) $k }}"
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {{ (int) $k === (int) $type ? 'bg-amber-500/20 text-amber-200 ring-1 ring-amber-400/30' : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}"
>
{{ $label }}
</a>
@endforeach
</div>
@else
<p class="text-muted">No artworks found.</p>
@endif
</x-slot>
</x-nova-page-header>
<div class="paginationMenu text-center">
@if($artworks){{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}@endif
</div>
</div>
<section class="px-6 pt-8 md:px-10">
<div
data-react-masonry-gallery
data-artworks="{{ json_encode($galleryArtworks) }}"
data-gallery-type="featured"
@if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
data-limit="39"
class="min-h-32"
></div>
</section>
@endsection
@push('styles')
<style>
@media (min-width: 1024px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 2600px) {
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
</style>
@endpush
@push('scripts')
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush

80
resources/views/web/stories/dashboard.blade.php
View File

@@ -1,31 +1,63 @@
@extends('layouts.nova.content-layout')
@extends('layouts.nova')
@php
$hero_title = 'My Stories';
$hero_description = 'Drafts, published stories, and archived work in one creator dashboard.';
@endphp
@push('head')
<meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
@endpush
@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('content')
<div class="container-fluid legacy-page">
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(100vh-64px)]">
<main class="w-full">
<x-nova-page-header
section="Creator"
title="My Stories"
icon="fa-pen-nib"
:breadcrumbs="collect([
(object) ['name' => 'Creator', 'url' => route('creator.stories.index')],
(object) ['name' => 'My Stories', 'url' => route('creator.stories.index')],
])"
description="Drafts, published stories, and archived work in one creator dashboard."
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
<i class="fa-solid fa-pen text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="px-6 pb-16 pt-8 md:px-10">
<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Drafts</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($drafts->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
<p class="text-xs uppercase tracking-widest text-white/35">Published</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($publishedStories->count()) }}</p>
</div>
<div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
<p class="text-xs uppercase tracking-widest text-white/35">Archived</p>
<p class="mt-2 text-2xl font-semibold text-white">{{ number_format($archivedStories->count()) }}</p>
</div>
</div>
<div class="space-y-8">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Drafts</h3>
@if($drafts->isEmpty())
<p class="text-sm text-gray-400">No drafts yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($drafts as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-gray-600 px-2 py-1 text-xs uppercase tracking-wide text-gray-300">{{ str_replace('_', ' ', $story->status) }}</span>
<span class="rounded-full border border-white/[0.08] px-2 py-1 text-xs uppercase tracking-wide text-white/55">{{ str_replace('_', ' ', $story->status) }}</span>
</div>
<p class="mt-2 text-xs text-gray-400">Last edited {{ optional($story->updated_at)->diffForHumans() }}</p>
@if($story->rejected_reason)
@@ -45,14 +77,14 @@
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Published Stories</h3>
@if($publishedStories->isEmpty())
<p class="text-sm text-gray-400">No published stories yet.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($publishedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<div class="flex items-start justify-between gap-3">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<span class="rounded-full border border-emerald-500/40 px-2 py-1 text-xs uppercase tracking-wide text-emerald-200">{{ str_replace('_', ' ', $story->status) }}</span>
@@ -69,14 +101,14 @@
@endif
</section>
<section class="rounded-xl border border-gray-700 bg-gray-800/60 p-5 shadow-lg">
<section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
<h3 class="mb-4 text-base font-semibold text-white">Archived Stories</h3>
@if($archivedStories->isEmpty())
<p class="text-sm text-gray-400">No archived stories.</p>
@else
<div class="grid gap-3 md:grid-cols-2">
@foreach($archivedStories as $story)
<article class="rounded-xl border border-gray-700 bg-gray-900/60 p-4 transition hover:scale-[1.02]">
<article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
<h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
<p class="mt-2 text-xs text-gray-400">Archived {{ optional($story->updated_at)->diffForHumans() }}</p>
<div class="mt-3 flex flex-wrap gap-3 text-xs">
@@ -87,5 +119,11 @@
</div>
@endif
</section>
</div>
</section>
</main>
</div>
</div>
</div>
</div>
@endsection

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

@@ -11,21 +11,23 @@
];
@endphp
<div class="relative overflow-hidden nb-hero-radial border-b border-white/10">
<div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>
<div class="relative px-6 py-12 md:px-10 md:py-14">
<div class="mt-2 py-4">
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-4">Browse</p>
<h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white/95 leading-tight flex items-center gap-3">
<i class="fa-solid fa-newspaper text-sky-400 text-3xl"></i>
Browse Stories
</h1>
<p class="mt-3 text-base text-neutral-400 max-w-3xl">List of all published stories across tutorials, creator journals, interviews, and project breakdowns.</p>
</div>
</div>
</div>
<x-nova-page-header
section="Stories"
title="Browse Stories"
icon="fa-newspaper"
:breadcrumbs="$breadcrumbs ?? collect()"
description="List of all published stories across tutorials, creator journals, interviews, and project breakdowns."
contentClass="max-w-3xl"
actionsClass="lg:pt-8"
>
<x-slot name="actions">
<a href="{{ route('creator.stories.create') }}"
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
<i class="fa-solid fa-pen-nib text-xs"></i>
Write Story
</a>
</x-slot>
</x-nova-page-header>
<div class="border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="px-6 md:px-10">