Merge pull request #53 from famous-smoke/52-related-articles

Add related articles

best-cigars-guide/blocks/related/related.css

@@ -0,0 +1,7 @@
+.sidebar-related-articles a::before {
+    content: url('/best-cigars-guide/icons/external-link.svg');
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    padding-right: 0.5em;
+}

best-cigars-guide/blocks/related/related.js

@@ -0,0 +1,33 @@
+export default async function decorate(block) {
+  const links = block.querySelectorAll(':scope > div');
+  if (!links || links.length === 0) {
+    return;
+  }
+
+  const wrap = document.createElement('div');
+  wrap.className = 'sidebar-related-articles';
+
+  const heading = document.createElement('h3');
+  heading.textContent = 'Related Articles';
+  wrap.append(heading);
+
+  const list = document.createElement('ul');
+  // eslint-disable-next-line no-restricted-syntax
+  for (const link of links) {
+    const el = document.createElement('li');
+
+    const linkEl = document.createElement('a');
+    linkEl.textContent = link.firstElementChild.textContent;
+    linkEl.href = link.lastElementChild.textContent;
+    linkEl.target = '_blank';
+    el.appendChild(linkEl);
+
+    list.appendChild(el);
+  }
+
+  wrap.append(list);
+
+  const sidebar = document.querySelector('.sidebar-wrapper > div.sidebar');
+  sidebar.append(wrap);
+  block.remove();
+}

best-cigars-guide/blocks/sidebar/sidebar.js

@@ -3,30 +3,11 @@ import { fetchCategoryList, fetchArticleList } from '../../scripts/scripts.js';
 // get the current category name
 const currentCategoryPath = window.location.pathname.split('/').slice(0, 3).join('/');
 
-async function getRelatedArticles() {
-  const wrap = document.createElement('div');
-  wrap.className = 'sidebar-related-articles';
-
-  const heading = document.createElement('h3');
-  heading.textContent = 'Related Articles';
-  wrap.append(heading);
-
-  const list = document.createElement('ul');
-
-  // todo: related article magic  🪄
-  list.innerHTML = '<li><a href="/best-cigars-guide">Dummy list item</a></li><li><a href="/best-cigars-guide">Dummy list item 2</a></li>';
-
-  wrap.append(list);
-
-  return wrap;
-}
-
 async function getCategories() {
   const wrap = document.createElement('div');
   wrap.className = 'sidebar-categories';
 
   const heading = document.createElement('h3');
-  heading.textContent = 'CATEGORY';
   wrap.append(heading);
 
   const categoriesList = await fetchCategoryList();
@@ -73,10 +54,7 @@ async function getCategories() {
 
 export default async function decorate(block) {
   const categories = await getCategories();
-  block.append(categories);
-
-  const relatedArticles = await getRelatedArticles();
-  block.append(relatedArticles);
+  block.prepend(categories);
 
   return block;
 }

tools/importer/import.js

@@ -57,7 +57,7 @@ const createItemBlocks = (post, document) => {
   const items = document.querySelectorAll('.cigars-listing .cigar');
   if (!items || items.length === 0) {
     // no blocks to add
-    return [];
+    return;
   }
 
   for (const item of items) {
@@ -93,11 +93,31 @@ const createItemBlocks = (post, document) => {
   }
 };
 
+// Add the related post links
+const createRelatedLinkBlock = (post, document) => {
+  const relatedLinks = document.querySelectorAll('.related li');
+
+  if (!relatedLinks || relatedLinks.length === 0) {
+    // no related links to add
+    return;
+  }
+
+  const cell = [];
+  cell.push(['Related']);
+  for (const link of relatedLinks) {
+    cell.push([link.textContent, link.querySelector('a').href.replace('http://localhost:3001', 'https://www.famous-smoke.com')]);
+  }
+
+  const block = WebImporter.DOMUtils.createTable(cell, document);
+  post.append(block);
+}
+
 export default {
   transformDOM: ({ document }) => {
     const post = document.querySelector('article.post');
     createNavBlock(post, document);
     createItemBlocks(post, document);
+    createRelatedLinkBlock(post, document);
     createMetadataBlock(post, document);
     return post;
   },