This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit ef51e20ee855e6689ffef9a6500e7bc9a477ae19
Author: Zoran Regvart <zregv...@apache.org>
AuthorDate: Tue Aug 20 16:37:33 2019 +0200

    chore: add search
    
    Work in progress, first pass at the Algolia search implementation.
---
 antora-ui-camel/src/css/header.css              | 31 ++++++++++-
 antora-ui-camel/src/js/06-search.js             | 69 +++++++++++++++++++++++++
 antora-ui-camel/src/partials/footer-scripts.hbs |  1 +
 antora-ui-camel/src/partials/header-content.hbs |  5 ++
 4 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/antora-ui-camel/src/css/header.css 
b/antora-ui-camel/src/css/header.css
index 94d3587..6384833 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -292,10 +292,39 @@ body {
   white-space: nowrap;
 }
 
+.navbar-fill {
+  flex-grow: 1;
+}
+
+.navbar-search {
+  padding: 0.5rem;
+  text-align: right;
+}
+
+.navbar-search input {
+  border: 0;
+  border-bottom: 1px solid var(--nav-panel-divider-color);
+  margin-top: 1rem;
+  padding: 0.3rem 0.5rem 0.3rem 1.7rem;
+  font-family: Open Sans, sans-serif;
+  caret-color: #ed8225;
+  background: no-repeat 0.2rem/1.2rem url(../img/search.svg);
+}
+
+#search_results {
+  top: 3rem;
+  background: #fffe;
+  padding: 0.5rem;
+  text-align: left;
+}
+
+.results-hidden #search_results {
+  display: none;
+}
+
 .navbar-tools {
   display: flex;
   align-items: flex-end;
-  flex-grow: 1;
   justify-content: flex-end;
   line-height: 1.6;
   padding: 0.5rem;
diff --git a/antora-ui-camel/src/js/06-search.js 
b/antora-ui-camel/src/js/06-search.js
new file mode 100644
index 0000000..c582ea5
--- /dev/null
+++ b/antora-ui-camel/src/js/06-search.js
@@ -0,0 +1,69 @@
+window.addEventListener('load', () => {
+  const client = window.algoliasearch('BH4D9OD16A', 
'16e3a9155a136e4962dc4c206f8278bd')
+  const index = client.initIndex('apache_camel')
+  const search = document.querySelector('#search')
+  const container = search.parentNode
+  const results = document.querySelector('#search_results')
+
+  function debounce (fn, wait) {
+    var timeout
+    return function () {
+      var context = this
+      var args = arguments
+      var later = () => {
+        timeout = null
+        fn.apply(context, args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  search.addEventListener('keyup', debounce(() => {
+    if (search.value.trim() === '') {
+      container.className = 'navbar-search results-hidden'
+      results.innerHTML = ''
+      return
+    }
+
+    index.search(search.value)
+      .then((results) => {
+        const hits = results.hits
+        const data = hits.reduce((data, hit) => {
+          const d = {}
+          d.url = hit.url
+          d.breadcrumbs = Object.values(hit.hierarchy).slice(1).filter((lvl) 
=> lvl !== null).join(' &raquo; ')
+          d.snippet = hit._snippetResult.content.value
+
+          const section = hit.hierarchy.lvl0
+          data[section] = data[section] || []
+          data[section].push(d)
+
+          return data
+        }, {})
+
+        return data
+      })
+      .then((data) => {
+        return `
+        <dl>
+          ${Object.keys(data).map((section) => `
+            <dt>${section}</dt>
+            ${data[section].map((hit) => `
+              <a href="${hit.url}">
+                <dd>
+                  <header>${hit.breadcrumbs}</header>
+                  <summary>${hit.snippet}</summary>
+                </dd>
+              </a>
+            `).join('')}
+          `).join('')}
+        </dl>
+        `
+      })
+      .then((markup) => {
+        results.innerHTML = markup
+        container.className = 'navbar-search'
+      })
+  }, 150))
+})
diff --git a/antora-ui-camel/src/partials/footer-scripts.hbs 
b/antora-ui-camel/src/partials/footer-scripts.hbs
index cca6eb8..93a4fa6 100644
--- a/antora-ui-camel/src/partials/footer-scripts.hbs
+++ b/antora-ui-camel/src/partials/footer-scripts.hbs
@@ -1,5 +1,6 @@
 <script src="{{uiRootPath}}{{asset 'js/site.js'}}"></script>
 <script async src="{{uiRootPath}}{{asset 'js/vendor/highlight.js'}}"></script>
 <script async src="{{uiRootPath}}{{asset 
'js/vendor/svg4everybody.js'}}"></script>
+<script async 
src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js";></script>
 {{> seo-main}}
 
diff --git a/antora-ui-camel/src/partials/header-content.hbs 
b/antora-ui-camel/src/partials/header-content.hbs
index dac81e8..ad1ee47 100644
--- a/antora-ui-camel/src/partials/header-content.hbs
+++ b/antora-ui-camel/src/partials/header-content.hbs
@@ -30,6 +30,11 @@
           {{/withMenuData}}
         </div>
       </div>
+      <div class="navbar-fill"></div>
+      <div class="navbar-search results-hidden">
+        <input id="search" class="search" placeholder="Search" 
autocomplete="off">
+        <div id="search_results"></div>
+      </div>
       <div class="navbar-tools">
         <a href="https://github.com/apache/camel/"; title="Collaborate on 
GitHub"><svg class="brand-icon"><use 
xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
         <a href="https://gitter.im/apache/apache-camel"; title="Chat on 
Gitter"><svg class="brand-icon"><use 
xlink:href="{{uiRootPath}}/img/brand-logos.svg#gitter" /></svg></a>

Reply via email to