Merge pull request #87 from hlxsites/feature/news

Updated the news template code

scripts/scripts.js

@@ -37,6 +37,7 @@ const TEMPLATE_LIST = [
   'proteins',
   'mrna',
   'blog',
+  'news',
 ];
 
 /**

styles/Typo.css

@@ -1148,6 +1148,11 @@ form.hs-form .hs-input[type="checkbox"] {
     }
 }
 
+/* Blog pagination */
+.blog-pagination .prev-posts {
+    margin-right: 20px;
+}
+
 /* social share */
 .hs-blog-social-share-list {
     list-style-type: none;

templates/Blog/Blog.js

@@ -107,6 +107,15 @@ function generateResultsBlock(articles, currentPage, totalArticles) {
   // Pagination logic
   const totalPages = Math.ceil(totalArticles / 10);
   const paginationDiv = div({ class: 'blog-pagination clearfix' });
+  if (currentPage > 1 && totalPages > 1) {
+    const prevPageUrl = new URL(window.location.href);
+    prevPageUrl.searchParams.set('page', parseInt(currentPage, 10) - 1);
+    const prevButton = a(
+      { href: `${prevPageUrl}`, class: 'button prev-posts' },
+      'Previous',
+    );
+    paginationDiv.appendChild(prevButton);
+  }
   if (currentPage < totalPages) {
     const nextPageUrl = new URL(window.location.href);
     nextPageUrl.searchParams.set('page', parseInt(currentPage, 10) + 1);
@@ -115,6 +124,8 @@ function generateResultsBlock(articles, currentPage, totalArticles) {
       'Next',
     );
     paginationDiv.appendChild(nextButton);
+  }
+  if (totalPages > 1) {
     postListing.appendChild(paginationDiv);
   }
   return postListing;
@@ -155,21 +166,24 @@ function setFullWidthToBody() {
 }
 
 function createPageTopics() {
-  const tagList = document.createElement('p');
-  tagList.className = 'post-topics';
-  tagList.innerHTML = 'Topics: ';
   const topics = getMetadata('article:tag');
-  topics.split(',').forEach((topic, index) => {
-    const anchor = document.createElement('a');
-    anchor.className = 'topic-link';
-    anchor.innerText = topic.trim();
-    anchor.href = `/blog/?topic=${topic.trim()}`;
-    tagList.appendChild(anchor);
-    if (index < topics.split(',').length - 1) {
-      tagList.appendChild(document.createTextNode(', '));
-    }
-  });
-  return tagList;
+  if (topics.trim()) {
+    const tagList = document.createElement('p');
+    tagList.className = 'post-topics';
+    tagList.innerHTML = 'Topics: ';
+    topics.split(',').forEach((topic, index) => {
+      const anchor = document.createElement('a');
+      anchor.className = 'topic-link';
+      anchor.innerText = topic.trim();
+      anchor.href = `/blog/?topic=${topic.trim()}`;
+      tagList.appendChild(anchor);
+      if (index < topics.split(',').length - 1) {
+        tagList.appendChild(document.createTextNode(', '));
+      }
+    });
+    return tagList;
+  }
+  return '';
 }
 
 function createShareButton(network, url, title) {
@@ -280,11 +294,13 @@ export default async function buildAutoBlocks(block) {
 
   const blogRegex = /^\/blog(?:\/(?:\?.*)?)?$/;
   if (blogRegex.test(window.location.pathname)) {
-    const blogsContent = await getBlogsContent(finalArticles, pageNumber);
+    const blogsContent = await getBlogsContent(finalArticles, parseInt(pageNumber, 10));
     main.appendChild(blogsContent);
   } else {
     const tagList = createPageTopics();
-    main.appendChild(tagList);
+    if (tagList) {
+      main.appendChild(tagList);
+    }
     const shareTitle = getMetadata('og:title');
     const shareContainer = document.createElement('div');
     shareContainer.className = 'hs-blog-social-share';

templates/News/News.css

@@ -0,0 +1,4 @@
+/* news scripts */
+.post-topics {
+    padding: 1em 0;
+}