Save workspace changes
This commit is contained in:
@@ -0,0 +1,335 @@
|
||||
@php
|
||||
$gridVersion = request()->query('grid') === 'v2' ? 'v2' : 'v1';
|
||||
$deferToolbarSearch = request()->routeIs('index');
|
||||
$deferFontAwesome = request()->routeIs('index');
|
||||
$deferWebManifest = request()->routeIs('index');
|
||||
$isInertiaPage = isset($page) && is_array($page);
|
||||
$shouldRenderBladeSeo = ($useUnifiedSeo ?? false) && (($renderBladeSeo ?? false) || ! $isInertiaPage);
|
||||
$novaViteEntries = [
|
||||
'resources/css/app.css',
|
||||
'resources/css/nova-grid.css',
|
||||
'resources/scss/nova.scss',
|
||||
'resources/js/nova.js',
|
||||
];
|
||||
|
||||
if (!$deferToolbarSearch) {
|
||||
$novaViteEntries[] = 'resources/js/entry-search.jsx';
|
||||
}
|
||||
@endphp
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ app()->getLocale() }}" data-grid-version="{{ $gridVersion }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
@if($shouldRenderBladeSeo)
|
||||
@include('partials.seo.head', ['seo' => $seo ?? null])
|
||||
@endif
|
||||
|
||||
{{-- Global RSS feed discovery --}}
|
||||
<link rel="alternate" type="application/rss+xml" title="Skinbase Latest Artworks" href="{{ url('/rss') }}">
|
||||
|
||||
<!-- Icons: keep CDN delivery, but keep homepage webfonts out of the initial critical path -->
|
||||
@if(!$deferFontAwesome)
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
|
||||
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" as="style" crossorigin>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" media="print" onload="this.media='all'" crossorigin>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin>
|
||||
</noscript>
|
||||
@endif
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
||||
@if(!$deferWebManifest)
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
@endif
|
||||
@vite($novaViteEntries)
|
||||
@stack('head')
|
||||
|
||||
@if($deferToolbarSearch)
|
||||
<script type="module">
|
||||
(() => {
|
||||
const searchEntryUrl = @js(Vite::asset('resources/js/entry-search.jsx'));
|
||||
let searchLoaded = false;
|
||||
|
||||
const loadSearch = (intent = null) => {
|
||||
if (searchLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (intent) {
|
||||
window.__sbSearchIntent = intent;
|
||||
}
|
||||
|
||||
searchLoaded = true;
|
||||
cleanup();
|
||||
import(searchEntryUrl);
|
||||
};
|
||||
|
||||
const resolveIntent = (eventTarget) => {
|
||||
return eventTarget?.closest?.('[data-search-intent]')?.getAttribute('data-search-intent') || null;
|
||||
};
|
||||
|
||||
const handlePointerEnter = () => {
|
||||
loadSearch();
|
||||
};
|
||||
|
||||
const handleActivate = (event) => {
|
||||
const intent = resolveIntent(event.target);
|
||||
loadSearch(intent);
|
||||
};
|
||||
|
||||
const handleShortcut = (event) => {
|
||||
if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k')) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
loadSearch(window.matchMedia('(max-width: 767px)').matches ? 'mobile' : 'desktop');
|
||||
};
|
||||
|
||||
const onReady = () => {
|
||||
const searchRoot = document.getElementById('topbar-search-root');
|
||||
if (!searchRoot) {
|
||||
return;
|
||||
}
|
||||
|
||||
searchRoot.addEventListener('pointerenter', handlePointerEnter, { once: true, passive: true });
|
||||
searchRoot.addEventListener('click', handleActivate, { passive: true });
|
||||
searchRoot.addEventListener('touchstart', handleActivate, { passive: true });
|
||||
document.addEventListener('keydown', handleShortcut);
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
const searchRoot = document.getElementById('topbar-search-root');
|
||||
if (searchRoot) {
|
||||
searchRoot.removeEventListener('pointerenter', handlePointerEnter);
|
||||
searchRoot.removeEventListener('click', handleActivate);
|
||||
searchRoot.removeEventListener('touchstart', handleActivate);
|
||||
}
|
||||
document.removeEventListener('keydown', handleShortcut);
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', onReady, { once: true });
|
||||
} else {
|
||||
onReady();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@if($deferFontAwesome)
|
||||
<script>
|
||||
(() => {
|
||||
const href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
|
||||
const linkId = 'deferred-font-awesome';
|
||||
let loaded = false;
|
||||
|
||||
const loadFontAwesome = () => {
|
||||
if (loaded || document.getElementById(linkId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
loaded = true;
|
||||
cleanup();
|
||||
|
||||
const link = document.createElement('link');
|
||||
link.id = linkId;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = href;
|
||||
link.crossOrigin = 'anonymous';
|
||||
document.head.appendChild(link);
|
||||
};
|
||||
|
||||
const onReady = () => {
|
||||
const toolbar = document.getElementById('nova-toolbar');
|
||||
|
||||
if (toolbar) {
|
||||
toolbar.addEventListener('pointerenter', loadFontAwesome, { once: true, passive: true });
|
||||
toolbar.addEventListener('focusin', loadFontAwesome, { once: true, passive: true });
|
||||
toolbar.addEventListener('pointerdown', loadFontAwesome, { once: true, passive: true });
|
||||
}
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
const toolbar = document.getElementById('nova-toolbar');
|
||||
|
||||
if (toolbar) {
|
||||
toolbar.removeEventListener('pointerenter', loadFontAwesome);
|
||||
toolbar.removeEventListener('focusin', loadFontAwesome);
|
||||
toolbar.removeEventListener('pointerdown', loadFontAwesome);
|
||||
}
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', onReady, { once: true });
|
||||
} else {
|
||||
onReady();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@if($isInertiaPage)
|
||||
@inertiaHead
|
||||
@endif
|
||||
|
||||
@if(config('services.google_adsense.publisher_id'))
|
||||
{{-- Google AdSense — consent-gated loader --}}
|
||||
{{-- Script is only injected after the user accepts all cookies. --}}
|
||||
{{-- If consent was given on a previous visit it fires on page load. --}}
|
||||
<script>
|
||||
(function () {
|
||||
var PUB = '{{ config('services.google_adsense.publisher_id') }}';
|
||||
var SCRIPT_ID = 'adsense-js';
|
||||
|
||||
function injectAdsense() {
|
||||
if (document.getElementById(SCRIPT_ID)) return;
|
||||
var s = document.createElement('script');
|
||||
s.id = SCRIPT_ID;
|
||||
s.async = true;
|
||||
s.crossOrigin = 'anonymous';
|
||||
s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + PUB;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
// Expose so Alpine consent banner can trigger immediately on accept
|
||||
window.sbLoadAds = injectAdsense;
|
||||
|
||||
// If the user already consented on a previous visit, load straight away
|
||||
if (localStorage.getItem('sb_cookie_consent') === 'all') {
|
||||
injectAdsense();
|
||||
}
|
||||
|
||||
// Handle consent granted in another tab
|
||||
window.addEventListener('storage', function (e) {
|
||||
if (e.key === 'sb_cookie_consent' && e.newValue === 'all') {
|
||||
injectAdsense();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
</head>
|
||||
@php
|
||||
$authBgRoutes = [
|
||||
'login', 'register', 'register.notice', 'password.request', 'password.reset',
|
||||
'verification.notice', 'registration.verify', 'setup.password.create', 'setup.username.create', 'password.confirm'
|
||||
];
|
||||
$useAuthBackground = request()->route() && in_array(request()->route()->getName(), $authBgRoutes);
|
||||
$authBackgrounds = [
|
||||
'/gfx/skinbase_back_001.webp',
|
||||
'/gfx/skinbase_back_002.webp',
|
||||
'/gfx/skinbase_back_003.webp',
|
||||
'/gfx/skinbase_back_004.webp',
|
||||
];
|
||||
$selectedAuthBg = $useAuthBackground ? $authBackgrounds[array_rand($authBackgrounds)] : null;
|
||||
@endphp
|
||||
|
||||
<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"
|
||||
@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 @yield('main-class', 'pt-16')">
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
@include('layouts.nova.footer')
|
||||
|
||||
{{-- Toast notifications (Alpine) --}}
|
||||
@php
|
||||
$toastMessage = session('status') ?? session('error') ?? null;
|
||||
$toastType = session('error') ? 'error' : 'success';
|
||||
$toastBorder = session('error') ? 'border-red-500' : 'border-green-500';
|
||||
@endphp
|
||||
@if($toastMessage)
|
||||
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" x-cloak
|
||||
class="fixed right-4 bottom-6 z-50">
|
||||
<div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nova-600 border {{ $toastBorder }}">
|
||||
<div class="px-4 py-3 flex items-start gap-3">
|
||||
<div class="flex-shrink-0">
|
||||
@if(session('error'))
|
||||
<svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/></svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-1 text-sm text-white/95">{!! nl2br(e($toastMessage)) !!}</div>
|
||||
<button @click="show=false" class="text-white/60 hover:text-white">
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l8 8M6 14L14 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
{{-- Cookie Consent Banner --}}
|
||||
<div
|
||||
x-data="{
|
||||
show: false,
|
||||
init() {
|
||||
if (!localStorage.getItem('sb_cookie_consent')) {
|
||||
this.show = true;
|
||||
}
|
||||
},
|
||||
accept() {
|
||||
localStorage.setItem('sb_cookie_consent', 'all');
|
||||
this.show = false;
|
||||
if (typeof window.sbLoadAds === 'function') window.sbLoadAds();
|
||||
},
|
||||
essential() {
|
||||
localStorage.setItem('sb_cookie_consent', 'essential');
|
||||
this.show = false;
|
||||
}
|
||||
}"
|
||||
x-show="show"
|
||||
x-cloak
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-4"
|
||||
class="fixed bottom-0 left-0 right-0 z-50 border-t border-orange-400/30 bg-orange-950/50 backdrop-blur-2xl px-4 md:px-8 py-5"
|
||||
role="dialog"
|
||||
aria-label="Cookie consent"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
|
||||
<div class="flex items-start gap-3 flex-1">
|
||||
<span class="text-orange-400 mt-0.5 shrink-0 text-lg">🍪</span>
|
||||
<p class="text-sm text-orange-100/90 leading-relaxed">
|
||||
We use <strong class="text-white">essential cookies</strong> to keep you logged in and protect your session.
|
||||
With your permission we also load <strong class="text-white">advertising cookies</strong> from third-party networks.
|
||||
<a href="/privacy-policy#cookies" class="text-orange-300 hover:text-orange-200 hover:underline ml-1">Learn more ↗</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
@click="essential()"
|
||||
class="rounded-lg border border-orange-400/40 px-4 py-2 text-sm text-orange-200 hover:text-white hover:border-orange-400/70 hover:bg-white/5 transition-colors"
|
||||
>Essential only</button>
|
||||
<button
|
||||
@click="accept()"
|
||||
class="rounded-lg bg-orange-500 hover:bg-orange-400 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-orange-900/40 transition-colors"
|
||||
>Accept all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user