Add news article comments and reactions

resources/views/news/show.blade.php

@@ -64,6 +64,7 @@
     :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">
@@ -125,7 +126,7 @@
                     <p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
                 @endif
 
-                <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">
+                <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>
 
@@ -161,6 +162,34 @@
                         </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 ?? []])