Merge pull request #203 from hlxsites/bug/minor-issues

Updated the minor issues on header part

blocks/header/header.js

@@ -24,6 +24,13 @@ function createGcseTools() {
   return gcseTools;
 }
 
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return `${text.slice(0, maxLength)}...`;
+}
+
 function createGcseBox() {
   const gcseBox = document.createElement('div');
   gcseBox.id = 'mmg-gcse-box';
@@ -54,9 +61,14 @@ function createResultLink(result) {
 
   const spanTitle = document.createElement('span');
   spanTitle.classList.add('title');
-  spanTitle.textContent = result.title;
-
+  spanTitle.textContent = truncateText(result.title, 70);
+  const date = new Date(Number(result.date) * 1000).toLocaleDateString('en-US', { year: 'numeric', month: 'long' }).toLowerCase();
+  const description = truncateText(result.description, 150);
   link.appendChild(spanTitle);
+  const dateNode = document.createTextNode(date);
+  const descriptionNode = document.createTextNode(description);
+  link.appendChild(dateNode);
+  link.appendChild(descriptionNode);
   link.href = result.path;
 
   return link;
@@ -69,6 +81,71 @@ function removeSearchResult() {
   }
 }
 
+function updateDisplayedItems(currentPage, itemsPerPage, container) {
+  const anchorTags = container.querySelectorAll('a');
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  anchorTags.forEach((element, index) => {
+    element.style.display = (index >= startIndex && index < endIndex) ? '' : 'none';
+  });
+}
+
+function clearExistingPagination(container) {
+  const existingPagination = container.querySelector('.pagination');
+  if (existingPagination) {
+    container.removeChild(existingPagination);
+  }
+}
+
+function createPaginationDiv() {
+  const paginationDiv = document.createElement('div');
+  paginationDiv.className = 'pagination';
+  return paginationDiv;
+}
+
+function updatePagination(currentPage, totalPages, elementsContainer) {
+  const itemsPerPage = 10;
+  updateDisplayedItems(currentPage, itemsPerPage, elementsContainer);
+
+  // Clear existing pagination before appending new one
+  clearExistingPagination(elementsContainer);
+
+  function createNavigationButton(label, isEnabled, targetPage) {
+    const button = document.createElement('span');
+    button.className = `nav-button ${label.toLowerCase()} ${isEnabled ? '' : 'disabled'}`;
+    button.textContent = label;
+    if (isEnabled) {
+      button.addEventListener('click', () => updatePagination(targetPage, totalPages, elementsContainer));
+    }
+    return button;
+  }
+
+  function createPageButton(pageNumber, currentPageValue, totalPagesValue, container) {
+    const pageButton = document.createElement('span');
+    pageButton.className = `page ${pageNumber === currentPageValue ? 'active' : ''}`;
+    pageButton.textContent = pageNumber;
+    pageButton.addEventListener('click', () => {
+      if (pageNumber !== currentPageValue) {
+        updatePagination(pageNumber, totalPagesValue, container);
+      }
+    });
+    return pageButton;
+  }
+
+  const pagination = createPaginationDiv();
+  pagination.appendChild(createNavigationButton('Prev', currentPage > 1, currentPage - 1));
+  for (let i = 1; i <= totalPages; i += 1) {
+    pagination.appendChild(createPageButton(i, currentPage, totalPages, elementsContainer));
+  }
+  pagination.appendChild(createNavigationButton('Next', currentPage < totalPages, currentPage + 1));
+
+  elementsContainer.appendChild(pagination);
+}
+
+function roundToNextTenth(value) {
+  return Math.ceil(value / 10) * 10;
+}
+
 function createSearchResultsBlock(results, input, total) {
   // Remove the main search results container if any
   removeSearchResult();
@@ -103,7 +180,7 @@ function createSearchResultsBlock(results, input, total) {
     const link = createResultLink(result);
     outer.appendChild(link);
   });
-
+  updatePagination(1, roundToNextTenth(results.length) / 10, outer);
   searchResultsBlock.appendChild(gcseTools);
   searchResultsBlock.appendChild(gcseBox);
 

styles/Typo.css

@@ -1752,6 +1752,15 @@ form.hs-form .hs-input[type="checkbox"] {
     display: block;
 }
 
+.sidebar-navigation a {
+    color: #0d233e;
+    display: block;
+    font-size: 1em;
+    line-height: 1.2;
+    padding: 0 10px;
+    text-decoration: none
+}
+
 .sidebar-navigation ul {
     font-weight: 700;
 }

styles/gcse.css

@@ -129,7 +129,7 @@ body.mmg-search-active {
     color: #fff;
     font-size: 15px;
     line-height: 140%;
-    height: 100%;
+    height: calc(100vh - 100px);
     width: 100%;
     overflow: auto;
     overflow-y: scroll;

styles/template.css

@@ -577,23 +577,10 @@ body.sidebar-50 #sidebar {
     padding: 0
 }
 
-#sidebar li {
-    padding: 8px 0
-}
-
 #sidebar li::before {
     content: none
 }
 
-#sidebar a {
-    color: #0d233e;
-    display: block;
-    font-size: 1em;
-    line-height: 1.2;
-    padding: 0 10px;
-    text-decoration: none
-}
-
 #sidebar .hs-menu-wrapper a:hover {
     text-decoration: underline
 }

templates/Blog/Blog.js

@@ -248,12 +248,16 @@ export default async function buildAutoBlocks(block) {
   }
 
   const data = await fetchBlogData();
-  const filteredResults = data.filter((item) => {
+  let filteredResults = data.filter((item) => {
     const path = item.path.toLowerCase();
     const regex = /^\/blog\/.+/;
     return regex.test(path);
   });
 
+  if (filteredResults.length) {
+    filteredResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+  }
+
   const contentBlocks = block.querySelectorAll('.section');
 
   // Creating the default template wrapper
@@ -332,18 +336,18 @@ export default async function buildAutoBlocks(block) {
     main.appendChild(shareContainer);
   }
 
-  const archiveSidebar = generateArchiveBlock(filteredResults);
-  if (archiveSidebar) {
-    sideBarVisible = true;
-    sidebar.prepend(archiveSidebar);
-  }
-
   const topicSidebar = generateTopicBlock(filteredResults);
   if (topicSidebar) {
     sideBarVisible = true;
     sidebar.prepend(topicSidebar);
   }
 
+  const archiveSidebar = generateArchiveBlock(filteredResults);
+  if (archiveSidebar) {
+    sideBarVisible = true;
+    sidebar.prepend(archiveSidebar);
+  }
+
   if (!sideBarVisible) {
     setFullWidthToBody();
   }

templates/Default/Default.js

@@ -76,6 +76,6 @@ export default function buildAutoBlocks(block) {
     attributes: true,
     characterData: true,
   });
-  setSidebarMaxHeight();
+  setTimeout(() => setSidebarMaxHeight(), 1000);
   setSidebarHeight();
 }

templates/News/News.js

@@ -246,12 +246,16 @@ export default async function buildAutoBlocks(block) {
   }
 
   const data = await fetchNewsData();
-  const filteredResults = data.filter((item) => {
+  let filteredResults = data.filter((item) => {
     const path = item.path.toLowerCase();
     const regex = /^\/about-us\/news\/.*$/;
     return regex.test(path);
   });
 
+  if (filteredResults.length) {
+    filteredResults = filteredResults.sort((ar1, ar2) => ar2.date - ar1.date);
+  }
+
   const contentBlocks = block.querySelectorAll('.section');
 
   // Creating the default template wrapper
@@ -329,16 +333,16 @@ export default async function buildAutoBlocks(block) {
     main.appendChild(shareContainer);
   }
 
-  const archiveSidebar = generateArchiveBlock(filteredResults);
-  if (archiveSidebar) {
+  const topicSidebar = await generateTopicBlock(filteredResults);
+  if (topicSidebar) {
     sideBarVisible = true;
-    sidebar.prepend(archiveSidebar);
+    sidebar.prepend(topicSidebar);
   }
 
-  const topicSidebar = generateTopicBlock(filteredResults);
-  if (topicSidebar) {
+  const archiveSidebar = await generateArchiveBlock(filteredResults);
+  if (archiveSidebar) {
     sideBarVisible = true;
-    sidebar.prepend(topicSidebar);
+    sidebar.prepend(archiveSidebar);
   }
 
   if (!sideBarVisible) {