documentation
documentation copied to clipboard
Provide search via URL and register as an open search provider
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:
- there needs to be some URL pattern which triggers the search
- 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>