Article-list block based on Cards block. PNG image based on favicon f…

…or meta image. Prelim import-category.js file

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

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);
+}

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