anniversary-blogChanges

blocks/anniversary-blogs/anniversary-blogs.css

@@ -1,62 +1,135 @@
-/* Blog card container */
-.blog-cards-container {
-display: flex;
-flex-wrap: wrap;
-gap: 20px;
+/* For the 2-column layout */
+.content .col .blog-cards-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
 }
 
-/* Individual blog card */
-.blog-card {
-width: calc(50% - 10px); /* 50% width with 10px gap between columns */
-background-color: #FFF;
-border-radius: 8px;
-overflow: hidden;
+/* For the 3-cloumn layout */
+.child .content .col .blog-cards-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
 }
 
-/* Blog card image */
-.blog-card img {
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
+.child .content .col .blog-cards-container .blog-card {
+    float: left;
+    width: auto;
 }
 
-/* Blog card title */
-.blog-title {
-    margin: 10px;
-    font-size: 1.2rem;
-    font-weight: bold;
+.child {
+    max-width: 980px;
+    margin: 0 auto; /*Center the container horizontally*/
 }
+
+  /* Styles for the blog cards */
+  .blog-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: #FFF;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    border-radius: 8px;
+    text-align: left;
+   /* transition: transform 0.3s ease-in-out;*/
+  }
 
-/* Blog card description */
-.blog-description {
-    margin: 0 10px 10px;
-    font-size: 1rem;
-}
+  .blog-card p{
+    padding: 0.6em 0;
+  }
+
+  .blog-card h3 {
+    border-left: 0 !important;
+    padding-left: 0 !important;
+    }
 
-/* Read more link */
-.read-more {
+   .blog-card picture {
     display: block;
-    margin: 10px;
-    text-align: right;
-    color: #007bff;
-    text-decoration: none;
-}
+    float: none;
+    max-width: none;
+    overflow: hidden;
+    padding-bottom: 56%;
+    position: relative;
+    width: 100%;
+   }
 
-.recent-blogs  {
-    text-align: left;
-}
+   .blog-card a{
+    background: transparent;
+    color: var(--link-color);
+    text-decoration: none;
+    }
 
-.recent-blogs h1:first-child, .recent-blogs h2:first-child {
-    padding-top: 0!important;
-}
+  .blog-card picture img {
+    /*width: 100%;
+    height: 200px;
+    object-fit: cover;
+    transition: all 0.3s ease 0s;*/
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.3s ease 0s;
+  }
 
-@media (max-width: 767px) {
-    .recent-blogs .content .col {
-        width: 100%;
-        margin: 0!important;
-    }
-}
+  .blog-card img:hover {
+    transform: scale(1.1);
+  }
+
+  .blog-title {
+    font-size: 20px;
+    font-weight: bold;
+    padding: 1em 0 0.5em;
+  }
+
+  .blog-description {
+    padding: 0.6em 0;
+  }
+
+  .read-more {
+    display: inline-block;
+    color: #007bff;
+    text-decoration: none;
+    font-size: 1rem;
+    margin-top: 10px;
+  }
 
   .read-more:hover {
     text-decoration: underline;
-  }
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+
+  .page-link {
+    display: inline-block;
+    padding: 5px 10px;
+    margin-right: 5px;
+    color: #007bff;
+    text-decoration: none;
+    border: 1px solid #007bff;
+    border-radius: 3px;
+  }
+
+  .page-link:hover {
+    background-color: #007bff;
+    color: white;
+  }
+
+  /* Media Query for Tablets and larger screens */
+@media screen and (min-width: 479px) {
+    .blog-card-content {
+      width: 60%;
+      padding: 20px;
+    }
+  }
+
+  /* Media Query for Smaller screens */
+  @media screen and (max-width: 1024px) {
+    .blog-card picture {
+      border-radius: 0 0 0 0;
+    }
+  }

blocks/anniversary-blogs/anniversary-blogs.js

@@ -1,8 +1,7 @@
 import {
-  div, a, img, p, h3,
+  div, a, p, h3,
 } from '../../scripts/dom-builder.js';
 
-import { readBlockConfig } from '../../scripts/aem.js';
 
 async function fetchPostData() {
   try {
@@ -23,59 +22,107 @@ function truncateText(text, maxLength) {
 
 function createAnniversaryBlogCard(post) {
   const card = div({ class: 'blog-card' });
-  const image = img({ src: post.image, alt: post.title });
-  const title = h3({ class: 'blog-title' }, a({ href: post.path }, post.title));
+
+  const picture = document.createElement('picture');
+  const sourceWebp = document.createElement('source');
+  sourceWebp.setAttribute('type', 'image/webp');
+  sourceWebp.setAttribute('srcset', `${post.image}?width=2000&format=webply&optimize=medium`);
+  sourceWebp.setAttribute('media', '(min-width: 600px)');
+
+  const sourcePng = document.createElement('source');
+  sourcePng.setAttribute('type', 'image/png');
+  sourcePng.setAttribute('srcset', `${post.image}?width=2000&format=png&optimize=medium`);
+  sourcePng.setAttribute('media', '(min-width: 600px)');
+
+  const img = document.createElement('img');
+  img.setAttribute('loading', 'lazy');
+  img.setAttribute('alt', post.title);
+  img.setAttribute('src', `${post.image}?width=750&format=png&optimize=medium`);
+  img.setAttribute('width', '1000');
+  img.setAttribute('height', '562');
+
+  const link = a({ href: post.path });
+  link.appendChild(picture);
+  picture.appendChild(sourceWebp);
+  picture.appendChild(sourcePng);
+  picture.appendChild(img);
+
+  card.appendChild(link);
+
+  const image = div({ class: 'blog-card-content'});
+  const title = h3({ class: 'blog-title' },post.title);
   const description = p({ class: 'blog-description' }, truncateText(post.description, 180));
-  const readMore = a({ href: post.path, class: 'read-more' }, 'Read more');
+  const readMore = a({ href: post.path, class: 'read-more' }, 'Read more >>');
 
-  card.appendChild(image);
+
   card.appendChild(title);
   card.appendChild(description);
   card.appendChild(readMore);
 
+  card.appendChild(image);
+
   return card;
 }
 
-function createAnniversaryBlogs(results) {
+function createAnniversaryBlogs(results, page = 1, pageSize = 10) {
+  if(!results || !Array.isArray(results)) {
+    return div({ class: 'blog-cards-container' });
+  }
+  const startIndex = (page - 1) * pageSize;
+  console.log(startIndex);
+  const endIndex = startIndex + pageSize;
+  console.log(endIndex);
+  console.log(results.slice(startIndex, endIndex));
+  const paginatedResults = results.slice(startIndex, endIndex);
+
   const container = div({ class: 'blog-cards-container' });
-  results.forEach((post) => {
+  paginatedResults.forEach((post) => {
     const card = createAnniversaryBlogCard(post);
     container.appendChild(card);
   });
   return container;
 }
 
 export default async function decorate(block) {
-  const blockData = readBlockConfig(block);
   const postData = await fetchPostData();
-  let topic = '';
-  if (blockData.topic) {
-    topic = blockData.topic;
-  }
-  const wrapper = div({ class: 'content flex' });
-  const blogTitles = block.children[0].cloneNode(true);
-  if (block.children[1]) {
-    topic = block.children[1].children[1].innerText.trim();
+  const hasChildClass = block.classList.contains("child");
+  const wrapper = div({ class: 'content' });
+  const blogsContainer = div({ class: 'col recent-blogs' });
+  let sortedResults = [];
+  const filteredResults = postData.filter((item) => item.path.includes('/25th-anniversary/'));
+  if (filteredResults.length) {
+    sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
   }
-  if (blogTitles.children[0]) {
-    const title = blogTitles.children[0];
-    const blogsContainer = div({ class: 'col recent-blogs' });
-    let sortedResults = [];
-    const filteredResults = postData.filter((item) => item.path.includes('/draft/25th-anniversary/') && (topic ? JSON.parse(item.tags).filter((tag) => tag.toLowerCase().trim() === topic.toLowerCase().trim()).length > 0 : true));
-    if (filteredResults.length) {
-      sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
-    }
-    // Create container with blog cards
-    const blogCardsContainer = createAnniversaryBlogs(sortedResults);
-    blogsContainer.appendChild(title);
-    // Append the blog cards container to the blogsContainer
+  if(hasChildClass) {
+    const blogCardsContainer = createAnniversaryBlogs(sortedResults.slice(0, 3));
     blogsContainer.appendChild(blogCardsContainer);
+    wrapper.appendChild(blogsContainer);  
+  } 
+  else {
+    const shouldShowPagination = sortedResults.length > 10;
+    const paginatedResults = createAnniversaryBlogs(sortedResults, 1);
+    blogsContainer.appendChild(paginatedResults);
     wrapper.appendChild(blogsContainer);
+
+    if(shouldShowPagination){
+      const totalResults = sortedResults.length;
+      const totalPages = Math.ceil(totalResults / 6);
+      const pagination = div({ class: 'pagination'});
+      for (let i = 1; i <= totalPages; i++) {
+        const pageLink = a({ href: '#', class: 'page-link', 'data-page': i }, i);
+        pageLink.addEventListener('click', (event) => {
+          event.preventDefault();
+          const selectedPage = parseInt(event.target.dataset.page);
+          const newResults = createAnniversaryBlogs(sortedResults, selectedPage);
+          blogsContainer.innerHTML = '';
+          blogsContainer.appendChild(newResults);
+        });
+        pagination.appendChild(pageLink);
+      }
+      wrapper.appendChild(pagination);
+    }
   }
-
   block.innerText = '';
   block.appendChild(wrapper);
 
-  // Append wrapper to the block's parent element
-  block.parentNode.appendChild(wrapper);
 }