Open search (contao#689)

* Listen to `search` query param to trigger algolia search

* Provide open search information

* Move search link to custom-header.html

* Fix favicon urls

* Use custom output format to generate opensearch xml file

* Use output format permalink to generate the search.xml link

* Use site title for open search xml shortname and description

Author: dmolineus

page/config/_default/config.yml

@@ -5,7 +5,7 @@ canonifyURLs: true
 enableGitInfo: true
 disablePathToLower: true
 outputs:
-  home: ['HTML', 'JSON']
+  home: ['HTML', 'JSON', 'OpenSearchXML']
 markup:
   goldmark:
     parser:
@@ -14,3 +14,13 @@ markup:
       unsafe: true
   tableOfContents:
     endLevel: 3
+outputFormats:
+  OpenSearchXML:
+    baseName: search
+    isPlainText: true
+    mediaType: application/opensearchdescription+xml
+    protocol: bep://
+mediaTypes:
+  application/opensearchdescription+xml:
+    suffixes:
+      - xml

page/layouts/index.opensearchxml.xml

@@ -0,0 +1,8 @@
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+    <ShortName>{{ .Title }}</ShortName>
+    <Description>{{ .Title }}</Description>
+    <InputEncoding>UTF-8</InputEncoding>
+    <Image width="16" height="16" type="image/x-icon">https://contao.org/favicon.ico</Image>
+    <Url type="text/html" method="get" template="{{.Permalink}}?search={searchTerms}"/>
+</OpenSearchDescription>

page/layouts/partials/custom-footer.html

@@ -1,9 +1,18 @@
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script type="text/javascript"> docsearch({
-    apiKey: '532603b4ad01695b68a0f6048dc8ea46',
-    indexName: 'contao',
-    inputSelector: '#algolia-search',
-    algoliaOptions: { 'facetFilters': ["language:{{ .Page.Language | default "en" }}"] },
-    debug: true // Set debug to true if you want to inspect the dropdown
-});
+<script type="text/javascript">(function () {
+    var search = docsearch({
+        apiKey: '532603b4ad01695b68a0f6048dc8ea46',
+        indexName: 'contao',
+        inputSelector: '#algolia-search',
+        algoliaOptions: { 'facetFilters': ["language:{{ .Page.Language | default "en" }}"] },
+        debug: true // Set debug to true if you want to inspect the dropdown
+    });
+    if (URLSearchParams !== undefined) {
+        var params = new URLSearchParams(location.search);
+        if (params.has('search')) {
+            search.autocomplete.autocomplete.setVal(params.get('search'));
+            search.autocomplete.autocomplete.open();
+        }
+    }
+})();
 </script>

page/layouts/partials/custom-header.html

@@ -12,3 +12,8 @@
     g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
 </script>
+
+{{ $searchXml := .Site.Home.OutputFormats.Get "opensearchxml" }}
+{{ if ne $searchXml }}
+<link rel="search" type="application/opensearchdescription+xml" title="Search {{ .Site.Title }}" href="{{ $searchXml.RelPermalink }}">
+{{ end }}