feat: add tag discovery analytics and reporting
This commit is contained in:
@@ -1,34 +1,308 @@
|
||||
@extends('layouts.nova.content-layout')
|
||||
@extends('layouts.nova')
|
||||
|
||||
@php
|
||||
$hero_title = 'Tags';
|
||||
$hero_description = 'Browse all artwork tags on Skinbase.';
|
||||
$breadcrumbs = $breadcrumbs ?? collect([
|
||||
(object) ['name' => 'Explore', 'url' => '/explore'],
|
||||
(object) ['name' => 'Browse', 'url' => '/browse'],
|
||||
(object) ['name' => 'Tags', 'url' => '/tags'],
|
||||
]);
|
||||
@endphp
|
||||
|
||||
@section('page-content')
|
||||
@if($tags->isNotEmpty())
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($tags as $tag)
|
||||
<a href="{{ route('tags.show', $tag->slug) }}"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/[0.05] border border-white/[0.07]
|
||||
text-sm text-white/70 hover:bg-white/[0.1] hover:text-white transition-colors">
|
||||
<i class="fa-solid fa-hashtag text-xs text-sky-400/70"></i>
|
||||
{{ $tag->name }}
|
||||
<span class="text-xs text-white/30 ml-1">{{ number_format($tag->artworks_count) }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@push('head')
|
||||
@isset($page_canonical)
|
||||
<link rel="canonical" href="{{ $page_canonical }}" />
|
||||
@endisset
|
||||
<meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="{{ $page_canonical ?? url()->current() }}" />
|
||||
<meta property="og:title" content="{{ $page_title ?? 'Skinbase' }}" />
|
||||
<meta property="og:description" content="{{ $page_meta_description ?? $hero_description }}" />
|
||||
<meta property="og:site_name" content="Skinbase" />
|
||||
@endpush
|
||||
|
||||
<div class="mt-10 flex justify-center">
|
||||
{{ $tags->withQueryString()->links() }}
|
||||
@section('content')
|
||||
@php
|
||||
$query = trim((string) ($query ?? ''));
|
||||
$featuredTags = $featuredTags ?? collect();
|
||||
$risingTags = $risingTags ?? collect();
|
||||
$tagStats = $tagStats ?? ['active' => 0, 'usage' => 0, 'matching' => $tags->total(), 'recent_clicks' => 0];
|
||||
$topFeaturedTag = $featuredTags->first();
|
||||
@endphp
|
||||
|
||||
<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 aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 overflow-hidden">
|
||||
<div class="absolute left-[-6rem] top-10 h-56 w-56 rounded-full bg-sky-500/10 blur-3xl"></div>
|
||||
<div class="absolute right-[-4rem] top-24 h-64 w-64 rounded-full bg-cyan-400/10 blur-3xl"></div>
|
||||
<div class="absolute left-1/3 top-56 h-48 w-48 rounded-full bg-emerald-400/10 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<main class="w-full">
|
||||
<x-nova-page-header
|
||||
section="Browse"
|
||||
title="Tags"
|
||||
icon="fa-tags"
|
||||
:breadcrumbs="$breadcrumbs"
|
||||
:description="$hero_description"
|
||||
actionsClass="lg:pt-8"
|
||||
>
|
||||
<x-slot name="actions">
|
||||
@include('gallery._browse_nav', ['section' => 'tags', 'includeTags' => true])
|
||||
</x-slot>
|
||||
</x-nova-page-header>
|
||||
|
||||
<section class="px-6 pb-16 pt-8 md:px-10">
|
||||
<div class="grid gap-6 xl:grid-cols-[minmax(0,1.55fr)_minmax(320px,0.9fr)]">
|
||||
<div class="overflow-hidden rounded-[1.75rem] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_38%),linear-gradient(135deg,rgba(13,19,30,0.98),rgba(8,14,24,0.92))] shadow-[0_24px_80px_rgba(3,7,18,0.32)]">
|
||||
<div class="grid gap-8 p-6 md:p-8 xl:grid-cols-[minmax(0,1.2fr)_minmax(260px,0.8fr)] xl:items-end">
|
||||
<div class="space-y-6">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200">
|
||||
<span class="h-2 w-2 rounded-full bg-sky-300"></span>
|
||||
Explore by vibe, medium, and theme
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<h2 class="max-w-2xl text-3xl font-semibold tracking-tight text-white md:text-4xl xl:text-[2.8rem] xl:leading-[1.05]">
|
||||
Find collections faster with a cleaner tag browsing experience.
|
||||
</h2>
|
||||
<p class="max-w-2xl text-sm leading-6 text-white/64 md:text-base">
|
||||
Jump into the most used themes on Skinbase, search by keyword, and move from discovery to relevant artwork feeds without scanning an endless wall of chips.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="{{ route('tags.index') }}" class="space-y-3" data-tags-search-form>
|
||||
<label for="tags-search" class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">Search tags</label>
|
||||
<div class="flex flex-col gap-3 sm:flex-row">
|
||||
<div class="relative flex-1" data-tags-search-root data-search-endpoint="/api/tags/search" data-popular-endpoint="/api/tags/popular">
|
||||
<i class="fa-solid fa-magnifying-glass pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-sm text-white/35"></i>
|
||||
<input
|
||||
id="tags-search"
|
||||
type="search"
|
||||
name="q"
|
||||
value="{{ $query }}"
|
||||
placeholder="Search aesthetics, games, styles..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-controls="tags-search-suggestions"
|
||||
data-tags-search-input
|
||||
class="h-12 w-full rounded-2xl border border-white/10 bg-black/25 pl-11 pr-4 text-sm text-white placeholder:text-white/30 focus:border-sky-400/45 focus:outline-none focus:ring-2 focus:ring-sky-400/20"
|
||||
>
|
||||
<div id="tags-search-suggestions" data-tags-search-panel class="absolute left-0 right-0 top-[calc(100%+0.75rem)] z-20 hidden overflow-hidden rounded-2xl border border-white/10 bg-[linear-gradient(180deg,rgba(13,19,30,0.98),rgba(8,14,24,0.98))] shadow-[0_18px_50px_rgba(3,7,18,0.36)]">
|
||||
<div class="border-b border-white/8 px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.24em] text-white/38" data-tags-search-title>
|
||||
Suggested tags
|
||||
</div>
|
||||
<div class="max-h-72 overflow-y-auto p-2" data-tags-search-results role="listbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 sm:shrink-0">
|
||||
<button type="submit" class="inline-flex h-12 items-center justify-center rounded-2xl bg-sky-500 px-5 text-sm font-semibold text-slate-950 transition hover:bg-sky-400">
|
||||
Search
|
||||
</button>
|
||||
@if($query !== '')
|
||||
<a href="{{ route('tags.index') }}" class="inline-flex h-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] px-5 text-sm font-semibold text-white/72 transition hover:bg-white/[0.08] hover:text-white">
|
||||
Reset
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if($risingTags->isNotEmpty())
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">Popular right now</p>
|
||||
<p class="text-xs text-white/35">{{ $risingTags->count() }} quick jumps tuned by recent clicks</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
@foreach($risingTags as $tag)
|
||||
<a href="{{ route('tags.show', $tag->slug) }}" class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-3.5 py-2 text-sm text-white/72 transition hover:border-sky-400/30 hover:bg-sky-400/10 hover:text-white">
|
||||
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.08] text-[11px] text-sky-200">#</span>
|
||||
<span>{{ $tag->name }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
|
||||
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/40">Active tags</p>
|
||||
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($tagStats['active']) }}</p>
|
||||
<p class="mt-2 text-sm text-white/45">Browsable tags with active artwork associations.</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/40">Total usage</p>
|
||||
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($tagStats['usage']) }}</p>
|
||||
<p class="mt-2 text-sm text-white/45">Tag assignments used across the catalog.</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/40">Matching now</p>
|
||||
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format($tagStats['matching']) }}</p>
|
||||
<p class="mt-2 text-sm text-white/45">
|
||||
{{ $query !== '' ? 'Results for your current search term.' : 'The current catalog available to browse.' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/[0.05] p-4 backdrop-blur-sm">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/40">Recent clicks</p>
|
||||
<p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($tagStats['recent_clicks'] ?? 0)) }}</p>
|
||||
<p class="mt-2 text-sm text-white/45">Last 14 days of tag discovery clicks used to tune highlights.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="rounded-[1.75rem] border border-white/[0.08] bg-white/[0.04] p-6 shadow-[0_16px_60px_rgba(3,7,18,0.22)] backdrop-blur-sm">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">Featured tag</p>
|
||||
<h3 class="mt-2 text-2xl font-semibold text-white">{{ $topFeaturedTag?->name ?? 'No featured tag yet' }}</h3>
|
||||
</div>
|
||||
<div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-400/12 text-sky-200">
|
||||
<i class="fa-solid fa-wand-magic-sparkles text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($topFeaturedTag)
|
||||
<p class="mt-4 text-sm leading-6 text-white/58">
|
||||
One of the strongest tags in current discovery behavior, with {{ number_format($topFeaturedTag->artworks_count) }} artworks currently attached.
|
||||
</p>
|
||||
|
||||
<a href="{{ route('tags.show', $topFeaturedTag->slug) }}" class="mt-6 inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-sky-100">
|
||||
Open #{{ $topFeaturedTag->slug }}
|
||||
<i class="fa-solid fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
@else
|
||||
<p class="mt-4 text-sm leading-6 text-white/58">Tag highlights will appear here as soon as the catalog has enough data.</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-8 border-t border-white/10 pt-6">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">Browse tips</p>
|
||||
<div class="mt-4 space-y-3 text-sm text-white/56">
|
||||
<div class="rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
|
||||
Use broad tags like <span class="text-white">anime</span> or <span class="text-white">minimal</span> to start wide, then narrow down inside each feed.
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
|
||||
Search matches both display names and slugs, so shorthand and full names work.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@if($featuredTags->isNotEmpty())
|
||||
<div class="mt-8 rounded-[1.75rem] border border-white/[0.08] bg-white/[0.03] p-6 md:p-7">
|
||||
<div class="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">Editor's picks</p>
|
||||
<h2 class="mt-2 text-2xl font-semibold text-white">High-signal tags worth exploring first</h2>
|
||||
</div>
|
||||
<p class="text-sm text-white/48">Ranked by recent discovery clicks first, then usage and artwork volume.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
@foreach($featuredTags as $index => $tag)
|
||||
<a href="{{ route('tags.show', $tag->slug) }}" class="group rounded-[1.35rem] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5 transition duration-200 hover:-translate-y-0.5 hover:border-sky-400/30 hover:bg-sky-400/[0.08]">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<span class="inline-flex h-9 min-w-9 items-center justify-center rounded-xl bg-sky-400/12 px-3 text-sm font-semibold text-sky-200">
|
||||
{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}
|
||||
</span>
|
||||
<span class="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/42">
|
||||
{{ number_format((int) ($tag->recent_clicks ?? 0)) }} recent clicks
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center gap-2 text-white">
|
||||
<i class="fa-solid fa-hashtag text-sky-300"></i>
|
||||
<h3 class="text-xl font-semibold tracking-tight">{{ $tag->name }}</h3>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-sm leading-6 text-white/56">
|
||||
{{ number_format($tag->artworks_count) }} artworks tagged. Open the feed to see the strongest matches first.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-white/72 transition group-hover:text-white">
|
||||
Browse tag
|
||||
<i class="fa-solid fa-arrow-right text-xs transition group-hover:translate-x-0.5"></i>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="mt-8 rounded-[1.75rem] border border-white/[0.08] bg-white/[0.02] p-6 md:p-7">
|
||||
<div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-white/40">All tags</p>
|
||||
<h2 class="mt-2 text-2xl font-semibold text-white">
|
||||
{{ $query !== '' ? 'Search results' : 'Browse the full catalog' }}
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-sm text-white/46">
|
||||
Showing {{ number_format($tags->count()) }} of {{ number_format($tags->total()) }} tags.
|
||||
@if($query !== '')
|
||||
<span>Matching "{{ $query }}".</span>
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if($tags->isNotEmpty())
|
||||
<div class="mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||||
@foreach($tags as $tag)
|
||||
<a href="{{ route('tags.show', $tag->slug) }}" class="group flex min-h-[132px] flex-col justify-between rounded-[1.25rem] border border-white/[0.08] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-4 transition duration-200 hover:border-sky-400/28 hover:bg-sky-400/[0.07] hover:shadow-[0_16px_40px_rgba(14,165,233,0.08)]">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/[0.05] text-sky-300 transition group-hover:bg-sky-400/12">
|
||||
<i class="fa-solid fa-hashtag text-sm"></i>
|
||||
</div>
|
||||
<span class="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-white/38">
|
||||
{{ number_format($tag->artworks_count) }} artworks
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h3 class="text-lg font-semibold tracking-tight text-white">{{ $tag->name }}</h3>
|
||||
<p class="mt-1 text-sm text-white/44">#{{ $tag->slug }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between text-sm text-white/58 transition group-hover:text-white/78">
|
||||
<span>{{ number_format($tag->usage_count) }} total uses</span>
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex justify-center">
|
||||
{{ $tags->withQueryString()->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="mt-6 rounded-[1.4rem] border border-dashed border-white/12 bg-black/20 px-8 py-12 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-white/[0.05] text-sky-300">
|
||||
<i class="fa-solid fa-tags text-xl"></i>
|
||||
</div>
|
||||
<h3 class="mt-5 text-xl font-semibold text-white">No tags matched this search</h3>
|
||||
<p class="mx-auto mt-2 max-w-xl text-sm leading-6 text-white/50">
|
||||
Try a broader keyword, remove punctuation, or reset the search to return to the full tag catalog.
|
||||
</p>
|
||||
<div class="mt-6 flex justify-center">
|
||||
<a href="{{ route('tags.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white/72 transition hover:bg-white/[0.08] hover:text-white">
|
||||
View all tags
|
||||
<i class="fa-solid fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<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">No tags found.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user