Merge pull request #2972 from marmelab/doc-searc

Add search engine to documentation (powered by Qwant)
marmelab · Mar 7, 2019 · 5e2c35f · 5e2c35f
2 parents e37c6cb + 1e1d945
commit 5e2c35f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -22,6 +22,23 @@
     <div class="book with-summary font-size-2 font-family-1">
         <div id="book-summary" class="book-summary">
             <nav role="navigation">
+                <div class="search">
+                        <form action="#" onsubmit="search();return false;">
+                            <div style="display:flex;align-items:center;">
+                                <i class="octicon octicon-search"></i>
+                                <input type="text" name="q" id="query" size="31" maxlength="255" value="" placeholder="Search...">
+                            </div>
+                        </form>
+                        <script type="text/javascript">
+                            function encodeHTML(s) {
+                                return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+                            }
+                            function search() {
+                                var query = encodeHTML(document.getElementById('query').value);
+                                window.location.href = 'https://www.qwant.com?q=' + query + "%20site:marmelab.com/react-admin";
+                            }
+                        </script>
+                </div>
                 <ul class="summary">
                     <li class="header">Table of Contents</li>
                     <li class="chapter {% if page.path == 'index.md' %}active{% endif %}">

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -509,6 +509,28 @@
         width: 100%
     }
 }
+.search input[type='text'] {
+    font: inherit;
+    width: 100%;
+    color: inherit;
+    border: none;
+    margin: 10px;
+    cursor: inherit;
+    resize: none;
+    height: 38px;
+    outline: none;
+    padding: 0 8px 0 0;
+    background: transparent;
+    text-align: inherit;
+    box-sizing: border-box;
+    line-height: inherit;
+    border-radius: 3px;
+    font-size: 16px;
+}
+.search .octicon {
+    margin: 10px 0 10px 20px;
+    font-size: 16px;
+}
 .book .book-header .font-settings .font-enlarge {
   line-height: 30px;
   font-size: 1.4em;