From 28bc7a6c1bff261413f3684b0979d7657e7ca542 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 13 Feb 2026 11:03:02 +0100
Subject: [PATCH] fix: load pagefind at end of body instead of deferred in head

The defer + DOMContentLoaded queue approach failed silently when
pagefind-ui.js couldn't load. Moving the script to end of body
ensures all DOM elements exist and processes the queue immediately
after the script loads.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 _includes/layouts/base.njk | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 28c781e..d3b5dbe 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -54,18 +54,9 @@
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
 
   <link rel="stylesheet" href="/pagefind/pagefind-ui.css">
-  <script src="/pagefind/pagefind-ui.js" defer></script>
   <script>
-    // Pagefind init helper — queues creation until PagefindUI is available (deferred script)
     var _pfQueue = [];
     function initPagefind(sel, opts) { _pfQueue.push([sel, opts]); }
-    document.addEventListener("DOMContentLoaded", function() {
-      if (typeof PagefindUI === "undefined") return;
-      for (var i = 0; i < _pfQueue.length; i++) {
-        var el = document.querySelector(_pfQueue[i][0]);
-        if (el) new PagefindUI(Object.assign({ element: _pfQueue[i][0], showSubResults: false, showImages: false }, _pfQueue[i][1] || {}));
-      }
-    });
   </script>
   <link rel="stylesheet" href="/css/style.css?v={{ '/css/style.css' | hash }}">
   <link rel="stylesheet" href="/css/prism-theme.css?v={{ '/css/prism-theme.css' | hash }}">
@@ -485,5 +476,15 @@
       </svg>
     </button>
   </div>
+  {# Pagefind — load at end of body so all DOM elements exist, then process queue #}
+  <script src="/pagefind/pagefind-ui.js"></script>
+  <script>
+    (function() {
+      if (typeof PagefindUI === "undefined") { console.warn("[pagefind] PagefindUI not loaded"); return; }
+      for (var i = 0; i < _pfQueue.length; i++) {
+        new PagefindUI(Object.assign({ element: _pfQueue[i][0], showSubResults: false, showImages: false }, _pfQueue[i][1] || {}));
+      }
+    })();
+  </script>
 </body>
 </html>