Merge branch 'main' into 47-add-ldjson-data

best-cigars-guide/blocks/article-list/article-list.css

@@ -44,7 +44,6 @@
   height: auto;
   transition: transform 0.3s ease;
   line-height: 0;
-  aspect-ratio: 4 / 3;
   object-fit: cover;
 }
 

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

@@ -79,11 +79,7 @@ async function createCategoriesDropdown() {
   categoriesList.forEach((category) => {
     const option = document.createElement('option');
     option.value = category.path;
-    option.textContent = category.path
-      .split('/')
-      .pop()
-      .replace(/-/g, ' ')
-      .replace(/\b\w/g, (char) => char.toUpperCase());
+    option.textContent = category.title.split('|')[0].trim();
     const categoryPath = category.path.split('/').slice(0, 3).join('/');
     if (categoryPath === currentCategoryPath) {
       option.selected = true;

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 getCategoryArticles() {
   const wrap = document.createElement('div');
   wrap.className = 'sidebar-categories';
 
   const heading = document.createElement('h3');
-  heading.textContent = 'CATEGORY';
   wrap.append(heading);
 
   const categoriesList = await fetchCategoryList();
@@ -69,10 +50,7 @@ async function getCategoryArticles() {
 
 export default async function decorate(block) {
   const categories = await getCategoryArticles();
-  block.append(categories);
-
-  const relatedArticles = await getRelatedArticles();
-  block.append(relatedArticles);
+  block.prepend(categories);
 
   return block;
 }

best-cigars-guide/scripts/scripts.js

@@ -19,7 +19,7 @@ export async function fetchCategoryList() {
       const resp = await fetch(CATEGORY_INDEX_PATH);
       if (resp.ok) {
         const jsonData = await resp.json();
-        categoryIndexData = jsonData.data.map((item) => ({ path: item.path }));
+        categoryIndexData = jsonData.data.map((item) => ({ path: item.path, title: item.title }));
       } else {
         // eslint-disable-next-line no-console
         console.error('Failed to fetch category list:', resp.status);

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;
   },