article-nav (#125)

* article-nav * style update * update * Update article-navigation.js * Update scripts.js * review comments * Update author-teaser.css
hlxsites · Jan 24, 2024 · d1158d7 · d1158d7
1 parent 9236059
commit d1158d7
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 6 deletions.
diff --git a/cigaradvisor/blocks/article-navigation/article-navigation.css b/cigaradvisor/blocks/article-navigation/article-navigation.css
@@ -0,0 +1,78 @@
+.article-navigation.block {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 30px auto 0;
+    justify-content: space-between;
+    max-width: 1080px;
+    align-items: stretch;
+}
+
+.article-navigation.block>div {
+    padding: 10px;
+    width: 100%;
+}
+
+.article-navigation.block a {
+    background-color: var(--transparent-tan);
+    padding: 20px 40px;
+    border: 1px solid var(--tan);
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.article-navigation.block h3 {
+    margin: 18px 0;
+    line-height: 35px;
+    font-size: var(--body-font-size-l);
+    font-weight: var(--font-weight-bold);
+    font-family: montserrat, sans-serif;
+}
+
+.article-navigation.block span {
+    line-height: 35px;
+    font-size: var(--body-font-size-l);
+    font-weight: var(--font-weight-bold);
+    font-family: montserrat, sans-serif;
+    display: inline-block;
+    color: var(--tan);
+}
+
+.article-navigation.block .previous-article-nav a {
+    text-align: center;
+}
+
+.article-navigation.block .next-article-nav a {
+    text-align: center;
+}
+
+.article-navigation.block .previous-article-nav h3::before {
+    content: '';
+    font-family: var(--ff-fontawesome);
+    margin-right: 10px;
+    font-size: var(--body-font-size-s);
+    ;
+}
+
+.article-navigation.block .next-article-nav h3::after {
+    content: '';
+    font-family: var(--ff-fontawesome);
+    margin-left: 10px;
+    font-size: var(--body-font-size-s);
+}
+
+
+@media screen and (min-width: 600px) {
+    .article-navigation.block>div {
+        width: 50%;
+        padding: 10px 10px 10px 0;
+    }
+
+    .article-navigation.block .previous-article-nav a {
+        text-align: left;
+    }
+
+    .article-navigation.block .next-article-nav a {
+        text-align: right;
+    }
+}
diff --git a/cigaradvisor/blocks/article-navigation/article-navigation.js b/cigaradvisor/blocks/article-navigation/article-navigation.js
@@ -0,0 +1,32 @@
+import { loadPosts } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  const allArticles = await loadPosts();
+  let previousArticle;
+  let nextArticle;
+  const currentArticle = window.location.href;
+  allArticles.forEach((article, index) => {
+    if (currentArticle.indexOf(article.path) > -1) {
+      previousArticle = allArticles[index + 1];
+      nextArticle = allArticles[index - 1];
+    }
+  });
+  const previousArticleNav = document.createElement('div');
+  previousArticleNav.classList.add('previous-article-nav');
+  const nextArticleNav = document.createElement('div');
+  nextArticleNav.classList.add('next-article-nav');
+
+  if (previousArticle) {
+    previousArticleNav.innerHTML = `<a href="${previousArticle.path}" rel="prev">
+            <h3>Previous Post</h3>    
+            <span>${previousArticle.heading}</span></a>`;
+  }
+  if (nextArticle) {
+    nextArticleNav.innerHTML = `<a href="${nextArticle.path}" rel="next">
+            <h3>Next Post</h3>    
+            <span>${nextArticle.heading}</span></a>`;
+  }
+
+  block.replaceChildren(previousArticleNav);
+  block.append(nextArticleNav);
+}
diff --git a/cigaradvisor/blocks/author-teaser/author-teaser.css b/cigaradvisor/blocks/author-teaser/author-teaser.css
@@ -81,6 +81,7 @@
 }
 
 .author-teaser.block .author-details ul {
+    list-style-type: none;
     display: flex;
     margin: 10px 30px;
 

diff --git a/cigaradvisor/blocks/author-teaser/author-teaser.js b/cigaradvisor/blocks/author-teaser/author-teaser.js
@@ -64,6 +64,7 @@ export default async function decorate(block) {
   const link = block.querySelector('a');
   const path = link ? link.getAttribute('href') : block.textContent.trim();
   const author = await fetchAuthorInfo(path);
+  block.innerHTML = '';
   if (author) {
     buildAuthorTeaser(block, author);
   }

diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -192,7 +192,7 @@ export function getRelativePath(path) {
 }
 
 let articleIndexData;
-async function loadPosts() {
+export async function loadPosts() {
   if (!articleIndexData) {
     const resp = await fetch(ARTICLE_INDEX_PATH);
     let jsonData = '';
@@ -201,6 +201,7 @@ async function loadPosts() {
     }
     articleIndexData = jsonData.data;
   }
+  return articleIndexData;
 }
 
 /**
@@ -212,8 +213,8 @@ async function loadPosts() {
 export async function fetchPostsInfo(filterValue, filterParam = 'path') {
   let filter = filterValue;
   filter = getRelativePath(filterValue);
-  await loadPosts();
-  return articleIndexData.filter((obj) => obj[filterParam] === filter);
+  const articles = await loadPosts();
+  return articles.filter((obj) => obj[filterParam] === filter);
 }
 
 /**
@@ -222,9 +223,9 @@ export async function fetchPostsInfo(filterValue, filterParam = 'path') {
  * @return {Promise<void>}
  */
 export async function getPostByIdx(idx) {
-  await loadPosts();
-  if (articleIndexData.length >= idx) {
-    return articleIndexData[idx - 1];
+  const articles = await loadPosts();
+  if (articles.length >= idx) {
+    return articles[idx - 1];
   }
   return undefined;
 }

diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
@@ -21,6 +21,7 @@
   --clr-dark-gray: #141414;
   --clr-white: #fff;
   --tan: #8e7b5c;
+  --transparent-tan: #8E7B5C33;
   --subdued-gold: #b19b5e;
   --silver: #ccc;
   --very-light-grey: #ddd;