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

33
resources/js/Pages/Forum/ForumEditPost.jsx
View File

@@ -2,9 +2,12 @@ import React, { useState, useCallback } from 'react'
import Breadcrumbs from '../../components/forum/Breadcrumbs'
import Button from '../../components/ui/Button'
import RichTextEditor from '../../components/forum/RichTextEditor'
import TurnstileField from '../../components/security/TurnstileField'
import { populateBotFingerprint } from '../../lib/security/botFingerprint'
export default function ForumEditPost({ post, thread, csrfToken, errors = {} }) {
export default function ForumEditPost({ post, thread, csrfToken, errors = {}, captcha = {} }) {
const [content, setContent] = useState(post?.content ?? '')
const [captchaToken, setCaptchaToken] = useState('')
const [submitting, setSubmitting] = useState(false)
const breadcrumbs = [
@@ -18,6 +21,10 @@ export default function ForumEditPost({ post, thread, csrfToken, errors = {} })
if (submitting) return
setSubmitting(true)
// Let the form submit normally for PRG
populateBotFingerprint(e.currentTarget).finally(() => {
e.currentTarget.submit()
})
e.preventDefault()
}, [submitting])
return (
@@ -39,6 +46,20 @@ export default function ForumEditPost({ post, thread, csrfToken, errors = {} })
>
<input type="hidden" name="_token" value={csrfToken} />
<input type="hidden" name="_method" value="PUT" />
<input type="text" name="homepage_url" defaultValue="" autoComplete="off" className="hidden" aria-hidden="true" tabIndex={-1} />
<input type="hidden" name="_bot_fingerprint" value="" />
<input type="hidden" name={captcha.inputName || 'cf-turnstile-response'} value={captchaToken} />
{errors.bot ? (
<div className="rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">
{Array.isArray(errors.bot) ? errors.bot[0] : errors.bot}
</div>
) : null}
{errors.captcha ? (
<div className="rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
{Array.isArray(errors.captcha) ? errors.captcha[0] : errors.captcha}
</div>
) : null}
{/* Rich text editor */}
<div>
@@ -56,6 +77,16 @@ export default function ForumEditPost({ post, thread, csrfToken, errors = {} })
<input type="hidden" name="content" value={content} />
</div>
{captcha.siteKey ? (
<TurnstileField
provider={captcha.provider}
siteKey={captcha.siteKey}
scriptUrl={captcha.scriptUrl}
onToken={setCaptchaToken}
className="rounded-lg border border-white/10 bg-black/20 p-3"
/>
) : null}
{/* Actions */}
<div className="flex items-center justify-between pt-2">
<a

30
resources/js/Pages/Forum/ForumNewThread.jsx
View File

@@ -3,10 +3,13 @@ import Breadcrumbs from '../../components/forum/Breadcrumbs'
import Button from '../../components/ui/Button'
import TextInput from '../../components/ui/TextInput'
import RichTextEditor from '../../components/forum/RichTextEditor'
import TurnstileField from '../../components/security/TurnstileField'
import { populateBotFingerprint } from '../../lib/security/botFingerprint'
export default function ForumNewThread({ category, csrfToken, errors = {}, oldValues = {} }) {
export default function ForumNewThread({ category, csrfToken, errors = {}, oldValues = {}, captcha = {} }) {
const [title, setTitle] = useState(oldValues.title ?? '')
const [content, setContent] = useState(oldValues.content ?? '')
const [captchaToken, setCaptchaToken] = useState('')
const [submitting, setSubmitting] = useState(false)
const slug = category?.slug
@@ -25,6 +28,7 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa
setSubmitting(true)
// Standard form submission to keep server-side validation + redirect
await populateBotFingerprint(e.currentTarget)
e.target.submit()
}, [submitting])
@@ -48,6 +52,20 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa
className="space-y-5 rounded-2xl border border-white/[0.06] bg-nova-800/50 p-6 backdrop-blur"
>
<input type="hidden" name="_token" value={csrfToken} />
<input type="text" name="homepage_url" defaultValue="" autoComplete="off" className="hidden" aria-hidden="true" tabIndex={-1} />
<input type="hidden" name="_bot_fingerprint" value="" />
<input type="hidden" name={captcha.inputName || 'cf-turnstile-response'} value={captchaToken} />
{errors.bot ? (
<div className="rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">
{Array.isArray(errors.bot) ? errors.bot[0] : errors.bot}
</div>
) : null}
{errors.captcha ? (
<div className="rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
{Array.isArray(errors.captcha) ? errors.captcha[0] : errors.captcha}
</div>
) : null}
<TextInput
label="Title"
@@ -76,6 +94,16 @@ export default function ForumNewThread({ category, csrfToken, errors = {}, oldVa
<input type="hidden" name="content" value={content} />
</div>
{captcha.siteKey ? (
<TurnstileField
provider={captcha.provider}
siteKey={captcha.siteKey}
scriptUrl={captcha.scriptUrl}
onToken={setCaptchaToken}
className="rounded-lg border border-white/10 bg-black/20 p-3"
/>
) : null}
{/* Submit */}
<div className="flex items-center justify-between pt-2">
<a href={`/forum/${slug}`} className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">

2
resources/js/Pages/Forum/ForumThread.jsx
View File

@@ -20,6 +20,7 @@ export default function ForumThread({
canModerate = false,
csrfToken = '',
status = null,
captcha = {},
}) {
const [currentSort, setCurrentSort] = useState(sort)
@@ -161,6 +162,7 @@ export default function ForumThread({
prefill={replyPrefill}
quotedAuthor={quotedPost?.user?.name}
csrfToken={csrfToken}
captcha={captcha}
/>
)
) : (

61
resources/js/Pages/Home/HomeFresh.jsx
View File

@@ -1,55 +1,5 @@
import React from 'react'
const FALLBACK = 'https://files.skinbase.org/default/missing_md.webp'
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
function FreshCard({ item }) {
const username = item.author_username ? `@${item.author_username}` : null
return (
<article>
<a
href={item.url}
className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
>
<div className="relative aspect-video overflow-hidden bg-neutral-900">
{/* Gloss sheen */}
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
<img
src={item.thumb || FALLBACK}
alt={item.title}
className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
loading="lazy"
decoding="async"
onError={(e) => { e.currentTarget.src = FALLBACK }}
/>
{/* Top-right View badge */}
<div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
</div>
{/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
<div className="truncate text-sm font-semibold text-white">{item.title}</div>
<div className="mt-1 flex items-center gap-2 text-xs text-white/80">
<img
src={item.author_avatar || AVATAR_FALLBACK}
alt={item.author}
className="w-6 h-6 rounded-full object-cover shrink-0"
onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
/>
<span className="truncate">{item.author}</span>
{username && <span className="text-white/50 shrink-0">{username}</span>}
</div>
</div>
</div>
<span className="sr-only">{item.title} by {item.author}</span>
</a>
</article>
)
}
import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
export default function HomeFresh({ items }) {
if (!Array.isArray(items) || items.length === 0) return null
@@ -63,11 +13,10 @@ export default function HomeFresh({ items }) {
</a>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5">
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
<FreshCard key={item.id} item={item} />
))}
</div>
<ArtworkGalleryGrid
items={items.slice(0, 8)}
showStats={false}
/>
</section>
)
}

61
resources/js/Pages/Home/HomeTrending.jsx
View File

@@ -1,55 +1,5 @@
import React from 'react'
const FALLBACK = 'https://files.skinbase.org/default/missing_md.webp'
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
function ArtCard({ item }) {
const username = item.author_username ? `@${item.author_username}` : null
return (
<article className="min-w-[72%] snap-start sm:min-w-[44%] lg:min-w-0">
<a
href={item.url}
className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
>
<div className="relative aspect-video overflow-hidden bg-neutral-900">
{/* Gloss sheen */}
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
<img
src={item.thumb || FALLBACK}
alt={item.title}
className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
loading="lazy"
decoding="async"
onError={(e) => { e.currentTarget.src = FALLBACK }}
/>
{/* Top-right View badge */}
<div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
<span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
</div>
{/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
<div className="truncate text-sm font-semibold text-white">{item.title}</div>
<div className="mt-1 flex items-center gap-2 text-xs text-white/80">
<img
src={item.author_avatar || AVATAR_FALLBACK}
alt={item.author}
className="w-6 h-6 rounded-full object-cover shrink-0"
onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
/>
<span className="truncate">{item.author}</span>
{username && <span className="text-white/50 shrink-0">{username}</span>}
</div>
</div>
</div>
<span className="sr-only">{item.title} by {item.author}</span>
</a>
</article>
)
}
import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
export default function HomeTrending({ items }) {
if (!Array.isArray(items) || items.length === 0) return null
@@ -65,11 +15,10 @@ export default function HomeTrending({ items }) {
</a>
</div>
<div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 lg:grid lg:grid-cols-5 lg:overflow-visible">
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
<ArtCard key={item.id} item={item} />
))}
</div>
<ArtworkGalleryGrid
items={items.slice(0, 8)}
className="xl:grid-cols-4"
/>
</section>
)
}

48
resources/js/Pages/Home/HomeTrendingForYou.jsx
View File

@@ -1,45 +1,5 @@
import React from 'react'
const FALLBACK = 'https://files.skinbase.org/default/missing_md.webp'
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
function ArtCard({ item }) {
const username = item.author_username ? `@${item.author_username}` : null
return (
<article>
<a
href={item.url}
className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
>
<div className="relative aspect-video overflow-hidden bg-neutral-900">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
<img
src={item.thumb || FALLBACK}
alt={item.title}
className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
loading="lazy"
decoding="async"
onError={(e) => { e.currentTarget.src = FALLBACK }}
/>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100">
<div className="truncate text-sm font-semibold text-white">{item.title}</div>
<div className="mt-1 flex items-center gap-2 text-xs text-white/80">
<img
src={item.author_avatar || AVATAR_FALLBACK}
alt={item.author}
className="w-5 h-5 rounded-full object-cover shrink-0"
onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
/>
<span className="truncate">{item.author}</span>
{username && <span className="text-white/50 shrink-0">{username}</span>}
</div>
</div>
</div>
<span className="sr-only">{item.title} by {item.author}</span>
</a>
</article>
)
}
import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
/**
* Personalized trending: artworks matching user's top tags, sorted by trending score.
@@ -60,11 +20,7 @@ export default function HomeTrendingForYou({ items, preferences }) {
See all →
</a>
</div>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
<ArtCard key={item.id} item={item} />
))}
</div>
<ArtworkGalleryGrid items={items.slice(0, 8)} compact />
</section>
)
}

1
resources/js/components/Topbar.jsx
View File

@@ -21,6 +21,7 @@ export default function Topbar({ user = null }) {
</div>
<div className="flex items-center gap-3 sm:gap-4">
<a href="/community/activity" className="hidden sm:inline text-sm text-neutral-300 hover:text-sky-400 transition-colors">Community</a>
<a href="/forum" className="hidden sm:inline text-sm text-neutral-300 hover:text-sky-400 transition-colors">Forum</a>
{user ? (

30
resources/js/components/forum/ReplyForm.jsx
View File

@@ -1,9 +1,12 @@
import React, { useState, useRef, useCallback } from 'react'
import Button from '../ui/Button'
import RichTextEditor from './RichTextEditor'
import TurnstileField from '../security/TurnstileField'
import { buildBotFingerprint } from '../../lib/security/botFingerprint'
export default function ReplyForm({ topicKey, prefill = '', quotedAuthor = null, csrfToken }) {
export default function ReplyForm({ topicKey, prefill = '', quotedAuthor = null, csrfToken, captcha = {} }) {
const [content, setContent] = useState(prefill)
const [captchaToken, setCaptchaToken] = useState('')
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState(null)
const formRef = useRef(null)
@@ -16,16 +19,24 @@ export default function ReplyForm({ topicKey, prefill = '', quotedAuthor = null,
setError(null)
try {
const fingerprint = await buildBotFingerprint()
const res = await fetch(`/forum/topic/${topicKey}/reply`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrfToken,
'X-Bot-Fingerprint': fingerprint,
'X-Captcha-Token': captchaToken,
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
credentials: 'same-origin',
body: JSON.stringify({ content: content.trim() }),
body: JSON.stringify({
content: content.trim(),
homepage_url: '',
_bot_fingerprint: fingerprint,
[captcha.inputName || 'cf-turnstile-response']: captchaToken,
}),
})
if (res.ok) {
@@ -33,9 +44,10 @@ export default function ReplyForm({ topicKey, prefill = '', quotedAuthor = null,
window.location.reload()
} else if (res.status === 422) {
const json = await res.json()
setError(json.errors?.content?.[0] ?? 'Validation error.')
setError(json.errors?.content?.[0] ?? json.errors?.bot?.[0] ?? json.message ?? 'Validation error.')
} else {
setError('Failed to post reply. Please try again.')
const json = await res.json().catch(() => ({}))
setError(json?.errors?.bot?.[0] ?? json?.message ?? 'Failed to post reply. Please try again.')
}
} catch {
setError('Network error. Please try again.')
@@ -66,6 +78,16 @@ export default function ReplyForm({ topicKey, prefill = '', quotedAuthor = null,
/>
{/* Submit */}
{captcha.siteKey ? (
<TurnstileField
provider={captcha.provider}
siteKey={captcha.siteKey}
scriptUrl={captcha.scriptUrl}
onToken={setCaptchaToken}
className="rounded-lg border border-white/10 bg-black/20 p-3"
/>
) : null}
<div className="flex items-center justify-end">
<Button
type="submit"

20
resources/js/components/gallery/CategoryPillCarousel.css
View File

@@ -157,23 +157,3 @@
transform: none;
}
.nb-react-drag-zone {
position: absolute;
left: 48px;
right: 48px;
bottom: 0;
height: 12px;
z-index: 1;
cursor: grab;
-webkit-tap-highlight-color: transparent;
}
.nb-react-drag-zone:active {
cursor: grabbing;
}
@media (hover: none) and (pointer: coarse) {
.nb-react-drag-zone {
display: none;
}
}

53
resources/js/components/gallery/CategoryPillCarousel.jsx
View File

@@ -12,16 +12,18 @@ export default function CategoryPillCarousel({
}) {
const viewportRef = useRef(null);
const stripRef = useRef(null);
const dragZoneRef = useRef(null);
const animationRef = useRef(0);
const suppressClickRef = useRef(false);
const dragStateRef = useRef({
active: false,
started: false,
captured: false,
pointerId: null,
pointerType: 'mouse',
startX: 0,
startY: 0,
startOffset: 0,
startedOnLink: false,
});
const [offset, setOffset] = useState(0);
@@ -157,13 +159,10 @@ export default function CategoryPillCarousel({
useEffect(() => {
const strip = stripRef.current;
const dragZone = dragZoneRef.current;
if (!strip || !dragZone) return;
if (!strip) return;
const onPointerDown = (event) => {
const isMouse = event.pointerType === 'mouse';
const fromDragZone = event.currentTarget === dragZone;
if (isMouse && !fromDragZone) return;
if (event.pointerType === 'mouse' && event.button !== 0) return;
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
@@ -172,16 +171,15 @@ export default function CategoryPillCarousel({
dragStateRef.current.active = true;
dragStateRef.current.started = false;
dragStateRef.current.captured = false;
dragStateRef.current.pointerId = event.pointerId;
dragStateRef.current.pointerType = event.pointerType || 'mouse';
dragStateRef.current.startX = event.clientX;
dragStateRef.current.startY = event.clientY;
dragStateRef.current.startOffset = offset;
dragStateRef.current.startedOnLink = !!event.target.closest('.nb-react-pill');
setDragging(false);
if (strip.setPointerCapture) {
try { strip.setPointerCapture(event.pointerId); } catch (_) { /* no-op */ }
}
};
const onPointerMove = (event) => {
@@ -189,13 +187,24 @@ export default function CategoryPillCarousel({
if (!state.active || state.pointerId !== event.pointerId) return;
const dx = event.clientX - state.startX;
const threshold = state.pointerType === 'touch' ? 12 : 8;
const dy = event.clientY - state.startY;
const threshold = state.pointerType === 'touch'
? 12
: (state.startedOnLink ? 24 : 12);
if (!state.started) {
if (Math.abs(dx) <= threshold) {
if (Math.abs(dx) <= threshold || Math.abs(dx) <= Math.abs(dy)) {
return;
}
state.started = true;
if (!state.captured && strip.setPointerCapture) {
try {
strip.setPointerCapture(event.pointerId);
state.captured = true;
} catch (_) {
state.captured = false;
}
}
setDragging(true);
}
@@ -213,12 +222,14 @@ export default function CategoryPillCarousel({
suppressClickRef.current = state.started;
state.active = false;
state.started = false;
state.startedOnLink = false;
state.pointerId = null;
setDragging(false);
if (strip.releasePointerCapture) {
if (state.captured && strip.releasePointerCapture) {
try { strip.releasePointerCapture(event.pointerId); } catch (_) { /* no-op */ }
}
state.captured = false;
};
const onClickCapture = (event) => {
@@ -234,22 +245,12 @@ export default function CategoryPillCarousel({
strip.addEventListener('pointercancel', onPointerUpOrCancel);
strip.addEventListener('click', onClickCapture, true);
dragZone.addEventListener('pointerdown', onPointerDown);
dragZone.addEventListener('pointermove', onPointerMove);
dragZone.addEventListener('pointerup', onPointerUpOrCancel);
dragZone.addEventListener('pointercancel', onPointerUpOrCancel);
return () => {
strip.removeEventListener('pointerdown', onPointerDown);
strip.removeEventListener('pointermove', onPointerMove);
strip.removeEventListener('pointerup', onPointerUpOrCancel);
strip.removeEventListener('pointercancel', onPointerUpOrCancel);
strip.removeEventListener('click', onClickCapture, true);
dragZone.removeEventListener('pointerdown', onPointerDown);
dragZone.removeEventListener('pointermove', onPointerMove);
dragZone.removeEventListener('pointerup', onPointerUpOrCancel);
dragZone.removeEventListener('pointercancel', onPointerUpOrCancel);
};
}, [moveTo, offset]);
@@ -307,12 +308,6 @@ export default function CategoryPillCarousel({
>
<svg viewBox="0 0 20 20" fill="currentColor" className="w-[18px] h-[18px]" aria-hidden="true"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"/></svg>
</button>
<div
ref={dragZoneRef}
className="nb-react-drag-zone"
aria-hidden="true"
/>
</div>
);
}

53
resources/js/components/gallery/MasonryGallery.jsx
View File

@@ -1,7 +1,7 @@
import React, {
useState, useEffect, useRef, useCallback, memo,
} from 'react';
import ArtworkCard from './ArtworkCard';
import ArtworkGallery from '../artwork/ArtworkGallery';
import './MasonryGallery.css';
// ── Masonry helpers ────────────────────────────────────────────────────────
@@ -132,6 +132,8 @@ function mapRankApiArtwork(item) {
uname: item.author?.name ?? '',
username: item.author?.username ?? item.author?.name ?? '',
avatar_url: item.author?.avatar_url ?? null,
content_type_name: item.category?.content_type_name ?? item.category?.content_type_slug ?? item.category?.content_type ?? '',
content_type_slug: item.category?.content_type_slug ?? item.category?.content_type ?? '',
category_name: item.category?.name ?? '',
category_slug: item.category?.slug ?? '',
slug: item.slug ?? '',
@@ -164,6 +166,36 @@ async function fetchRankApiArtworks(endpoint, rankType) {
const SKELETON_COUNT = 10;
function getMasonryCardProps(art, idx) {
const title = (art.name || art.title || 'Untitled artwork').trim();
const hasDimensions = Number(art.width) > 0 && Number(art.height) > 0;
const aspectRatio = hasDimensions ? Number(art.width) / Number(art.height) : null;
const categorySlug = (art.category_slug || '').toLowerCase();
const categoryName = (art.category_name || art.category || '').toLowerCase();
const wideCategories = ['photography', 'wallpapers', 'photography-digital', 'wallpaper'];
const wideCategoryNames = ['photography', 'wallpapers'];
const isWideEligible =
aspectRatio !== null &&
aspectRatio > 2.0 &&
(wideCategories.includes(categorySlug) || wideCategoryNames.includes(categoryName));
return {
articleClassName: `nova-card gallery-item artwork relative${isWideEligible ? ' nova-card--wide' : ''}`,
articleStyle: isWideEligible ? { gridColumn: 'span 2' } : undefined,
frameClassName: 'rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 hover:ring-white/15 hover:shadow-[0_8px_30px_rgba(0,0,0,0.6),0_0_0_1px_rgba(255,255,255,0.08)]',
mediaClassName: 'nova-card-media relative w-full overflow-hidden bg-neutral-900',
mediaStyle: hasDimensions ? { aspectRatio: `${art.width} / ${art.height}` } : undefined,
imageSrcSet: art.thumb_srcset || undefined,
imageSizes: '(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 20vw',
imageWidth: hasDimensions ? art.width : undefined,
imageHeight: hasDimensions ? art.height : undefined,
loading: idx < 8 ? 'eager' : 'lazy',
decoding: idx < 8 ? 'sync' : 'async',
fetchPriority: idx === 0 ? 'high' : undefined,
imageClassName: 'nova-card-main-image absolute inset-0 h-full w-full object-cover group-hover:scale-[1.03]',
};
}
// ── Main component ────────────────────────────────────────────────────────
/**
* MasonryGallery
@@ -309,7 +341,7 @@ function MasonryGallery({
// ── Render ─────────────────────────────────────────────────────────────
return (
<section
className="px-6 pb-10 pt-2 md:px-10 is-enhanced"
className="pb-10 pt-2 is-enhanced"
data-nova-gallery
data-gallery-type={galleryType}
data-react-masonry-gallery
@@ -321,17 +353,14 @@ function MasonryGallery({
<>
<div
ref={gridRef}
className={gridClass}
data-gallery-grid
>
{artworks.map((art, idx) => (
<ArtworkCard
key={`${art.id}-${idx}`}
art={art}
loading={idx < 8 ? 'eager' : 'lazy'}
fetchPriority={idx === 0 ? 'high' : undefined}
/>
))}
<ArtworkGallery
items={artworks}
layout="masonry"
className={gridClass}
containerProps={{ 'data-gallery-grid': true }}
resolveCardProps={getMasonryCardProps}
/>
</div>
{/* Infinite scroll sentinel – placed after the grid */}

40
resources/js/components/profile/ProfileHero.jsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from 'react'
import NovaConfirmDialog from '../ui/NovaConfirmDialog'
import ProfileCoverEditor from './ProfileCoverEditor'
/**
@@ -13,6 +14,8 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
const [editorOpen, setEditorOpen] = useState(false)
const [coverUrl, setCoverUrl] = useState(user?.cover_url || heroBgUrl || null)
const [coverPosition, setCoverPosition] = useState(Number.isFinite(user?.cover_position) ? user.cover_position : 50)
const [confirmOpen, setConfirmOpen] = useState(false)
const [pendingFollowState, setPendingFollowState] = useState(null)
const uname = user.username || user.name || 'Unknown'
const displayName = user.name || uname
@@ -23,7 +26,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
const bio = profile?.bio || profile?.about || ''
const toggleFollow = async () => {
const persistFollowState = async (nextState) => {
if (loading) return
setLoading(true)
try {
@@ -43,6 +46,29 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
setLoading(false)
}
const toggleFollow = async () => {
const nextState = !following
if (!nextState) {
setPendingFollowState(nextState)
setConfirmOpen(true)
return
}
await persistFollowState(nextState)
}
const onConfirmUnfollow = async () => {
if (pendingFollowState === null) return
setConfirmOpen(false)
await persistFollowState(pendingFollowState)
setPendingFollowState(null)
}
const onCloseConfirm = () => {
setConfirmOpen(false)
setPendingFollowState(null)
}
return (
<>
<div className="max-w-6xl mx-auto px-4 pt-4">
@@ -228,6 +254,18 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
setCoverPosition(50)
}}
/>
<NovaConfirmDialog
open={confirmOpen}
title="Unfollow creator?"
message={`You will stop seeing updates from @${uname} in your following feed.`}
confirmLabel="Unfollow"
cancelLabel="Keep following"
confirmTone="danger"
onConfirm={onConfirmUnfollow}
onClose={onCloseConfirm}
busy={loading}
/>
</>
)
}

20
resources/js/components/profile/tabs/TabFavourites.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'
import ArtworkCard from '../../gallery/ArtworkCard'
import ArtworkGallery from '../../artwork/ArtworkGallery'
function FavSkeleton() {
return (
@@ -57,16 +57,16 @@ export default function TabFavourites({ favourites, isOwner, username }) {
</div>
) : (
<>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
{items.map((art, i) => (
<ArtworkCard
key={art.id ?? i}
art={art}
loading={i < 8 ? 'eager' : 'lazy'}
/>
))}
<ArtworkGallery
items={items}
layout="grid"
className="grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4"
resolveCardProps={(_, index) => ({
loading: index < 8 ? 'eager' : 'lazy',
})}
>
{loadingMore && Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`sk-${i}`} />)}
</div>
</ArtworkGallery>
{nextCursor && (
<div className="mt-8 text-center">

94
resources/js/components/ui/NovaConfirmDialog.jsx Normal file
View File

@@ -0,0 +1,94 @@
import React, { useEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
export default function NovaConfirmDialog({
open,
title = 'Please confirm',
message,
confirmLabel = 'Confirm',
cancelLabel = 'Cancel',
confirmTone = 'danger',
onConfirm,
onClose,
busy = false,
}) {
const backdropRef = useRef(null)
const cancelButtonRef = useRef(null)
useEffect(() => {
if (!open) return undefined
const timeoutId = window.setTimeout(() => cancelButtonRef.current?.focus(), 60)
return () => window.clearTimeout(timeoutId)
}, [open])
useEffect(() => {
if (!open) return undefined
const handleKeyDown = (event) => {
if (event.key === 'Escape' && !busy) {
onClose?.()
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [busy, onClose, open])
if (!open) return null
const confirmClassName = confirmTone === 'danger'
? 'border border-rose-400/25 bg-rose-500/12 text-rose-100 hover:bg-rose-500/18 focus-visible:ring-rose-300/50'
: 'border border-accent/25 bg-accent/90 text-deep hover:brightness-110 focus-visible:ring-accent/50'
return createPortal(
<div
ref={backdropRef}
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
onClick={(event) => {
if (event.target === backdropRef.current && !busy) {
onClose?.()
}
}}
role="presentation"
>
<div
role="dialog"
aria-modal="true"
aria-labelledby="nova-confirm-title"
className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]"
>
<div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Skinbase Nova</p>
<h3 id="nova-confirm-title" className="mt-2 text-lg font-semibold text-white">
{title}
</h3>
</div>
<div className="px-6 py-5">
<p className="text-sm leading-6 text-white/70">{message}</p>
</div>
<div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
<button
ref={cancelButtonRef}
type="button"
onClick={() => onClose?.()}
disabled={busy}
className="inline-flex items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition hover:bg-white/[0.08] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-60"
>
{cancelLabel}
</button>
<button
type="button"
onClick={() => onConfirm?.()}
disabled={busy}
className={`inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${confirmClassName}`}
>
{busy ? 'Working…' : confirmLabel}
</button>
</div>
</div>
</div>,
document.body,
)
}

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">