Merge pull request #428 from holochain/feb-23-fixing-search-index

Removing Design System from Site Search and updated Pagefind lib
holochain · Feb 27, 2024 · 9ad3945 · 9ad3945
2 parents 49e3865 + d4ce1cd
commit 9ad3945
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,11 @@ Additionally the following `markdown-it` plugins have been added:
  Please note: The closing `:::` is required. Also if you need to nest containers then the outer container gets an additional `:`.
  Each container type needs to be configured in `markdown-it-config.js` for examples and to add more. This one provides a lot of flexibility.
 
+## Site search and indexing
+The site uses the [Pagefind](https://pagefind.app/) library to index the contents of the site and to find search results upon request. 
+The documentation is quite good. One thing to note; pages are indexed based on the inclusion of the `data-pagefind-body` 
+attribute on a page. It is included on all of the main pages (all but the Design System). If you need to remove some or all of a page 
+from indexing you can use the `data-pagefind-ignore` attribute. See (https://pagefind.app/docs/indexing/) for details. 
 
 ## Setup for Dev
 - `npm install`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
  "doc": "docs"
  },
  "scripts": {
- "build:search-index": "npx pagefind --source _site --glob \"**/*.html\"",
+ "build:search-index": "npx pagefind --site _site --glob \"**/*.html\"",
  "build:web": "ELEVENTY_ENV=production npx @11ty/eleventy",
  "serve:web": "ELEVENTY_ENV=development npx @11ty/eleventy --serve --incremental",
  "serve:web-prod": "ELEVENTY_ENV=production BROWERSYNC=off npx @11ty/eleventy --serve",
@@ -72,6 +72,6 @@
  "uglify-js": "^3.17.4"
  },
  "dependencies": {
- "pagefind": "^0.12.0"
+ "pagefind": "1.0.4"
  }
 }
diff --git a/src/client-side/page-search.ts b/src/client-side/page-search.ts
@@ -18,7 +18,8 @@ const PagefindSearchKey = "pagefind-search";
 function setupPagefindUI() {
  const pagefindUIInstance = new PagefindUI({ 
  element: "#search", 
- showImages: false
+ showImages: false,
+ showSubResults: true
  });
 
  const searchInput = window.document.querySelector<HTMLInputElement>("#search .pagefind-ui__search-input")!;

diff --git a/src/pages/_includes/base-layout.njk b/src/pages/_includes/base-layout.njk
@@ -2,7 +2,7 @@
 <html lang="en">
  {% include "parts/head.njk" %}
 
- <body class="{{ pageStyleId }} {{ layoutId }}">
+ <body class="{{ pageStyleId }} {{ layoutId }}" data-pagefind-body>
  {% include "parts/header.njk" %}
  {% renderlayoutblock "abovePageWrap" %}{% endrenderlayoutblock %}
 

diff --git a/src/pages/search.njk b/src/pages/search.njk
@@ -4,8 +4,8 @@ layout: default-page-layout.njk
 pageStyleId: search
 ---
 
-<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
-<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
 
 <div id="search"></div>
 <script defer="true" src="/scripts/page-search.js"></script>