documentation icon indicating copy to clipboard operation
documentation copied to clipboard

Provide search via URL and register as an open search provider

Open bb opened this issue 3 years ago • 0 comments

I need to look up things in the meilisearch documentation from time to time so I go to my browser's address bar and type meili. Now I'd like the browser to know that I want to search in the meilisearch documentation.

This needs two changes:

  1. there needs to be some URL pattern which triggers the search
  2. a meta tag in the layout and a corresponding open search description file

1. Allow searching from the browser address bar

The first is only needed because the current implementation is javascript only. There needs to be a URL, e.g. https://docs.meilisearch.com/?q=myquery (server side or client side) or https://docs.meilisearch.com/#meilisearch-search-input=myquery (only client side) which populates the search input field. This would also be helpful for bookmark keywords.

Here's a JS snippet which could be added to https://github.com/meilisearch/docs-searchbar.js with slight modifications:

if (document.location.hash) {
  var match = document.location.hash.match(/^#meilisearch-search-input=(.+)/);
  if (match && match[1]) {
    var searchInput = document.getElementById("meilisearch-search-input");
    if (searchInput) {
      searchInput.value = match[1];
      searchInput.focus();
      // TODO: trigger search and open suggestions overlay
    }
  }
}

2. Register opensearch provider

The second can be achieved with a meta tag and custom page which contains the definition. Here's a general overview on Wikipedia and here's the spec. The below is just the basic URL template approach, not the full suggestions-and-results stuff.

Meta tag to be added to the page layout (in head element):

<link href="/opensearch" rel="search" title="MeiliSearch Documentation" type="application/opensearchdescription+xml">

And the content of the file retrieved at /opensearch:

<?xml version="1.0" encoding="utf-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>Meili</ShortName>
  <Description>MeiliSearch Documentation</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image height="16" width="16" type="image/x-icon">/favicon.ico</Image>
  <moz:SearchForm>https://docs.meilisearch.com/</moz:SearchForm>
  <Tags>meilisearch meili search documentation rest api fast relevant instant</Tags>
  <Contact>[email protected]</Contact>
  <Url type="text/html" method="GET" template="/?q={searchTerms}" />
  <Url type="application/opensearchdescription+xml" rel="self"
       template="/opensearch"/>
  <moz:UpdateUrl>/opensearch</moz:UpdateUrl>
</OpenSearchDescription>

bb avatar Nov 16 '20 20:11 bb