upgrade pagefind and improve search UI

codegouvfr · Sep 15, 2023 · 801d903 · 801d903
1 parent a14c139
commit 801d903
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/content/en/search-results.njk b/content/en/search-results.njk
@@ -5,7 +5,7 @@ layout: layouts/base.njk
 <div class="fr-container fr-py-8v">
   <div class="fr-grid-row">
     <div class="fr-col-12">
-      <h1>{{ title }}</h1>
+      <h1>{{ title }} “<span id="search-term"></span>”</h1>
       <div class="fr-container">
         <p><span id="result-count">0</span> {{ "results" | i18n }}</p>
         <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w" id="search-results">

diff --git a/content/fr/search-results.njk b/content/fr/search-results.njk
@@ -5,7 +5,7 @@ layout: layouts/base.njk
 <div class="fr-container fr-py-8v">
   <div class="fr-grid-row">
     <div class="fr-col-12">
-      <h1>{{ title }}</h1>
+      <h1>{{ title }} “<span id="search-term"></span>”</h1>
       <div class="fr-container">
         <p><span id="result-count">0</span> {{ "results" | i18n }}</p>
         <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w" id="search-results">

diff --git a/content/sitemap/sitemap.njk b/content/sitemap/sitemap.njk
@@ -2,7 +2,7 @@
 layout: layouts/page.njk
 ---
 {# List every content page in the project #}
-<ul>
+<ul data-pagefind-ignore>
   {% for entry in collections.all %}
     {% if entry.url %}
       <li><a href="{{ entry.url }}"><code>{{ entry.url }}</code></a></li>

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Une base de code pour déployer un site/blog statique avec Eleventy et le DSFR.",
   "scripts": {
     "build": "npx @11ty/eleventy",
-    "postbuild": "npx -y pagefind --source _site/",
+    "postbuild": "npx pagefind --site _site/ --output-subdir \"_pagefind\"",
     "start": "npx @11ty/eleventy --serve --quiet",
     "debug": "DEBUG=Eleventy* npx @11ty/eleventy",
     "debugstart": "DEBUG=Eleventy* npx @11ty/eleventy --serve --quiet",
@@ -37,7 +37,7 @@
     "markdown-it-anchor": "^8.6.6",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-container": "^3.0.0",
-    "pagefind": "^0.12.0",
+    "pagefind": "^1.0.2",
     "ics": "^3.2.0"
   }
 }
diff --git a/public/js/search-results.js b/public/js/search-results.js
@@ -1,18 +1,23 @@
 (() => {
     const RESULTS_PER_PAGE = 10;
 
-    const SEARCH_RESULTS_SELECTOR = "#search-results";
+    const SEARCH_TERM_SELECTOR = "#search-term";
     const RESULT_COUNT_SELECTOR = "#result-count";
+    const SEARCH_RESULTS_SELECTOR = "#search-results";
 
     const FULL_WIDTH_COL_CLASS = "fr-col-12";
 
-    const searchResultList = document.querySelector(SEARCH_RESULTS_SELECTOR);
+    const searchTermText = document.querySelector(SEARCH_TERM_SELECTOR);
     const resultCounter = document.querySelector(RESULT_COUNT_SELECTOR);
+    const searchResultList = document.querySelector(SEARCH_RESULTS_SELECTOR);
 
     const getSearchResults = async () => {
         const pagefind = await import(PAGEFIND_URL);
         const queryParams = new URLSearchParams(window.location.search);
-        const search = await pagefind.search(queryParams.get(SEARCH_PARAM));
+        const searchTerm = queryParams.get(SEARCH_PARAM);
+        searchTermText.textContent = searchTerm;
+        pagefind.init();
+        const search = await pagefind.search(searchTerm);
         return search.results;
     }