Refactors defer_pagefind to work with site.afterRender()

The previous defer_pagefind.ts exported a default function (export default function deferPagefind() { ... }) that, when called, returned another function that processes an array of pages ((pages: Page[]) => { ... }). This structure is correct for Lume's site.process() method.

However, for site.afterRender(), Lume expects a function that directly takes a single Page object as its argument. It iterates over the pages itself and passes each one to the provided function.

By changing defer_pagefind.ts to export export function deferPagefindForPage(page: Page), we are:

* Changing it to a named export: allows import as specifically as deferPagefindForPage in your _config.ts.
* Modifying its signature: directly accepts a single page: Page object, aligning with what site.afterRender() expects.

This change is fundamental to ensure the script runs at the correct stage of the Lume build process where the page.content is reliably a string (the rendered HTML), allowing the regex replacements to work as intended.

Author: RickCogley

mod.ts

@@ -1,5 +1,6 @@
 // One place for all exports
 export { default as cssBanner } from "./plugins/css_banner.ts";
 export { default as shuffle } from "./plugins/shuffle.ts";
-export { default as deferPagefind } from "./processors/defer_pagefind.ts"; 
+// Lume site.afterRender() expects a function that directly takes a single Page object as its argument, so this is a named export: 
+export { deferPagefindForPage } from "./processors/defer_pagefind.ts"; 
 export { default as externalLinksIcon } from "./processors/external_links_icon.ts";

processors/defer_pagefind.ts

@@ -1,58 +1,54 @@
-// defer_pagefind.ts searches html pages for Pagefind CSS and JS links,
-// and modifies them to load with `defer` and `media="print"` attributes, so they don't block rendering.
+// processors/defer_pagefind.ts
 
 import type { Page } from "../types/lume.ts";
 
-export default function deferPagefind() {
-  return (pages: Page[]) => {
-    console.log("Starting deferPagefind script...");
-    for (const page of pages) {
-      const content = page.content;
-      if (typeof content !== "string") {
-        console.log(`Skipping non-string content for: ${page.src?.path || "unknown page"}`);
-        continue;
-      }
-
-      console.log(`Processing page: ${page.src?.path || "unknown page"}`);
-      console.log(`Original content snippet (first 200 chars): ${content.substring(0, 200)}`);
-
-      let updated = content;
-      let modified = false;
-
-      // Check for Pagefind CSS link BEFORE replacement
-      const cssMatch = content.match(/<link\s+[^>]*href=["']\/pagefind\/pagefind-ui\.css["'][^>]*>/gi);
-      if (cssMatch) {
-        console.log(`Found Pagefind CSS link on ${page.src?.path}: ${cssMatch[0]}`);
-      } else {
-        console.log(`❌ Pagefind CSS link NOT found on ${page.src?.path}`);
-      }
-
+/**
+ * Modifies the content of a single Lume Page to defer Pagefind CSS and JS loading.
+ * Intended to be used with site.afterRender().
+ */
+export function deferPagefindForPage(page: Page) {
+  const content = page.content;
+
+  // Crucially, this check should now usually pass for HTML pages in afterRender
+  if (typeof content !== "string") {
+    // This console.log should ideally be seen less or not at all for .html pages
+    console.log(`Skipping non-string content for: ${page.src?.path || "unknown page"} (at afterRender stage)`);
+    return; // Don't proceed if content isn't a string
+  }
+
+  let updated = content;
+  let modified = false; // Flag to track if any changes were made
+
+  // Regex to ensure we capture the attributes correctly for replacement
+  const cssRegex = /(<link\s+[^>]*href=["']\/pagefind\/pagefind-ui\.css["'])(\s*[^>]*>)/gi;
+  if (cssRegex.test(updated)) {
+      // Replaces the existing tag by inserting the new attributes before the closing bracket
       updated = updated.replace(
-        /<link\s+[^>]*href=["']\/pagefind\/pagefind-ui\.css["'][^>]*>/gi,
-        `<link rel="stylesheet" href="/pagefind/pagefind-ui.css" media="print" onload="this.media='all'">`
+          cssRegex,
+          `$1 media="print" onload="this.media='all'"$2`
       );
+      modified = true;
+  }
 
-      // Check for Pagefind JS script BEFORE replacement
-      const jsMatch = content.match(/<script\s+[^>]*src=["']\/pagefind\/pagefind-ui\.js["'][^>]*><\/script>/gi);
-      if (jsMatch) {
-        console.log(`Found Pagefind JS script on ${page.src?.path}: ${jsMatch[0]}`);
-      } else {
-        console.log(`❌ Pagefind JS script NOT found on ${page.src?.path}`);
-      }
 
+  const jsRegex = /(<script\s+[^>]*src=["']\/pagefind\/pagefind-ui\.js["'])(\s*[^>]*><\/script>)/gi;
+  if (jsRegex.test(updated)) {
+      // Replaces the existing tag by inserting the 'defer' attribute
       updated = updated.replace(
-        /<script\s+[^>]*src=["']\/pagefind\/pagefind-ui\.js["'][^>]*><\/script>/gi,
-        `<script type="text/javascript" src="/pagefind/pagefind-ui.js" defer></script>`
+          jsRegex,
+          `$1 defer$2`
       );
-
-      if (updated !== content) {
-        page.content = updated;
-        console.log(`✅ Modified: ${page.src?.path || "unknown page"}`);
-        console.log(`Updated content snippet (first 200 chars): ${page.content.substring(0, 200)}`);
-      } else {
-        console.log(`No changes made to: ${page.src?.path || "unknown page"}`);
-      }
-    }
-    console.log("Finished deferPagefind script.");
-  };
-}
+      modified = true;
+  }
+
+  // Only update page.content and log if actual modifications occurred
+  if (modified) {
+    page.content = updated;
+    console.log(`✅ Modified Pagefind attributes for: ${page.src?.path || "unknown page"}`);
+    // You can uncomment this for very detailed debugging, but it can be noisy
+    // console.log(`Updated content snippet (first 500 chars): ${page.content.substring(0, 500)}`);
+  } else {
+    // This log can be useful if you expect modifications but don't see them
+    // console.log(`No Pagefind modifications needed for: ${page.src?.path || "unknown page"}`);
+  }
+}