Auto-Select next Article in Teasers (#119)

* Make article teasers auto-update to latest published in order. * Lint
hlxsites · Jan 24, 2024 · bad8941 · bad8941
1 parent 4059857
commit bad8941
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 12 deletions.
diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js
@@ -1,5 +1,7 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
-import { fetchPostsInfo, fetchAuthorInfo, fetchCategoryInfo } from '../../scripts/scripts.js';
+import {
+  fetchPostsInfo, fetchAuthorInfo, fetchCategoryInfo, getPostByIdx,
+} from '../../scripts/scripts.js';
 
 function formatDate(originalDateString) {
   const utcDateString = new Date(originalDateString * 1000);
@@ -45,9 +47,22 @@ export function buildArticleTeaser(parentElement, article) {
 }
 
 export default async function decorate(block) {
-  const filterPath = block.querySelector('a').getAttribute('href');
-  block.classList.add('article-teaser');
-  const article = await fetchPostsInfo(filterPath);
+  const filterPath = block.querySelector('a')?.getAttribute('href');
+  let article;
+  if (filterPath) {
+    article = await fetchPostsInfo(filterPath);
+  } else if (block.querySelector(':scope > div > div:nth-of-type(2)').textContent.toLowerCase() === 'next') {
+    block.classList.add('next');
+    const idx = document.querySelectorAll('main .article-teaser.block.next').length;
+    article = await getPostByIdx(idx);
+
+    // Check for a pinned / manually entered teaser
+    const existing = document.querySelector(`a[href="${article.path}"]`);
+    if (existing && existing.closest('div.block.article-teaser')) {
+      existing.closest('div.block.article-teaser').classList.add('next');
+      article = await getPostByIdx(idx + 1);
+    }
+  }
   if (!article) {
     return;
   }

diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -192,6 +192,17 @@ export function getRelativePath(path) {
 }
 
 let articleIndexData;
+async function loadPosts() {
+  if (!articleIndexData) {
+    const resp = await fetch(ARTICLE_INDEX_PATH);
+    let jsonData = '';
+    if (resp.ok) {
+      jsonData = await resp.json();
+    }
+    articleIndexData = jsonData.data;
+  }
+}
+
 /**
  * Fetches posts information based on the provided filter value and filter parameter.
  * @param {string} filterValue - The value to filter the posts by.
@@ -201,17 +212,23 @@ let articleIndexData;
 export async function fetchPostsInfo(filterValue, filterParam = 'path') {
   let filter = filterValue;
   filter = getRelativePath(filterValue);
-  if (!articleIndexData) {
-    const resp = await fetch(ARTICLE_INDEX_PATH);
-    let jsonData = '';
-    if (resp.ok) {
-      jsonData = await resp.json();
-    }
-    articleIndexData = jsonData.data;
-  }
+  await loadPosts();
   return articleIndexData.find((obj) => obj[filterParam] === filter);
 }
 
+/**
+ * Fetches a post by a given index, starting at 1.
+ * @param idx the index
+ * @return {Promise<void>}
+ */
+export async function getPostByIdx(idx) {
+  await loadPosts();
+  if (articleIndexData.length >= idx) {
+    return articleIndexData[idx - 1];
+  }
+  return undefined;
+}
+
 let authorIndexData;
 /**
  * Retrieves all authors from the server.