feat: Nova homepage, profile redesign, and legacy view system overhaul
Homepage
- Add HomepageService with hero, trending (award-weighted), fresh uploads,
popular tags, creator spotlight (weekly uploads ranking), and news sections
- Add React components: HomePage, HomeHero, HomeTrending, HomeFresh,
HomeTags, HomeCreators, HomeNews (lazy-loaded below the fold)
- Wire home.blade.php with JSON props, SEO meta, JSON-LD, and hero preload
- Add HomePage.jsx to vite.config.js inputs
Profile page
- Hero banner with random user artwork as background + dark gradient overlay
- Favourites section uses real Artwork models + <x-artwork-card> for CDN URLs
- Newest artworks grid: gallery-grid → grid grid-cols-2 gap-4
Edit Profile page (user.blade.php)
- Add hero banner (featured wallpaper/photography via artwork_features,
content_type_id IN [2,3]) sourced in UserController
- Remove bg-deep from outer wrapper; card backgrounds: bg-panel → bg-nova-800
- Remove stray AI-generated tag fragment from template
Author profile links
- Fix all /@username routes in: HomepageService, MonthlyCommentatorsController,
LatestCommentsController, MyBuddiesController and corresponding blade views
Legacy view namespace
- Register View::addNamespace('legacy', resource_path('views/_legacy'))
in AppServiceProvider::boot()
- Convert all view('legacy.x') and @include('legacy.x') calls to legacy::x
- Migrate legacy views to resources/views/_legacy/ with namespace support
This commit is contained in:
@@ -8,10 +8,10 @@
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid legacy-page">
|
||||
@include('legacy.home.featured')
|
||||
@include('legacy::home.featured')
|
||||
|
||||
@include('legacy.home.uploads')
|
||||
@include('legacy::home.uploads')
|
||||
|
||||
@include('legacy.home.news')
|
||||
@include('legacy::home.news')
|
||||
</div>
|
||||
@endsection
|
||||
@@ -19,15 +19,16 @@
|
||||
$friendId = $b->friend_id ?? $b->friendId ?? null;
|
||||
@endphp
|
||||
|
||||
@php $buddyUrl = ($b->user_username ?? null) ? '/@' . $b->user_username : '/profile/' . $friendId; @endphp
|
||||
<div class="icon-flex">
|
||||
<div>
|
||||
<a href="/profile/{{ $friendId }}/{{ Str::slug($uname) }}">
|
||||
<a href="{{ $buddyUrl }}">
|
||||
<h4>{{ $uname }}</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="/profile/{{ $friendId }}/{{ Str::slug($uname) }}">
|
||||
<a href="{{ $buddyUrl }}">
|
||||
<img src="{{ \App\Support\AvatarUrl::forUser((int) $friendId, null, 50) }}" alt="{{ $uname }}">
|
||||
</a>
|
||||
</div>
|
||||
@@ -65,13 +65,10 @@
|
||||
<meta property="og:url" content="{{ $page_canonical ?? url()->current() }}">
|
||||
<style>
|
||||
.profile-hero-bg {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(15,23,36,0.98) 0%,
|
||||
rgba(21,30,46,0.95) 50%,
|
||||
rgba(9,16,26,0.98) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile-hero-bg::before {
|
||||
.profile-hero-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -79,6 +76,7 @@
|
||||
radial-gradient(ellipse at 20% 50%, rgba(77,163,255,.12), transparent 60%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(224,122,33,.08), transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.nova-panel {
|
||||
background: var(--panel-dark);
|
||||
@@ -162,7 +160,17 @@
|
||||
{{-- ═══════════════════════════════════════════════════════════
|
||||
PROFILE HERO
|
||||
═══════════════════════════════════════════════════════════ --}}
|
||||
<div class="profile-hero-bg border-b border-[--sb-line]">
|
||||
<div class="profile-hero-bg border-b border-[--sb-line]"
|
||||
@if(!empty($heroBgUrl))
|
||||
style="background: url('{{ $heroBgUrl }}') center/cover no-repeat;"
|
||||
@else
|
||||
style="background: linear-gradient(135deg, rgba(15,23,36,1) 0%, rgba(21,30,46,1) 50%, rgba(9,16,26,1) 100%);"
|
||||
@endif
|
||||
>
|
||||
{{-- Dark overlay so the content stays readable --}}
|
||||
@if(!empty($heroBgUrl))
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-[#0f1724]/95 via-[#0f1724]/80 to-[#0f1724]/60"></div>
|
||||
@endif
|
||||
<div class="relative z-10 max-w-screen-xl mx-auto px-4 py-8">
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-end gap-5">
|
||||
|
||||
@@ -350,7 +358,7 @@
|
||||
</div>
|
||||
<div class="nova-panel-body">
|
||||
@if(isset($artworks) && !$artworks->isEmpty())
|
||||
<div class="gallery-grid"
|
||||
<div class="gallery-grid grid grid-cols-2 gap-4"
|
||||
data-nova-gallery
|
||||
data-gallery-type="profile"
|
||||
data-gallery-grid
|
||||
@@ -380,12 +388,9 @@
|
||||
Favourites
|
||||
</div>
|
||||
<div class="nova-panel-body">
|
||||
<div class="fav-grid">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@foreach($favourites as $fav)
|
||||
<a href="/art/{{ $fav->id }}/{{ \Illuminate\Support\Str::slug($fav->name) }}"
|
||||
title="{{ e($fav->name) }}">
|
||||
<img src="{{ $fav->thumb }}" alt="{{ e($fav->name) }}" loading="lazy">
|
||||
</a>
|
||||
<x-artwork-card :art="$fav" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="container_photo gallery_box">
|
||||
<div class="grid-sizer"></div>
|
||||
@foreach ($artworks as $art)
|
||||
@include('legacy._artwork_card', ['art' => $art])
|
||||
@include('legacy::_artwork_card', ['art' => $art])
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@@ -15,16 +15,39 @@
|
||||
: \App\Support\AvatarUrl::default();
|
||||
@endphp
|
||||
|
||||
<div class="min-h-screen bg-deep text-white py-12">
|
||||
@push('styles')
|
||||
<style>
|
||||
.edit-profile-hero { position: relative; overflow: hidden; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
{{-- ── Hero background ──────────────────────────────────────────────── --}}
|
||||
<div class="edit-profile-hero border-b border-[--sb-line]"
|
||||
@if(!empty($heroBgUrl))
|
||||
style="background: url('{{ $heroBgUrl }}') center/cover no-repeat;"
|
||||
@else
|
||||
style="background: linear-gradient(135deg, rgba(15,23,36,1) 0%, rgba(21,30,46,1) 50%, rgba(9,16,26,1) 100%);"
|
||||
@endif
|
||||
>
|
||||
@if(!empty($heroBgUrl))
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-[#0f1724]/95 via-[#0f1724]/80 to-[#0f1724]/50"></div>
|
||||
@endif
|
||||
<div class="relative z-10 max-w-5xl mx-auto px-4 py-10 flex items-end gap-5">
|
||||
<img src="{{ $currentAvatarUrl }}"
|
||||
alt="Your avatar"
|
||||
class="w-20 h-20 rounded-full object-cover border-4 border-[--sb-line] shadow-lg shrink-0">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Edit Profile</h1>
|
||||
<p class="text-sm text-[--sb-muted] mt-1">Manage your account settings</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-screen text-white py-12">
|
||||
|
||||
<!-- Container -->
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-3xl font-semibold mb-8">
|
||||
Edit Profile
|
||||
</h1>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="mb-4 rounded-lg bg-red-700/10 border border-red-700/20 p-3 text-sm text-red-300">
|
||||
<div class="font-semibold mb-2">Please fix the following errors:</div>
|
||||
@@ -38,7 +61,7 @@
|
||||
|
||||
|
||||
<!-- ================= Profile Card ================= -->
|
||||
<div class="bg-panel rounded-xl shadow-lg p-8 mb-10">
|
||||
<div class="bg-nova-800 rounded-xl shadow-lg p-8 mb-10">
|
||||
|
||||
<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@@ -237,7 +260,7 @@
|
||||
|
||||
|
||||
<!-- ================= PASSWORD CARD ================= -->
|
||||
<div class="bg-panel rounded-xl shadow-lg p-8">
|
||||
<div class="bg-nova-800 rounded-xl shadow-lg p-8">
|
||||
|
||||
<h2 class="text-xl font-semibold mb-6">
|
||||
Change Password
|
||||
@@ -59,9 +59,17 @@
|
||||
<body class="bg-nova-900 text-white min-h-screen flex flex-col" @if($selectedAuthBg) style="background: url('{{ $selectedAuthBg }}') center/cover no-repeat; background-attachment: fixed;" @endif>
|
||||
|
||||
<!-- React Topbar mount point -->
|
||||
<div id="topbar-root"></div>
|
||||
<div id="topbar-root"
|
||||
@auth
|
||||
data-user-id="{{ Auth::id() }}"
|
||||
data-display-name="{{ Auth::user()->name ?? '' }}"
|
||||
data-username="{{ Auth::user()->username ?? '' }}"
|
||||
data-avatar-url="{{ \App\Support\AvatarUrl::forUser((int) Auth::id(), optional(Auth::user()->profile)->avatar_hash, 64) }}"
|
||||
data-upload-url="{{ Route::has('upload') ? route('upload') : '/upload' }}"
|
||||
@endauth
|
||||
></div>
|
||||
@include('layouts.nova.toolbar')
|
||||
<main class="flex-1 pt-16">
|
||||
<main class="flex-1 @yield('main-class', 'pt-16')">
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
[#6223] Red Cloud XP
|
||||
→ windows-logo, retro-computing, red-dominant-colour, dark-mood, pixelated-graphics, digital-art, grunge-texture, office-shortcuts-menu, 90s-aesthetic, chromatic-aberration, high-contrast, textured-background
|
||||
[#6225] Helping Hand zoomers (part 1)
|
||||
→ desktop screenshot, computer icons, windows interface, digital-art, blue-grey tones, flat design, minimalist-style, iconography, organized layout, technical illustration, screen capture, system icons
|
||||
[#6226] Helping Hand zoomers (part 2)
|
||||
PS D:\Sites\Skinbase26>
|
||||
@@ -18,7 +18,7 @@
|
||||
@foreach ($comments as $comment)
|
||||
@php
|
||||
$artUrl = '/art/' . (int)($comment->id ?? 0) . '/' . ($comment->artwork_slug ?? 'artwork');
|
||||
$userUrl = '/profile/' . (int)($comment->commenter_id ?? 0) . '/' . rawurlencode($comment->uname ?? 'user');
|
||||
$userUrl = ($comment->commenter_username ?? null) ? '/@' . $comment->commenter_username : '/profile/' . (int)($comment->commenter_id ?? 0);
|
||||
$avatarUrl = \App\Support\AvatarUrl::forUser((int)($comment->commenter_id ?? 0), $comment->icon ?? null, 40);
|
||||
$ago = \Carbon\Carbon::parse($comment->datetime ?? now())->diffForHumans();
|
||||
$snippet = \Illuminate\Support\Str::limit(strip_tags($comment->comment_description ?? ''), 160);
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
@foreach ($rows as $i => $row)
|
||||
@php
|
||||
$rank = $offset + $i + 1;
|
||||
$profileUrl = '/profile/' . (int)($row->user_id ?? 0) . '/' . rawurlencode($row->uname ?? 'user');
|
||||
$profileUrl = ($row->user_username ?? null) ? '/@' . $row->user_username : '/profile/' . (int)($row->user_id ?? 0);
|
||||
$avatarUrl = \App\Support\AvatarUrl::forUser((int)($row->user_id ?? 0), null, 40);
|
||||
@endphp
|
||||
<div class="grid grid-cols-[3rem_1fr_auto] items-center gap-4 px-5 py-4
|
||||
|
||||
@@ -1,17 +1,70 @@
|
||||
@extends('layouts.nova')
|
||||
|
||||
@php
|
||||
use Illuminate\Support\Str;
|
||||
use Carbon\Carbon;
|
||||
use App\Services\LegacyService;
|
||||
@endphp
|
||||
@push('head')
|
||||
<title>{{ $meta['title'] }}</title>
|
||||
<meta name="description" content="{{ $meta['description'] }}">
|
||||
<meta name="keywords" content="{{ $meta['keywords'] }}">
|
||||
<link rel="canonical" href="{{ $meta['canonical'] }}">
|
||||
|
||||
{{-- Open Graph --}}
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="Skinbase">
|
||||
<meta property="og:title" content="{{ $meta['title'] }}">
|
||||
<meta property="og:description" content="{{ $meta['description'] }}">
|
||||
<meta property="og:url" content="{{ $meta['canonical'] }}">
|
||||
@if(!empty($meta['og_image']))
|
||||
<meta property="og:image" content="{{ $meta['og_image'] }}">
|
||||
<meta property="og:image:type" content="image/webp">
|
||||
@endif
|
||||
|
||||
{{-- Twitter --}}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ $meta['title'] }}">
|
||||
<meta name="twitter:description" content="{{ $meta['description'] }}">
|
||||
@if(!empty($meta['og_image']))
|
||||
<meta name="twitter:image" content="{{ $meta['og_image'] }}">
|
||||
@endif
|
||||
|
||||
{{-- JSON-LD WebSite schema --}}
|
||||
@php
|
||||
$websiteSchema = [
|
||||
'@context' => 'https://schema.org',
|
||||
'@type' => 'WebSite',
|
||||
'name' => 'Skinbase',
|
||||
'url' => url('/'),
|
||||
'description' => $meta['description'],
|
||||
'potentialAction' => [
|
||||
'@type' => 'SearchAction',
|
||||
'target' => url('/search') . '?q={search_term_string}',
|
||||
'query-input' => 'required name=search_term_string',
|
||||
],
|
||||
];
|
||||
@endphp
|
||||
<script type="application/ld+json">{!! json_encode($websiteSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
|
||||
|
||||
{{-- Preload hero image for faster LCP --}}
|
||||
@if(!empty($props['hero']['thumb_lg']))
|
||||
<link rel="preload" as="image" href="{{ $props['hero']['thumb_lg'] }}">
|
||||
@elseif(!empty($props['hero']['thumb']))
|
||||
<link rel="preload" as="image" href="{{ $props['hero']['thumb'] }}">
|
||||
@endif
|
||||
@endpush
|
||||
|
||||
@section('main-class', '')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen">
|
||||
@include('web.home.featured')
|
||||
{{-- Inline props for the React component (avoids data-attribute length limits) --}}
|
||||
<script id="homepage-props" type="application/json">
|
||||
{!! json_encode($props, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
|
||||
</script>
|
||||
|
||||
@include('web.home.uploads')
|
||||
|
||||
@include('web.home.news')
|
||||
<div id="homepage-root" class="min-h-screen">
|
||||
{{-- Loading skeleton (replaced by React on hydration) --}}
|
||||
<div class="flex min-h-[60vh] items-center justify-center">
|
||||
<div class="h-8 w-8 animate-spin rounded-full border-4 border-nova-500 border-t-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@vite(['resources/js/Pages/Home/HomePage.jsx'])
|
||||
@endsection
|
||||
|
||||
|
||||
Reference in New Issue
Block a user