Replace middleman-search with lunr with Typesense DocSearch

Signed-off-by: Takuya Noguchi <[email protected]>

Author: tnir

Gemfile

@@ -6,7 +6,6 @@ gem 'middleman', '~> 4.4'
 gem 'middleman-syntax'
 gem 'middleman-blog'
 gem 'puma', '~> 5.6'
-gem 'middleman-search', github: 'deivid-rodriguez/middleman-search', branch: 'workarea-commerce-master'
 gem 'rake'
 gem 'ronn'
 gem 'kramdown'

Gemfile.lock

@@ -1,13 +1,3 @@
-GIT
-  remote: https://github.com/deivid-rodriguez/middleman-search.git
-  revision: 50465e1c1580e282a45247b77036da3c2719870d
-  branch: workarea-commerce-master
-  specs:
-    middleman-search (0.10.0)
-      middleman-core (>= 3.2)
-      mini_racer (~> 0.5)
-      nokogiri (~> 1.6)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -52,9 +42,6 @@ GEM
     json (2.6.2)
     kramdown (2.4.0)
       rexml
-    libv8-node (16.10.0.0)
-    libv8-node (16.10.0.0-arm64-darwin)
-    libv8-node (16.10.0.0-x86_64-linux)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -101,8 +88,6 @@ GEM
       middleman-core (>= 3.2)
       rouge (~> 3.2)
     mini_portile2 (2.8.0)
-    mini_racer (0.5.0)
-      libv8-node (~> 16.10.0.0)
     minitest (5.14.4)
     mustache (1.0.5)
     nio4r (2.5.8)
@@ -193,7 +178,6 @@ DEPENDENCIES
   kramdown
   middleman (~> 4.4)
   middleman-blog
-  middleman-search!
   middleman-syntax
   nokogiri (~> 1.13)
   octokit (~> 5.1)

assets/javascripts/application.js

@@ -1,7 +1,7 @@
-import './search'
-import './search_arrows'
 import AnchorJS from 'anchor-js';
 
+import "./docsearch";
+
 const anchors = new AnchorJS();
 
 anchors.options = {

assets/javascripts/docsearch.js

@@ -0,0 +1,11 @@
+docsearch({
+  inputSelector: "#input-search",
+  typesenseCollectionName: "bundler",
+  typesenseServerConfig: {
+    nodes: [{
+      host: "k0cw8zgj4i592lsqp-1.a1.typesense.net",
+      protocol: "https",
+    }],
+    apiKey: "kWCn88g6vUwWdBVgEPPYUP9WSIGoqljS",
+  },
+});

assets/javascripts/search.js

@@ -31,45 +31,3 @@
 .input-search:focus {
   outline: 0;
 }
-
-.search-list-ul {
-  list-style-type: none;
-  padding-left: 0;
-  
-  hr {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  li:last-child hr {
-    height: 0;
-    border-top-color: #ffffff;
-  }
-
-  h4 {
-    padding-top: 10px;
-    margin-bottom: 0;
-  }
-
-  .active {
-    border: 2px solid #64C9EF !important;
-
-    transition-property: border-color;
-    transition-duration: 0.3s;
-    -webkit-transition-property: border-color;
-    -webkit-transition-duration: 0.3s;
-    -o-transition-property: border-color;
-    -o-transition-duration: 0.3s;
-    -moz-transition-property: border-color;
-    -moz-transition-duration: 0.3s;
-  }
-
-  .search-list-li {
-    border: 2px solid transparent;
-    padding: 2px;
-  }
-}
-
-.popover{
-  max-width: 100%; /* Max Width of the popover (depending on the container!) */
-}

assets/javascripts/search_arrows.js

@@ -48,7 +48,6 @@ $icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
-@import "~bootstrap/scss/popover";
 
 // Helpers
 @import "~bootstrap/scss/helpers";

assets/stylesheets/_search.scss

@@ -5,18 +5,6 @@
 
 activate :syntax
 activate :i18n
-activate :search do |search|
-  search.resources = ['index.html', 'guides/', "#{config[:current_version]}/", 'compatibility.html', 'conduct.html', 'contributors.html']
-
-  search.index_path = 'search/lunr-index.json'
-
-  search.fields = {
-    title: {boost: 100, store: true, required: true},
-    content: {boost: 50},
-    url: {index: false, store: true},
-    description: {index: false, store: true},
-  }
-end
 
 set :markdown_engine, :kramdown
 

assets/stylesheets/application.css.scss

@@ -3,13 +3,9 @@
     = link_to 'Bundler', '/', class: "navbar-brand me-auto fw-bold"
     %button.navbar-toggler{type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#bs-navbar-collapse", "aria-controls": "bs-navbar-collapse", "aria-expanded": "false", "aria-label": "Toggle navigation"}
       %span.navbar-toggler-icon
+    .mx-3#docsearch
     .collapse.navbar-collapse.flex-grow-0#bs-navbar-collapse
       %ul.navbar-nav
-        %li.nav-item
-          %input#input-search.input-search.my-1.ps-1.pt-1{type: :text, placeholder: t('search.placeholder')}
-          %svg.text-opacity-40.m-1.mb-2{xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: "width: 1rem; height: 1rem; fill: currentcolor;"}
-            / Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.
-            %path{d: "M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"}
         %li.nav-item= link_to t('navbar.docs'), '/docs.html', class: "nav-link"
         %li.nav-item= link_to t('navbar.team'), '/contributors.html', class: "nav-link"
         %li.nav-item= link_to t('navbar.blog'), '/blog', class: "nav-link"