enable comments for meetup events

app/Models/MeetupEvent.php

@@ -5,10 +5,12 @@ namespace App\Models;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Spatie\Comments\Models\Concerns\HasComments;
 
 class MeetupEvent extends Model
 {
     use HasFactory;
+    use HasComments;
 
     /**
      * The attributes that aren't mass assignable.
@@ -46,4 +48,22 @@ class MeetupEvent extends Model
     {
         return $this->belongsTo(Meetup::class);
     }
+
+    /*
+    * This string will be used in notifications on what a new comment
+    * was made.
+    */
+    public function commentableName(): string
+    {
+        return __('Meetup Event');
+    }
+
+    /*
+     * This URL will be used in notifications to let the user know
+     * where the comment itself can be read.
+     */
+    public function commentUrl(): string
+    {
+        return url()->route('meetup.event.landing', ['country' => $this->meetup->city->country,'meetupEvent' => $this]);
+    }
 }

resources/views/layouts/app.blade.php

@@ -28,8 +28,7 @@
     <script src="{{ asset('vendor/jvector/maps/pt.js') }}"></script>
     <script src="{{ asset('vendor/jvector/maps/pl.js') }}"></script>
     <script src="{{ asset('dist/smoothscroll.js') }}"></script>
-    <script defer src="/assets/fontawesome/brands.min.js"></script>
+    <script defer src="/assets/fontawesome/all.min.js"></script>
-    <script defer src="/assets/fontawesome/thin.min.js"></script>
     <script defer src="/assets/fontawesome/fontawesome.min.js"></script>
     @mapstyles
     @mapscripts

resources/views/layouts/guest.blade.php

@@ -28,8 +28,7 @@
     <script src="{{ asset('vendor/jvector/maps/pt.js') }}"></script>
     <script src="{{ asset('vendor/jvector/maps/pl.js') }}"></script>
     <script src="{{ asset('dist/smoothscroll.js') }}"></script>
-    <script defer src="/assets/fontawesome/brands.min.js"></script>
+    <script defer src="/assets/fontawesome/all.min.js"></script>
-    <script defer src="/assets/fontawesome/thin.min.js"></script>
     <script defer src="/assets/fontawesome/fontawesome.min.js"></script>
     @mapscripts
     <wireui:scripts/>
@@ -37,6 +36,7 @@
     <x-embed-styles />
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <!-- Styles -->
+    <x-comments::styles/>
     @livewireStyles
     <style>
         .comments {

resources/views/livewire/meetup/landing-page-event.blade.php

@@ -6,7 +6,7 @@
 
             <div class="relative py-4 sm:py-4">
                 <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
-                    <div class="relative sm:py-16 lg:py-0">
+                    <div class="relative sm:py-4 lg:py-0">
                         <div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
                             <div class="absolute inset-y-0 right-1/2 w-full rounded-r-3xl lg:right-72"></div>
                             <svg class="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12" width="404"
@@ -21,7 +21,7 @@
                                 <rect width="404" height="392" fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"/>
                             </svg>
                         </div>
-                        <div class="relative mx-auto max-w-md px-6 sm:max-w-3xl lg:max-w-none lg:px-0 lg:py-20">
+                        <div class="relative mx-auto max-w-md px-6 sm:max-w-3xl lg:max-w-none lg:px-0 lg:py-12">
                             <!-- Testimonial card-->
                             <div class="relative overflow-hidden rounded-2xl pt-64 pb-10 shadow-xl">
                                 <img class="absolute inset-0 h-full w-full object-contain"
@@ -42,6 +42,11 @@
                                 </div>
                             </div>
                         </div>
+                        <div>
+                            @if(auth()->check())
+                                <livewire:comments :model="$meetupEvent" newest-first hide-notification-options/>
+                            @endif
+                        </div>
                     </div>
 
                     <div class="relative mx-auto max-w-md px-6 sm:max-w-3xl lg:px-0">
@@ -168,6 +173,10 @@
                                     @endif
                                 </div>
                             </div>
+
+                            <div class="mt-6">
+
+                            </div>
                         </div>
                     </div>
                 </div>