Feat/blog page v5

_layouts/new-layouts/post.html

@@ -3,69 +3,76 @@
 ---
 
 <section id="post" class="section">
-    <div class="swoop swoop-1"></div>
+  <div class="swoop swoop-1"></div>
 
-    <div class="content">
-        <h1>{{ page.title }}</h1>
+  <div class="content">
+    <h1>{{ page.title }}</h1>
 
-        {% include authors.html authors=page.author compact=true %}
+    {% include authors.html authors=page.author compact=true %}
 
-        <time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
+    <time pubdate datetime="{{ page.date | date_to_xmlschema }}"
+      >{{ page.date | date: "%B %-d, %Y" }}</time
+    >
+    {% assign featured_image = page.featured-image %} {% assign
+    featured_image_dark = page.featured-image-dark %} {% if featured_image.url
+    %}
+    <img
+      class="featured{% if featured_image_dark.url %} hide-dark{% endif %}"
+      src="{{ featured_image.url }}"
+      alt="{{ featured_image.alt }}"
+    />
+    {% endif %} {% if featured_image_dark.url %}
+    <img
+      class="featured hide-light"
+      src="{{ featured_image_dark.url }}"
+      alt="{{ featured_image_dark.alt }}"
+    />
+    {% endif %}
+    <div class="details">
+      {{ content }} {% if page.author %}
+      <hr />
+      <h2>Authors</h2>
+      {% include authors.html authors=page.author %} {% endif %}
 
-        {% if page.image %}
-        <img class="featured" src="/assets/images/{{ page.image | split: '.' | first }}/{{ page.image }}"
-            alt="{{ page.title }} featured image" />
-        {% endif %}
+      <hr />
 
-        <div class="details">
-            {{ content }}
+      <h2>Continue Reading</h2>
 
-            {% if page.author %}
-            <hr />
-            <h2>Authors</h2>
-            {% include authors.html authors=page.author %}
-            {% endif %}
-
-            <hr />
-
-            <h2>Continue Reading</h2>
-
-            {% if page.previous or page.next %}
-            <nav class="section card-grid">
-                <div class="content">
-                    <ul class="tertiary-cards">
-                        {% if page.previous %}
-                        <li>
-                            <div>
-                                <h3>{{ page.previous.title }}</h3>
-                                <time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.previous.date | date: "%B %-d, %Y" }}</time>
-                                <p class="nav-excerpt">
-                                    {{ page.previous.excerpt | strip_html | truncate: 80, '..' }}
-                                </p>
-                                <a href="{{ page.previous.url }}" rel="prev">
-                                    More
-                                </a>
-                            </div>
-                        </li>
-                        {% endif %}
-                        {% if page.next %}
-                        <li>
-                            <div>
-                                <h3>{{ page.next.title }}</h3>
-                                <time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.next.date | date: "%B %-d, %Y" }}</time>
-                                <p class="nav-excerpt">
-                                    {{ page.next.excerpt | strip_html | truncate: 80, '..' }}
-                                </p>
-                                <a href="{{ page.next.url }}" rel="next">
-                                    More
-                                </a>
-                            </div>
-                        </li>
-                        {% endif %}
-                    </ul>
-                </div>
-            </nav>
+      {% if page.previous or page.next %}
+      <nav class="section card-grid">
+        <div class="content">
+          <ul class="tertiary-cards">
+            {% if page.previous %}
+            <li>
+              <div>
+                <h3>{{ page.previous.title }}</h3>
+                <time pubdate datetime="{{ page.date | date_to_xmlschema }}"
+                  >{{ page.previous.date | date: "%B %-d, %Y" }}</time
+                >
+                <p class="nav-excerpt">
+                  {{ page.previous.excerpt | strip_html | truncate: 80, '..' }}
+                </p>
+                <a href="{{ page.previous.url }}" rel="prev"> More </a>
+              </div>
+            </li>
+            {% endif %} {% if page.next %}
+            <li>
+              <div>
+                <h3>{{ page.next.title }}</h3>
+                <time pubdate datetime="{{ page.date | date_to_xmlschema }}"
+                  >{{ page.next.date | date: "%B %-d, %Y" }}</time
+                >
+                <p class="nav-excerpt">
+                  {{ page.next.excerpt | strip_html | truncate: 80, '..' }}
+                </p>
+                <a href="{{ page.next.url }}" rel="next"> More </a>
+              </div>
+            </li>
             {% endif %}
+          </ul>
         </div>
+      </nav>
+      {% endif %}
     </div>
-</section>
+  </div>
+</section>

_posts/2024-09-17-announcing-swift-6.md

@@ -5,9 +5,6 @@ date: 2024-09-17 10:00:00
 title: Announcing Swift 6
 author: [hborla]
 category: "Language"
-featured-image:
-  url: '/assets/images/placeholders/image_placeholder_large.png'
-  alt: 'An FPO image for a blog.'
 ---
 
 We're delighted to announce the general availability of Swift 6. This is a major new release that expands Swift to more platforms and domains.

assets/javascripts/new-javascripts/blog.js

@@ -1,37 +1,30 @@
 const wrapper = document.querySelector('.blogs-and-filter-wrapper')
 const postsWrapper = wrapper.querySelector('.blogs-wrapper')
 const postData = JSON.parse(wrapper.querySelector('#post-data').textContent)
-const checkboxes = [...wrapper.querySelectorAll('.category-filter')]
+const filters = [...wrapper.querySelectorAll('.category-filter')]
 const selectAllBox = document.querySelector('.select-all')
 const dropdown = document.querySelector('.dropdown')
-const allCheckboxes = [selectAllBox, ...checkboxes]
+const allCheckboxes = [selectAllBox, ...filters]
 const filterMenuToggle = document.querySelector('.dropdown-toggle')
-const dropdownCloseButton = document.querySelector('.dropdown-close')
+
 // 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 = imgEl ? 'post-link post-link-with-image' : 'post-link'
+  anchor.classList = 'post-link'
   anchor.innerHTML = `
-  ${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
 }
 
 // checks all filters
-const selectAllCategories = () => {
+const selectAllCategories = (selectAllBox, checkboxes) => {
   if (selectAllBox.checked) {
     checkboxes.forEach((checkbox) => {
       checkbox.checked = true
@@ -71,12 +64,12 @@ const elementsCache = postData.map((post) => {
   }
 })
 
-updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper, postsWrapper)
+updatePosts(filterPosts(elementsCache, filters), postsWrapper, postsWrapper)
 
 filterMenuToggle.addEventListener('click', () => {
   dropdown.classList.toggle('active')
 
-  const isExpanded = this.getAttribute('aria-expanded') === 'true'
+  const isExpanded = filterMenuToggle.getAttribute('aria-expanded') === 'true'
   filterMenuToggle.toggleAttribute('aria-expanded', !isExpanded)
 })
 
@@ -89,28 +82,32 @@ window.addEventListener('click', (evt) => {
 })
 
 // Select all category filters
-selectAllBox.addEventListener('click', selectAllCategories)
-
-dropdownCloseButton.addEventListener('click', () => {
-  const dropdown = this.closest('.dropdown')
-  dropdown.classList.remove('active')
-  document
-    .querySelector('.dropdown-toggle')
-    .setAttribute('aria-expanded', 'false')
-})
+selectAllBox.addEventListener('click', () =>
+  selectAllCategories(selectAllBox, filters),
+)
 
-checkboxes.forEach((checkbox) => {
+filters.forEach((checkbox) => {
   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)
-    ) {
+    const enabledFilters = filters.filter((checkbox) => checkbox.checked)
+
+    if (enabledFilters.length === 1) {
+      enabledFilters[0].disabled = true
+    } else {
+      filters.forEach((checkbox) => (checkbox.disabled = false))
+    }
+
+    // If every box is checked, select all
+    if (enabledFilters.length === filters.length) {
       selectAllBox.checked = true
+      selectAllBox.disabled = true
       selectAllCategories()
       return
+      // Uncheck all select all if filter was unchecked
     } else if (!checkbox.checked && selectAllBox.checked) {
       selectAllBox.checked = false
+      selectAllBox.disabled = false
     }
-    updatePosts(filterPosts(elementsCache, checkboxes), postsWrapper)
+
+    updatePosts(filterPosts(elementsCache, filters), postsWrapper)
   })
 })

assets/stylesheets/new-stylesheets/_helpers.scss

@@ -195,6 +195,20 @@
   }
 }
 
+body[data-color-scheme='light'] {
+  .hide-light {
+    display: none
+  }    
+}
+
+body[data-color-scheme='dark'] {
+  .hide-dark {
+    display: none
+  }    
+}
+
+
+
 @mixin underline {
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);

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

@@ -325,7 +325,7 @@
     }
 
     .dropdown-header {
-      padding: 53px 0 20px;
+      padding: 23px 0 20px;
     }
 
     &.active {
@@ -361,6 +361,7 @@
       width: 25px;
       height: 25px;
       border-radius: 5px;
+      outline: 1px solid var(--site-text-color);
     }
 
     label {

blog/index.md

@@ -11,10 +11,14 @@ title: Blog
       {% assign hero_card_title = site.data.new-data.blog.page-data.category_titles[0] %}
       {% assign hero_card_post = site.categories[hero_card_title][0] %}
       {% assign hero_card_thumbnail = hero_card_post.featured-image %}
+      {% assign hero_card_thumbnail_dark = hero_card_post.featured-image-dark %}
       <h3 class="blog-featured-grid-category-headline">{{hero_card_title}}</h3>
       <div class="blog-featured-hero-card {% if hero_card_thumbnail.url %} blog-featured-hero-card-with-image {% endif %}">
         {% if hero_card_thumbnail.url %}
-          <img class="blog-featured-hero-card-image" src="{{ hero_card_thumbnail.url }}" alt="{{hero_card_thumbnail.alt}}" />
+          <img class="blog-featured-hero-card-image {% if hero_card_thumbnail_dark.url %}hide-dark{% endif %}" src="{{ hero_card_thumbnail.url }}" alt="{{hero_card_thumbnail.alt}}" />
+        {% endif %}
+        {% if hero_card_thumbnail_dark.url %}
+          <img class="blog-featured-hero-card-image hide-light" src="{{ hero_card_thumbnail_dark.url }}" alt="{{hero_card_thumbnail_dark.alt}}" />
         {% endif %}
         <span class="blog-title">{{ hero_card_post.title }}</span>
         <time class="blog-date body-copy" pubdate datetime="{{ hero_card_post.date | date_to_xmlschema }}">{{ hero_card_post.date | date: "%B %-d, %Y" }}</time>
@@ -49,9 +53,8 @@ title: Blog
       </button>
       <div class="dropdown-menu" role="menu">
         <div class="dropdown-header">
-           <button class="dropdown-close" aria-label="Close"></button>
            <label>
-            <input name="select-all" class="select-all" type="checkbox" value="select-all" checked="true">
+            <input disabled name="select-all" class="select-all" type="checkbox" value="select-all" checked="true">
             <span class="checkbox-symbol"></span> <span class="dropdown-filter-text">All Categories</span>
           </label>
         </div>