giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: load pagefind at end of body instead of deferred in head

Browse Source 
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>
This commit is contained in:
Ricardo
2026-02-13 11:03:02 +01:00
parent 7cb0203adc
commit 28bc7a6c1b
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
_includes/layouts/base.njk
View File

@@ -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>