From c7824069a7c240bfb41caf689075c5eede0d9a56 Mon Sep 17 00:00:00 2001
From: Tony Klapatch <aklapatch@famous-smoke.com>
Date: Tue, 11 Jun 2024 14:46:36 -0400
Subject: [PATCH] Add related articles

---
 best-cigars-guide/blocks/related/related.css |  7 +++++
 best-cigars-guide/blocks/related/related.js  | 33 ++++++++++++++++++++
 best-cigars-guide/blocks/sidebar/sidebar.js  | 24 +-------------
 best-cigars-guide/icons/external-link.svg    |  1 +
 tools/importer/import.js                     | 22 ++++++++++++-
 5 files changed, 63 insertions(+), 24 deletions(-)
 create mode 100644 best-cigars-guide/blocks/related/related.css
 create mode 100644 best-cigars-guide/blocks/related/related.js
 create mode 100644 best-cigars-guide/icons/external-link.svg

diff --git a/best-cigars-guide/blocks/related/related.css b/best-cigars-guide/blocks/related/related.css
new file mode 100644
index 0000000..e5d3574
--- /dev/null
+++ b/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;
+}
diff --git a/best-cigars-guide/blocks/related/related.js b/best-cigars-guide/blocks/related/related.js
new file mode 100644
index 0000000..5568737
--- /dev/null
+++ b/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();
+}
diff --git a/best-cigars-guide/blocks/sidebar/sidebar.js b/best-cigars-guide/blocks/sidebar/sidebar.js
index 193d46d..8a13f03 100644
--- a/best-cigars-guide/blocks/sidebar/sidebar.js
+++ b/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;
 }
diff --git a/best-cigars-guide/icons/external-link.svg b/best-cigars-guide/icons/external-link.svg
new file mode 100644
index 0000000..894e9b4
--- /dev/null
+++ b/best-cigars-guide/icons/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
\ No newline at end of file
diff --git a/tools/importer/import.js b/tools/importer/import.js
index 83b9a7f..08a7181 100644
--- a/tools/importer/import.js
+++ b/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;
   },