updated gallery
This commit is contained in:
@@ -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">·</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">·</span>
|
||||
<span><i class="fas fa-clock mr-1"></i>{{ $article->reading_time }} min read</span>
|
||||
<span class="mx-2">·</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
|
||||
|
||||
Reference in New Issue
Block a user