diff --git a/.gitignore b/.gitignore
index 09bfb38e88e7..b98bdb265323 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
.algolia-cache
+.search-cache
.DS_Store
.env
/node_modules/
diff --git a/contributing/search.md b/contributing/search.md
index 4da0507ebf9b..589c377419b4 100644
--- a/contributing/search.md
+++ b/contributing/search.md
@@ -90,10 +90,10 @@ Why do we need this? For our daily shipping needs, it's tolerable that search up
### Code files
-- [javascripts/search.js](javascripts/search.js) - The browser-side code that enables search using Algolia's [InstantSearch.js](https://github.com/algolia/instantsearch.js/) library.
-- [lib/algolia/client.js](lib/algolia/client.js) - A thin wrapper around the [algoliasearch](https://ghub.io/algoliasearch) Node.js module for interacting with the Algolia API.
-- [lib/algolia/search-index.js](lib/algolia/search-index.js) - A class for generating structured search data from repository content and syncing it with the remote Algolia service. This class has built-in validation to ensure that all records are valid before they're uploaded. This class also takes care of removing deprecated records, and compares existing remote records with the latest local records to avoid uploading records that haven't changed.
-- [script/sync-algolia-search-indices.js](script/sync-algolia-search-indices.js) - The script used by the Actions workflow to update search indices on our Algolia account. This can also be [run in the development environment](#development).
+- [javascripts/search.js](javascripts/search.js) - The browser-side code that enables search.
+- [lib/search/algolia-client.js](lib/search/algolia-client.js) - A thin wrapper around the [algoliasearch](https://ghub.io/algoliasearch) Node.js module for interacting with the Algolia API.
+- [lib/search/algolia-search-index.js](lib/search/algolia-search-index.js) - A class for generating structured search data from repository content and syncing it with the remote Algolia service. This class has built-in validation to ensure that all records are valid before they're uploaded. This class also takes care of removing deprecated records, and compares existing remote records with the latest local records to avoid uploading records that haven't changed.
+- [script/sync-search-indices.js](script/sync-search-indices.js) - The script used by the Actions workflow to update search indices on our Algolia account. This can also be [run in the development environment](#development).
- [tests/algolia-search.js](tests/algolia-search.js) - Tests!
## Indices
@@ -136,4 +136,4 @@ Each record represents a section of a page. Sections are derived by splitting up
- It's not strictly necessary to set an `objectID` as Algolia will create one automatically, but by creating our own we have a guarantee that subsequent invocations of this upload script will overwrite existing records instead of creating numerous duplicate records with differing IDs.
- Algolia has typo tolerance. Try spelling something wrong and see what you get!
- Algolia has lots of controls for customizing each index, so we can add weights to certain attributes and create rules like "title is more important than body", etc. But it works pretty well as-is without any configuration.
-- Algolia has support for "advanced query syntax" for exact matching of quoted expressions and exclusion of words preceded by a `-` sign. This is off by default but we have it enabled in our browser client. This and many other settings can be configured in Algolia.com web interface. The settings in the web interface can be overridden by the InstantSearch.js client. See [javascripts/search.js]([javascripts/search.js).
+- Algolia has support for "advanced query syntax" for exact matching of quoted expressions and exclusion of words preceded by a `-` sign. This is off by default but we have it enabled in our browser client. This and many other settings can be configured in Algolia.com web interface. The settings in the web interface can be overridden by the search endpoint. See [middleware/search.js]([middleware/search.js).
diff --git a/includes/search-form.html b/includes/search-form.html
index 34a2e4854005..5749ba0803b0 100644
--- a/includes/search-form.html
+++ b/includes/search-form.html
@@ -5,8 +5,6 @@
- On all other pages, in the header
-->
-
+
+
+
diff --git a/javascripts/experiment.js b/javascripts/experiment.js
index 200e718455cd..25e7660b4468 100644
--- a/javascripts/experiment.js
+++ b/javascripts/experiment.js
@@ -1,5 +1,6 @@
import murmur from 'imurmurhash'
import { getUserEventsId, sendEvent } from './events'
+// import h from './hyperscript'
const TREATMENT = 'TREATMENT'
const CONTROL = 'CONTROL'
@@ -19,23 +20,6 @@ export async function sendSuccess (test) {
})
}
-const xmlns = 'http://www.w3.org/2000/svg'
-
-export function h (tagName, attributes = {}, children = []) {
- const el = ['svg', 'path'].includes(tagName)
- ? document.createElementNS(xmlns, tagName)
- : document.createElement(tagName)
- Object.entries(attributes).forEach(
- ([key, value]) => el.setAttribute(key, value)
- )
- children.forEach(child =>
- typeof child === 'string'
- ? el.append(document.createTextNode(child))
- : el.append(child)
- )
- return el
-}
-
export default function () {
// const testName = '$test-name$'
// const xbucket = bucket(testName)
diff --git a/javascripts/fake-hogan.js b/javascripts/fake-hogan.js
deleted file mode 100644
index 1846a52f38e9..000000000000
--- a/javascripts/fake-hogan.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// This module overrides "Hogan" that instantsearch.js uses
-// Hogan uses `new Function`,
-// so we can't use it with our content security policy.
-// Turns out, we use all our own templates anyway,
-// so we just have to shim out Hogan so it doesn't error!
-
-export default {
- compile (template) {
- return {
- render (data) {
- return ''
- }
- }
- }
-}
diff --git a/javascripts/hyperscript.js b/javascripts/hyperscript.js
new file mode 100644
index 000000000000..7c09d2e33ee6
--- /dev/null
+++ b/javascripts/hyperscript.js
@@ -0,0 +1,44 @@
+const xmlns = 'http://www.w3.org/2000/svg'
+
+const plainObjectConstructor = {}.constructor
+
+function exists (value) {
+ return value !== null && typeof value !== 'undefined'
+}
+
+function isPlainObject (value) {
+ return value.constructor === plainObjectConstructor
+}
+
+function isString (value) {
+ return typeof value === 'string'
+}
+
+function renderChildren (el, children) {
+ for (const child of children) {
+ if (isPlainObject(child)) {
+ Object.entries(child)
+ .filter(([key, value]) => exists(value))
+ .forEach(([key, value]) => el.setAttribute(key, value))
+ } else if (Array.isArray(child)) {
+ renderChildren(el, child)
+ } else if (isString(child)) {
+ el.append(document.createTextNode(child))
+ } else {
+ el.append(child)
+ }
+ }
+}
+
+export default function h (tagName, ...children) {
+ const el = ['svg', 'path'].includes(tagName)
+ ? document.createElementNS(xmlns, tagName)
+ : document.createElement(tagName)
+ renderChildren(el, children)
+ return el
+}
+
+export const tags = Object.fromEntries(
+ ['div', 'form', 'a', 'input', 'button', 'ol', 'li', 'em']
+ .map(tagName => [tagName, (...args) => h(tagName, ...args)])
+)
diff --git a/javascripts/search.js b/javascripts/search.js
index 2e68ffdbd9e2..607dd1f91afb 100644
--- a/javascripts/search.js
+++ b/javascripts/search.js
@@ -1,9 +1,6 @@
+import { tags } from './hyperscript'
import { sendEvent } from './events'
-const instantsearch = require('instantsearch.js').default
-const { searchBox, hits, configure, analytics } = require('instantsearch.js/es/widgets')
-const algoliasearch = require('algoliasearch')
const searchWithYourKeyboard = require('search-with-your-keyboard')
-const querystring = require('querystring')
const truncate = require('html-truncate')
const languages = require('../lib/languages')
const allVersions = require('../lib/all-versions')
@@ -12,261 +9,96 @@ const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-versi
const languageCodes = Object.keys(languages)
const maxContentLength = 300
-const hasStandaloneSearch = () => document.getElementById('landing') || document.querySelector('body.error-404') !== null
-
-const resultTemplate = (item) => {
- // Attach an `algolia-query` param to each result link so analytics
- // can track the search query that led the user to this result
- const input = document.querySelector('#search-input-container input')
- if (input) {
- const url = new URL(item.objectID, window.location.origin)
- const queryParams = new URLSearchParams(url.search.slice(1))
- queryParams.append('algolia-query', input.value)
- url.search = queryParams.toString()
- item.modifiedURL = url.toString()
- }
+let $searchInputContainer
+let $searchResultsContainer
+let $searchOverlay
+let $searchInput
- // Display page title and heading (if present exists)
- const title = item._highlightResult.heading
- ? [item._highlightResult.title.value, item._highlightResult.heading.value].join(': ')
- : item._highlightResult.title.value
+let placeholder = 'Search topics, products...'
+let version
+let language
- // Remove redundant title from the end of breadcrumbs
- if (item.breadcrumbs && item.breadcrumbs.endsWith(item.title)) {
- item.modifiedBreadcrumbs = item.breadcrumbs.replace(' / ' + item.title, '')
- } else {
- item.modifiedBreadcrumbs = item.breadcrumbs
- }
+export default function search () {
+ $searchInputContainer = document.getElementById('search-input-container')
+ $searchResultsContainer = document.getElementById('search-results-container')
- // Truncate and ellipsize the content string without breaking any HTML
- // within it, such as the tags added by Algolia for emphasis.
- item.modifiedContent = truncate(item._highlightResult.content.value, maxContentLength)
-
- // Construct the template to return
- const html = `
-