perf: make visual effects and heroes more resilient

assets/js/background-blur.js

@@ -23,9 +23,18 @@ function setBackgroundBlur(targetId, scrollDivisor = 300, disableBlur = false, i
       blurElement.style.opacity = scroll / scrollDivisor;
     }
   };
+  let framePending = false;
+  const requestBlurUpdate = () => {
+    if (framePending) return;
+    framePending = true;
+    window.requestAnimationFrame(() => {
+      framePending = false;
+      updateBlur();
+    });
+  };
   blurElement.setAttribute("role", "presentation");
   blurElement.setAttribute("tabindex", "-1");
-  window.addEventListener("scroll", updateBlur);
+  window.addEventListener("scroll", requestBlurUpdate, { passive: true });
   updateBlur();
 }
 
@@ -33,7 +42,12 @@ document.querySelectorAll("script[data-blur-id]").forEach((script) => {
   const targetId = script.getAttribute("data-blur-id");
   const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
   const isMenuBlur = targetId === "menu-blur";
-  const settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
+  let settings = {};
+  try {
+    settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
+  } catch (_) {
+    settings = {};
+  }
   const disableBlur = settings.disableBlur || false;
   setBackgroundBlur(targetId, scrollDivisor, disableBlur, isMenuBlur);
 });

layouts/partials/functions/resize.html

@@ -0,0 +1,7 @@
+{{ $resource := .resource }}
+{{ $spec := .spec }}
+{{ $result := $resource }}
+{{ with try ($resource.Resize $spec) }}
+  {{ with .Value }}{{ $result = . }}{{ end }}
+{{ end }}
+{{ return $result }}

layouts/partials/hero/background.html

@@ -42,7 +42,7 @@
     {{ $featuredURL = .RelPermalink }}
     {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
       {{ $size := site.Store.Get "backgroundImageWidth" }}
-      {{ $featuredURL = (.Resize $size).RelPermalink }}
+      {{ $featuredURL = (partial "functions/resize.html" (dict "resource" . "spec" $size)).RelPermalink }}
     {{ end }}
   {{ end }}
 {{ end }}

layouts/partials/hero/basic.html

@@ -42,7 +42,7 @@
     {{ $featuredURL = .RelPermalink }}
     {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
       {{ $size := site.Store.Get "backgroundImageWidth" }}
-      {{ $featuredURL = (.Resize $size).RelPermalink }}
+      {{ $featuredURL = (partial "functions/resize.html" (dict "resource" . "spec" $size)).RelPermalink }}
     {{ end }}
   {{ end }}
 {{ end }}

layouts/partials/hero/big.html

@@ -42,7 +42,7 @@
     {{ $featuredURL = .RelPermalink }}
     {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
       {{ $size := site.Store.Get "backgroundImageWidth" }}
-      {{ $featuredURL = (.Resize $size).RelPermalink }}
+      {{ $featuredURL = (partial "functions/resize.html" (dict "resource" . "spec" $size)).RelPermalink }}
     {{ end }}
   {{ end }}
 {{ end }}

layouts/partials/hero/thumbAndBackground.html

@@ -29,7 +29,7 @@
     {{ $backgroundURL = .RelPermalink }}
     {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
       {{ $size := site.Store.Get "backgroundImageWidth" }}
-      {{ $backgroundURL = (.Resize $size).RelPermalink }}
+      {{ $backgroundURL = (partial "functions/resize.html" (dict "resource" . "spec" $size)).RelPermalink }}
     {{ end }}
   {{ end }}
 {{ end }}
@@ -74,7 +74,7 @@
     {{ $featuredURL = .RelPermalink }}
     {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
       {{ $size := site.Store.Get "backgroundImageWidth" }}
-      {{ $featuredURL = (.Resize $size).RelPermalink }}
+      {{ $featuredURL = (partial "functions/resize.html" (dict "resource" . "spec" $size)).RelPermalink }}
     {{ end }}
   {{ end }}
 {{ end }}