From 4f18a8e56696edde84272c731325fb8b439c8a50 Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Thu, 9 May 2024 10:48:36 -0400
Subject: [PATCH 01/15] Article-list block based on Cards block. PNG image
 based on favicon for meta image. Prelim import-category.js file

---
 .../blocks/article-list/article-list.css      |  31 +++++++
 .../blocks/article-list/article-list.js       |  18 +++++
 best-cigars-guide/icons/best-cigars-guide.png | Bin 0 -> 2132 bytes
 tools/importer/import-category.js             |  76 ++++++++++++++++++
 4 files changed, 125 insertions(+)
 create mode 100644 best-cigars-guide/blocks/article-list/article-list.css
 create mode 100644 best-cigars-guide/blocks/article-list/article-list.js
 create mode 100644 best-cigars-guide/icons/best-cigars-guide.png
 create mode 100644 tools/importer/import-category.js

diff --git a/best-cigars-guide/blocks/article-list/article-list.css b/best-cigars-guide/blocks/article-list/article-list.css
new file mode 100644
index 0000000..a477efe
--- /dev/null
+++ b/best-cigars-guide/blocks/article-list/article-list.css
@@ -0,0 +1,31 @@
+.cards > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  grid-gap: 16px;
+}
+
+.cards > ul > li {
+  border: 1px solid var(--dark-color);
+  background-color: var(--background-color)
+}
+
+.cards .cards-card-body {
+  margin: 16px;
+}
+
+.cards .cards-card-image {
+  line-height: 0;
+}
+
+.cards .cards-card-body > *:first-child {
+  margin-top: 0;
+}
+
+.cards > ul > li img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
new file mode 100644
index 0000000..58993b1
--- /dev/null
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -0,0 +1,18 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
+export default function decorate(block) {
+  /* change to ul, li */
+  const ul = document.createElement('ul');
+  [...block.children].forEach((row) => {
+    const li = document.createElement('li');
+    while (row.firstElementChild) li.append(row.firstElementChild);
+    [...li.children].forEach((div) => {
+      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
+      else div.className = 'cards-card-body';
+    });
+    ul.append(li);
+  });
+  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+  block.textContent = '';
+  block.append(ul);
+}
diff --git a/best-cigars-guide/icons/best-cigars-guide.png b/best-cigars-guide/icons/best-cigars-guide.png
new file mode 100644
index 0000000000000000000000000000000000000000..3687b1cde3825b10fcd6a505936c2b73385b290c
GIT binary patch
literal 2132
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

literal 0
HcmV?d00001

diff --git a/tools/importer/import-category.js b/tools/importer/import-category.js
new file mode 100644
index 0000000..b004cf2
--- /dev/null
+++ b/tools/importer/import-category.js
@@ -0,0 +1,76 @@
+const createMetadataBlock = (main, document) => {
+  const meta = {};
+
+  // find the <title> element
+  const title = document.querySelector("title");
+  if (title) {
+    meta.Title = title.innerHTML.replace(/[\n\t]/gm, "");
+  }
+
+  // find the <meta property="og:description"> element
+  const desc = document.querySelector('[property="og:description"]');
+  if (desc) {
+    meta.Description = desc.content;
+  }
+
+  // set the <meta property="og:image"> element
+  meta.image =
+    "/best-cigars-guide/icons/best-cigars-guide.png";
+
+  // helper to create the metadata block
+  const block = WebImporter.Blocks.getMetadataBlock(document, meta);
+
+  // append the block to the main element
+  main.append(block);
+
+  // returning the meta object might be usefull to other rules
+  return meta;
+};
+
+const createArticleListBlock = (main, document) => {
+  var categories = [["Article-list"]];
+  var categoriesList = document.querySelector(".categories-list");
+  var divElements = categoriesList.querySelectorAll("div");
+
+  divElements.forEach(function (element) {
+    var title = element.querySelector("h3").textContent.trim();
+    var description = element.querySelector("p").textContent.trim();
+    var image = element.querySelector("img");
+    var imageSrc = image ? image.src : "";
+    var linkElement = element.querySelector("a.button");
+    var link = linkElement ? linkElement.href : "";
+
+    var card = [
+      [image, link],
+      [title, description, linkElement],
+    ];
+
+    categories.push(card);
+  });
+
+  const articleList = WebImporter.DOMUtils.createTable(categories, document);
+
+  main.append(articleList);
+
+  // remove .categories-list from main because we just added it manually
+  WebImporter.DOMUtils.remove(main, [".categories-list"]);
+
+  return articleList;
+};
+
+const removeSectionsNotForImport = (main, document) => {
+  // remove any section from main not needed for import
+  WebImporter.DOMUtils.remove(main, [".category-dropdown"]);
+};
+
+export default {
+  transformDOM: ({ document }) => {
+    const main = document.querySelector("main");
+
+    createMetadataBlock(main, document);
+    createArticleListBlock(main, document);
+    removeSectionsNotForImport(main, document);
+
+    return main;
+  },
+};

From 2581b9f7b0bfcb4950b5d455519a38ade44fc40f Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 11:06:24 -0400
Subject: [PATCH 02/15] Do not import breadcrumb. Style and structure article
 list.

---
 .../blocks/article-list/article-list.css      |  90 +++++++++--
 .../blocks/article-list/article-list.js       | 142 +++++++++++++++++-
 tools/importer/import-category.js             |  34 +++--
 3 files changed, 237 insertions(+), 29 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.css b/best-cigars-guide/blocks/article-list/article-list.css
index a477efe..b74b618 100644
--- a/best-cigars-guide/blocks/article-list/article-list.css
+++ b/best-cigars-guide/blocks/article-list/article-list.css
@@ -1,4 +1,5 @@
-.cards > ul {
+/* General styles for the list and list items */
+.article-list > ul {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -7,25 +8,92 @@
   grid-gap: 16px;
 }
 
-.cards > ul > li {
-  border: 1px solid var(--dark-color);
-  background-color: var(--background-color)
+.article-list > ul > li {
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 10px;
 }
 
-.cards .cards-card-body {
-  margin: 16px;
+/* Styles for article body, title, and description */
+.article-list-card-body {
+  margin: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  text-align: center;
 }
 
-.cards .cards-card-image {
-  line-height: 0;
+.article-title {
+  margin-top: 0;
+  padding-top: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
+/* Image and hover effects */
+.article-list-card-image a {
+  display: block;
+  overflow: hidden;
 }
 
-.cards > ul > li img {
+.article-list-card-image img {
   width: 100%;
+  height: auto;
+  transition: transform 0.3s ease;
+  line-height: 0;
   aspect-ratio: 4 / 3;
   object-fit: cover;
 }
+
+.article-list-card-image a:hover img {
+  transform: scale(1.1);
+}
+
+/* Button styles */
+.article-list .article-button-container .button {
+  font-size: 1.1rem;
+  background-color: #177abb;
+  color: white;
+  padding: 10px 40px;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: 5px;
+  border-bottom: 1px solid #035890;
+  margin-top: auto;
+  transition: background-color 0.3s ease; /* Smooth transition for background color change */
+}
+
+/* Button hover effect */
+.article-list .article-button-container .button:hover {
+  background-color: #035890;
+}
+
+/* Container styling for the button */
+.article-button-container {
+  display: flex;  /* Use flexbox for layout */
+  justify-content: center;  /* Center horizontally */
+  align-items: center;  /* Center vertically */
+  padding: 10px;  
+  margin-top: auto;  /* Pushes the container to the bottom if flex-direction is column in parent */
+}
+
+/* Styles for headings and paragraphs */
+.article-list h3 {
+  color: #2c2c2c;
+  font-weight: 700;
+  line-height: 1.2em;
+  font-size: 1.3rem;
+}
+
+.article-list p {
+  font-family: montserrat, sans-serif;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.4em;
+  color: #4a4a4a;
+  margin: 0 0 1.8em;
+}
diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index 58993b1..d743719 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -1,18 +1,144 @@
-import { createOptimizedPicture } from '../../scripts/aem.js';
+import { createOptimizedPicture } from "../../scripts/aem.js";
 
 export default function decorate(block) {
+  //Add nav
+  //@todo sytle the nav
+  const mainTag = document.querySelector(".article-list-container");
+  const navDiv = document.createElement("div");
+  navDiv.className = 'nav-row';
+  mainTag.prepend(navDiv);
+
+  //Add breadcrumbs
+  //@todo style breadcrumbs
+  const h1 = document.querySelector("h1");
+  const h1Text = h1.textContent.trim();
+
+  const breadcrumbDiv = document.createElement("div");
+  breadcrumbDiv.className = 'breadcrumb';
+  breadcrumbDiv.innerHTML += `
+  <p id="breadcrumbs">
+    <span><a href="https://www.famous-smoke.com/best-cigars-guide/">Home</a></span> » <span class="breadcrumb_last" aria-current="page">${h1Text}</span>
+  </p>
+  `;
+  navDiv.append(breadcrumbDiv);
+
+  //Add dropdown list (copied from existing site)
+  //@todo build list dynamically and style it
+  const dropdownListDiv = document.createElement("div");
+  breadcrumbDiv.className = 'category-dropdown';
+  dropdownListDiv.innerHTML += `
+    <form action="https://www.famous-smoke.com/best-cigars-guide/" method="get" class="dropcats">
+    <select name="cat" id="cat" class="postform" onchange="return this.form.submit()">
+    <option value="-1">Select a Category</option>
+    <option class="level-0" value="2" selected="selected">Best Cigars by Country</option>
+    <option class="level-0" value="3">Best Cigars by Occasion</option>
+    <option class="level-0" value="4">Best Cigars by Food/Drink Pairing</option>
+    <option class="level-0" value="5">Best Cigars by Shape, Type &amp; Size</option>
+    <option class="level-0" value="6">Best Cigars by Year</option>
+    <option class="level-0" value="7">Best Cigar Accessories</option>
+    </select>
+    <noscript><input type="submit" value="View" /></noscript>
+    </form> 
+  `;
+  navDiv.append(dropdownListDiv);
+
+  //Add Article list
   /* change to ul, li */
-  const ul = document.createElement('ul');
+  const ul = document.createElement("ul");
+  //loop over each row of import file
   [...block.children].forEach((row) => {
-    const li = document.createElement('li');
+    const li = document.createElement("li");
+    //For each row child, a new <li> is created.
     while (row.firstElementChild) li.append(row.firstElementChild);
+
+    // Find the last div and extract the href from its link
+    const lastDiv = li.querySelector("div:last-child");
+    const link = lastDiv ? lastDiv.querySelector("a") : null;
+    const href = link ? link.href : "#"; // Default to '#' if no link is found
+
+    // The second div contains the title for links and buttons
+    const secondDiv = li.children[1]; // direct access to the second child assuming it's a div
+    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title
+
+    //loop over each li
     [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-      else div.className = 'cards-card-body';
+      //first div is for the article image
+      if (div.querySelector("picture")) {
+        div.className = "article-list-card-image";
+        const picture = div.querySelector("picture");
+        if (picture) {
+          const anchor = document.createElement("a");
+          anchor.href = href;
+          anchor.title = title;
+          picture.parentNode.insertBefore(anchor, picture);
+          anchor.appendChild(picture);
+        }
+      }
+      //second div is for the article body
+      else if (
+        !div.querySelector("picture") &&
+        li.querySelector(".article-list-card-body") === null
+      ) {
+        div.className = "article-list-card-body";
+      } 
+      //remaining divs are appended to prior article body div
+      else {
+        div.previousSibling.append(div.firstElementChild);
+        // Set class names for the first and second paragraphs within the article-list-card-body
+        const paragraphs = div.previousSibling.querySelectorAll("p");
+        // First paragraph as article-title
+        if (paragraphs.length > 0) {
+          //change article title to an h3
+          const h3 = document.createElement("h3");
+          h3.className = "article-title";
+          h3.textContent = paragraphs[0].textContent;
+          div.previousSibling.replaceChild(h3, paragraphs[0]);
+        }
+        // Second paragraph as article-description
+        if (paragraphs.length > 1) {
+          paragraphs[1].className = "article-description"; 
+        }
+      }
+
+      // Create and append a new div with a button
+      if (!li.querySelector("a.button")) {
+        const newDiv = document.createElement("div");
+        newDiv.className = 'article-button-container';
+        const newLink = document.createElement("a");
+        newLink.href = href;
+        newLink.className = "button";
+        newLink.textContent = "View List";
+        newLink.title = title;
+        newDiv.appendChild(newLink);
+        li.appendChild(newDiv);
+      }
+
+      ul.append(li);
     });
-    ul.append(li);
+
+    // Remove the last div that contained the original link
+    const linkDiv = li.children[2];
+    if (linkDiv && linkDiv.parentNode) {
+      linkDiv.parentNode.removeChild(linkDiv);
+    }
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
-  block.textContent = '';
+
+  //optimize images
+  ul.querySelectorAll("img").forEach((img) =>
+    img
+      .closest("picture")
+      .replaceWith(
+        createOptimizedPicture(img.src, img.alt, false, [{ width: "750" }])
+      )
+  );
+
+  // Remove any empty div tags
+  [...ul.querySelectorAll("div")].forEach((div) => {
+    if (div.children.length === 0 && div.textContent.trim() === "") {
+      div.parentNode.removeChild(div);
+    }
+  });
+
+  block.textContent = "";
   block.append(ul);
 }
diff --git a/tools/importer/import-category.js b/tools/importer/import-category.js
index b004cf2..1c8a3a5 100644
--- a/tools/importer/import-category.js
+++ b/tools/importer/import-category.js
@@ -2,9 +2,9 @@ const createMetadataBlock = (main, document) => {
   const meta = {};
 
   // find the <title> element
-  const title = document.querySelector("title");
+  const title = document.querySelector('title');
   if (title) {
-    meta.Title = title.innerHTML.replace(/[\n\t]/gm, "");
+    meta.Title = title.innerHTML.replace(/[\n\t]/gm, ``);
   }
 
   // find the <meta property="og:description"> element
@@ -14,8 +14,7 @@ const createMetadataBlock = (main, document) => {
   }
 
   // set the <meta property="og:image"> element
-  meta.image =
-    "/best-cigars-guide/icons/best-cigars-guide.png";
+  meta.image = 'https://www.famous-smoke.com/best-cigars-guide/icons/best-cigars-guide.png';
 
   // helper to create the metadata block
   const block = WebImporter.Blocks.getMetadataBlock(document, meta);
@@ -29,20 +28,23 @@ const createMetadataBlock = (main, document) => {
 
 const createArticleListBlock = (main, document) => {
   var categories = [["Article-list"]];
-  var categoriesList = document.querySelector(".categories-list");
-  var divElements = categoriesList.querySelectorAll("div");
+  let categoriesList = document.querySelector(".categories-list");
+  let divElements = categoriesList.querySelectorAll("div");
 
   divElements.forEach(function (element) {
     var title = element.querySelector("h3").textContent.trim();
     var description = element.querySelector("p").textContent.trim();
     var image = element.querySelector("img");
-    var imageSrc = image ? image.src : "";
+    
     var linkElement = element.querySelector("a.button");
+    linkElement.class = 'button';
     var link = linkElement ? linkElement.href : "";
 
     var card = [
-      [image, link],
-      [title, description, linkElement],
+      [image],
+      [title], 
+      [description],
+      [formatUrl(link)]
     ];
 
     categories.push(card);
@@ -58,9 +60,21 @@ const createArticleListBlock = (main, document) => {
   return articleList;
 };
 
+const formatUrl = (originalUrl) => {
+    // Create a URL object based on the original URL
+    var url = new URL(originalUrl);
+
+    // Set the new domain (including protocol)
+    url.hostname = "www.famous-smoke.com";
+    url.protocol = "https:";
+    url.port = '';
+    
+    return url;
+}
+
 const removeSectionsNotForImport = (main, document) => {
   // remove any section from main not needed for import
-  WebImporter.DOMUtils.remove(main, [".category-dropdown"]);
+  WebImporter.DOMUtils.remove(main, [".category-dropdown",".breadcrumb"]);
 };
 
 export default {

From a6f252e79e2ccb13cbe268a7602e922f3e41221d Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 11:16:02 -0400
Subject: [PATCH 03/15] Fix GitHub Buld actions warning.

---
 .../blocks/article-list/article-list.js       | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index d743719..17aca89 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -1,19 +1,19 @@
-import { createOptimizedPicture } from "../../scripts/aem.js";
+import { createOptimizedPicture } from './../scripts/aem.js';
 
 export default function decorate(block) {
-  //Add nav
-  //@todo sytle the nav
-  const mainTag = document.querySelector(".article-list-container");
-  const navDiv = document.createElement("div");
+  //Add nav 
+  //@todo sytle the nav 
+  const mainTag = document.querySelector('.article-list-container');
+  const navDiv = document.createElement('div');
   navDiv.className = 'nav-row';
   mainTag.prepend(navDiv);
 
-  //Add breadcrumbs
-  //@todo style breadcrumbs
-  const h1 = document.querySelector("h1");
+  //Add breadcrumbs 
+  //@todo style breadcrumbs 
+  const h1 = document.querySelector('h1');
   const h1Text = h1.textContent.trim();
 
-  const breadcrumbDiv = document.createElement("div");
+  const breadcrumbDiv = document.createElement('div');
   breadcrumbDiv.className = 'breadcrumb';
   breadcrumbDiv.innerHTML += `
   <p id="breadcrumbs">
@@ -22,8 +22,8 @@ export default function decorate(block) {
   `;
   navDiv.append(breadcrumbDiv);
 
-  //Add dropdown list (copied from existing site)
-  //@todo build list dynamically and style it
+  //Add dropdown list (copied from existing site) 
+  //@todo build list dynamically and style it 
   const dropdownListDiv = document.createElement("div");
   breadcrumbDiv.className = 'category-dropdown';
   dropdownListDiv.innerHTML += `
@@ -42,27 +42,27 @@ export default function decorate(block) {
   `;
   navDiv.append(dropdownListDiv);
 
-  //Add Article list
+  //Add Article list 
   /* change to ul, li */
   const ul = document.createElement("ul");
-  //loop over each row of import file
+  //loop over each row of import file 
   [...block.children].forEach((row) => {
     const li = document.createElement("li");
-    //For each row child, a new <li> is created.
+    //For each row child, a new <li> is created. 
     while (row.firstElementChild) li.append(row.firstElementChild);
 
-    // Find the last div and extract the href from its link
+    // Find the last div and extract the href from its link 
     const lastDiv = li.querySelector("div:last-child");
     const link = lastDiv ? lastDiv.querySelector("a") : null;
-    const href = link ? link.href : "#"; // Default to '#' if no link is found
+    const href = link ? link.href : "#"; // Default to '#' if no link is found 
 
-    // The second div contains the title for links and buttons
-    const secondDiv = li.children[1]; // direct access to the second child assuming it's a div
-    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title
+    // The second div contains the title for links and buttons 
+    const secondDiv = li.children[1]; // direct access to the second child assuming it's a div 
+    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title 
 
-    //loop over each li
+    //loop over each li 
     [...li.children].forEach((div) => {
-      //first div is for the article image
+      //first div is for the article image 
       if (div.querySelector("picture")) {
         div.className = "article-list-card-image";
         const picture = div.querySelector("picture");
@@ -74,33 +74,33 @@ export default function decorate(block) {
           anchor.appendChild(picture);
         }
       }
-      //second div is for the article body
+      //second div is for the article body 
       else if (
         !div.querySelector("picture") &&
         li.querySelector(".article-list-card-body") === null
       ) {
         div.className = "article-list-card-body";
       } 
-      //remaining divs are appended to prior article body div
+      //remaining divs are appended to prior article body div 
       else {
         div.previousSibling.append(div.firstElementChild);
-        // Set class names for the first and second paragraphs within the article-list-card-body
+        // Set class names for the first and second paragraphs within the article-list-card-body 
         const paragraphs = div.previousSibling.querySelectorAll("p");
-        // First paragraph as article-title
+        // First paragraph as article-title 
         if (paragraphs.length > 0) {
-          //change article title to an h3
+          //change article title to an h3 
           const h3 = document.createElement("h3");
           h3.className = "article-title";
           h3.textContent = paragraphs[0].textContent;
           div.previousSibling.replaceChild(h3, paragraphs[0]);
         }
-        // Second paragraph as article-description
+        // Second paragraph as article-description 
         if (paragraphs.length > 1) {
           paragraphs[1].className = "article-description"; 
         }
       }
 
-      // Create and append a new div with a button
+      // Create and append a new div with a button 
       if (!li.querySelector("a.button")) {
         const newDiv = document.createElement("div");
         newDiv.className = 'article-button-container';

From cc57c7969d5ec1e91b8ab3fe3d5ee496365b005b Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 11:23:08 -0400
Subject: [PATCH 04/15] Fix GitHub Buld actions warnings take 2.

---
 .../blocks/article-list/article-list.js       | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index 17aca89..1282295 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -1,20 +1,20 @@
-import { createOptimizedPicture } from './../scripts/aem.js';
+import { createOptimizedPicture } from "../../scripts/aem.js";
 
 export default function decorate(block) {
-  //Add nav 
-  //@todo sytle the nav 
-  const mainTag = document.querySelector('.article-list-container');
-  const navDiv = document.createElement('div');
-  navDiv.className = 'nav-row';
+  // Add nav
+  // @todo sytle the nav
+  const mainTag = document.querySelector(".article-list-container");
+  const navDiv = document.createElement("div");
+  navDiv.className = "nav-row";
   mainTag.prepend(navDiv);
 
-  //Add breadcrumbs 
-  //@todo style breadcrumbs 
-  const h1 = document.querySelector('h1');
+  // Add breadcrumbs
+  // @todo style breadcrumbs
+  const h1 = document.querySelector("h1");
   const h1Text = h1.textContent.trim();
 
-  const breadcrumbDiv = document.createElement('div');
-  breadcrumbDiv.className = 'breadcrumb';
+  const breadcrumbDiv = document.createElement("div");
+  breadcrumbDiv.className = "breadcrumb";
   breadcrumbDiv.innerHTML += `
   <p id="breadcrumbs">
     <span><a href="https://www.famous-smoke.com/best-cigars-guide/">Home</a></span> » <span class="breadcrumb_last" aria-current="page">${h1Text}</span>
@@ -22,10 +22,10 @@ export default function decorate(block) {
   `;
   navDiv.append(breadcrumbDiv);
 
-  //Add dropdown list (copied from existing site) 
-  //@todo build list dynamically and style it 
+  //Add dropdown list (copied from existing site)
+  //@todo build list dynamically and style it
   const dropdownListDiv = document.createElement("div");
-  breadcrumbDiv.className = 'category-dropdown';
+  breadcrumbDiv.className = "category-dropdown";
   dropdownListDiv.innerHTML += `
     <form action="https://www.famous-smoke.com/best-cigars-guide/" method="get" class="dropcats">
     <select name="cat" id="cat" class="postform" onchange="return this.form.submit()">
@@ -42,27 +42,27 @@ export default function decorate(block) {
   `;
   navDiv.append(dropdownListDiv);
 
-  //Add Article list 
+  // Add Article list
   /* change to ul, li */
   const ul = document.createElement("ul");
-  //loop over each row of import file 
+  // loop over each row of import file
   [...block.children].forEach((row) => {
     const li = document.createElement("li");
-    //For each row child, a new <li> is created. 
+    // For each row child, a new <li> is created.
     while (row.firstElementChild) li.append(row.firstElementChild);
 
-    // Find the last div and extract the href from its link 
+    // Find the last div and extract the href from its link
     const lastDiv = li.querySelector("div:last-child");
     const link = lastDiv ? lastDiv.querySelector("a") : null;
-    const href = link ? link.href : "#"; // Default to '#' if no link is found 
+    const href = link ? link.href : "#"; // Default to '#' if no link is found
 
-    // The second div contains the title for links and buttons 
-    const secondDiv = li.children[1]; // direct access to the second child assuming it's a div 
-    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title 
+    // The second div contains the title for links and buttons
+    const secondDiv = li.children[1]; // direct access to the second child assuming it's a div
+    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title
 
-    //loop over each li 
+    // loop over each li
     [...li.children].forEach((div) => {
-      //first div is for the article image 
+      // first div is for the article image
       if (div.querySelector("picture")) {
         div.className = "article-list-card-image";
         const picture = div.querySelector("picture");
@@ -74,36 +74,36 @@ export default function decorate(block) {
           anchor.appendChild(picture);
         }
       }
-      //second div is for the article body 
+      // second div is for the article body
       else if (
         !div.querySelector("picture") &&
         li.querySelector(".article-list-card-body") === null
       ) {
         div.className = "article-list-card-body";
-      } 
-      //remaining divs are appended to prior article body div 
+      }
+      // remaining divs are appended to prior article body div
       else {
         div.previousSibling.append(div.firstElementChild);
-        // Set class names for the first and second paragraphs within the article-list-card-body 
+        // Set class names for the first and second paragraphs within the article-list-card-body
         const paragraphs = div.previousSibling.querySelectorAll("p");
-        // First paragraph as article-title 
+        // First paragraph as article-title
         if (paragraphs.length > 0) {
-          //change article title to an h3 
+          //change article title to an h3
           const h3 = document.createElement("h3");
           h3.className = "article-title";
           h3.textContent = paragraphs[0].textContent;
           div.previousSibling.replaceChild(h3, paragraphs[0]);
         }
-        // Second paragraph as article-description 
+        // Second paragraph as article-description
         if (paragraphs.length > 1) {
-          paragraphs[1].className = "article-description"; 
+          paragraphs[1].className = "article-description";
         }
       }
 
-      // Create and append a new div with a button 
+      // Create and append a new div with a button
       if (!li.querySelector("a.button")) {
         const newDiv = document.createElement("div");
-        newDiv.className = 'article-button-container';
+        newDiv.className = "article-button-container";
         const newLink = document.createElement("a");
         newLink.href = href;
         newLink.className = "button";
@@ -123,7 +123,7 @@ export default function decorate(block) {
     }
   });
 
-  //optimize images
+  // optimize images
   ul.querySelectorAll("img").forEach((img) =>
     img
       .closest("picture")

From 7517d5661028e6dd721205dcd5c3db99ca3a525d Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 11:27:37 -0400
Subject: [PATCH 05/15] Fix GitHub Buld actions warnings take 3.

---
 .../blocks/article-list/article-list.js       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index 1282295..5bfba73 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -1,20 +1,20 @@
-import { createOptimizedPicture } from "../../scripts/aem.js";
+import { createOptimizedPicture } from '../../scripts/aem.js';
 
 export default function decorate(block) {
   // Add nav
   // @todo sytle the nav
-  const mainTag = document.querySelector(".article-list-container");
-  const navDiv = document.createElement("div");
-  navDiv.className = "nav-row";
+  const mainTag = document.querySelector('.article-list-container');
+  const navDiv = document.createElement('div');
+  navDiv.className = 'nav-row';
   mainTag.prepend(navDiv);
 
   // Add breadcrumbs
   // @todo style breadcrumbs
-  const h1 = document.querySelector("h1");
+  const h1 = document.querySelector('h1');
   const h1Text = h1.textContent.trim();
 
-  const breadcrumbDiv = document.createElement("div");
-  breadcrumbDiv.className = "breadcrumb";
+  const breadcrumbDiv = document.createElement('div');
+  breadcrumbDiv.className = 'breadcrumb';
   breadcrumbDiv.innerHTML += `
   <p id="breadcrumbs">
     <span><a href="https://www.famous-smoke.com/best-cigars-guide/">Home</a></span> » <span class="breadcrumb_last" aria-current="page">${h1Text}</span>
@@ -22,10 +22,10 @@ export default function decorate(block) {
   `;
   navDiv.append(breadcrumbDiv);
 
-  //Add dropdown list (copied from existing site)
-  //@todo build list dynamically and style it
-  const dropdownListDiv = document.createElement("div");
-  breadcrumbDiv.className = "category-dropdown";
+  // Add dropdown list (copied from existing site)
+  // @todo build list dynamically and style it
+  const dropdownListDiv = document.createElement('div');
+  breadcrumbDiv.className = 'category-dropdown';
   dropdownListDiv.innerHTML += `
     <form action="https://www.famous-smoke.com/best-cigars-guide/" method="get" class="dropcats">
     <select name="cat" id="cat" class="postform" onchange="return this.form.submit()">

From c69ad08def6c70449a223eab56481d9203e40f4e Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 11:40:08 -0400
Subject: [PATCH 06/15] Fix GitHub Buld actions warnings take 4.

---
 .../blocks/article-list/article-list.js       | 70 +++++++++----------
 tools/importer/import-category.js             | 46 ++++++------
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index 5bfba73..22cc3b8 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -44,70 +44,66 @@ export default function decorate(block) {
 
   // Add Article list
   /* change to ul, li */
-  const ul = document.createElement("ul");
+  const ul = document.createElement('ul');
   // loop over each row of import file
   [...block.children].forEach((row) => {
-    const li = document.createElement("li");
+    const li = document.createElement('li');
     // For each row child, a new <li> is created.
     while (row.firstElementChild) li.append(row.firstElementChild);
 
     // Find the last div and extract the href from its link
-    const lastDiv = li.querySelector("div:last-child");
-    const link = lastDiv ? lastDiv.querySelector("a") : null;
-    const href = link ? link.href : "#"; // Default to '#' if no link is found
+    const lastDiv = li.querySelector('div:last-child');
+    const link = lastDiv ? lastDiv.querySelector('a') : null;
+    const href = link ? link.href : '#'; // Default to '#' if no link is found
 
     // The second div contains the title for links and buttons
     const secondDiv = li.children[1]; // direct access to the second child assuming it's a div
-    const title = secondDiv ? secondDiv.textContent.trim() : ""; // Get the text content as title
+    const title = secondDiv ? secondDiv.textContent.trim() : ''; // Get the text content as title
 
     // loop over each li
     [...li.children].forEach((div) => {
       // first div is for the article image
-      if (div.querySelector("picture")) {
-        div.className = "article-list-card-image";
-        const picture = div.querySelector("picture");
+      if (div.querySelector('picture')) {
+        div.className = 'article-list-card-image';
+        const picture = div.querySelector('picture');
         if (picture) {
-          const anchor = document.createElement("a");
+          const anchor = document.createElement('a');
           anchor.href = href;
           anchor.title = title;
           picture.parentNode.insertBefore(anchor, picture);
           anchor.appendChild(picture);
         }
-      }
-      // second div is for the article body
-      else if (
-        !div.querySelector("picture") &&
-        li.querySelector(".article-list-card-body") === null
+      } else if (
+        !div.querySelector('picture') &&
+        li.querySelector('.article-list-card-body') === null
       ) {
-        div.className = "article-list-card-body";
-      }
-      // remaining divs are appended to prior article body div
-      else {
+        // second div is for the article body
+        div.className = 'article-list-card-body';
+      } else {
+        // remaining divs are appended to prior article body div
         div.previousSibling.append(div.firstElementChild);
         // Set class names for the first and second paragraphs within the article-list-card-body
-        const paragraphs = div.previousSibling.querySelectorAll("p");
-        // First paragraph as article-title
+        const paragraphs = div.previousSibling.querySelectorAll('p');
         if (paragraphs.length > 0) {
           //change article title to an h3
-          const h3 = document.createElement("h3");
-          h3.className = "article-title";
+          const h3 = document.createElement('h3');
+          h3.className = 'article-title';
           h3.textContent = paragraphs[0].textContent;
           div.previousSibling.replaceChild(h3, paragraphs[0]);
         }
-        // Second paragraph as article-description
         if (paragraphs.length > 1) {
-          paragraphs[1].className = "article-description";
+          paragraphs[1].className = 'article-description';
         }
       }
 
       // Create and append a new div with a button
-      if (!li.querySelector("a.button")) {
-        const newDiv = document.createElement("div");
-        newDiv.className = "article-button-container";
-        const newLink = document.createElement("a");
+      if (!li.querySelector('a.button')) {
+        const newDiv = document.createElement('div');
+        newDiv.className = 'article-button-container';
+        const newLink = document.createElement('a');
         newLink.href = href;
-        newLink.className = "button";
-        newLink.textContent = "View List";
+        newLink.className = 'button';
+        newLink.textContent = 'View List';
         newLink.title = title;
         newDiv.appendChild(newLink);
         li.appendChild(newDiv);
@@ -124,21 +120,21 @@ export default function decorate(block) {
   });
 
   // optimize images
-  ul.querySelectorAll("img").forEach((img) =>
+  ul.querySelectorAll('img').forEach((img) =>
     img
-      .closest("picture")
+      .closest('picture')
       .replaceWith(
-        createOptimizedPicture(img.src, img.alt, false, [{ width: "750" }])
+        createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])
       )
   );
 
   // Remove any empty div tags
-  [...ul.querySelectorAll("div")].forEach((div) => {
-    if (div.children.length === 0 && div.textContent.trim() === "") {
+  [...ul.querySelectorAll('div')].forEach((div) => {
+    if (div.children.length === 0 && div.textContent.trim() === '') {
       div.parentNode.removeChild(div);
     }
   });
 
-  block.textContent = "";
+  block.textContent = '';
   block.append(ul);
 }
diff --git a/tools/importer/import-category.js b/tools/importer/import-category.js
index 1c8a3a5..ecc4b38 100644
--- a/tools/importer/import-category.js
+++ b/tools/importer/import-category.js
@@ -1,3 +1,15 @@
+const formatUrl = (originalUrl) => {
+    // Create a URL object based on the original URL
+    var url = new URL(originalUrl);
+
+    // Set the new domain (including protocol)
+    url.hostname = 'www.famous-smoke.com';
+    url.protocol = 'https:';
+    url.port = '';
+    
+    return url;
+}
+
 const createMetadataBlock = (main, document) => {
   const meta = {};
 
@@ -27,18 +39,18 @@ const createMetadataBlock = (main, document) => {
 };
 
 const createArticleListBlock = (main, document) => {
-  var categories = [["Article-list"]];
-  let categoriesList = document.querySelector(".categories-list");
-  let divElements = categoriesList.querySelectorAll("div");
+  var categories = [['Article-list']];
+  let categoriesList = document.querySelector('.categories-list');
+  let divElements = categoriesList.querySelectorAll('div');
 
   divElements.forEach(function (element) {
-    var title = element.querySelector("h3").textContent.trim();
-    var description = element.querySelector("p").textContent.trim();
-    var image = element.querySelector("img");
+    var title = element.querySelector('h3').textContent.trim();
+    var description = element.querySelector('p').textContent.trim();
+    var image = element.querySelector('img');
     
-    var linkElement = element.querySelector("a.button");
+    var linkElement = element.querySelector('a.button');
     linkElement.class = 'button';
-    var link = linkElement ? linkElement.href : "";
+    var link = linkElement ? linkElement.href : '';
 
     var card = [
       [image],
@@ -55,31 +67,19 @@ const createArticleListBlock = (main, document) => {
   main.append(articleList);
 
   // remove .categories-list from main because we just added it manually
-  WebImporter.DOMUtils.remove(main, [".categories-list"]);
+  WebImporter.DOMUtils.remove(main, ['.categories-list']);
 
   return articleList;
 };
 
-const formatUrl = (originalUrl) => {
-    // Create a URL object based on the original URL
-    var url = new URL(originalUrl);
-
-    // Set the new domain (including protocol)
-    url.hostname = "www.famous-smoke.com";
-    url.protocol = "https:";
-    url.port = '';
-    
-    return url;
-}
-
 const removeSectionsNotForImport = (main, document) => {
   // remove any section from main not needed for import
-  WebImporter.DOMUtils.remove(main, [".category-dropdown",".breadcrumb"]);
+  WebImporter.DOMUtils.remove(main, ['.category-dropdown','.breadcrumb']);
 };
 
 export default {
   transformDOM: ({ document }) => {
-    const main = document.querySelector("main");
+    const main = document.querySelector('main');
 
     createMetadataBlock(main, document);
     createArticleListBlock(main, document);

From 199583311f9c45d409726ea0cc86baec64e17e2b Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 12:13:56 -0400
Subject: [PATCH 07/15] Add eslint config for VSC. Auto fixes for eslit issues.
 Move import-category.js info a folder ignored by eslint because WebImporter
 class is undefined.

---
 .eslintrc.json                                |  7 ++
 .prettierrc.json                              |  5 ++
 .../blocks/article-list/article-list.js       | 15 ++--
 package-lock.json                             | 28 +++++-
 package.json                                  |  7 +-
 tools/importer/import-category.js             | 90 -------------------
 6 files changed, 46 insertions(+), 106 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 .prettierrc.json
 delete mode 100644 tools/importer/import-category.js

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..848c2d4
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..17b1d52
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
\ No newline at end of file
diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index 22cc3b8..b2c171a 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -74,8 +74,7 @@ export default function decorate(block) {
           anchor.appendChild(picture);
         }
       } else if (
-        !div.querySelector('picture') &&
-        li.querySelector('.article-list-card-body') === null
+        !div.querySelector('picture') && li.querySelector('.article-list-card-body') === null
       ) {
         // second div is for the article body
         div.className = 'article-list-card-body';
@@ -85,7 +84,7 @@ export default function decorate(block) {
         // Set class names for the first and second paragraphs within the article-list-card-body
         const paragraphs = div.previousSibling.querySelectorAll('p');
         if (paragraphs.length > 0) {
-          //change article title to an h3
+          // change article title to an h3
           const h3 = document.createElement('h3');
           h3.className = 'article-title';
           h3.textContent = paragraphs[0].textContent;
@@ -120,13 +119,9 @@ export default function decorate(block) {
   });
 
   // optimize images
-  ul.querySelectorAll('img').forEach((img) =>
-    img
-      .closest('picture')
-      .replaceWith(
-        createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])
-      )
-  );
+  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(
+    createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]),
+  ));
 
   // Remove any empty div tags
   [...ul.querySelectorAll('div')].forEach((div) => {
diff --git a/package-lock.json b/package-lock.json
index f3ce874..a8c5eb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,10 @@
         "@babel/core": "7.24.4",
         "@babel/eslint-parser": "7.24.1",
         "chai": "5.1.0",
-        "eslint": "8.57.0",
-        "eslint-config-airbnb-base": "15.0.0",
-        "eslint-plugin-import": "2.29.1",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-plugin-import": "^2.29.1",
+        "prettier": "^3.2.5",
         "stylelint": "16.3.1",
         "stylelint-config-standard": "36.0.0"
       }
@@ -3205,6 +3206,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -6432,6 +6448,12 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
diff --git a/package.json b/package.json
index 8bd4b96..c1041e8 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,10 @@
     "@babel/core": "7.24.4",
     "@babel/eslint-parser": "7.24.1",
     "chai": "5.1.0",
-    "eslint": "8.57.0",
-    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-plugin-import": "2.29.1",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "prettier": "^3.2.5",
     "stylelint": "16.3.1",
     "stylelint-config-standard": "36.0.0"
   }
diff --git a/tools/importer/import-category.js b/tools/importer/import-category.js
deleted file mode 100644
index ecc4b38..0000000
--- a/tools/importer/import-category.js
+++ /dev/null
@@ -1,90 +0,0 @@
-const formatUrl = (originalUrl) => {
-    // Create a URL object based on the original URL
-    var url = new URL(originalUrl);
-
-    // Set the new domain (including protocol)
-    url.hostname = 'www.famous-smoke.com';
-    url.protocol = 'https:';
-    url.port = '';
-    
-    return url;
-}
-
-const createMetadataBlock = (main, document) => {
-  const meta = {};
-
-  // find the <title> element
-  const title = document.querySelector('title');
-  if (title) {
-    meta.Title = title.innerHTML.replace(/[\n\t]/gm, ``);
-  }
-
-  // find the <meta property="og:description"> element
-  const desc = document.querySelector('[property="og:description"]');
-  if (desc) {
-    meta.Description = desc.content;
-  }
-
-  // set the <meta property="og:image"> element
-  meta.image = 'https://www.famous-smoke.com/best-cigars-guide/icons/best-cigars-guide.png';
-
-  // helper to create the metadata block
-  const block = WebImporter.Blocks.getMetadataBlock(document, meta);
-
-  // append the block to the main element
-  main.append(block);
-
-  // returning the meta object might be usefull to other rules
-  return meta;
-};
-
-const createArticleListBlock = (main, document) => {
-  var categories = [['Article-list']];
-  let categoriesList = document.querySelector('.categories-list');
-  let divElements = categoriesList.querySelectorAll('div');
-
-  divElements.forEach(function (element) {
-    var title = element.querySelector('h3').textContent.trim();
-    var description = element.querySelector('p').textContent.trim();
-    var image = element.querySelector('img');
-    
-    var linkElement = element.querySelector('a.button');
-    linkElement.class = 'button';
-    var link = linkElement ? linkElement.href : '';
-
-    var card = [
-      [image],
-      [title], 
-      [description],
-      [formatUrl(link)]
-    ];
-
-    categories.push(card);
-  });
-
-  const articleList = WebImporter.DOMUtils.createTable(categories, document);
-
-  main.append(articleList);
-
-  // remove .categories-list from main because we just added it manually
-  WebImporter.DOMUtils.remove(main, ['.categories-list']);
-
-  return articleList;
-};
-
-const removeSectionsNotForImport = (main, document) => {
-  // remove any section from main not needed for import
-  WebImporter.DOMUtils.remove(main, ['.category-dropdown','.breadcrumb']);
-};
-
-export default {
-  transformDOM: ({ document }) => {
-    const main = document.querySelector('main');
-
-    createMetadataBlock(main, document);
-    createArticleListBlock(main, document);
-    removeSectionsNotForImport(main, document);
-
-    return main;
-  },
-};

From 5dd7872c9305308b63d4813825edcaa20db70ce5 Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Fri, 10 May 2024 16:48:52 -0400
Subject: [PATCH 08/15] remove domain from breadcrumb and dropdown links.

---
 best-cigars-guide/blocks/article-list/article-list.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/best-cigars-guide/blocks/article-list/article-list.js b/best-cigars-guide/blocks/article-list/article-list.js
index b2c171a..75c929e 100644
--- a/best-cigars-guide/blocks/article-list/article-list.js
+++ b/best-cigars-guide/blocks/article-list/article-list.js
@@ -17,7 +17,7 @@ export default function decorate(block) {
   breadcrumbDiv.className = 'breadcrumb';
   breadcrumbDiv.innerHTML += `
   <p id="breadcrumbs">
-    <span><a href="https://www.famous-smoke.com/best-cigars-guide/">Home</a></span> » <span class="breadcrumb_last" aria-current="page">${h1Text}</span>
+    <span><a href="/best-cigars-guide">Home</a></span> » <span class="breadcrumb_last" aria-current="page">${h1Text}</span>
   </p>
   `;
   navDiv.append(breadcrumbDiv);
@@ -27,7 +27,7 @@ export default function decorate(block) {
   const dropdownListDiv = document.createElement('div');
   breadcrumbDiv.className = 'category-dropdown';
   dropdownListDiv.innerHTML += `
-    <form action="https://www.famous-smoke.com/best-cigars-guide/" method="get" class="dropcats">
+    <form action="/best-cigars-guide" method="get" class="dropcats">
     <select name="cat" id="cat" class="postform" onchange="return this.form.submit()">
     <option value="-1">Select a Category</option>
     <option class="level-0" value="2" selected="selected">Best Cigars by Country</option>

From d837ace259594435b03b422c0de6ad10d1146016 Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Mon, 13 May 2024 16:36:58 -0400
Subject: [PATCH 09/15] require semicolons in prettier config for vsc.

---
 .prettierrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 17b1d52..cfb30e4 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "es5"
 }
\ No newline at end of file

From 2d0742d2e03e83ba004748a66e475035b53bc5fe Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Mon, 13 May 2024 16:54:49 -0400
Subject: [PATCH 10/15] Add Google Analytics tag. Ensure proper load order and
 error handling.

---
 best-cigars-guide/scripts/delayed.js | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/best-cigars-guide/scripts/delayed.js b/best-cigars-guide/scripts/delayed.js
index 4f63259..3caa68b 100644
--- a/best-cigars-guide/scripts/delayed.js
+++ b/best-cigars-guide/scripts/delayed.js
@@ -5,3 +5,43 @@ import { sampleRUM } from './aem.js';
 sampleRUM('cwv');
 
 // add more delayed functionality here
+
+function onError(tagName) {
+  /* eslint no-console: ["error", { allow: ["error"] }] */
+  console.error(`The ${tagName} script failed to load.`);
+}
+
+function onGALoad() {
+  /* global dataLayer */
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    // eslint-disable-next-line prefer-rest-params
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', 'GT-M6QM788');
+  gtag('set', 'linker', { domains: ['www.famous-smoke.com'] });
+}
+
+function loadGoogleAnalytics() {
+  // Load the Google Analytics library
+  const tag = document.createElement('script');
+  tag.async = true;
+  tag.src = 'https://www.googletagmanager.com/gtagblam/js?id=GT-M6QM788';
+  document.head.appendChild(tag);
+  // Configuration script
+  tag.onload = onGALoad;
+  tag.onerror = onError('Google Analytics');
+}
+
+// Check if Google Analytics is loaded
+function isGALoaded() {
+  return window.dataLayer && Array.isArray(window.dataLayer);
+}
+
+// Load Scripts
+if (window.location.hostname !== 'localhost') {
+  if (!isGALoaded()) {
+    loadGoogleAnalytics();
+  }
+}

From 405257dabf2bf3df155bd7672cfa0ce8f0828552 Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Mon, 13 May 2024 16:56:23 -0400
Subject: [PATCH 11/15] Remove blam from tagmanager path that forced an error.

---
 best-cigars-guide/scripts/delayed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/best-cigars-guide/scripts/delayed.js b/best-cigars-guide/scripts/delayed.js
index 3caa68b..6f8e378 100644
--- a/best-cigars-guide/scripts/delayed.js
+++ b/best-cigars-guide/scripts/delayed.js
@@ -27,7 +27,7 @@ function loadGoogleAnalytics() {
   // Load the Google Analytics library
   const tag = document.createElement('script');
   tag.async = true;
-  tag.src = 'https://www.googletagmanager.com/gtagblam/js?id=GT-M6QM788';
+  tag.src = 'https://www.googletagmanager.com/gtag/js?id=GT-M6QM788';
   document.head.appendChild(tag);
   // Configuration script
   tag.onload = onGALoad;

From 7344cf92c1e829d742cb3708fb7a1f50b1a517bf Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Tue, 14 May 2024 08:21:27 -0400
Subject: [PATCH 12/15] Revert "Remove blam from tagmanager path that forced an
 error."

This reverts commit 405257dabf2bf3df155bd7672cfa0ce8f0828552.
---
 best-cigars-guide/scripts/delayed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/best-cigars-guide/scripts/delayed.js b/best-cigars-guide/scripts/delayed.js
index 6f8e378..3caa68b 100644
--- a/best-cigars-guide/scripts/delayed.js
+++ b/best-cigars-guide/scripts/delayed.js
@@ -27,7 +27,7 @@ function loadGoogleAnalytics() {
   // Load the Google Analytics library
   const tag = document.createElement('script');
   tag.async = true;
-  tag.src = 'https://www.googletagmanager.com/gtag/js?id=GT-M6QM788';
+  tag.src = 'https://www.googletagmanager.com/gtagblam/js?id=GT-M6QM788';
   document.head.appendChild(tag);
   // Configuration script
   tag.onload = onGALoad;

From a7f32dd941212c39ba09f33d49d22f03a6ed2ced Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Tue, 14 May 2024 08:23:09 -0400
Subject: [PATCH 13/15] Revert "Add Google Analytics tag. Ensure proper load
 order and error handling."

This reverts commit 2d0742d2e03e83ba004748a66e475035b53bc5fe.
---
 best-cigars-guide/scripts/delayed.js | 40 ----------------------------
 1 file changed, 40 deletions(-)

diff --git a/best-cigars-guide/scripts/delayed.js b/best-cigars-guide/scripts/delayed.js
index 3caa68b..4f63259 100644
--- a/best-cigars-guide/scripts/delayed.js
+++ b/best-cigars-guide/scripts/delayed.js
@@ -5,43 +5,3 @@ import { sampleRUM } from './aem.js';
 sampleRUM('cwv');
 
 // add more delayed functionality here
-
-function onError(tagName) {
-  /* eslint no-console: ["error", { allow: ["error"] }] */
-  console.error(`The ${tagName} script failed to load.`);
-}
-
-function onGALoad() {
-  /* global dataLayer */
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    // eslint-disable-next-line prefer-rest-params
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-  gtag('config', 'GT-M6QM788');
-  gtag('set', 'linker', { domains: ['www.famous-smoke.com'] });
-}
-
-function loadGoogleAnalytics() {
-  // Load the Google Analytics library
-  const tag = document.createElement('script');
-  tag.async = true;
-  tag.src = 'https://www.googletagmanager.com/gtagblam/js?id=GT-M6QM788';
-  document.head.appendChild(tag);
-  // Configuration script
-  tag.onload = onGALoad;
-  tag.onerror = onError('Google Analytics');
-}
-
-// Check if Google Analytics is loaded
-function isGALoaded() {
-  return window.dataLayer && Array.isArray(window.dataLayer);
-}
-
-// Load Scripts
-if (window.location.hostname !== 'localhost') {
-  if (!isGALoaded()) {
-    loadGoogleAnalytics();
-  }
-}

From 6e8d529e8b15bccbc834ee0e46b6a096cd87b015 Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Tue, 14 May 2024 08:23:41 -0400
Subject: [PATCH 14/15] Revert "require semicolons in prettier config for vsc."

This reverts commit d837ace259594435b03b422c0de6ad10d1146016.
---
 .prettierrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index cfb30e4..17b1d52 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "semi": true,
+  "semi": false,
   "singleQuote": true,
   "trailingComma": "es5"
 }
\ No newline at end of file

From 61b94a0fdae6af49de8c10c6d85f5f3eeffbc44e Mon Sep 17 00:00:00 2001
From: Matthew Gold <mgold@famous-smoke.com>
Date: Tue, 14 May 2024 08:43:25 -0400
Subject: [PATCH 15/15] Add prettier require semi back in. This should not have
 been reverted.

---
 .prettierrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 17b1d52..cfb30e4 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "es5"
 }
\ No newline at end of file