feat(blog-redesign): Refactor JS. Add blog preview image to filtered posts.

Author: jesseaborden

assets/javascripts/new-javascripts/blog.js

@@ -5,23 +5,28 @@ const checkboxes = [...wrapper.querySelectorAll('.category-filter')]
 const selectAllBox = document.querySelector('.select-all')
 const dropdown = document.querySelector('.dropdown')
 const allCheckboxes = [selectAllBox, ...checkboxes]
-const dropdownOpenButton = document.querySelector('.dropdown-toggle')
+const filterMenuToggle = document.querySelector('.dropdown-toggle')
 const dropdownCloseButton = document.querySelector('.dropdown-close')
-const elementsCache = []
-
 // create post links
 const createAnchor = (postData) => {
   const anchor = document.createElement('a')
+  const imgEl = postData['image-url']
+    ? `<img src="${postData['image-url']}" alt="${postData['image-alt']}" />`
+    : ''
+  console.log(imgEl, postData.title)
   anchor.href = postData.url
-  anchor.classList.add('post-link')
+  anchor.classList = imgEl ? 'post-link post-link-with-image' : 'post-link'
   anchor.innerHTML = `
-        <h3 class="title">${postData.title}</h3>
-        <time pubdate datetime="${postData.date}" class="blog-date">${postData.date}</time>
-        <p class="body-copy">${postData.excerpt}</p>
-        ${postData.categories.reduce((markup, category) => {
-          return markup + ` <span class="category body-copy">${category}</span>`
-        }, '')}
-        `
+  ${imgEl}
+  ${imgEl ? '<div>' : ''}
+    <h3 class="title">${postData.title}</h3>
+    <time pubdate datetime="${postData.date}" class="blog-date">${postData.date}</time>
+    <p class="body-copy">${postData.excerpt}</p>
+    ${postData.categories.reduce((markup, category) => {
+      return markup + ` <span class="category body-copy">${category}</span>`
+    }, '')}
+  ${imgEl ? '</div>' : ''}
+    `
   return anchor
 }
 
@@ -36,26 +41,57 @@ const selectAllCategories = () => {
   }
 }
 
-dropdownOpenButton.addEventListener('click', function () {
+const filterPosts = (elementsCache, checkboxes) => {
+  // If all categories are selected, bypass filter check
+  if (selectAllBox.checked) return elementsCache
+
+  const activeFilters = checkboxes
+    .filter((checkbox) => checkbox.checked)
+    .map((checkbox) => checkbox.value)
+  const filteredPosts = elementsCache.filter((post) => {
+    return post.data.categories.some((category) => {
+      return activeFilters.includes(category)
+    })
+  })
+
+  return filteredPosts
+}
+
+const updatePosts = (posts, postsWrapper) => {
+  postsWrapper.innerHTML = ''
+  for (let post of posts) {
+    postsWrapper.appendChild(post.elemenet)
+  }
+}
+
+const elementsCache = postData.map((post) => {
+  return {
+    data: post,
+    elemenet: createAnchor(post),
+  }
+})
+
+updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper, postsWrapper)
+
+filterMenuToggle.addEventListener('click', () => {
   dropdown.classList.toggle('active')
 
-  // Toggle aria-expanded attribute
   const isExpanded = this.getAttribute('aria-expanded') === 'true'
-  this.setAttribute('aria-expanded', !isExpanded)
+  filterMenuToggle.toggleAttribute('aria-expanded', !isExpanded)
 })
 
 // Close the dropdown if clicked outside
-window.addEventListener('click', function (evt) {
+window.addEventListener('click', (evt) => {
   if (!dropdown.contains(evt.target)) {
     dropdown.classList.remove('active')
-    dropdownOpenButton.setAttribute('aria-expanded', 'false')
+    filterMenuToggle.setAttribute('aria-expanded', 'false')
   }
 })
 
-// Handle the "All" button functionality
+// Select all category filters
 selectAllBox.addEventListener('click', selectAllCategories)
 
-dropdownCloseButton.addEventListener('click', function () {
+dropdownCloseButton.addEventListener('click', () => {
   const dropdown = this.closest('.dropdown')
   dropdown.classList.remove('active')
   document
@@ -64,9 +100,8 @@ dropdownCloseButton.addEventListener('click', function () {
 })
 
 checkboxes.forEach((checkbox) => {
-  checkbox.addEventListener('change', function () {
-    // debugger
-    // If every box is either checked or none are, set all categories on
+  checkbox.addEventListener('change', () => {
+    // If every box is either checked or none are, set all filter to checked
     if (
       checkboxes.every((checkbox) => checkbox.checked === checkboxes[0].checked)
     ) {
@@ -79,40 +114,3 @@ checkboxes.forEach((checkbox) => {
     updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper)
   })
 })
-
-const filterPosts = (elementsCache, checkboxes) => {
-  // if all categories is selected, bypass filter check
-  if (selectAllBox.checked) return elementsCache
-
-  const activeFilters = checkboxes
-    .filter((checkbox) => checkbox.checked)
-    .map((checkbox) => checkbox.value)
-  const filteredPosts = elementsCache.filter((post) => {
-    return post.data.categories.some((category) => {
-      return activeFilters.includes(category)
-    })
-  })
-
-  return filteredPosts
-}
-
-const makeElements = (elementsCache, postData) => {
-  for (let i = 0; i < postData.length; i++) {
-    elementsCache.push({
-      data: postData[i],
-      elemenet: createAnchor(postData[i]),
-    })
-  }
-
-  return elementsCache
-}
-
-const updatePosts = (posts, postsWrapper) => {
-  postsWrapper.innerHTML = ''
-  for (let post of posts) {
-    postsWrapper.appendChild(post.elemenet)
-  }
-}
-
-makeElements(elementsCache, postData)
-updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper, postsWrapper)

assets/stylesheets/new-stylesheets/pages/_blog.scss

@@ -62,7 +62,6 @@
   }
 
   // page global blog card styles
-
   .blog-date {
     display: block;
     color: var(--blog-muted-color);
@@ -425,6 +424,26 @@
     text-decoration: none;
     display: block;
 
+    &-with-image {
+      display: flex;
+      gap: 36px;
+
+      img {
+        width: 120px;
+        height: 120px;
+        background-size: cover;
+      }
+
+      @media only screen and (max-width: 1024px) {
+        display: block;
+
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
     h3 {
       font-size: 22px;
       font-weight: 400;
@@ -450,5 +469,3 @@
     }
   }
 }
-
-// bg?

blog/index.md

@@ -32,7 +32,7 @@ title: Blog
                         <span class="blog-title">{{ latest_post.title }}</span>
                         <time  class="blog-date body-copy" pubdate datetime="{{ latest_post.date | date_to_xmlschema }}">{{ latest_post.date | date: "%B %-d, %Y" }}</time>
                         <p class="blog-excerpt body-copy">{{ latest_post.excerpt | strip_html}}</p>
-                        <a class="blog-post-cta" href="{{ post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
+                        <a class="blog-post-cta" href="{{ latest_post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
                     </div>
                   <!-- </a> -->
               </li>
@@ -76,7 +76,8 @@ title: Blog
             "url": "{{ post.url | escape }}",
             "date": "{{ post.date | date: "%B %-d, %Y" }}",
             "excerpt": "{{ post.excerpt | strip_html | strip_newlines | escape }}"{% if post.featured-image %},
-            "image": "{{ post.featured-image.url }}"
+            "image-url": "{{ post.featured-image.url | escape }}", 
+            "image-alt": "{{ post.featured-image.alt }}"
             {% endif %}
           }{% if forloop.last == false %},{% endif %}{% endfor %}]
     </script>