244 lines
13 KiB
PHP
244 lines
13 KiB
PHP
@php
|
|
$isPreview = (bool) ($previewMode ?? false);
|
|
$articleUrl = $isPreview ? ($previewCanonical ?? url()->current()) : route('news.show', $article->slug);
|
|
$seo = \App\Support\Seo\SeoDataBuilder::fromArray([
|
|
'title' => $article->meta_title ?: $article->title,
|
|
'description' => $article->meta_description ?: Str::limit(strip_tags((string) $article->excerpt), 160),
|
|
'keywords' => $article->meta_keywords,
|
|
'canonical' => $isPreview ? $articleUrl : ($article->canonical_url ?: $articleUrl),
|
|
'robots' => $isPreview ? 'noindex,nofollow' : 'index,follow',
|
|
'og_type' => 'article',
|
|
'og_title' => $article->effective_og_title,
|
|
'og_description' => $article->effective_og_description,
|
|
'og_image' => $article->effective_og_image,
|
|
'breadcrumbs' => 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(),
|
|
])
|
|
->addJsonLd(array_filter([
|
|
'@context' => 'https://schema.org',
|
|
'@type' => 'Article',
|
|
'headline' => $article->title,
|
|
'description' => $article->meta_description ?: Str::limit(strip_tags((string) $article->excerpt), 160),
|
|
'image' => $article->effective_og_image,
|
|
'datePublished' => $article->published_at?->toIso8601String(),
|
|
'dateModified' => $article->updated_at?->toIso8601String(),
|
|
'author' => array_filter([
|
|
'@type' => 'Person',
|
|
'name' => $article->author?->name,
|
|
]),
|
|
'mainEntityOfPage' => $articleUrl,
|
|
], fn (mixed $value): bool => $value !== null && $value !== ''))
|
|
->build();
|
|
@endphp
|
|
|
|
@extends('news.layout', [
|
|
'metaTitle' => $article->meta_title ?: $article->title,
|
|
'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
|
|
'metaCanonical' => $isPreview ? $articleUrl : ($article->canonical_url ?: $articleUrl),
|
|
'metaRobots' => $isPreview ? 'noindex,nofollow' : 'index,follow',
|
|
])
|
|
|
|
@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' => $articleUrl],
|
|
])->filter()->values();
|
|
@endphp
|
|
|
|
<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"
|
|
innerClass="mx-auto max-w-7xl"
|
|
>
|
|
<x-slot name="actions">
|
|
<div class="flex flex-wrap items-center gap-2 text-sm text-white/60">
|
|
<span class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/75">{{ $article->type_label }}</span>
|
|
@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
|
|
@if($article->is_pinned)
|
|
<span class="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1.5 text-amber-100">Pinned</span>
|
|
@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>
|
|
|
|
<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
|
|
@if($isPreview)
|
|
<div class="mb-6 rounded-[24px] border border-indigo-300/20 bg-indigo-400/10 px-5 py-4 text-sm text-indigo-100 shadow-[0_16px_40px_rgba(30,41,59,0.24)]">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-indigo-100/70">Preview mode</div>
|
|
<div class="mt-1">This article preview is visible only to newsroom staff and is excluded from indexing.</div>
|
|
</div>
|
|
@if(!empty($previewBackUrl))
|
|
<a href="{{ $previewBackUrl }}" class="inline-flex items-center gap-2 rounded-full border border-indigo-200/20 bg-indigo-500/10 px-4 py-2 text-sm font-semibold text-indigo-50 transition hover:bg-indigo-500/15">
|
|
<i class="fa-solid fa-arrow-left text-xs"></i>
|
|
Back to editor
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<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
|
|
|
|
<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>
|
|
@if($article->author?->username)
|
|
<a href="{{ route('news.author', $article->author->username) }}" class="transition hover:text-white">{{ $article->author->name ?? $article->author->username }}</a>
|
|
@else
|
|
{{ $article->author?->name ?? 'Skinbase' }}
|
|
@endif
|
|
</span>
|
|
<span>{{ $article->published_at?->format('d M Y') }}</span>
|
|
<span>{{ number_format((int) $article->views) }} views</span>
|
|
</div>
|
|
|
|
@if($article->excerpt)
|
|
<p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
|
|
@endif
|
|
|
|
<div class="story-prose prose prose-invert mt-8 max-w-none text-[1.02rem] leading-8 prose-p:text-white/72 prose-strong:text-white prose-headings:text-white [&_img]:rounded-[24px] [&_img]:border [&_img]:border-white/[0.08] [&_img]:shadow-[0_20px_45px_rgba(0,0,0,0.24)]">
|
|
{!! $article->rendered_content !!}
|
|
</div>
|
|
|
|
@php
|
|
$renderedContent = (string) ($article->rendered_content ?? '');
|
|
$needsInstagramEmbeds = str_contains($renderedContent, 'instagram-media');
|
|
$needsFacebookEmbeds = str_contains($renderedContent, 'fb-post');
|
|
$needsTikTokEmbeds = str_contains($renderedContent, 'tiktok-embed');
|
|
$needsXEmbeds = str_contains($renderedContent, 'twitter-tweet');
|
|
@endphp
|
|
|
|
@if($article->tags->isNotEmpty())
|
|
<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="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
|
|
|
|
<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="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>
|
|
|
|
@if($article->forum_thread_id)
|
|
<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
|
|
|
|
@if($article->commentsAreEnabled() && ! $isPreview)
|
|
<script id="news-comments-props" type="application/json">
|
|
{!! json_encode([
|
|
'articleId' => (int) $article->id,
|
|
'isLoggedIn' => auth()->check(),
|
|
'loginUrl' => route('login'),
|
|
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
|
|
</script>
|
|
|
|
<div id="news-comments-root">
|
|
@include('news._comments', [
|
|
'article' => $article,
|
|
'comments' => $comments ?? collect(),
|
|
'commentsCount' => $commentsCount ?? 0,
|
|
'isPreview' => $isPreview,
|
|
])
|
|
</div>
|
|
|
|
@vite(['resources/js/Pages/News/NewsComments.jsx'])
|
|
@else
|
|
@include('news._comments', [
|
|
'article' => $article,
|
|
'comments' => $comments ?? collect(),
|
|
'commentsCount' => $commentsCount ?? 0,
|
|
'isPreview' => $isPreview,
|
|
])
|
|
@endif
|
|
</div>
|
|
|
|
@include('news._related_entities', ['relatedEntities' => $relatedEntities ?? []])
|
|
|
|
@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>
|
|
<div class="grid gap-5 md:grid-cols-2">
|
|
@foreach($related as $rel)
|
|
@include('news._article_card', ['article' => $rel])
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</article>
|
|
|
|
<aside class="space-y-4">
|
|
@include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@if($needsFacebookEmbeds)
|
|
<div id="fb-root"></div>
|
|
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0"></script>
|
|
@endif
|
|
|
|
@if($needsInstagramEmbeds)
|
|
<script async src="https://www.instagram.com/embed.js"></script>
|
|
@endif
|
|
|
|
@if($needsTikTokEmbeds)
|
|
<script async src="https://www.tiktok.com/embed.js"></script>
|
|
@endif
|
|
|
|
@if($needsXEmbeds)
|
|
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
@endif
|
|
@endpush
|