api: use pagefind for search (#56)

Signed-off-by: Nick Santos <[email protected]>

Author: nicks

.github/workflows/deploy.yaml

@@ -41,12 +41,12 @@ jobs:
           aws-region: us-east-1
       - name: Create website api.tilt.dev
         run: |
-          JEKYLL_ENV=production bundle exec jekyll build -d _site
+          make build-docs
         working-directory: docs
 
       - name: Deploy website api.tilt.dev
         run: |
-          aws s3 sync docs/_site s3://prod-collaboration-api.tilt.dev/ --region us-east-1 --delete
+          aws s3 sync build/docs s3://prod-collaboration-api.tilt.dev/ --region us-east-1 --delete
       - name: Invalidate CloudFront cache for api.tilt.dev
         run: |
           aws cloudfront create-invalidation --distribution-id E2ZQJPGT02CCGI --paths "/*"

.gitignore

@@ -15,3 +15,4 @@
 # vendor/
 
 tilt_modules
+build

Makefile

@@ -25,3 +25,8 @@ base:
 
 update-base:
 	cd ./base && git fetch && git merge --ff-only origin/master
+
+build-docs:
+	rm -fR build/docs
+	docker build -t api-site-base -f deploy/base.dockerfile .
+	docker buildx build --target static --output type=local,dest=build/docs -f deploy/Dockerfile .

base

@@ -1,13 +1,25 @@
-FROM api-site-base
+FROM api-site-base AS sources
 
 WORKDIR /docs
 
 COPY ./base/src /base/src/
-
 COPY ./docs/Gemfile /docs/Gemfile
 COPY ./docs/Gemfile.lock /docs/Gemfile.lock
 RUN bundle install
-
 ADD config /config/
 ADD docs /docs/
-ENTRYPOINT bundle exec jekyll serve --config _config.yml,_config-dev.yml
+
+FROM sources AS static-builder
+RUN JEKYLL_ENV=production bundle exec jekyll build -d _site
+
+FROM node:22-alpine as search-builder
+RUN npm install -g pagefind
+WORKDIR /build
+COPY --from=static-builder /docs/_site /build
+RUN pagefind --site .
+
+FROM scratch AS static
+COPY --from=search-builder /build /
+
+FROM sources
+ENTRYPOINT ["bundle", "exec", "jekyll", "serve", "--trace", "--config", "_config.yml,_config-dev.yml"]

deploy/Dockerfile

@@ -1,9 +1,18 @@
-FROM ruby:2.6
+FROM ruby:3.2
 
-RUN gem install jekyll bundler
+# jekyll has weird behavior where it will force things if in the default (development) environment
+# so explicitly set a custom one
+# see https://github.com/jekyll/jekyll/issues/5743#issuecomment-271396025
+ENV JEKYLL_ENV=docker
+
+RUN gem install bundler
+RUN gem update --system
+RUN gem install jekyll
 
 WORKDIR /base/src
 
 ADD ./base/src/Gemfile /base/src/
 ADD ./base/src/Gemfile.lock /base/src/
 RUN bundle install
+
+ENTRYPOINT ["jekyll"]

deploy/base.dockerfile

@@ -24,6 +24,7 @@ group :jekyll_plugins do
   gem "jekyll-redirect-from"
   gem "jekyll-sitemap"
   gem "jekyll-seo-tag"
+  gem "jekyll-tagging"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -40,7 +41,11 @@ gem "jekyll-inline-svg"
 gem "rouge"
 
 # Related posts
+gem "jekyll-tagging"
 gem "jekyll-tagging-related_posts"
 
 # markdown
 gem "kramdown", ">= 2.3.1"
+
+# https://github.com/jekyll/jekyll/issues/8523
+gem "webrick"

docs/Gemfile

@@ -1,20 +1,20 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.2)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.4)
+    ffi (1.15.5)
     forwardable-extended (2.6.0)
     http_parser.rb (0.8.0)
-    i18n (1.8.11)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
-    jekyll (4.2.1)
+    jekyll (4.2.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -29,60 +29,60 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 2.0)
-    jekyll-feed (0.15.1)
+    jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
-    jekyll-inline-svg (1.1.4)
+    jekyll-inline-svg (1.1.5)
       jekyll (>= 3.3, < 5.0)
-      svg_optimizer (~> 0.2.5)
+      svg_optimizer (~> 0.3.0)
     jekyll-paginate (1.1.0)
     jekyll-redirect-from (0.16.0)
       jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.1.0)
+    jekyll-sass-converter (2.2.0)
       sassc (> 2.0.1, < 3.0)
-    jekyll-seo-tag (2.7.1)
+    jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-tagging (1.1.0)
       nuggets
-    jekyll-tagging-related_posts (1.1.0)
-      jekyll (>= 3.5, < 5.0)
-      jekyll-tagging (~> 1.0)
+    jekyll-tagging-related_posts (1.3.0)
+      jekyll (>= 3.9, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.3.1)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.7.0)
+    liquid (4.0.4)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    nokogiri (1.13.4-x86_64-linux)
+    nokogiri (1.18.8-x86_64-linux-gnu)
       racc (~> 1.4)
-    nuggets (1.6.0)
+    nuggets (1.6.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
-    racc (1.6.0)
-    rb-fsevent (0.11.0)
+    public_suffix (5.0.1)
+    racc (1.8.1)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (3.26.1)
+    rexml (3.3.9)
+    rouge (3.30.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
-    svg_optimizer (0.2.5)
+    svg_optimizer (0.3.0)
       nokogiri
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     unicode-display_width (1.8.0)
+    webrick (1.8.2)
 
 PLATFORMS
   x86_64-linux
@@ -95,11 +95,13 @@ DEPENDENCIES
   jekyll-redirect-from
   jekyll-seo-tag
   jekyll-sitemap
+  jekyll-tagging
   jekyll-tagging-related_posts
   kramdown (>= 2.3.1)
   minima (~> 2.0)
   rouge
   tzinfo-data
+  webrick
 
 BUNDLED WITH
    2.2.32

docs/Gemfile.lock

@@ -28,8 +28,8 @@
         {% endfor %}
       </ul>
     </nav>
-    <form class="Docs-search js-only" action="/search" method="GET">
-      <input class="Docs-search-input" type="search" name="q" id="q" placeholder="Search Docs…" />
+    <form class="Docs-search js-only" action="/search.html" method="GET">
+      <input class="Docs-search-input" type="search" name="q" id="q" placeholder="Search API…" />
     </form>
   </header>
 

docs/_layouts/api.html

@@ -2,17 +2,32 @@
 title: Search
 description: "Search the Tilt documentation"
 layout: api
+hasSearch: true
 ---
 
+<div id="pagefind-search"></div>
 <script>
- (function() {
-     var cx = '017353557192452135467:flbjzvynczi';
-     var gcse = document.createElement('script');
-     gcse.type = 'text/javascript';
-     gcse.async = true;
-     gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-     var s = document.getElementsByTagName('script')[0];
-     s.parentNode.insertBefore(gcse, s);
- })();
+  window.addEventListener('DOMContentLoaded', (event) => {
+      const searchEl = document.getElementById('q');
+      let searchVal = '';
+      if (searchEl) {
+        try {
+          const urlParams = new URLSearchParams(window.location.search);
+          searchVal = urlParams.get('q');  
+          searchEl.value = urlParams.get('q');
+        } catch {
+          // just ignore, search box won't be pre-populated but it's ok
+        }
+      }
+      let ui = new PagefindUI({
+          element: "#pagefind-search",
+          showSubResults: false,
+          showImages: false,
+      });
+      ui.triggerSearch(searchVal);
+  });
 </script>
-<gcse:searchresults-only></gcse:searchresults-only>
+
+<noscript>
+JavaScript is required for search functionality.
+</noscript>