feat: Add "latest" and "related" search.

assets/css/search-bar.css

@@ -30,7 +30,7 @@
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
-  padding: 8px 35px 8px 43px;
+  padding: 8px 135px 8px 43px;
   width: 100%;
   transition: var(--transition-all);
 }
@@ -80,7 +80,8 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
-  right: 11px;
+  /* FIXME: I know this is wrong. Not sure what to do though */
+  right: 100px;
   margin: 0;
   opacity: 0.5;
   padding: 5px 1px 5px 0;
@@ -95,6 +96,31 @@
   opacity: 0.7;
 }
 
+.top-search .search-bar .search-type {
+  background-color: transparent;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-left: 1px solid var(--searchBarBorder);
+  border-top-right-radius: var(--borderRadius-base);
+  border-bottom-right-radius: var(--borderRadius-base);
+  color: var(--searchAccentMain);
+  position: absolute;
+  top: calc(50% - 23px);
+  right: 0;
+  height: 46px;
+  padding: 8px 8px 8px 16px;
+  transition: var(--transition-all);
+  z-index: 99;
+}
+
+.top-search .search-bar .search-type:focus {
+  border: 1px solid var(--searchBarFocusColor);
+  border-top-right-radius: calc(var(--borderRadius-base) - 1px);
+  border-bottom-right-radius: calc(var(--borderRadius-base) - 1px);
+  box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
+}
+
 .top-search .search-settings button.icon-settings {
   display: flex;
   align-items: center;

assets/js/autocomplete/suggestions.js

@@ -1,5 +1,6 @@
 import { getSidebarNodes } from '../globals'
-import { escapeRegexModifiers, escapeHtmlEntities, isBlank } from '../helpers'
+import { isBlank } from '../helpers'
+import { highlightMatches } from '../highlighter'
 
 /**
  * @typedef Suggestion
@@ -288,27 +289,3 @@ function startsWith (text, subtext) {
 function tokenize (query) {
   return query.trim().split(/\s+/)
 }
-
-/**
- * Returns an HTML string highlighting the individual tokens from the query string.
- */
-function highlightMatches (text, query) {
-  // Sort terms length, so that the longest are highlighted first.
-  const terms = tokenize(query).sort((term1, term2) => term2.length - term1.length)
-  return highlightTerms(text, terms)
-}
-
-function highlightTerms (text, terms) {
-  if (terms.length === 0) return text
-
-  const [firstTerm, ...otherTerms] = terms
-  const match = text.match(new RegExp(`(.*)(${escapeRegexModifiers(firstTerm)})(.*)`, 'i'))
-
-  if (match) {
-    const [, before, matching, after] = match
-    // Note: this has exponential complexity, but we expect just a few terms, so that's fine.
-    return highlightTerms(before, terms) + '<em>' + escapeHtmlEntities(matching) + '</em>' + highlightTerms(after, terms)
-  } else {
-    return highlightTerms(text, otherTerms)
-  }
-}

assets/js/globals.js

@@ -14,3 +14,7 @@ export function getSidebarNodes () {
 export function getVersionNodes () {
   return window.versionNodes || []
 }
+
+export function getSearchNodes () {
+  return window.searchNodes || []
+}

assets/js/highlighter.js

@@ -0,0 +1,34 @@
+import { escapeRegexModifiers, escapeHtmlEntities } from './helpers'
+
+/**
+ * Returns an HTML string highlighting the individual tokens from the query string.
+ */
+export function highlightMatches (text, query, opts = {}) {
+  // Sort terms length, so that the longest are highlighted first.
+  if (typeof query === 'string') {
+    query = query.split(/\s+/)
+  }
+  const terms = query.sort((term1, term2) => term2.length - term1.length)
+  return highlightTerms(text, terms, opts)
+}
+
+function highlightTerms (text, terms, opts) {
+  if (terms.length === 0) return text
+
+  let flags = 'i'
+
+  if (opts.multiline) {
+    flags = 'is'
+  }
+
+  const [firstTerm, ...otherTerms] = terms
+  const match = text.match(new RegExp(`(.*)(${escapeRegexModifiers(firstTerm)})(.*)`, flags))
+
+  if (match) {
+    const [, before, matching, after] = match
+    // Note: this has exponential complexity, but we expect just a few terms, so that's fine.
+    return highlightTerms(before, terms, opts) + '<em>' + escapeHtmlEntities(matching) + '</em>' + highlightTerms(after, terms, opts)
+  } else {
+    return highlightTerms(text, otherTerms, opts)
+  }
+}

assets/js/search-bar.js

@@ -10,7 +10,7 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isEmbedded } from './globals'
+import { isEmbedded, getSearchNodes, getVersionNodes } from './globals'
 import { isAppleOS, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
@@ -38,6 +38,12 @@ function initialize () {
     focusSearchInput()
     if (open) { showPreview(event.target) } else { hidePreview() }
   }
+
+  if (window.navigator.onLine) {
+    enableRemoteSearch(null)
+  } else {
+    disableRemoteSearch(null)
+  }
 }
 
 /**
@@ -147,6 +153,57 @@ function addEventListeners () {
     clearSearch()
     hideAutocomplete()
   })
+
+  window.addEventListener('online', enableRemoteSearch)
+  window.addEventListener('offline', disableRemoteSearch)
+}
+
+function enableRemoteSearch (_event) {
+  Array.from(document.getElementsByClassName('online-only')).forEach(element => {
+    element.removeAttribute('disabled')
+    element.removeAttribute('title')
+    updateSearchTypeOptions(element)
+  })
+}
+
+function disableRemoteSearch (_event) {
+  Array.from(document.getElementsByClassName('online-only')).forEach(element => {
+    element.setAttribute('disabled', '')
+    element.setAttribute('title', 'Local searching only - browser is offline')
+    updateSearchTypeOptions(element)
+  })
+}
+
+function updateSearchTypeOptions (element) {
+  Array.from(element.getElementsByTagName('option')).forEach(option => {
+    if (option.value === 'related') {
+      if (shouldEnableRelatedSearch()) {
+        option.removeAttribute('disabled')
+        option.removeAttribute('title')
+      } else {
+        option.setAttribute('disabled', '')
+        option.setAttribute('title', 'No known related packages to search')
+      }
+    }
+    if (option.value === 'latest') {
+      if (shouldEnableLatestSearch()) {
+        option.removeAttribute('disabled')
+        option.removeAttribute('title')
+      } else {
+        option.setAttribute('disabled', '')
+        option.setAttribute('title', 'Already browsing latest version')
+      }
+    }
+  })
+}
+
+function shouldEnableRelatedSearch () {
+  return getSearchNodes().length > 1
+}
+
+function shouldEnableLatestSearch () {
+  const versionNodes = getVersionNodes()
+  return versionNodes.length() > 0
 }
 
 function handleAutocompleteFormSubmission (event) {
@@ -165,8 +222,18 @@ function handleAutocompleteFormSubmission (event) {
     anchor.setAttribute('href', autocompleteSuggestion.link)
   } else {
     const meta = document.querySelector('meta[name="exdoc:full-text-search-url"]')
-    const url = meta ? meta.getAttribute('content') : 'search.html?q='
-    anchor.setAttribute('href', `${url}${encodeURIComponent(searchInput.value)}`)
+    const url = meta ? meta.getAttribute('content') : 'search.html'
+
+    const params = new URLSearchParams()
+    params.set('q', searchInput.value)
+
+    const searchType = getSearchType()
+
+    if (searchType !== 'local') {
+      params.set('type', searchType)
+    }
+
+    anchor.setAttribute('href', `${url}?${params.toString()}`)
   }
 
   anchor.click()
@@ -177,6 +244,16 @@ function handleAutocompleteFormSubmission (event) {
   }
 }
 
+function getSearchType () {
+  const searchTypes = Array.from(document.getElementsByClassName('search-type'))
+
+  if (searchTypes.length > 0) {
+    return searchTypes[0].value
+  }
+
+  return 'local'
+}
+
 function clearSearch () {
   const input = qs(SEARCH_INPUT_SELECTOR)
   input.value = ''

assets/js/search-page.js

@@ -4,6 +4,8 @@ import lunr from 'lunr'
 import { qs, escapeHtmlEntities, isBlank, getQueryParamByName, getProjectNameAndVersion } from './helpers'
 import { setSearchInputValue } from './search-bar'
 import searchResultsTemplate from './handlebars/templates/search-results.handlebars'
+import { getSearchNodes } from './globals'
+import { highlightMatches } from './highlighter'
 
 const EXCERPT_RADIUS = 80
 const SEARCH_CONTAINER_SELECTOR = '#search'
@@ -26,30 +28,95 @@ function initialize () {
   const pathname = window.location.pathname
   if (pathname.endsWith('/search.html') || pathname.endsWith('/search')) {
     const query = getQueryParamByName('q')
-    search(query)
+    const queryType = getQueryParamByName('type')
+    search(query, queryType)
   }
 }
 
-async function search (value) {
+async function search (value, queryType) {
   if (isBlank(value)) {
     renderResults({ value })
   } else {
     setSearchInputValue(value)
 
-    const index = await getIndex()
-
     try {
-      // We cannot match on atoms :foo because that would be considered
-      // a filter. So we escape all colons not preceded by a word.
-      const fixedValue = value.replaceAll(/(\B|\\):/g, '\\:')
-      const results = searchResultsToDecoratedSearchItems(index.search(fixedValue))
+      let results = []
+      const searchNodes = getSearchNodes()
+
+      if (['related', 'latest'].includes(queryType) && searchNodes.length > 0) {
+        setSearchType(queryType)
+
+        results = await remoteSearch(value, queryType, searchNodes)
+      } else {
+        results = await localSearch(value)
+      }
+
       renderResults({ value, results })
     } catch (error) {
       renderResults({ value, errorMessage: error.message })
     }
   }
 }
 
+async function localSearch (value) {
+  const index = await getIndex()
+
+  // We cannot match on atoms :foo because that would be considered
+  // a filter. So we escape all colons not preceded by a word.
+  const fixedValue = value.replaceAll(/(\B|\\):/g, '\\:')
+  return searchResultsToDecoratedSearchItems(index.search(fixedValue))
+}
+
+async function remoteSearch (value, queryType, searchNodes) {
+  let filterNodes = searchNodes
+
+  if (queryType === 'latest') {
+    filterNodes = searchNodes.slice(0, 1)
+  }
+
+  const filters = filterNodes.map(node => `${node.name}-${node.version}`).join(',')
+
+  const params = new URLSearchParams()
+  params.set('q', value)
+  params.set('query_by', 'title,doc')
+  params.set('filter_by', `package:=[${filters}]`)
+
+  const response = await fetch(`https://search.hexdocs.pm/?${params.toString()}`)
+  const payload = await response.json()
+
+  if (Array.isArray(payload.hits)) {
+    return payload.hits.map(result => {
+      const [packageName, packageVersion] = result.document.package.split('-')
+
+      const doc = highlightMatches(result.document.doc, value, { multiline: true })
+      const excerpts = [doc]
+      const metadata = {}
+      const ref = `https://hexdocs.pm/${packageName}/${packageVersion}/${result.document.ref}`
+      const title = result.document.title
+      const type = result.document.type
+
+      return {
+        doc,
+        excerpts,
+        metadata,
+        ref,
+        title,
+        type
+      }
+    })
+  } else {
+    return []
+  }
+}
+
+function setSearchType (value) {
+  const searchTypes = Array.from(document.getElementsByClassName('search-type'))
+
+  searchTypes.forEach(element => {
+    element.value = value
+  })
+}
+
 function renderResults ({ value, results, errorMessage }) {
   const searchContainer = qs(SEARCH_CONTAINER_SELECTOR)
   const resultsHtml = searchResultsTemplate({ value, results, errorMessage })