Make scroll event listeners passive

assets/deferred-hydration.js

@@ -0,0 +1,68 @@
+/**
+ * Deferred Hydration Utility
+ * Hydrates content when it enters the viewport on mobile.
+ */
+
+import { onDocumentReady } from '@theme/utilities';
+
+class DeferredHydration extends HTMLElement {
+  constructor() {
+    super();
+    this.observer = null;
+  }
+
+  connectedCallback() {
+    onDocumentReady(() => {
+      const mobileOnly = this.hasAttribute('mobile-only');
+      const isMobile = window.innerWidth < 750;
+
+      if (mobileOnly && !isMobile) {
+        this.hydrate();
+        return;
+      }
+
+      // If it's already in viewport or we want to be safe, use IntersectionObserver
+      this.observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.hydrate();
+            this.observer.disconnect();
+          }
+        });
+      }, { rootMargin: '200px' });
+
+      this.observer.observe(this);
+    });
+  }
+
+  hydrate() {
+    const template = this.querySelector('template');
+    if (template) {
+      const content = template.content.cloneNode(true);
+      this.appendChild(content);
+      // Remove template to avoid re-hydration
+      template.remove();
+      this.setAttribute('hydrated', '');
+
+      // Look for any scripts that might need a nudge
+      this.querySelectorAll('script').forEach(script => {
+        const newScript = document.createElement('script');
+        Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
+        newScript.innerHTML = script.innerHTML;
+        if (script.parentNode) {
+          script.parentNode.replaceChild(newScript, script);
+        }
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}
+
+if (!customElements.get('deferred-hydration')) {
+  customElements.define('deferred-hydration', DeferredHydration);
+}

assets/header.js

@@ -192,7 +192,7 @@ class HeaderComponent extends Component {
       this.#observeStickyPosition(stickyMode === 'always');
 
       if (stickyMode === 'scroll-up' || stickyMode === 'always') {
-        document.addEventListener('scroll', this.#handleWindowScroll);
+        document.addEventListener('scroll', this.#handleWindowScroll, { passive: true });
       }
     }
   }

assets/localization.js

@@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component {
 
     this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown);
     this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown);
-    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll);
+    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
 
     // Resizing the language input can be expensive for browsers that don't support field-sizing: content.
     // Spliting it into separate tasks at least helps when there are multiple localization forms on the page.
@@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component {
     const countryList = localizationForm.querySelector('.country-selector-form__wrapper');
 
     if (target.open) {
-      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll);
+      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
       onAnimationEnd(target, localizationForm.focusSearchInput);
     } else {
       countryList?.removeEventListener('scroll', this.#onCountryListScroll);

assets/scrolling.js

@@ -89,7 +89,7 @@ export class Scroller {
     this.#onScrollEnd = options.onScrollEnd;
 
     this.element = element;
-    this.element.addEventListener('scroll', this.#handleScroll);
+    this.element.addEventListener('scroll', this.#handleScroll, { passive: true });
   }
 
   /**
@@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block =
   const scrollTop =
     ancestor.scrollHeight > ancestor.clientHeight
       ? calculateScrollOffset(
-          block,
-          ancestorRect.top,
-          ancestor.clientHeight,
-          elemRect.top,
-          elemRect.height,
-          ancestor.scrollTop
-        )
+        block,
+        ancestorRect.top,
+        ancestor.clientHeight,
+        elemRect.top,
+        elemRect.height,
+        ancestor.scrollTop
+      )
       : ancestor.scrollTop;
 
   const scrollLeft =
     ancestor.scrollWidth > ancestor.clientWidth
       ? calculateScrollOffset(
-          inline,
-          ancestorRect.left,
-          ancestor.clientWidth,
-          elemRect.left,
-          elemRect.width,
-          ancestor.scrollLeft
-        )
+        inline,
+        ancestorRect.left,
+        ancestor.clientWidth,
+        elemRect.left,
+        elemRect.width,
+        ancestor.scrollLeft
+      )
       : ancestor.scrollLeft;
 
   ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior });
@@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement {
   #rafId = null;
 
   connectedCallback() {
-    this.addEventListener('scroll', this.#handleScroll);
+    this.addEventListener('scroll', this.#handleScroll, { passive: true });
     this.#resizeObserver.observe(this);
   }
 

assets/zoom-dialog.js

@@ -28,7 +28,7 @@ export class ZoomDialog extends Component {
 
   connectedCallback() {
     super.connectedCallback();
-    this.refs.dialog.addEventListener('scroll', this.handleScroll);
+    this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true });
   }
 
   disconnectedCallback() {
@@ -275,7 +275,7 @@ function getMostVisibleElement(elements) {
           current.intersectionRatio > prev.intersectionRatio ? current : prev
         );
         observer.disconnect();
-        resolve(/** @type {HTMLElement} */ (mostVisible.target));
+        resolve(/** @type {HTMLElement} */(mostVisible.target));
       },
       {
         threshold: Array.from({ length: 100 }, (_, i) => i / 100),

blocks/_blog-post-card.liquid

@@ -4,17 +4,36 @@
   class="blog-post-card"
   style="--text-align: {{ block_settings.alignment }}"
 >
-  {% if article.image %}
-    {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %}
-  {% endif %}
+  <div class="blog-post-card__image-wrapper">
+    {% if article.image %}
+      {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %}
+    {% endif %}
+
+    <div class="blog-post-card__badge-wrapper">
+      {%- content_for 'block', id: 'badge', type: 'badge' -%}
+    </div>
+
+    {% if block_settings.title_overlay %}
+      <div class="blog-post-card__title-overlay blog-post-card__title-overlay--{{ block_settings.title_position }}">
+        <a
+          href="{{ article.url }}"
+          data-testid="blog-post-link"
+        >
+          {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%}
+        </a>
+      </div>
+    {% endif %}
+  </div>
 
   <div class="blog-post-card__content">
-    <a
-      href="{{ article.url }}"
-      data-testid="blog-post-link"
-    >
-      {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%}
-    </a>
+    {% if block_settings.title_overlay == false %}
+      <a
+        href="{{ article.url }}"
+        data-testid="blog-post-link"
+      >
+        {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%}
+      </a>
+    {% endif %}
 
     {% content_for 'block',
       id: 'blog-post-details',
@@ -45,6 +64,42 @@
     }
   }
 
+  .blog-post-card__image-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .blog-post-card__badge-wrapper {
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  .blog-post-card__badge-wrapper > * {
+    pointer-events: auto;
+  }
+
+  .blog-post-card__title-overlay {
+    position: absolute;
+    z-index: 2;
+    padding: 1.5rem;
+    pointer-events: none;
+    width: 100%;
+  }
+
+  .blog-post-card__title-overlay a {
+    pointer-events: auto;
+  }
+
+  .blog-post-card__title-overlay--top-left { top: 0; left: 0; text-align: left; }
+  .blog-post-card__title-overlay--top-center { top: 0; left: 50%; transform: translateX(-50%); text-align: center; }
+  .blog-post-card__title-overlay--top-right { top: 0; right: 0; text-align: right; }
+  .blog-post-card__title-overlay--center-left { top: 50%; left: 0; transform: translateY(-50%); text-align: left; }
+  .blog-post-card__title-overlay--center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
+  .blog-post-card__title-overlay--center-right { top: 50%; right: 0; transform: translateY(-50%); text-align: right; }
+  .blog-post-card__title-overlay--bottom-left { bottom: 0; left: 0; text-align: left; }
+  .blog-post-card__title-overlay--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }
+  .blog-post-card__title-overlay--bottom-right { bottom: 0; right: 0; text-align: right; }
+
   .blog-post-card__content {
     padding-block-start: 0.4rem;
     display: flex;
@@ -99,6 +154,34 @@
       "id": "alignment",
       "label": "t:settings.alignment",
       "default": "left"
+    },
+    {
+      "type": "header",
+      "content": "Title Overlay Settings"
+    },
+    {
+      "type": "checkbox",
+      "id": "title_overlay",
+      "label": "Overlay title on image",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "title_position",
+      "label": "Title overlay position",
+      "options": [
+        { "value": "top-left", "label": "Top left" },
+        { "value": "top-center", "label": "Top center" },
+        { "value": "top-right", "label": "Top right" },
+        { "value": "center-left", "label": "Center left" },
+        { "value": "center", "label": "Center" },
+        { "value": "center-right", "label": "Center right" },
+        { "value": "bottom-left", "label": "Bottom left" },
+        { "value": "bottom-center", "label": "Bottom center" },
+        { "value": "bottom-right", "label": "Bottom right" }
+      ],
+      "default": "bottom-left",
+      "visible_if": "{{ block.settings.title_overlay }}"
     }
   ]
 }

blocks/_collection-card.liquid

@@ -38,6 +38,9 @@
     },
     {
       "type": "collection-title"
+    },
+    {
+      "type": "badge"
     }
   ],
   "tag": null,