You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/03/04 13:01:50 UTC
[camel-website] 01/13: chore: add search
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 <zr...@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(' » ')
+ 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>