Add PageFind beta (Full Text Search across Site)

.eslintignore

@@ -5,6 +5,11 @@ node_modules
 *.d.ts
 
 packages/cli/src/lib/live-server/*
+packages/cli/test/**/pagefind/**/*.js
+
+
+# Docs
+docs/_site/
 
 # --- packages/core ---
 

.gitignore

@@ -46,6 +46,9 @@ packages/core/template/*/_site
 # Generated site (MarkBind)
 packages/cli/test/functional/*/_site
 
+# Generated pagefind directories for sites and in expected
+packages/cli/test/functional/**/pagefind
+
 # Ignore .page-vue-render.js files in functional test and subdirectories on update
 packages/cli/test/functional/**/*.page-vue-render.js
 
@@ -107,6 +110,8 @@ packages/core/index.js
 packages/core/src/lib/progress/*.js
 # --- packages/core end ---
 
-# Nx for Lerna
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+
+# Pagefind fragments
+*.pf_fragment

docs/userGuide/makingTheSiteSearchable.md

@@ -37,6 +37,35 @@ You can add a search bar component to your website to allow users to search the
 <include src="syntax/keywords.md" />
 <include src="syntax/indexing.md" />
 
+
+
+## Using Pagefind (Beta)
+
+MarkBind now supports [Pagefind](https://pagefind.app/), a static low-bandwidth search library, as a built-in feature. This provides full-text search capabilities without external services.
+
+<box type="info">
+This is a <strong>beta</strong> feature and will be refined in future updates. To use it, you must have <code>enableSearch: true</code> in your <code>site.json</code> (this is the default).
+</box>
+
+<box type="warning">
+The Pagefind index is currently only generated during a full site build (e.g., <code>markbind build</code>). It will <strong>not</strong> repeatedly update during live reload (<code>markbind serve</code>) when you modify pages. You must restart the server (re-run <code>markbind serve</code>) or rebuild to refresh the search index.
+</box>
+
+To add the Pagefind search bar to your page, simply insert the following `div` where you want it to appear:
+
+```html
+<div id="pagefind-search-input"></div>
+```
+
+MarkBind will automatically inject the necessary scripts and styles to render the search UI.
+
+The following UI will be rendered, which is provided by Pagefind:
+
+<div id="pagefind-search-input"></div>
+
+
+<br>
+
 ## Using External Search Services
 
 MarkBind sites can use Algolia Doc Search services easily via the Algolia plugin. Unlike the built-in search, Algolia provides full-text search. See the panel below for more info.

packages/cli/test/functional/test.js

@@ -43,12 +43,14 @@ expectedErrors.forEach((error, index) => {
   logger.info(`${index + 1}: ${error}`);
 });
 
+const GENERATED_DIRECTORIES_TO_IGNORE = ['pagefind'];
+
 testSites.forEach((siteName) => {
   console.log(`Running ${siteName} tests`);
   try {
     execSync(`node ../../index.js build ${siteName}`, execOptions);
     const siteIgnoredFiles = plantumlGeneratedFilesForTestSites[siteName];
-    compare(siteName, 'expected', '_site', siteIgnoredFiles);
+    compare(siteName, 'expected', '_site', siteIgnoredFiles, GENERATED_DIRECTORIES_TO_IGNORE);
   } catch (err) {
     printFailedMessage(err, siteName);
     process.exit(1);
@@ -63,7 +65,8 @@ testConvertSites.forEach((sitePath) => {
     execSync(`node ../../index.js init ${nonMarkBindSitePath} -c`, execOptions);
     execSync(`node ../../index.js build ${nonMarkBindSitePath}`, execOptions);
     const siteIgnoredFiles = plantumlGeneratedFilesForConvertSites[siteName];
-    compare(sitePath, 'expected', 'non_markbind_site/_site', siteIgnoredFiles);
+    compare(sitePath, 'expected', 'non_markbind_site/_site', siteIgnoredFiles,
+            GENERATED_DIRECTORIES_TO_IGNORE);
   } catch (err) {
     printFailedMessage(err, sitePath);
     cleanupConvert(path.resolve(__dirname, sitePath));
@@ -83,7 +86,7 @@ testTemplateSites.forEach((templateAndSitePath) => {
     execSync(`node ../../index.js init ${siteCreationTempPath} --template ${flag}`, execOptions);
     execSync(`node ../../index.js build ${siteCreationTempPath}`, execOptions);
     const siteIgnoredFiles = plantumlGeneratedFilesForTemplateSites[siteName];
-    compare(sitePath, 'expected', 'tmp/_site', siteIgnoredFiles);
+    compare(sitePath, 'expected', 'tmp/_site', siteIgnoredFiles, GENERATED_DIRECTORIES_TO_IGNORE);
   } catch (err) {
     printFailedMessage(err, sitePath);
     fs.removeSync(path.resolve(__dirname, siteCreationTempPath));

packages/cli/test/functional/testUtil/compare.js

@@ -43,13 +43,19 @@ function filterPageVueRenderFiles(filePaths) {
  * @param {string} expectedSiteRelativePath - Relative path to expected site output (default: "expected")
  * @param {string} siteRelativePath - Relative path to actual generated site output (default: "_site")
  * @param {string} ignoredPaths - Specify any paths to ignore for comparison, but still check for existence.
+ * @param {string[]} ignoredDirectories - Specify any directories to ignore for comparison (e.g. 'pagefind')
  */
-function compare(root, expectedSiteRelativePath = 'expected', siteRelativePath = '_site', ignoredPaths = []) {
+function compare(root,
+                 expectedSiteRelativePath = 'expected',
+                 siteRelativePath = '_site',
+                 ignoredPaths = [],
+                 ignoredDirectories = []) {
   const expectedDirectory = path.join(root, expectedSiteRelativePath);
   const actualDirectory = path.join(root, siteRelativePath);
 
-  let expectedPaths = walkSync(expectedDirectory, { directories: false });
-  let actualPaths = walkSync(actualDirectory, { directories: false });
+  const walkSyncOptions = { directories: false, ignore: ignoredDirectories };
+  let expectedPaths = walkSync(expectedDirectory, walkSyncOptions);
+  let actualPaths = walkSync(actualDirectory, walkSyncOptions);
 
   // Vue render JS files (*.page-vue-render.js) are not committed to version control,
   // so we exclude them from the comparison to avoid false positive diffs.

packages/cli/test/functional/test_site/expected/bugs/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
   <link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
+  <link rel="stylesheet" href="/test_site/pagefind/pagefind-ui.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
   <link rel="stylesheet" href="/test_site/plugins/web3Form/web-3-form.css">
   <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
@@ -359,5 +360,21 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
     });
 
   </script>
+<script src="/test_site/pagefind/pagefind-ui.js"></script>
+
+<script>
+      window.addEventListener('DOMContentLoaded', (event) => {
+        const searchContainers = document.querySelectorAll('#pagefind-search-input');
+        if (searchContainers.length) {
+          searchContainers.forEach((container) => {
+            new window.PagefindUI({
+              element: container,
+              showSubResults: true,
+              showImages: false,
+            });
+          });
+        }
+      });
+    </script>
 
 </html>

packages/cli/test/functional/test_site/expected/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
   <link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
   <link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
+  <link rel="stylesheet" href="/test_site/pagefind/pagefind-ui.css">
   <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
   <link rel="stylesheet" href="/test_site/plugins/web3Form/web-3-form.css">
   <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
@@ -1025,5 +1026,21 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
     });
 
   </script>
+<script src="/test_site/pagefind/pagefind-ui.js"></script>
+
+<script>
+      window.addEventListener('DOMContentLoaded', (event) => {
+        const searchContainers = document.querySelectorAll('#pagefind-search-input');
+        if (searchContainers.length) {
+          searchContainers.forEach((container) => {
+            new window.PagefindUI({
+              element: container,
+              showSubResults: true,
+              showImages: false,
+            });
+          });
+        }
+      });
+    </script>
 
 </html>