RFC: Add search

.github/workflows/validate.yml

@@ -25,6 +25,11 @@ jobs:
         bundler-cache: true
         cache-version: 2
 
+    - name: Set up Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+
     - name: Build & Validate
       run: rake validate
 

Dockerfile

@@ -8,6 +8,8 @@ RUN git config --global --add safe.directory /usr/src/docs && git config --globa
 
 RUN gem install 'bundler:~>1' rake
 
+RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs
+
 COPY . ./
 
 RUN rake dependencies

Rakefile

@@ -17,17 +17,15 @@ task :dependencies do
     sh('bundle install --path gems')
   end
 
+  sh('npm install')
+
   # Fix pathutil on Ruby 3; works around https://github.com/envygeeks/pathutil/pull/5
   # as suggested by https://stackoverflow.com/a/73909894/67873
   pathutil_path = `bundle exec gem which pathutil`.strip()
   content = File.read(pathutil_path).gsub(', kwd', ', **kwd')
   File.write(pathutil_path, content)
 end
 
-task :spelling_dependencies do
-  sh('npm install')
-end
-
 file '_sass/brand/.git' do
   sh('git submodule update --init')
 end
@@ -42,8 +40,6 @@ task :build => [:dependencies, :submodules] do
   sh('bundle exec jekyll build --config _config.yml')
 end
 
-task :build_spellings => [:build, :spelling_dependencies]
-
 task :validate_kit_versions do
   data = YAML.load_file('_data/kit_versions.yml')
   data.each do |entry|
@@ -161,7 +157,7 @@ task :validate_sidebar_tree => [:build] do
   puts "Sidebar links validated successfully"
 end
 
-task :validate_spellings => [:build_spellings] do
+task :validate_spellings => [:build] do
   sh('npm run spell-check')
 end
 

_includes/head.html

@@ -7,6 +7,7 @@
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link href="{{ '/_pagefind/pagefind-ui.css' | prepend: site.baseurl }}" rel="stylesheet">
   <link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
 
   {% if page.extra_css %}

_includes/script.html

@@ -14,3 +14,5 @@
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 
 <script src="{{ '/js/navigation.js' | prepend: site.baseurl }}"></script>
+<script src="{{ '/_pagefind/pagefind-ui.js' | prepend: site.baseurl }}"></script>
+<script src="{{ '/js/search.js' | prepend: site.baseurl }}"></script>

_layouts/page.html

@@ -3,18 +3,21 @@
 ---
 <div class="header-card">
   <div class="fixed-width">
-    <h1>Documentation</h1>
+    <h1 data-pagefind-meta="title:{{ page.title }}">Documentation</h1>
   </div>
 </div>
 <div class="mobile-only mobile-index">
   {% include sidebar.html %}
 </div>
+<div class="fixed-width">
+  <div id="search"></div>
+</div>
 <div class="main">
   <div class="row fixed-width">
     <div class="column m-3-12 desktop-only">
       {% include sidebar.html %}
     </div>
-    <div class="column m-9-12 doc">
+    <div class="column m-9-12 doc" data-pagefind-body>
       {{ content }}
     </div>
   </div>

_sass/base.scss

@@ -8,7 +8,6 @@
 }
 
 html, body {
-  background: $sr-black;
   font-family: $main-font-family;
   font-size: 16px;
   height: 100%;

_sass/search.scss

@@ -0,0 +1,17 @@
+:root {
+  --pagefind-ui-scale: 0.8;
+  --pagefind-ui-primary: #{$sr-blue};
+  --pagefind-ui-text: #{$sr-black};
+  --pagefind-ui-border: #{$sr-medium-grey};
+  --pagefind-ui-tag: #{$sr-medium-grey};
+  --pagefind-ui-border-radius: 0px;
+  --pagefind-ui-border-width: 1px;
+}
+
+.pagefind-ui__search-clear {
+  border: none;
+}
+
+#search {
+  margin-top: $spacing;
+}

css/main.scss

@@ -12,5 +12,6 @@
         "docs",
         "messages",
         "footer",
-        "syntax-highlighting"
+        "syntax-highlighting",
+        "search"
 ;

js/search.js

@@ -0,0 +1,17 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+  if (!window.PagefindUI) {
+    console.warn("Unable to initialize search - perhaps we're running locally");
+    return;
+  }
+
+  new PagefindUI({
+    element: "#search",
+    resetStyles: false,
+    processResult: function (result) {
+      // Remove the `.html` suffix
+      // `index.html` is already handled for us.
+      result.url = result.url.replace(".html", "")
+      return result;
+    }
+  });
+});

package.json

@@ -1,13 +1,11 @@
 {
   "scripts": {
     "test": "npm run spell-check",
-    "spell-check": "cspell"
+    "spell-check": "cspell",
+    "build-search-index": "pagefind"
   },
-  "@comments": [
-    "These dependencies are only for testing the site.",
-    "The site is built with Jekyll so site dependencies should be in the Gemfile."
-  ],
   "dependencies": {
-    "cspell": "5.18.5"
+    "cspell": "5.18.5",
+    "pagefind": "^0.12.0"
   }
 }

pagefind.yml

@@ -0,0 +1 @@
+source: ./_site