Add PageFind Plugin (Re-PR)

packages/core/package.json

@@ -64,6 +64,7 @@
     "material-icons": "^1.9.1",
     "moment": "^2.29.4",
     "nunjucks": "3.2.4",
+    "pagefind": "^1.0.4",
     "path-is-inside": "^1.0.2",
     "simple-git": "^3.22.0",
     "url-parse": "^1.5.10",

packages/core/src/Site/index.ts

@@ -529,6 +529,9 @@ export class Site {
       await this.copyOcticonsAsset();
       await this.copyMaterialIconsAsset();
       await this.writeSiteData();
+      if (this.siteConfig.plugins.includes('pagefind')) {
+        await this.indexSiteWithPagefind();
+      }
       this.calculateBuildTimeForGenerate(startTime, lazyWebsiteGenerationString);
       if (this.backgroundBuildMode) {
         this.backgroundBuildNotViewedFiles();
@@ -569,6 +572,25 @@ export class Site {
     }
   }
 
+  /**
+   * Indexes all the pages of the site using pagefind for pagefind plugin.
+   */
+  async indexSiteWithPagefind() {
+    logger.info('Creating Pagefind Search Index');
+    const { createIndex, close } = await import('pagefind');
+    const newIndex = await createIndex({
+      keepIndexUrl: true,
+      verbose: true,
+      logfile: 'debug.log',
+    });
+    const { index } = newIndex;
+    if (index) {
+      await index.addDirectory({ path: this.outputPath });
+      await index.writeFiles({ outputPath: `${this.outputPath}/pagefind` });
+    }
+    await close();
+  }
+
   /**
    * Adds all pages except the viewed pages to toRebuild, flagging them for lazy building later.
    */

packages/core/src/plugins/pageFind.ts

@@ -0,0 +1,43 @@
+// import cheerio from 'cheerio';
+// import { PluginContext, FrontMatter } from './Plugin';
+// todo: find a way to import the UI and Script from the working directory.
+// const DEFAULT_UI = 'https://cdn.jsdelivr.net/npm/@pagefind/[email protected]/+esm';
+
+const JS_FILE_NAME = 'pageFindAssets/pagefind-ui.min.js';
+const CSS_FILE_NAME = 'pageFindAssets/pagefind-ui.min.css';
+const ADDTIONAL_CSS_FILE_NAME = 'pageFindAssets/pagefind-ui-additional.css';
+const PAGEFIND_INPUT_SELECTOR = '#pagefind-search-input';
+
+/**
+ * Generates the script to initialize the PageFind UI
+ */
+function genScript() {
+  return `
+    <script>
+      window.addEventListener('DOMContentLoaded', (event) => {
+        const searchContainers = document.querySelectorAll('${PAGEFIND_INPUT_SELECTOR}');
+        if (searchContainers.length) {
+          searchContainers.forEach((container) => {
+            new window.PagefindUI({
+              element: container,
+              showSubResults: true,
+              showImages: false,
+            });
+          });
+        }
+      });
+    </script>`;
+}
+
+export = {
+  tagConfig: {
+    pagefind: {
+      isSpecial: true,
+    },
+  },
+  getScripts: () => [`<script src="${JS_FILE_NAME}"></script>`, genScript()],
+  getLinks: () => [
+    `<link rel="stylesheet" href="${CSS_FILE_NAME}">`,
+    `<link rel="stylesheet" href="${ADDTIONAL_CSS_FILE_NAME}">`,
+  ],
+};

packages/core/src/plugins/pageFindAssets/pagefind-ui-additional.css

@@ -0,0 +1,14 @@
+/* custom-pagefind-ui.css */
+
+/* General Pagefind UI styling */
+:root {
+    --pagefind-ui-border: #000000; /* Black border color */
+    --pagefind-ui-border-width: 2px; /* Border width */
+    --pagefind-ui-border-radius: 8px; /* Border radius */
+    --pagefind-ui-image-border-radius: 8px; /* Image border radius */
+  }
+
+/* Additional custom styles for dark mode if needed */
+body.dark {
+--pagefind-ui-border: #000000; /* Black border color for dark mode */
+}