done with featured article in news page

content/collections/article.yaml

@@ -4,7 +4,7 @@ layout: layout
 revisions: false
 route: '/article/{slug}'
 date: true
-sort_dir: asc
+sort_dir: desc
 date_behavior:
   past: public
   future: private

content/collections/article/2024-03-14.the-bola-1.md

@@ -4,9 +4,11 @@ blueprint: article
 title: 'The Bola 1'
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710555199
+updated_at: 1710565321
 date_field: '2024-03-13 08:50'
 image: group-6775.jpg
+article_date: '2024-03-13'
+article_featured: true
 ---
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad
 

content/collections/article/2024-03-14.the-bola-2.md

@@ -4,9 +4,11 @@ blueprint: article
 title: 'The Bola 2'
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710555146
+updated_at: 1710565327
 duplicated_from: f1c71af9-e3fc-459e-8cda-e4a4be1b10f3
 date_field: '2024-03-13 08:50'
 image: group-6774.jpg
+article_date: '2024-03-14'
+article_featured: true
 ---
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?

content/collections/article/2024-03-14.the-bola-3.md

@@ -4,9 +4,11 @@ blueprint: article
 title: 'The Bola 3'
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710555151
+updated_at: 1710565345
 duplicated_from: 5adec921-111f-41b1-ab60-f29e0ffd2f58
 date_field: '2024-03-13 08:50'
 image: group-6773.jpg
+article_date: '2024-03-15'
+article_featured: false
 ---
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?

content/collections/article/2024-03-14.the-bola-4.md

@@ -0,0 +1,14 @@
+---
+id: 7844e490-0684-48a7-a655-a7044a4d9e9f
+blueprint: article
+title: 'The Bola 4'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710565338
+duplicated_from: e41505ec-bbe3-456c-9bbd-36dcc0950727
+date_field: '2024-03-13 08:50'
+image: group-6772.jpg
+article_date: '2024-03-16'
+article_featured: true
+---
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?

public/assets/.meta/group-6772.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 84879
+last_modified: 1710564961
+width: 526
+height: 436
+mime_type: image/jpeg
+duration: null

public/css/main.css

@@ -218,6 +218,14 @@ p {
     background-position: center center;
 }
 
+.article-carousel-item{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding-top:30%;
+    cursor: pointer;
+}
+
 .article-details{
     height: 100%;
     width: 100%;

public/js/main.js

@@ -11645,6 +11645,11 @@ setTimeout(function () {
   aos__WEBPACK_IMPORTED_MODULE_0___default().init();
 }, 500);
 $(document).ready(function () {
+  $('.article-carousel-item').on('click', function () {
+    var redirectlink = $(this).data('href');
+    location.href = redirectlink;
+  });
+
   // this section is for booking page
   //check if booking section exist in any page
   var bookingContainer = $('#booking-section');

resources/blueprints/collections/article/article.yaml

@@ -34,24 +34,33 @@ sections:
           instructions_position: above
           visibility: visible
       -
-        handle: date_field
+        handle: article_date
         field:
           mode: single
-          time_enabled: true
+          time_enabled: false
           time_seconds_enabled: false
           full_width: false
           inline: false
           columns: 1
           rows: 1
-          display: 'Article publish date'
+          display: 'Article date'
           type: date
           icon: date
-          instructions: 'Date of article published'
-          listable: true
+          instructions: 'Published date'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: article_featured
+        field:
+          default: false
+          display: 'Article Featured'
+          type: toggle
+          icon: toggle
+          instructions: 'Put in news carousel highlight'
+          listable: hidden
           instructions_position: above
           visibility: visible
-          validate:
-            - required
   sidebar:
     display: Sidebar
     fields:

resources/css/main.css

@@ -213,6 +213,14 @@ p {
     background-position: center center;
 }
 
+.article-carousel-item{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding-top:30%;
+    cursor: pointer;
+}
+
 .article-details{
     height: 100%;
     width: 100%;

resources/js/main.js

@@ -45,6 +45,12 @@ setTimeout(() => {
 $(document).ready(function () {
 
 
+    $('.article-carousel-item').on('click', function(){
+
+        let redirectlink = $(this).data('href')
+        location.href = redirectlink;
+    })
+
     // this section is for booking page
     //check if booking section exist in any page
     let bookingContainer = $('#booking-section');

resources/views/article/index.antlers copy.html

@@ -0,0 +1,56 @@
+<section>
+    <div class="text-md-center text-light section-2" style="background-image: url(./assets/image/dbparticle2.png);">
+        <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
+            <p class="db-h3 text-highlight">News</p>
+            <p class="mx-auto p-0 about-paragraph db-h5">You can book benue and field to organize your matches according to your preferred date and time.</p>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light section-5 py-7">
+
+        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
+            <div class="carousel-inner text-light">
+                {{ firstEntry = true }}
+                {{ collection:article sort="article_date:desc" }}
+                    {{ if article_featured }}
+                        {{ if firstEntry }}
+                            <div class="carousel-item active">
+                                <div class="container-fluid row">
+                                    <div class="col-6 bg-danger">
+                                        das
+                                    </div>
+                                    <div class="col-6 bg-info">
+                                        das
+                                    </div>
+                                </div>
+                            </div>
+                            {{ firstEntry = false }}
+                        {{ else }}
+                            <div class="carousel-item">
+                                <div class="container-fluid row">
+                                    <div class="col-6 bg-secondary">
+                                        das
+                                    </div>
+                                    <div class="col-6 bg-success">
+                                        das
+                                    </div>
+                                </div>
+                            </div>
+                        {{ /if }}
+                    {{ /if }}
+                {{ /collection:article }}
+            </div>
+
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+
+    </div>
+</section>

resources/views/article/index.antlers.html

@@ -9,10 +9,63 @@
 <section>
     <div class="text-light section-5 py-7">
 
-        <div class="row g-0 article-container">
+        <div class="text-light section-5 article-container">
+
+            <div id="articleCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
+                <div class="carousel-indicators p-0 m-0">
+                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                    <button type="button" data-bs-target="#articleCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                </div>
+                <div class="carousel-inner text-light">
+                    {{ firstEntry = true }}
+                    {{ collection:article sort="article_date:desc" }}
+                        {{ if article_featured }}
+                            {{ if firstEntry }}
+                                <div class="carousel-item active" data-bs-interval="1000000">
+                                    <div class="container-fluid row p-0 mx-auto">
+                                        <div data-href="/article/{{ slug }}" class="col-xl-5 article-carousel-item position-relative" style="background-image: url(.{{ image }});">
+                                            <div class="position-absolute" style="bottom:10px;left:20px">
+                                                <p class="article-details-datetime"> {{ article_date }} </p>
+                                                <hr class="text-db article-details-line" style="height: 5px;"/>
+                                            </div>
+                                        </div>
+                                        <div class="col-xl-7 px-0 py-5 px-xl-5 py-xl-0">
+                                            <p class="db-h3 text-highlight">{{ title }}</p>
+                                            <p>{{ content }}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                {{ firstEntry = false }}
+                            {{ else }}
+                            <div class="carousel-item" data-bs-interval="2000">
+                                <div class="container-fluid row p-0">
+                                    <div data-href="/article/{{ slug }}" class="col-xl-5 article-carousel-item position-relative" style="background-image: url(.{{ image }});">
+                                        <div class="position-absolute" style="bottom:10px;left:40px">
+                                            <p class="article-details-datetime"> {{ article_date }} </p>
+                                            <hr class="text-db article-details-line" style="height: 5px;"/>
+                                        </div>
+                                    </div>
+                                    <div class="col-xl-7 px-0 py-5 px-xl-5 py-xl-0">
+                                        <p class="db-h3 text-highlight">{{ title }}</p>
+                                        <p>{{ content }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            {{ /if }}
+                        {{ /if }}
+                    {{ /collection:article }}
+                </div>
+            </div>
 
-            {{ collection:article }}
-                {{ partial:partials/articlecard }}
+        </div>
+
+        <div class="row g-0 article-container">
+            <p class="text-highlight db-h5 fw-bold">More News</p>
+            {{ collection:article sort="article_date:desc" }}
+                {{ if article_featured == false}}
+                    {{ partial:partials/articlecard }}
+                {{ /if }}
             {{ /collection:article }}
 
         </div>

resources/views/home.antlers.html

@@ -91,12 +91,12 @@
         </div>
         <div class="row g-0 article-container">
 
-            {{ collection:article }}
+            {{ collection:article limit="3" sort="article_date:desc" }}
                 {{ partial:partials/articlecard }}
             {{ /collection:article }}
 
         </div>
-        <button class="nav-link db-btn mx-auto d-none d-lg-block" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">See More</button>
+        <a href="/news" class="nav-link db-btn mx-auto d-none d-lg-block" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;text-decoration: none;">See More</a>
     </div>
 </section>
 <section>

resources/views/partials/_articlecard.antlers.html

@@ -1,11 +1,11 @@
 <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
     <div class="position-relative article-item" style="background-image: url(.{{ image }});">
         <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5 article-details">
-            <p class="article-details-datetime"> {{ date_field }} </p>
+            <p class="article-details-datetime"> {{ article_date }} </p>
             <div class="mt-auto article-details-link">
                 <p class="text-highlight db-h5 fw-bold"> {{ title }} </p>
                 <hr class="text-db article-details-line"/>
-                <p><a href="/article/{{ slug }}" class="text-light d-block article-details-href"> Read More <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                <p><a href="/article/{{ slug }}" class="d-block article-details-href db-link"> Read More <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
             </div>
         </div>
     </div>