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