feat: Site search using pagefind (#315)

* feat: pagefind js api as mvp search * feat: wip new files for search * chore: updates * Prototype search page * Style search results * Search pages * Reorganize search.js * Add French search page * No results message * Add frontmatter to allow excluding some pages from search crawl * Remove extra styles * Make search in header bilingual * Clean up addResult function * Error handling + remove more content from crawl * Add web assembly to CSP * Add nocrawl to 404 page * Switch to adding results to page in bulk * Add loader to page when doing logic to render results * Fix spinner issue when no results found * PR feedback: Use tokens in search CSS * Chnage CSS to use token --------- Co-authored-by: Daine Trinidad <[email protected]>
cds-snc · Apr 23, 2024 · 819a08f · 819a08f
1 parent fe13968
commit 819a08f
Show file tree

Hide file tree

Showing 45 changed files with 384 additions and 5 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -13,6 +13,8 @@ const displayTokens = require('./utils/display-tokens');
 const markdownAnchor = require('./utils/anchor');
 const slugify = require('./utils/slugify');
 
+const { execSync } = require('child_process')
+
 module.exports = function (eleventyConfig) {
   // Pass through copies
 
@@ -21,6 +23,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('./src/styles/prism.css');
   eleventyConfig.addPassthroughCopy('./src/images');
   eleventyConfig.addPassthroughCopy('./src/scripts/code-showcase.js');
+  eleventyConfig.addPassthroughCopy('./src/scripts/search.js');
   eleventyConfig.addPassthroughCopy('./src/scripts/code-copy.js');
   eleventyConfig.addPassthroughCopy('./src/admin/config.yml');
   eleventyConfig.addPassthroughCopy('./src/favicon.ico');
@@ -264,7 +267,7 @@ module.exports = function (eleventyConfig) {
       const content = children;
 
       return `
-      <div class="${margin} b-sm b-default component-preview">
+      <div class="${margin} b-sm b-default component-preview" id="component-preview">
         <p class="container-full font-semibold px-300 py-200 bb-sm b-default bg-light">
           ${title}
         </p>
@@ -298,6 +301,10 @@ module.exports = function (eleventyConfig) {
     });
   });
 
+  eleventyConfig.on('eleventy.after', () => {
+    execSync(`npx pagefind --site _site --exclude-selectors "gcds-side-nav, gcds-top-nav, gcds-breadcrumbs, .github-link, .figma-link, h1 > code, .component-preview" --glob \"**/*.html\"`, { encoding: 'utf-8' })
+  })
+
   return {
     pathPrefix: process.env.PATH_PREFIX || '/',
     dir: {

diff --git a/customHttp.yml b/customHttp.yml
@@ -20,7 +20,7 @@ customHeaders:
           report-uri https://csp-report-to.security.cdssandbox.xyz/report;
           default-src 'self' https://kit.fontawesome.com/ https://cdn.jsdelivr.net/npm/;
           font-src 'self' fonts.gstatic.com https://unpkg.com/[email protected]/;
-          script-src 'self' www.googletagmanager.com www.google-analytics.com https://kit.fontawesome.com https://cdn.jsdelivr.net/npm/ 'sha256-fipSroUh2te/+TB6wC2Cm4FtjT9kQKTCBmtmSCRONv8=' 'sha256-JDhgsVY611fJnWqj9ydKCOkLlh8t6kvvnJMW3P3GdEg=' 'sha256-Adp/M38ZA9hiuEC+IDM/5MYFu8PJFx0/710dxPMpyYE=';
+          script-src 'self' 'wasm-unsafe-eval' www.googletagmanager.com www.google-analytics.com https://kit.fontawesome.com https://cdn.jsdelivr.net/npm/ 'sha256-fipSroUh2te/+TB6wC2Cm4FtjT9kQKTCBmtmSCRONv8=' 'sha256-JDhgsVY611fJnWqj9ydKCOkLlh8t6kvvnJMW3P3GdEg=' 'sha256-Adp/M38ZA9hiuEC+IDM/5MYFu8PJFx0/710dxPMpyYE=';
           frame-src www.googletagmanager.com www.google-analytics.com https://cds-snc.github.io/;
           connect-src 'self' www.googletagmanager.com www.google-analytics.com www.canada.ca;
           img-src 'self' data: https: www.w3.org;

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@quasibit/eleventy-plugin-sitemap": "^2.1.4",
     "chroma-js": "^2.4.2",
     "eleventy-plugin-svg-contents": "^0.7.0",
+    "pagefind": "^1.0.4",
     "prettier": "3.2.5",
     "prompt-sync": "^4.2.0",
     "replace-in-file": "^7.0.0",

diff --git a/src/404.md b/src/404.md
@@ -3,6 +3,7 @@ title: Page could not be found | Page introuvable
 layout: 'layouts/base.njk'
 permalink: '404.html'
 eleventyExcludeFromCollections: true
+nocrawl: true
 locale: en
 ---
 

diff --git a/src/_data/search.js b/src/_data/search.js
@@ -0,0 +1,10 @@
+module.exports = {
+  en: {
+    action: '/en/search',
+    placeholder: 'GC Design System'
+  },
+  fr: {
+    action: '/fr/recherche',
+    placeholder: 'Système de design GC'
+  },
+};
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -31,12 +31,17 @@
     <link rel="stylesheet" href="{{ '/components/dist/gcds/gcds.css' | url }}">
     <script type="module" src="/components/dist/gcds/gcds.esm.js"></script>
     <script nomodule src="/components/dist/gcds/gcds.js"></script>
+
+    <!-- Pagefind -->
+    <script src="/pagefind/pagefind.js" type="module"></script>
+    <script src="{{ '/scripts/search.js' | url }}" type="module"></script>
+
   </head>
   <body>
     {% include "partials/header.njk" %}
 
     <div class="content-wrapper">
-      <main id="mc" class="container-xl mx-auto xl:px-0 sm:px-500 px-300 general-layout">
+      <main id="mc" class="container-xl mx-auto xl:px-0 sm:px-500 px-300 general-layout" {% if not nocrawl %}data-pagefind-body{% endif %}>
         {% block content %}{{ content | safe }}{% endblock %}
 
         <gcds-date-modified class="mb-400 font-caption">

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -30,6 +30,11 @@
     <link rel="stylesheet" href="{{ '/components/dist/gcds/gcds.css' | url }}">
     <script type="module" src="/components/dist/gcds/gcds.esm.js"></script>
     <script nomodule src="/components/dist/gcds/gcds.js"></script>
+
+    <!-- Pagefind -->
+    <script src="/pagefind/pagefind.js" type="module"></script>
+    <script src="{{ '/scripts/search.js' | url }}" type="module"></script>
+
   </head>
   <body>
     {% include "partials/header.njk" %}

diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
@@ -17,11 +17,15 @@
   {% endif %}
 {% endfor %}
 
+
+
 <gcds-header
   lang="{{ locale }}"
   skip-to-href="#mc"
   lang-href='{{ itemUrl }}'
 >
   {% include "partials/nav.njk" %}
   {% include "partials/breadcrumbs.njk" %}
+  {% include "partials/search.njk" %}
+
 </gcds-header>
diff --git a/src/_includes/partials/helpus.njk b/src/_includes/partials/helpus.njk
@@ -1,4 +1,4 @@
-<section class="pt-100 mt-400 mb-600 {% if removeBorder %} {% else %}bt-sm b-dark {% endif %}">
+<section data-pagefind-ignore class="pt-100 mt-400 mb-600 {% if removeBorder %} {% else %}bt-sm b-dark {% endif %}">
   <h2 class="mt-300 mb-400">
     {{ helpus[locale].heading }}
   </h2>

diff --git a/src/_includes/partials/search.njk b/src/_includes/partials/search.njk
@@ -0,0 +1,4 @@
+{% if not hidesearch %}
+<gcds-search search-id="search" slot="search" placeholder="{{ search[locale].placeholder}}" action="{{ search[locale].action}}">
+</gcds-search>
+{% endif %}
diff --git a/src/en/components/alert/code.md b/src/en/components/alert/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'alertCode'
 tags: ['alertEN', 'code']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Code
diff --git a/src/en/components/alert/design.md b/src/en/components/alert/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'alertDesign'
 tags: ['alertEN', 'design']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Design
diff --git a/src/en/components/alert/use-case.md b/src/en/components/alert/use-case.md
@@ -15,6 +15,7 @@ translationKey: 'alert'
 tags: ['alertEN', 'usage']
 permalink: /en/components/alert/
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Usage
diff --git a/src/en/components/components.md b/src/en/components/components.md
@@ -8,6 +8,7 @@ eleventyNavigation:
   order: 0
 translationKey: 'components'
 date: 'git Last Modified'
+nocrawl: true
 cardlist:
   type: components
   state: published

diff --git a/src/en/components/data-table/code.md b/src/en/components/data-table/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'datatableCode'
 tags: ['datatableEN', 'code']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Build a Data table

diff --git a/src/en/components/data-table/design.md b/src/en/components/data-table/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'datatableDesign'
 tags: ['datatableEN', 'design']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Data table anatomy

diff --git a/src/en/components/data-table/use-case.md b/src/en/components/data-table/use-case.md
@@ -15,6 +15,7 @@ translationKey: 'datatable'
 tags: ['datatableEN', 'usage']
 permalink: /en/components/data-table/
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Problems component solves

diff --git a/src/en/components/icon/code.md b/src/en/components/icon/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'iconCode'
 tags: ['iconEN', 'code']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Code
diff --git a/src/en/components/icon/design.md b/src/en/components/icon/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'iconDesign'
 tags: ['iconEN', 'design']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Design
diff --git a/src/en/components/icon/use-case.md b/src/en/components/icon/use-case.md
@@ -15,6 +15,7 @@ translationKey: 'icon'
 tags: ['iconEN', 'usage']
 permalink: /en/components/icon/
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Usage
diff --git a/src/en/components/image/code.md b/src/en/components/image/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'imageCode'
 tags: ['imageEN', 'code']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Build a Image

diff --git a/src/en/components/image/design.md b/src/en/components/image/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'imageDesign'
 tags: ['imageEN', 'design']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Image anatomy

diff --git a/src/en/components/image/use-case.md b/src/en/components/image/use-case.md
@@ -16,6 +16,7 @@ translationKey: 'image'
 tags: ['imageEN', 'usage']
 permalink: /en/components/image/
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Problems component solves

diff --git a/src/en/demo.md b/src/en/demo.md
@@ -2,4 +2,5 @@
 title: Demo
 translationKey: demo
 layout: 'layouts/demo.njk'
+nocrawl: true
 ---
diff --git a/src/en/search.md b/src/en/search.md
@@ -0,0 +1,34 @@
+---
+title: Search
+translationKey: searchresults
+layout: 'layouts/base.njk'
+hidesearch: true
+nocrawl: true
+date: 'git Last Modified'
+eleventyNavigation:
+  key: searchresultsEN
+  title: Search
+  locale: en
+  order: 5
+  hideMain: true
+---
+
+# Search results
+
+<gcds-search
+  action="/en/search"
+  search-id="ds-search"
+  placeholder="GC Design System"
+  id="searchbar"
+>
+</gcds-search>
+
+<gcds-text size="caption">
+  Don’t include personal information (telephone, email, SIN, financial, medical, or work details).
+</gcds-text>
+
+<div id="results-count"></div>
+
+<div id="results"></div>
+
+<div id="pagination"></div>
diff --git a/src/fr/composants/alerte/cas-dutilisation.md b/src/fr/composants/alerte/cas-dutilisation.md
@@ -15,6 +15,7 @@ translationKey: 'alert'
 tags: ['alertFR', 'usage']
 permalink: /fr/composants/alerte/
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Usage
diff --git a/src/fr/composants/alerte/code.md b/src/fr/composants/alerte/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'alertCode'
 tags: ['alertFR', 'code']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Code
diff --git a/src/fr/composants/alerte/design.md b/src/fr/composants/alerte/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'alertDesign'
 tags: ['alertFR', 'design']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Design
diff --git a/src/fr/composants/composants.md b/src/fr/composants/composants.md
@@ -8,6 +8,7 @@ eleventyNavigation:
   order: 0
 translationKey: 'components'
 date: 'git Last Modified'
+nocrawl: true
 cardlist:
   type: components
   state: published

diff --git a/src/fr/composants/icone/cas-dutilisation.md b/src/fr/composants/icone/cas-dutilisation.md
@@ -15,6 +15,7 @@ translationKey: 'icon'
 tags: ['iconFR', 'usage']
 permalink: /fr/composants/icone/
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Usage
diff --git a/src/fr/composants/icone/code.md b/src/fr/composants/icone/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'iconCode'
 tags: ['iconFR', 'code']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Code
diff --git a/src/fr/composants/icone/design.md b/src/fr/composants/icone/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'iconDesign'
 tags: ['iconFR', 'design']
 date: 'git Last Modified'
+nocrawl: true
 ---
 
 ## Design
diff --git a/src/fr/composants/image/cas-dutilisation.md b/src/fr/composants/image/cas-dutilisation.md
@@ -16,6 +16,7 @@ translationKey: 'image'
 tags: ['imageFR', 'usage']
 permalink: /fr/composants/image/
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Problems component solves

diff --git a/src/fr/composants/image/code.md b/src/fr/composants/image/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'imageCode'
 tags: ['imageFR', 'code']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Créer une case à Image

diff --git a/src/fr/composants/image/design.md b/src/fr/composants/image/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'imageDesign'
 tags: ['imageFR', 'design']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Structure de la Image

diff --git a/src/fr/composants/tableau-de-donnees/cas-dutilisation.md b/src/fr/composants/tableau-de-donnees/cas-dutilisation.md
@@ -15,6 +15,7 @@ translationKey: 'datatable'
 tags: ['datatableFR', 'usage']
 permalink: /fr/composants/tableau-de-donnees/
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Problems component solves

diff --git a/src/fr/composants/tableau-de-donnees/code.md b/src/fr/composants/tableau-de-donnees/code.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'datatableCode'
 tags: ['datatableFR', 'code']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Créer une case à Tableau de données

diff --git a/src/fr/composants/tableau-de-donnees/design.md b/src/fr/composants/tableau-de-donnees/design.md
@@ -4,6 +4,7 @@ layout: 'layouts/component-documentation.njk'
 translationKey: 'datatableDesign'
 tags: ['datatableFR', 'design']
 # date: "git Last Modified"
+nocrawl: true
 ---
 
 ## Structure de la Tableau de données

diff --git a/src/fr/demo.md b/src/fr/demo.md
@@ -2,4 +2,5 @@
 title: Demo
 translationKey: demo
 layout: 'layouts/demo.njk'
+nocrawl: true
 ---