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

Remove legacy frontend assets and update gallery routes

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-14 15:06:28 +01:00
parent 4f576ceb04
commit 78151aabfe
550 changed files with 826 additions and 108930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,67 @@
@extends('layouts.nova.content-layout')
@extends('layouts.nova')
@section('content')
@php
$hero_title = 'Creator Stories';
$hero_description = 'Articles, tutorials, interviews, and project breakdowns from the Skinbase creator community.';
$currentCategory = (string) (request()->route('category') ?? request()->query('category', ''));
$storyTabs = [
['label' => '🔥 Trending', 'href' => '#trending'],
['label' => '🚀 New & Hot', 'href' => '#featured'],
['label' => '⭐ Best', 'href' => '#latest'],
['label' => '🕐 Latest', 'href' => '#latest'],
];
@endphp
@section('page-content')
<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>
<div class="border-b border-white/10 bg-nova-900/90 backdrop-blur-md">
<div class="px-6 md:px-10">
<nav data-stories-tabs class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist" aria-label="Stories sections">
@foreach($storyTabs as $index => $tab)
<a href="{{ $tab['href'] }}"
data-stories-tab
data-target="{{ ltrim($tab['href'], '#') }}"
role="tab"
aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
class="relative whitespace-nowrap px-5 py-4 text-sm font-medium {{ $index === 0 ? 'text-white' : 'text-neutral-400 hover:text-white' }}">
{{ $tab['label'] }}
<span data-tab-indicator class="absolute bottom-0 left-0 right-0 h-0.5 {{ $index === 0 ? 'bg-accent scale-x-100' : 'bg-transparent scale-x-0' }} transition-transform duration-300 origin-left rounded-full"></span>
</a>
@endforeach
</nav>
</div>
</div>
<div class="border-b border-white/10 bg-nova-900/70">
<div class="px-6 md:px-10 py-6">
<div class="flex gap-3 overflow-x-auto nb-scrollbar-none pb-1">
<a href="{{ route('stories.index') }}" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-semibold transition-colors {{ $currentCategory === '' ? 'bg-orange-500 text-white' : 'border border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/[0.1] hover:text-white' }}">All</a>
@foreach($categories as $category)
<a href="{{ route('stories.category', $category['slug']) }}" class="whitespace-nowrap rounded-full px-3 py-1.5 text-sm transition-colors {{ $currentCategory === $category['slug'] ? 'bg-orange-500 text-white font-semibold' : 'border border-white/10 bg-white/[0.05] text-white/70 hover:bg-white/[0.1] hover:text-white' }}">
{{ $category['name'] }}
</a>
@endforeach
</div>
</div>
</div>
<div class="px-6 pb-16 md:px-10">
<div class="space-y-10">
@if($featured)
<section class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
<section id="featured" class="overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg">
<a href="{{ route('stories.show', $featured->slug) }}" class="grid gap-0 lg:grid-cols-2">
<div class="aspect-video overflow-hidden bg-gray-900">
@if($featured->cover_url)
@@ -25,7 +78,7 @@
</section>
@endif
<section>
<section id="trending">
<div class="mb-5 flex items-center justify-between">
<h3 class="text-2xl font-semibold tracking-tight text-white">Trending Stories</h3>
</div>
@@ -47,7 +100,7 @@
</div>
</section>
<section>
<section id="latest">
<h3 class="mb-5 text-2xl font-semibold tracking-tight text-white">Latest Stories</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@foreach($latestStories as $story)
@@ -59,4 +112,61 @@
</div>
</section>
</div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
var tabLinks = Array.from(document.querySelectorAll('[data-stories-tab]'));
if (!tabLinks.length) return;
function setActiveTab(targetId) {
tabLinks.forEach(function (link) {
var isActive = link.getAttribute('data-target') === targetId;
link.setAttribute('aria-selected', isActive ? 'true' : 'false');
link.classList.toggle('text-white', isActive);
link.classList.toggle('text-neutral-400', !isActive);
var indicator = link.querySelector('[data-tab-indicator]');
if (!indicator) return;
indicator.classList.toggle('bg-accent', isActive);
indicator.classList.toggle('bg-transparent', !isActive);
indicator.classList.toggle('scale-x-100', isActive);
indicator.classList.toggle('scale-x-0', !isActive);
});
}
tabLinks.forEach(function (link) {
link.addEventListener('click', function () {
var targetId = link.getAttribute('data-target');
if (targetId) setActiveTab(targetId);
});
});
var sectionIds = Array.from(new Set(tabLinks.map(function (link) {
return link.getAttribute('data-target');
}).filter(Boolean)));
var sections = sectionIds
.map(function (id) { return document.getElementById(id); })
.filter(Boolean);
if (!sections.length) return;
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
setActiveTab(entry.target.id);
}
});
}, {
root: null,
rootMargin: '-35% 0px -55% 0px',
threshold: 0.01
});
sections.forEach(function (section) { observer.observe(section); });
});
</script>
@endpush