Merge pull request #20 from famous-smoke/18-import-category-pages

18 import category pages

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"]
+  }
+}

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

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

@@ -0,0 +1,99 @@
+/* General styles for the list and list items */
+.article-list > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  grid-gap: 16px;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+.article-title {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+/* Image and hover effects */
+.article-list-card-image a {
+  display: block;
+  overflow: hidden;
+}
+
+.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;
+}

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

@@ -0,0 +1,135 @@
+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="/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="/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');
+  // 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.
+    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) => {
+      // 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);
+        }
+      } else if (
+        !div.querySelector('picture') && li.querySelector('.article-list-card-body') === null
+      ) {
+        // 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');
+        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]);
+        }
+        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);
+    });
+
+    // Remove the last div that contained the original link
+    const linkDiv = li.children[2];
+    if (linkDiv && linkDiv.parentNode) {
+      linkDiv.parentNode.removeChild(linkDiv);
+    }
+  });
+
+  // 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);
+}

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"
   }