Update (config): enable canonical

Update (migration): Add category type
Add (admin): Add post cliffhanger

resources/css/front-app.css

@@ -52,3 +52,21 @@ footer.image-caption {
   text-align: center;
   opacity: 0.7;
 }
+
+.glow-1 {
+  -webkit-box-shadow: 0px 0px 9px 5px rgba(45, 255, 196, 0.38);
+  -moz-box-shadow: 0px 0px 9px 5px rgba(45, 255, 196, 0.38);
+  box-shadow: 0px 0px 9px 5px rgba(45, 255, 196, 0.38);
+}
+
+.glow-2 {
+  -webkit-box-shadow: 0px 0px 9px 5px rgba(238, 46, 255, 0.38);
+  -moz-box-shadow: 0px 0px 9px 5px rgba(238, 46, 255, 0.38);
+  box-shadow: 0px 0px 9px 5px rgba(238, 46, 255, 0.38);
+}
+
+.glow-3 {
+  -webkit-box-shadow: 0px 0px 9px 5px rgba(46, 147, 255, 0.38);
+  -moz-box-shadow: 0px 0px 9px 5px rgba(46, 147, 255, 0.38);
+  box-shadow: 0px 0px 9px 5px rgba(46, 147, 255, 0.38);
+}

resources/js/vue/PostEditor.vue

@@ -17,6 +17,24 @@
           </small>
         </div>
 
+        <div class="form-floating mb-3">
+          <textarea
+            v-model="post.cliffhanger"
+            class="form-control"
+            style="min-height: 150px"
+            placeholder="Enter a post cliffhanger"
+          ></textarea>
+          <label>Write a post cliffhanger (optional)</label>
+          <div class="alert mt-1">
+            Cliffhanger examples: "<i
+              >Can Alpinestars Tech-Air redefine motorcycle safety? Find out
+              now.</i
+            >" or "<i
+              >Are they worth the hype? Stay tuned for our in-depth review."</i
+            >
+          </div>
+        </div>
+
         <div class="form-floating mb-3">
           <textarea
             v-model="post.excerpt"
@@ -222,8 +240,9 @@ export default {
         title: "",
         slug: "",
         excerpt: "",
+        cliffhanger: "",
         author_id: null,
-        featured: false,
+        featured: true,
         publish_date: null,
         featured_image: null,
         body: {
@@ -592,6 +611,7 @@ export default {
         tmp.slug = post.slug;
         tmp.publish_date = post.publish_date;
         tmp.excerpt = post.excerpt;
+        tmp.cliffhanger = post.cliffhanger;
         tmp.author_id = post.author_id;
         tmp.featured = post.featured;
         tmp.featured_image = post.featured_image;

resources/js/ziggy.js

@@ -1,4 +1,4 @@
-const Ziggy = {"url":"https:\/\/productalert.co","port":null,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"]},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"]},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"]},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"]},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"api.auth.login.post":{"uri":"api\/login","methods":["POST"]},"api.auth.logout.post":{"uri":"api\/logout","methods":["POST"]},"api.admin.post.get":{"uri":"api\/admin\/post\/{id}","methods":["GET","HEAD"]},"api.admin.country-locales":{"uri":"api\/admin\/country-locales","methods":["GET","HEAD"]},"api.admin.categories":{"uri":"api\/admin\/categories\/{country_locale_slug}","methods":["GET","HEAD"]},"api.admin.authors":{"uri":"api\/admin\/authors","methods":["GET","HEAD"]},"api.admin.upload.cloud.image":{"uri":"api\/admin\/image\/upload","methods":["POST"]},"api.admin.post.upsert":{"uri":"api\/admin\/admin\/post\/upsert","methods":["POST"]},"feeds.main":{"uri":"posts.rss","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"password.update":{"uri":"password\/reset","methods":["POST"]},"password.confirm":{"uri":"password\/confirm","methods":["GET","HEAD"]},"dashboard":{"uri":"admin","methods":["GET","HEAD"]},"about":{"uri":"admin\/about","methods":["GET","HEAD"]},"users.index":{"uri":"admin\/users","methods":["GET","HEAD"]},"posts.manage":{"uri":"admin\/posts","methods":["GET","HEAD"]},"posts.manage.edit":{"uri":"admin\/posts\/edit\/{post_id}","methods":["GET","HEAD"]},"posts.manage.delete":{"uri":"admin\/posts\/delete\/{post_id}","methods":["GET","HEAD"]},"posts.manage.indexing":{"uri":"admin\/posts\/indexing\/{post_id}","methods":["GET","HEAD"]},"posts.manage.new":{"uri":"admin\/posts\/new","methods":["GET","HEAD"]},"profile.show":{"uri":"admin\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"admin\/profile","methods":["PUT"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"home.country":{"uri":"{country}","methods":["GET","HEAD"]},"home.country.posts":{"uri":"{country}\/posts","methods":["GET","HEAD"]},"home.country.post":{"uri":"{country}\/posts\/{post_slug}","methods":["GET","HEAD"]},"home.country.category":{"uri":"{country}\/{category}","methods":["GET","HEAD"]}}};
+const Ziggy = {"url":"https:\/\/productalert.co","port":null,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"]},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"]},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"]},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"]},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"api.auth.login.post":{"uri":"api\/login","methods":["POST"]},"api.auth.logout.post":{"uri":"api\/logout","methods":["POST"]},"api.admin.post.get":{"uri":"api\/admin\/post\/{id}","methods":["GET","HEAD"]},"api.admin.country-locales":{"uri":"api\/admin\/country-locales","methods":["GET","HEAD"]},"api.admin.categories":{"uri":"api\/admin\/categories\/{country_locale_slug}","methods":["GET","HEAD"]},"api.admin.authors":{"uri":"api\/admin\/authors","methods":["GET","HEAD"]},"api.admin.upload.cloud.image":{"uri":"api\/admin\/image\/upload","methods":["POST"]},"api.admin.post.upsert":{"uri":"api\/admin\/admin\/post\/upsert","methods":["POST"]},"feeds.main":{"uri":"posts.rss","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"password.update":{"uri":"password\/reset","methods":["POST"]},"password.confirm":{"uri":"password\/confirm","methods":["GET","HEAD"]},"dashboard":{"uri":"admin","methods":["GET","HEAD"]},"admin.changelog":{"uri":"admin\/changelog","methods":["GET","HEAD"]},"about":{"uri":"admin\/about","methods":["GET","HEAD"]},"users.index":{"uri":"admin\/users","methods":["GET","HEAD"]},"posts.manage":{"uri":"admin\/posts","methods":["GET","HEAD"]},"posts.manage.edit":{"uri":"admin\/posts\/edit\/{post_id}","methods":["GET","HEAD"]},"posts.manage.delete":{"uri":"admin\/posts\/delete\/{post_id}","methods":["GET","HEAD"]},"posts.manage.indexing":{"uri":"admin\/posts\/indexing\/{post_id}","methods":["GET","HEAD"]},"posts.manage.new":{"uri":"admin\/posts\/new","methods":["GET","HEAD"]},"profile.show":{"uri":"admin\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"admin\/profile","methods":["PUT"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"home.country":{"uri":"{country}","methods":["GET","HEAD"]},"home.country.posts":{"uri":"{country}\/posts","methods":["GET","HEAD"]},"home.country.post":{"uri":"{country}\/posts\/{post_slug}","methods":["GET","HEAD"]},"home.country.category":{"uri":"{country}\/{category}","methods":["GET","HEAD"]}}};
 
 if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
     Object.assign(Ziggy.routes, window.Ziggy.routes);

resources/views/admin/changelog.blade.php

@@ -0,0 +1,47 @@
+@extends('layouts.admin.app')
+
+@section('content')
+    <div class="container-xl">
+        <!-- Page title -->
+        <div class="page-header d-print-none">
+            <h2 class="page-title">
+                {{ __('Changelog') }}
+            </h2>
+        </div>
+    </div>
+    <div class="page-body">
+        <div class="container-xl">
+            <div class="card">
+                <div class="card-body">
+                    <p class="fw-bold mb-0">Change Log 3/8/2023 7.43pm</p>
+                    <ul>
+                        <li>(Improvement) Improve post UI outside front</li>
+                        <li>(Fix) SEO problems</li>
+                        <li>(Feature) Add cliffhanger field in post</li>
+                    </ul>
+
+                    <p class="fw-bold mb-0">Change Log 2/8/2023 12.03am</p>
+                    <ul>
+                        <li>(Feature) Add Delete Forever button</li>
+                        <li>(Feature) Add Index to Search Engines button</li>
+                        <li>(Feature) Auto set author on new post</li>
+                        <li>(Feature) Only publish status must fill in all post fields, others status can save with minimum
+                            title and
+                            slug only</li>
+                        <li>(Fix) Post list has timezone error</li>
+                    </ul>
+
+                    <p class="fw-bold mb-0">Change Log 1/8/2023 10.35pm</p>
+                    <ul>
+                        <li>(Feature) Auto set category on new post</li>
+                        <li>(Feature) Auto set author on new post</li>
+                        <li>(Feature) Only publish status must fill in all post fields, others status can save with minimum
+                            title and
+                            slug only</li>
+                        <li>(Fix) Post list has timezone error</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection

resources/views/admin/partials/webmaster_announcement.blade.php

@@ -2,25 +2,14 @@
     <div class="card-body">
         <h3 class="">Webmaster Announcement</h3>
         <div class="text-muted">
-            <p class="fw-bold mb-0">Change Log 2/8/2023 12.03am</p>
+            <p class="fw-bold mb-0">Change Log 3/8/2023 7.43pm</p>
             <ul>
-                <li>(Feature) Add Delete Forever button</li>
-                <li>(Feature) Add Index to Search Engines button</li>
-                <li>(Feature) Auto set author on new post</li>
-                <li>(Feature) Only publish status must fill in all post fields, others status can save with minimum
-                    title and
-                    slug only</li>
-                <li>(Fix) Post list has timezone error</li>
-            </ul>
-            <p class="fw-bold mb-0">Change Log 1/8/2023 10.35pm</p>
-            <ul>
-                <li>(Feature) Auto set category on new post</li>
-                <li>(Feature) Auto set author on new post</li>
-                <li>(Feature) Only publish status must fill in all post fields, others status can save with minimum
-                    title and
-                    slug only</li>
-                <li>(Fix) Post list has timezone error</li>
+                <li>(Improvement) Improve post UI outside front</li>
+                <li>(Fix) SEO problems</li>
+                <li>(Feature) Add cliffhanger field in post</li>
             </ul>
+
         </div>
+        <a href="{{ route('admin.changelog') }}">View all changelogs here</a>
     </div>
 </div>

resources/views/front/country.blade.php

@@ -17,54 +17,9 @@
                 <h3 class="h4 fw-bold text-center mb-3">Featured Articles</h3>
                 <div class="row g-3 justify-content-center">
                     @foreach ($featured_posts as $post)
-                        <div class="col-12 col-xl-3">
+                        <div class="col-9 col-md-6 col-xl-3">
 
-                            <div class="card shadow-sm" style="height:100%;">
-                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
-                                    class="text-decoration-none">
-                                    <div class="card-img-top ratio ratio-16x9">
-                                        <div class="lqip-loader">
-                                            <!-- Use the LQIP image with the appropriate URL -->
-                                            <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
-
-                                            <!-- Use the final JPEG image with the appropriate URL -->
-                                            <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}"
-                                                alt="Placeholder image of {{ $post->name }}">
-                                        </div>
-
-                                    </div>
-                                </a>
-
-                                <div class="card-body d-flex justify-content-between flex-column">
-
-                                    <div class="mb-2">
-
-                                        <p class="card-text fw-bold">
-                                            <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
-                                                class="text-decoration-none">{{ $post->title }}</a>
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <p class="card-text mb-0">
-                                            <small>in </small>
-                                            @foreach ($post->post_categories as $post_category)
-                                                <small><a class="text-decoration-none"
-                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
-                                                </small>
-                                                @if (!$loop->last)
-                                                    ,
-                                                @endif
-                                            @endforeach
-                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
-                                        </p>
-                                        <div class="d-flex justify-content-between align-items-center">
-                                            <small
-                                                class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
-                                            {{-- <small class="text-body-secondary">9 min read</small> --}}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                            @include('front.partials.featured_post_card', ['post' => $post])
 
                         </div>
                     @endforeach
@@ -83,55 +38,9 @@ class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
                             {{ get_country_name_by_iso($country_locale->country_iso) }}</h3>
                         <div class="row g-3">
                             @foreach ($latest_posts as $post)
-                                <div class="col-lg-6">
+                                <div class="col-12 col-lg-6">
 
-                                    <div class="card" style="height:100%;">
-                                        <div class="row g-0">
-                                            <div class="col-md-5">
-                                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
-                                                    class="text-decoration-none">
-                                                    <div class="img-fluid rounded-start ratio ratio-16x9">
-                                                        <div class="lqip-loader">
-                                                            <!-- Use the LQIP image with the appropriate URL -->
-                                                            <img src="{{ $post->featured_image }}"
-                                                                alt="Photo of {{ $post->name }}">
-
-                                                            <!-- Use the final JPEG image with the appropriate URL -->
-                                                            <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}"
-                                                                alt="Placeholder image of {{ $post->name }}">
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div class="col-md-7">
-                                                <div class="card-body d-flex justify-content-between flex-column"
-                                                    style="height:100%;">
-                                                    <div>
-                                                        <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
-                                                            class="text-decoration-none">
-                                                            <p class="card-title fw-bold">{{ $post->title }}</p>
-                                                        </a>
-                                                    </div>
-                                                    <div class="d-flex justify-content-between align-items-center">
-                                                        <p class="card-text mb-0">
-                                                            <small>in </small>
-                                                            @foreach ($post->post_categories as $post_category)
-                                                                <small><a class="text-decoration-none"
-                                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
-                                                                </small>
-                                                                @if (!$loop->last)
-                                                                    ,
-                                                                @endif
-                                                            @endforeach
-                                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
-                                                        </p>
-                                                        <small
-                                                            class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                    @include('front.partials.small_list_card', ['post' => $post])
                                 </div>
                             @endforeach
 

resources/views/front/country_all.blade.php

@@ -23,42 +23,7 @@
                             <div class="my-3">
 
 
-                                <div class="card mb-3">
-
-                                    <div class="card-body">
-                                        <h5 class="card-title">
-                                            <a class="text-decoration-none fw-bold"
-                                                href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
-                                        </h5>
-
-                                        <p class="card-text">
-                                            in
-                                            @foreach ($post->post_categories as $post_category)
-                                                <small><a class="text-decoration-none"
-                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
-                                                </small>
-                                            @endforeach
-                                            <small
-                                                class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
-                                        </p>
-
-                                    </div>
-                                    <a class="card-img-top"
-                                        href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
-                                        <div class="img-fluid rounded-start ratio ratio-16x9">
-                                            <div class="lqip-loader">
-                                                <!-- Use the LQIP image with the appropriate URL -->
-                                                <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
-
-                                                <!-- Use the final JPEG image with the appropriate URL -->
-                                                <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}"
-                                                    alt="Placeholder image of {{ $post->name }}">
-                                            </div>
-                                        </div>
-                                    </a>
-
-                                </div>
-
+                                @include('front.partials.post_list_card', ['post' => $post])
 
                             </div>
                         @endforeach

resources/views/front/country_category.blade.php

@@ -22,42 +22,7 @@
                             <div class="my-3">
 
 
-                                <div class="card mb-3">
-
-                                    <div class="card-body">
-                                        <h5 class="card-title">
-                                            <a class="text-decoration-none fw-bold"
-                                                href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
-                                        </h5>
-
-                                        <p class="card-text">
-                                            in
-                                            @foreach ($post->post_categories as $post_category)
-                                                <small><a class="text-decoration-none"
-                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
-                                                </small>
-                                            @endforeach
-                                            <small
-                                                class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
-                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
-                                        </p>
-
-                                    </div>
-                                    <a class="card-img-top"
-                                        href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
-                                        <div class="img-fluid rounded-start ratio ratio-16x9">
-                                            <div class="lqip-loader">
-                                                <!-- Use the LQIP image with the appropriate URL -->
-                                                <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}">
-
-                                                <!-- Use the final JPEG image with the appropriate URL -->
-                                                <img class="lqip-frozen" src="{{ $post->featured_image_lqip }}"
-                                                    alt="Placeholder image of {{ $post->name }}">
-                                            </div>
-                                        </div>
-                                    </a>
-
-                                </div>
+                                @include('front.partials.post_list_card', ['post' => $post])
 
 
                             </div>

resources/views/front/partials/featured_post_card.blade.php

@@ -0,0 +1,57 @@
+                            <div class="card border-0 glow-{{ $loop->index + 1 }}" style="height:100%;">
+                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
+                                    class="text-decoration-none">
+                                    <div class="card-img-top ratio ratio-16x9">
+                                        <div class="lqip-loader">
+                                            <!-- Use the LQIP image with the appropriate URL -->
+                                            <img class="img-fluid rounded-top" src="{{ $post->featured_image }}"
+                                                alt="Photo of {{ $post->name }}">
+
+                                            <!-- Use the final JPEG image with the appropriate URL -->
+                                            <img class="img-fluid lqip-frozen" src="{{ $post->featured_image_lqip }}"
+                                                alt="Placeholder image of {{ $post->name }}">
+                                        </div>
+
+                                    </div>
+                                </a>
+
+                                <div class="card-body d-flex justify-content-between flex-column">
+
+                                    <div class="mb-2">
+
+                                        <p class="card-text fw-bold">
+                                            <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
+                                                class="text-decoration-none">{{ $post->title }}</a>
+                                        </p>
+                                    </div>
+                                    @if (!is_empty($post->cliffhanger))
+                                        <div class="mb-3">
+                                            <small class="text-secondary">{{ $post->cliffhanger }}</small>
+                                        </div>
+                                    @else
+                                        <div class="mb-3">
+                                            <small class="text-secondary">{{ $post->excerpt }}</small>
+                                        </div>
+                                    @endif
+
+                                    <div>
+                                        <p class="card-text mb-0">
+                                            <small>in </small>
+                                            @foreach ($post->post_categories as $post_category)
+                                                <small><a class="text-decoration-none"
+                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
+                                                </small>
+                                                @if (!$loop->last)
+                                                    ,
+                                                @endif
+                                            @endforeach
+                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
+                                        </p>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <small
+                                                class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
+                                            {{-- <small class="text-body-secondary">9 min read</small> --}}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>

resources/views/front/partials/post_list_card.blade.php

@@ -0,0 +1,48 @@
+                                <div class="card border-0 shadow-lg mb-34">
+
+                                    <div class="card-body">
+                                        <h5 class="card-title">
+                                            <a class="text-decoration-none fw-bold"
+                                                href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
+                                        </h5>
+
+                                        @if (!is_empty($post->cliffhanger))
+                                            <div class="mb-3">
+                                                <small class="text-secondary">{{ $post->cliffhanger }}</small>
+                                            </div>
+                                        @else
+                                            <div class="mb-3">
+                                                <small class="text-secondary">{{ $post->excerpt }}</small>
+                                            </div>
+                                        @endif
+
+                                        <p class="card-text">
+                                            in
+                                            @foreach ($post->post_categories as $post_category)
+                                                <small><a class="text-decoration-none"
+                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
+                                                </small>
+                                            @endforeach
+                                            <small
+                                                class="text-body-secondary ms-2">{{ $post->publish_date->format('j F Y') }}</small>
+                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
+                                        </p>
+
+                                    </div>
+                                    <a class="card-img-top"
+                                        href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}">
+                                        <div class="img-fluid rounded-start ratio ratio-16x9">
+                                            <div class="lqip-loader">
+                                                <!-- Use the LQIP image with the appropriate URL -->
+                                                <img class="img-fluid rounded-bottom" src="{{ $post->featured_image }}"
+                                                    alt="Photo of {{ $post->name }}">
+
+                                                <!-- Use the final JPEG image with the appropriate URL -->
+                                                <img class="lqip-frozen img-fluid rounded-bottom"
+                                                    src="{{ $post->featured_image_lqip }}"
+                                                    alt="Placeholder image of {{ $post->name }}">
+                                            </div>
+                                        </div>
+                                    </a>
+
+                                </div>

resources/views/front/partials/small_list_card.blade.php

@@ -0,0 +1,48 @@
+                                    <div class="card border-0 shadow-lg" style="height:100%;">
+                                        <div class="row g-0">
+                                            <div class="col-5 p-3 m-auto">
+                                                <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
+                                                    class="text-decoration-none">
+                                                    <div class="ratio ratio-16x9">
+                                                        <div class="lqip-loader img-fluid rounded ">
+                                                            <!-- Use the LQIP image with the appropriate URL -->
+                                                            <img class="img-fluid" src="{{ $post->featured_image }}"
+                                                                alt="Photo of {{ $post->name }}">
+
+                                                            <!-- Use the final JPEG image with the appropriate URL -->
+                                                            <img class="lqip-frozen img-fluid rounded "
+                                                                src="{{ $post->featured_image_lqip }}"
+                                                                alt="Placeholder image of {{ $post->name }}">
+                                                        </div>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="col-7">
+                                                <div class="card-body d-flex justify-content-between flex-column"
+                                                    style="height:100%;">
+                                                    <div>
+                                                        <a href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post_slug' => $post->slug]) }}"
+                                                            class="text-decoration-none">
+                                                            <p class="card-title fw-bold">{{ $post->title }}</p>
+                                                        </a>
+                                                    </div>
+                                                    <div class="d-flex justify-content-between align-items-center">
+                                                        <p class="card-text mb-0">
+                                                            <small>in </small>
+                                                            @foreach ($post->post_categories as $post_category)
+                                                                <small><a class="text-decoration-none"
+                                                                        href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => $post_category->category->slug]) }}">{{ $post_category->category->name }}</a>
+                                                                </small>
+                                                                @if (!$loop->last)
+                                                                    ,
+                                                                @endif
+                                                            @endforeach
+                                                            {{-- <small class="text-body-secondary ms-2">3 min read</small> --}}
+                                                        </p>
+                                                        <small
+                                                            class="text-body-secondary">{{ $post->publish_date->format('j F Y') }}</small>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>