Merge pull request #302 from hlxsites/feature/anniversary-blog-implem…

…entation

anniversary-blogs block component

blocks/anniversary-blogs/anniversary-blogs.css

@@ -0,0 +1,118 @@
+/* For the 2-column layout */
+.content .col .blog-cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 32px;
+}
+
+/* For the 3-cloumn layout */
+.child .content .col .blog-cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 32px;
+}
+
+.child .content .col .blog-cards-container .blog-card {
+    float: left;
+    width: auto;
+}
+
+  /* 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;
+  }
+
+  .blog-card p{
+    padding: 0.6em 0;
+  }
+
+  .blog-card h3 {
+    border-left: 0 !important;
+    padding-left: 0 !important;
+    }
+
+   .blog-card picture {
+    display: block;
+    float: none;
+    max-width: none;
+    overflow: hidden;
+    padding-bottom: 56%;
+    position: relative;
+    width: 100%;
+   }
+
+   .blog-card a{
+    background: transparent;
+    color: var(--link-color);
+    text-decoration: none;
+    }
+
+  .blog-card picture img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.3s ease 0s;
+  }
+
+  .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;
+    text-align: center;
+  }
+
+  .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 only screen and (max-width: 860px) {
+  .content .col .blog-cards-container,
+  .child .content .col .blog-cards-container {
+    grid-template-columns: 1fr;
+  }
+}

blocks/anniversary-blogs/anniversary-blogs.js

@@ -0,0 +1,136 @@
+import {
+  div, a, p, h3,
+} from '../../scripts/dom-builder.js';
+
+async function fetchPostData() {
+  try {
+    const response = await fetch('/query-index.json');
+    const jsonData = await response.json();
+    return jsonData.data;
+  } catch (error) {
+    return [];
+  }
+}
+
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return `${text.slice(0, maxLength)}...`;
+}
+
+function createAnniversaryBlogCard(post) {
+  const card = div({ class: 'blog-card' });
+
+  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 >>');
+
+  card.appendChild(title);
+  card.appendChild(description);
+  card.appendChild(readMore);
+
+  card.appendChild(image);
+
+  return card;
+}
+
+function createAnniversaryBlogs(results, page = 1, pageSize = 10) {
+  if (!results || !Array.isArray(results)) {
+    return div({ class: 'blog-cards-container' });
+  }
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedResults = results.slice(startIndex, endIndex);
+  const container = div({ class: 'blog-cards-container' });
+  paginatedResults.forEach((post) => {
+    const card = createAnniversaryBlogCard(post);
+    container.appendChild(card);
+  });
+  return container;
+}
+
+function getAnniversaryBlogPages(pages, currentPageUrl) {
+  const anniversaryBlogPages = [];
+  let count = 0;
+  for (let i = 0; i < pages.length && count < 3; i += 1) {
+    const pagePath = pages[i].path;
+    if (!currentPageUrl.includes(pagePath)) {
+      anniversaryBlogPages.push(pages[i]);
+      count += 1;
+    }
+  }
+  return anniversaryBlogPages;
+}
+
+export default async function decorate(block) {
+  const postData = await fetchPostData();
+  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 (hasChildClass) {
+    const currentPageUrl = window.location.href;
+    const childPages = getAnniversaryBlogPages(sortedResults, currentPageUrl);
+    const blogCardsContainer = createAnniversaryBlogs(childPages);
+    blogsContainer.appendChild(blogCardsContainer);
+    wrapper.appendChild(blogsContainer);
+  } else {
+    const pageSize = 10;
+    const shouldShowPagination = sortedResults.length > pageSize;
+    const paginatedResults = createAnniversaryBlogs(sortedResults, 1);
+    blogsContainer.appendChild(paginatedResults);
+    wrapper.appendChild(blogsContainer);
+
+    if (shouldShowPagination) {
+      const totalResults = sortedResults.length;
+      const totalPages = Math.ceil(totalResults / pageSize);
+      const pagination = div({ class: 'pagination' });
+      for (let i = 1; i <= totalPages; i += 1) {
+        const pageLink = a({ href: '#', class: 'page-link', 'data-page': i }, i);
+        pageLink.addEventListener('click', (event) => {
+          event.preventDefault();
+          const selectedPage = parseInt(event.target.dataset.page, 10);
+          const newResults = createAnniversaryBlogs(sortedResults, selectedPage);
+          blogsContainer.innerHTML = '';
+          blogsContainer.appendChild(newResults);
+        });
+        pagination.appendChild(pageLink);
+      }
+      wrapper.appendChild(pagination);
+    }
+  }
+  block.innerText = '';
+  block.appendChild(wrapper);
+}