Permalink
Browse files

feat(docs): search support

  • Loading branch information...
pi0 committed Sep 21, 2017
1 parent 1922283 commit 7916981621c9fd84c4bb45ffcc65205efdd13fef
Showing with 44 additions and 53 deletions.
  1. +43 −52 docs/nuxt/components/search.vue
  2. +1 −1 docs/nuxt/components/sidebar.vue
@@ -1,58 +1,49 @@
<template>
<form class="bd-search d-flex align-items-center">
<span class="algolia-autocomplete">
<div class="bd-search d-flex align-items-center">
<b-form-input id="bd-search-input" v-model="search" placeholder="Search..." />
<b-popover target="bd-search-input" placement="bottomleft" triggers="focus">
<span v-if="search.length"></span>
<span v-else>Type something to start search</span>
<input type="search" disabled class="invisible form-control ds-input" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-labelledby="search-input" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
<pre aria-hidden="true"></pre>
<span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0">
<div class="ds-dataset-1"></div>
</span>
</span>
<button type="button" v-b-toggle.bd-docs-nav class="bd-search-docs-toggle d-md-none p-0 ml-3" aria-label="Toggle docs navigation">
<svg class="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>
</button>
</form>
<div v-for="(toc, section) in toc" :key="section">
<p class="text-muted" v-html="section"></p>
<p v-for="t in toc" :key="t.href">
<a :href="t.href" v-html="t.title"></a>
</p>
</div>
</b-popover>
</div>
</template>
<style scoped>
.algolia-autocomplete {
position: relative;
display: inline-block;
direction: ltr;
}
.ds-input {
position: relative;
vertical-align: top;
}
.ds-dropdown-menu {
position: absolute;
top: 100%;
z-index: 100;
left: 0px;
right: auto;
display: none;
}
<script>
import site from '~/..';
import { groupBy } from 'lodash';
pre {
position: absolute;
visibility: hidden;
white-space: pre;
font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-weight: normal;
word-spacing: 0px;
letter-spacing: normal;
text-indent: 0px;
text-rendering: auto;
text-transform: none;
export default {
data () {
return {
search: ''
}
},
computed: {
toc () {
if (!this.search.length) {
return {}
}
const regex = new RegExp(this.search, 'i')
const allResults = Array.concat.apply([], Object.keys(site.toc).map(sectionKey => {
const section = site.toc[sectionKey]
return section.toc.map(t => {
return Object.assign({
title: t.label,
section: section.title,
href: (sectionKey + t.href).replace('/#', '#')
})
}).filter(r => regex.test(r.title) || regex.test(r.section) || regex.test(r.href))
}))
console.log(this.search, regex, allResults)
return groupBy(allResults.slice(0, 5), 'section')
}
}
</style>
}
</script>
@@ -1,6 +1,6 @@
<template>
<b-collapse tag="nav" is-nav class="bd-links" id="bd-docs-nav">
<router-link tag="div" class="bd-toc-item" v-for="group in site.nav"
<router-link tag="div" class="bd-toc-item active" v-for="group in site.nav"
:key="group.slug" :to="'/docs/'+group.slug" active-class="active" :exact="group.exact">
<router-link class="bd-toc-link" :to="'/docs/'+group.slug" :exact="group.exact">
{{ group.title }}

0 comments on commit 7916981

Please sign in to comment.