Feature/article list

cigaradvisor/blocks/article-list/article-list.css

@@ -1 +1 @@
-/** Dummy File for now **/
+@import url('../article-teaser/article-teaser.css');

cigaradvisor/blocks/article-list/article-list.js

@@ -1,3 +1,38 @@
+import { readBlockConfig } from '../../scripts/aem.js';
+import { fetchData, getRelativePath } from '../../scripts/scripts.js';
+import { buildArticleTeaser } from '../article-teaser/article-teaser.js';
+
 export default async function decorate(block) {
-  block.innerHTML = '';
+  const configs = readBlockConfig(block);
+  const { category } = configs;
+  const parentDiv = document.createElement('div');
+  parentDiv.classList.add('section');
+  parentDiv.dataset.layout = '50/50';
+  const leftDiv = document.createElement('div');
+  leftDiv.classList.add('left-grid');
+  const rightDiv = document.createElement('div');
+  rightDiv.classList.add('right-grid');
+  let current = rightDiv;
+  if (category) {
+    const articles = await fetchData(getRelativePath(category), '/cigaradvisor/posts/query-index.json', 'category');
+    if (!articles || articles.length === 0) {
+      return;
+    }
+    const articlePromises = [...articles].map(async (article) => {
+      const articletTeaserWrapper = document.createElement('div');
+      articletTeaserWrapper.classList.add('article-teaser-wrapper');
+      const articleTeaser = document.createElement('div');
+      articleTeaser.classList.add('article-teaser');
+      articleTeaser.classList.add('block');
+      articletTeaserWrapper.append(articleTeaser);
+      current = (current === leftDiv) ? rightDiv : leftDiv;
+      current.append(articletTeaserWrapper);
+      await buildArticleTeaser(articleTeaser, article);
+    });
+    await Promise.all(articlePromises);
+
+    parentDiv.append(leftDiv);
+    parentDiv.append(rightDiv);
+    block.replaceChildren(parentDiv);
+  }
 }

cigaradvisor/blocks/article-teaser/article-teaser.js

@@ -13,21 +13,28 @@ function formatDate(originalDateString) {
   return `${formattedDate}|${dateTimeAttribute}`;
 }
 
-export default async function decorate(block) {
-  const filterPath = block.querySelector('a').getAttribute('href');
-  block.classList.add('article-teaser');
-  const articleInfo = await fetchData(getRelativePath(filterPath), '/cigaradvisor/posts/query-index.json');
-  if (!articleInfo) {
-    return;
+// eslint-disable-next-line max-len
+export async function buildArticleTeaser(parentElement, articleInfo, articleCategoryInfo, articleAuthorInfo) {
+  let categoryInfo = articleCategoryInfo;
+  let authorInfo = articleAuthorInfo;
+  if (!articleCategoryInfo) {
+    const articleCategoryLink = articleInfo.category;
+    const fetchedCategoryInfo = await fetchData(getRelativePath(articleCategoryLink), '/cigaradvisor/query-index.json');
+    if (fetchedCategoryInfo && fetchedCategoryInfo.length !== 0) {
+      [categoryInfo] = fetchedCategoryInfo;
+    }
+  }
+  if (!articleAuthorInfo) {
+    const articleAuthorLink = articleInfo.author;
+    const fetchedAuthorInfo = await fetchData(getRelativePath(articleAuthorLink), '/cigaradvisor/author/query-index.json');
+    if (fetchedAuthorInfo && fetchedAuthorInfo.length !== 0) {
+      [authorInfo] = fetchedAuthorInfo;
+    }
   }
-  const articleCategoryLink = articleInfo.category;
-  const articleCategoryInfo = await fetchData(getRelativePath(articleCategoryLink));
   const [formattedDate, datetimeAttr] = formatDate(articleInfo.published).split('|');
-  const articleAuthorLink = articleInfo.author;
-  const articleAuthorInfo = await fetchData(getRelativePath(articleAuthorLink), '/cigaradvisor/author/query-index.json');
-  block.innerHTML = `
+  parentElement.innerHTML += `
         <article class="article article-thumbnail">
-          <a class="article-category" href="${articleCategoryLink}" data-category="${(articleCategoryInfo && articleCategoryInfo.title) ? articleCategoryInfo.title : ''}" title="${(articleCategoryInfo && articleCategoryInfo.title) ? articleCategoryInfo.title : ''}">${(articleCategoryInfo && articleCategoryInfo.title) ? articleCategoryInfo.title : ''}</a>
+          <a class="article-category" href="${categoryInfo ? categoryInfo.path : ''}" data-category="${(categoryInfo && categoryInfo.title) ? categoryInfo.title : ''}" title="${(categoryInfo && categoryInfo.title) ? categoryInfo.title : ''}">${(categoryInfo && categoryInfo.title) ? categoryInfo.title : ''}</a>
           <div class="article-image">
           ${createOptimizedPicture(articleInfo.image).outerHTML}
           </div>
@@ -37,7 +44,7 @@ export default async function decorate(block) {
                 <a class="article-title-link" href="${articleInfo.path}" title="${articleInfo.title}">${articleInfo.title}</a>
                   </h2>
                   <div class="article-meta">
-                <a class="article-authorLink" href="${articleAuthorLink}" title="By ${(articleAuthorInfo && articleAuthorInfo.name) ? articleAuthorInfo.name : ''}">By ${(articleAuthorInfo && articleAuthorInfo.name) ? articleAuthorInfo.name : ''}</a>
+                <a class="article-authorLink" href="${authorInfo ? authorInfo.path : ''}" title="By ${(authorInfo && authorInfo.name) ? authorInfo.name : ''}">By ${(authorInfo && authorInfo.name) ? authorInfo.name : ''}</a>
                 <time class="article-pubdate" datetime="${datetimeAttr}">${formattedDate}</time>
           </div>
           </articleheader>
@@ -51,3 +58,14 @@ export default async function decorate(block) {
         </article>
         `;
 }
+
+export default async function decorate(block) {
+  const filterPath = block.querySelector('a').getAttribute('href');
+  block.classList.add('article-teaser');
+  const articleInfo = await fetchData(getRelativePath(filterPath), '/cigaradvisor/posts/query-index.json');
+  if (!articleInfo || articleInfo.length === 0) {
+    return;
+  }
+  block.innerHTML = '';
+  buildArticleTeaser(block, articleInfo[0]);
+}

cigaradvisor/blocks/articleheader/articleheader.js

@@ -9,20 +9,20 @@ export default async function decorate(block) {
   const articleInfo = document.createElement('div');
   articleInfo.classList.add('article-info');
   const categoryLink = block.querySelector('p.category').innerText;
-  const category = await fetchData(getRelativePath(categoryLink));
-  if (category) {
+  const category = await fetchData(getRelativePath(categoryLink), '/cigaradvisor/query-index.json');
+  if (category[0]) {
     const categoryLinkEl = document.createElement('div');
     categoryLinkEl.classList.add('article-category');
-    categoryLinkEl.innerHTML = `<a href="${categoryLink}">${category.title}</a>`;
+    categoryLinkEl.innerHTML = `<a href="${categoryLink}">${category[0].title}</a>`;
     articleInfo.append(categoryLinkEl);
   }
   articleInfo.append(block.querySelector('h1'));
   const authorLink = block.querySelector('p.author').innerText;
-  const author = await fetchData(getRelativePath(authorLink));
+  const author = await fetchData(getRelativePath(authorLink), '/cigaradvisor/author/query-index.json');
   const authorLinkEl = document.createElement('div');
   authorLinkEl.classList.add('article-author');
-  if (author) {
-    authorLinkEl.innerHTML = `<a href="${authorLink}">By ${author.title}</a>`;
+  if (author[0]) {
+    authorLinkEl.innerHTML = `<a href="${authorLink}">By ${author[0].title}</a>`;
     articleInfo.append(authorLinkEl);
   }
   const publishedDate = block.querySelector('p.published-date').innerText;

cigaradvisor/blocks/author-card/author-card.js

@@ -35,12 +35,12 @@ export default async function decorate(block) {
   authorWrapperSection.innerHTML = '';
   const authorPromises = [...authors].map(async (authorPage) => {
     const authorInfo = await fetchData(getRelativePath(authorPage), '/cigaradvisor/author/query-index.json');
-    if (authorInfo) {
+    if (authorInfo[0]) {
       return `<div class="author-content">
         <div class="overlay-image">
-          ${createOptimizedPicture(authorInfo.image).outerHTML}
+          ${createOptimizedPicture(authorInfo[0].image).outerHTML}
           <div class="overlay-content">
-            <p class="align-center"><a href="${authorInfo.page}">${authorInfo.name}</a></p>
+            <p class="align-center"><a href="${authorInfo[0].page}">${authorInfo[0].name}</a></p>
           </div>
         </div>
       </div>`;

cigaradvisor/scripts/scripts.js

@@ -206,17 +206,17 @@ export function getRelativePath(path) {
 let indexData = '';
 let authorIndexData = '';
 let articleIndexData = '';
+
 /**
- * Fetches data from a specified URL and returns the filtered
- * data based on the provided filter path.
- * @param {string} filterPath - The path used to filter the data.
- * @param {string} [fetchUrl='/query-index.json'] - The URL to fetch the data
- *  from. Defaults to '/query-index.json'.
- * @returns {Promise<Object>} - A promise that resolves to the filtered data object.
+ * Fetches data based on the search value and fetch URL.
+ * @param {string} searchValue - The value to search for.
+ * @param {string} fetchUrl - The URL to fetch the data from. Default value is '/query-index.json'.
+ * @param {string} searchParam - The parameter to search for in the data. Default value is 'path'.
+ * @returns {Promise<Array>} - A promise that resolves to an array of filtered data.
  */
-export async function fetchData(filterPath, fetchUrl = '/query-index.json') {
+export async function fetchData(searchValue, fetchUrl = '/query-index.json', searchParam = 'path') {
   let responeData = '';
-  if (fetchUrl === '/query-index.json') {
+  if (fetchUrl === '/cigaradvisor/query-index.json') {
     if (!indexData) {
       const resp = await fetch(fetchUrl);
       let jsonData = '';
@@ -251,7 +251,7 @@ export async function fetchData(filterPath, fetchUrl = '/query-index.json') {
   }
   let filteredData = '';
   if (responeData) {
-    filteredData = responeData.find((obj) => obj.path === filterPath);
+    filteredData = responeData.filter((obj) => obj[searchParam] === searchValue);
   }
   return filteredData;
 }