Merge pull request #181 from hlxsites/feature/dynamic-block

Feature/dynamic block
hlxsites · Nov 28, 2023 · f9fd217 · f9fd217
2 parents 5761a34 + 43c9ce4
commit f9fd217
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 39 deletions.
diff --git a/blocks/herobanner/herobanner.css b/blocks/herobanner/herobanner.css
@@ -2,7 +2,7 @@
     background-image: url('../../icons/about-pattern.png');
 }
 
-.herobanner .content .title, .hero-banner .content .description, p {
+.herobanner .content .title, .hero-banner .content .description, .hero-banner p {
     color: #fff;
     font: normal 16px/1.45 'Proxima Nova A',Helvetica,sans-serif;
     padding: 15px 0;

diff --git a/blocks/recent-posts/recent-posts.css b/blocks/recent-posts/recent-posts.css
@@ -0,0 +1,28 @@
+.grey-article-outer {
+    background-color: #ededed;
+    padding: 80px 0;
+}
+
+.grey-article-outer > div {
+    max-width: 980px;
+    margin: 0 auto;
+}
+
+.recent-posts  {
+    text-align: left;
+}
+
+.recent-posts .post .image img {
+    width: 100%;
+    height: auto;
+}
+
+@media (max-width: 767px) {
+    .grey-article-outer {
+        padding: 60px 0;
+    }
+
+    .recent-posts .content .col {
+        width: 100%;
+    }
+}
diff --git a/blocks/recent-posts/recent-posts.js b/blocks/recent-posts/recent-posts.js
@@ -0,0 +1,84 @@
+import {
+  div, a, img, p, h3,
+} from '../../scripts/dom-builder.js';
+
+import { readBlockConfig } from '../../scripts/aem.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 createRecentPosts(results) {
+  const lists = div({ class: 'posts' });
+  results.forEach((post) => {
+    const showcaseBanner = div({ class: 'post' });
+    const articleCardImage = a({ class: 'image', href: post.path }, img({
+      src: post.image, alt: post.title, width: '100%', height: 'auto',
+    }));
+    const articleCardBody = div({ class: 'text' });
+    const articleHeading = h3({ class: 'entry-title' }, a({ href: post.path }, post.title));
+    const articleDescription = p({ class: 'intro' }, truncateText(post.description, 180));
+    articleCardBody.appendChild(articleHeading);
+    articleCardBody.appendChild(articleDescription);
+    showcaseBanner.appendChild(articleCardImage);
+    showcaseBanner.appendChild(articleCardBody);
+    lists.append(showcaseBanner);
+  });
+  return lists;
+}
+
+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 cols2' });
+  const blogTitles = block.children[0].cloneNode(true);
+  if (block.children[1]) {
+    topic = block.children[1].children[1].innerText.trim();
+  }
+  if (blogTitles.children[0]) {
+    const title = blogTitles.children[0];
+    const blogsContainer = div({ class: 'col recent-posts' });
+    let sortedResults = [];
+    const filteredResults = postData.filter((item) => item.path.includes('/news/') && (topic ? JSON.parse(item.tags).filter((tag) => tag.toLowerCase() === topic.toLowerCase()).length > 0 : true));
+    if (filteredResults.length) {
+      sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+    }
+    const postElement = createRecentPosts(sortedResults.slice(0, 3));
+    blogsContainer.appendChild(title);
+    blogsContainer.appendChild(postElement);
+    wrapper.appendChild(blogsContainer);
+  }
+  const newsTitles = block.children[0].cloneNode(true);
+  if (newsTitles.children[1]) {
+    const title = newsTitles.children[1];
+    const blogsContainer = div({ class: 'col recent-posts' });
+    let sortedResults = [];
+    const filteredResults = postData.filter((item) => item.path.includes('/blog/') && (topic ? JSON.parse(item.tags).filter((tag) => tag.toLowerCase() === topic.toLowerCase()).length > 0 : true));
+    if (filteredResults.length) {
+      sortedResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+    }
+    const postElement = createRecentPosts(sortedResults.slice(0, 3));
+    blogsContainer.appendChild(title);
+    blogsContainer.appendChild(postElement);
+    wrapper.appendChild(blogsContainer);
+  }
+  block.innerText = '';
+  block.appendChild(wrapper);
+}
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -426,6 +426,7 @@ function decorateButtons(element) {
           && twoup.tagName === 'P'
         ) {
           a.className = 'button primary';
+          a.setAttribute('target', '_blank');
           twoup.classList.add('button-container');
         }
         if (

diff --git a/styles/Typo.css b/styles/Typo.css
@@ -415,12 +415,7 @@ hr {
     clear: both;
     display: block;
     height: 1px;
-    padding: 0;
-}
-
-hr,
-pre {
-    margin: 1em 0;
+    padding: 1em 0;
 }
 
 pre {
@@ -429,6 +424,7 @@ pre {
     border-radius: 4px;
     padding: 0.7em 1em;
     overflow: auto;
+    margin: 1em 0;
 }
 
 blockquote {
@@ -1510,6 +1506,8 @@ form.hs-form .hs-input[type="checkbox"] {
 
     .hero-carousel-slide > div:nth-child(2) {
         width: 70%;
+        padding-right: 50px;
+        padding-left: 20px;
     }
 
     .hero-carousel-slide > div:nth-child(2) > * {
@@ -1521,7 +1519,7 @@ form.hs-form .hs-input[type="checkbox"] {
     }
 
     .hero-carousel h2 {
-        font-size: 28px
+        font-size: 28px;
     }
 
     .hero-carousel h1 {
@@ -1568,15 +1566,21 @@ form.hs-form .hs-input[type="checkbox"] {
 
 @media (max-width: 479px) {
     .hero-carousel {
-        height: 220px
+        height: 220px;
     }
 
     .hero-carousel-slide > div:nth-child(1) picture > img {
         height: 220px;
     }
 
-    .hero-carousel p {
+    .hero-carousel h2 {
         font-size: 20px;
+        line-height: 1.4em;
+    }
+
+    .hero-carousel p {
+        font-size: 14px;
+        line-height: 1.4em;
     }
 
     .hero-carousel a {

diff --git a/styles/styles_2020.css b/styles/styles_2020.css
@@ -148,18 +148,18 @@
   color: #fff
 }
 
-.mmg-rich-columns .recent-posts .post {
+.recent-posts .post {
   padding-bottom: 30px
 }
 
-.mmg-rich-columns .recent-posts .post::after {
+.recent-posts .post::after {
   clear: both;
   content: "";
   display: block;
   font-size: 0
 }
 
-.mmg-rich-columns .recent-posts .image {
+.recent-posts .image {
   background: 50% 50% no-repeat;
   background-size: cover;
   display: block;
@@ -168,52 +168,46 @@
   width: 40%
 }
 
-.mmg-rich-columns .recent-posts .text {
+.recent-posts .text {
   font-size: 14px;
   padding-left: 44%
 }
 
-.mmg-rich-columns .recent-posts .image::after {
-  content: "";
-  display: block;
-  padding-bottom: 56%
-}
-
-.mmg-rich-columns .recent-posts .post .entry-title {
+.recent-posts .post .entry-title {
   color: #ec8f2d;
   font-size: 14px;
   padding: 0
 }
 
-.mmg-rich-columns .recent-posts .post .entry-title a {
+.recent-posts .post .entry-title a {
   color: inherit;
   text-decoration: none
 }
 
-.mmg-rich-columns .recent-posts .post .entry-title a:hover {
+.recent-posts .post .entry-title a:hover {
   color: #000
 }
 
-.mmg-rich-columns .recent-posts .post p {
+.recent-posts .post p {
   padding: .5em 0 0
 }
 
-.mmg-rich-columns .recent-posts .post .tags a {
+.recent-posts .post .tags a {
   color: #ec8f2d
 }
 
-.mmg-rich-columns .recent-posts .post:first-child .image {
+.recent-posts .post:first-child .image {
   display: block;
   float: none;
   width: 100%
 }
 
-.mmg-rich-columns .recent-posts .post:first-child .text {
+.recent-posts .post:first-child .text {
   font-size: 1em;
   padding-left: 0
 }
 
-.mmg-rich-columns .recent-posts .post:first-child .entry-title {
+.recent-posts .post:first-child .entry-title {
   font-size: 18px;
   padding-top: 20px
 }
@@ -483,7 +477,7 @@
   width: 100%
 }
 
-.blog.anniversary-25 #sidebar .recent-posts {
+#sidebar .recent-posts {
   border: 2px solid #f49600;
   border-radius: 13px;
   padding: 10%
@@ -990,17 +984,17 @@
 }
 
 @media (max-width: 479px) {
-  .mmg-rich-columns .recent-posts .image {
+  .recent-posts .image {
       float:none;
       margin: 0;
       width: 100%
   }
 
-  .mmg-rich-columns .recent-posts .text {
+  .recent-posts .text {
       padding-left: 0
   }
 
-  .mmg-rich-columns .recent-posts .post .entry-title {
+  .recent-posts .post .entry-title {
       font-size: 18px;
       padding-top: 20px
   }

diff --git a/styles/template.css b/styles/template.css
@@ -490,7 +490,7 @@ body {
 }
 
 #main {
-    float: left;
+    float: left;    
     width: 69%
 }
 
@@ -500,11 +500,11 @@ body.sidebar-50 #main {
 
 body.full-width #main {
     float: none;
-    width: 100%!important;
+    width: 100%;
 }
 
 body.full-width #sidebar {
-    width: 0;
+    width: 0%!important;
 }
 
 #sidebar {

diff --git a/templates/News/News.js b/templates/News/News.js
@@ -12,12 +12,11 @@ function createSidebar(head, items, displayLimit) {
   const heading = h3(`${head}s`);
   const ul = document.createElement('ul');
   let itemCount = 0;
-
   items.forEach(({ title, count }) => {
     const li = document.createElement('li');
     const link = document.createElement('a');
     link.textContent = `${title} (${count})`;
-    link.setAttribute('href', `/news/?${head.toLowerCase()}=${title.replace(' ', '-')}`);
+    link.setAttribute('href', `${window.location.pathname}?${head.toLowerCase()}=${title.replace(' ', '-')}`);
     li.appendChild(link);
     ul.appendChild(li);
     itemCount += 1;
@@ -249,7 +248,7 @@ export default async function buildAutoBlocks(block) {
   const data = await fetchNewsData();
   const filteredResults = data.filter((item) => {
     const path = item.path.toLowerCase();
-    const regex = /^\/news\/.+/;
+    const regex = /^\/about-us\/news\/.*$/;
     return regex.test(path);
   });
 
@@ -314,7 +313,7 @@ export default async function buildAutoBlocks(block) {
     finalArticles = filteredResults;
   }
 
-  const newsRegex = /^\/news(?:\/(?:\?.*)?)?$/;
+  const newsRegex = /^\/about-us\/news(?:\/(?:\?.*)?)?$/;
   if (newsRegex.test(window.location.pathname)) {
     const newsContent = await getNewsContent(finalArticles, parseInt(pageNumber, 10));
     main.appendChild(newsContent);