|
1 | 1 | <template> |
2 | | - <div class="bd-search d-flex align-items-center"> |
| 2 | + <form |
| 3 | + class="bd-search d-flex align-items-center" |
| 4 | + @submit.stop.prevent |
| 5 | + > |
3 | 6 | <b-form-input |
4 | 7 | id="bd-search-input" |
5 | | - v-model="search" |
6 | 8 | autocomplete="off" |
7 | 9 | type="search" |
8 | | - placeholder="Search keywords..." |
9 | | - aria-label="Search site" |
| 10 | + placeholder="Search..." |
| 11 | + aria-label="Search docs" |
10 | 12 | ></b-form-input> |
11 | 13 | <button |
12 | 14 | v-b-toggle.bd-docs-nav |
|
32 | 34 | /> |
33 | 35 | </svg> |
34 | 36 | </button> |
35 | | - <b-popover target="bd-search-input" placement="bottom" triggers="focus"> |
36 | | - <span v-if="search.length && Object.keys(results).length === 0">No results found</span> |
37 | | - <span v-else-if="search.length"></span> |
38 | | - <span v-else>Type something to start search</span> |
39 | | - |
40 | | - <div |
41 | | - v-for="(results, section, idx) in results" |
42 | | - :key="section" |
43 | | - :class="idx > 0 ? 'mt-2' : ''" |
44 | | - role="group" |
45 | | - > |
46 | | - <h6 class="bd-text-purple my-1" v-html="section"></h6> |
47 | | - <div v-for="t in results" :key="t.href" class="my-1"> |
48 | | - <b-link :to="t.href" @click="search = ''" v-html="t.title"></b-link> |
49 | | - </div> |
50 | | - </div> |
51 | | - </b-popover> |
52 | | - </div> |
| 37 | + </form> |
53 | 38 | </template> |
54 | 39 |
|
55 | 40 | <script> |
56 | | -import groupBy from 'lodash/groupBy' |
57 | | -import intersectionBy from 'lodash/intersectionBy' |
58 | | -import { makeTOC } from '~/utils' |
59 | | -import { components, directives, reference, misc } from '~/content' |
60 | | -
|
61 | | -const SEARCH = [] |
62 | | -
|
63 | | -const process = (readme, section, page) => { |
64 | | - const baseURL = '/' + ['docs', section, page].filter(v => !!v).join('/') |
65 | | - const { title, toc } = makeTOC(readme) |
66 | | - ;[...toc].forEach(({ label, href }) => { |
67 | | - SEARCH.push({ |
68 | | - section: title, |
69 | | - title: label, |
70 | | - href: `${baseURL}${href}`.replace('/#', '#') |
71 | | - }) |
72 | | - }) |
73 | | -} |
| 41 | +import { relativeUrl } from '../utils' |
74 | 42 |
|
75 | | -// Async build the search database |
76 | | -import('~/markdown/intro/README.md' /* webpackChunkName: "docs/intro" */).then(readme => |
77 | | - process(readme.default, '', '') |
78 | | -) |
79 | | -Object.keys(components).forEach(page => { |
80 | | - import(`~/../src/components/${page}/README.md` /* webpackChunkName: "docs/components" */).then( |
81 | | - readme => process(readme.default, 'components', page) |
82 | | - ) |
83 | | -}) |
84 | | -Object.keys(directives).forEach(page => { |
85 | | - import(`~/../src/directives/${page}/README.md` /* webpackChunkName: "docs/directives" */).then( |
86 | | - readme => process(readme.default, 'directives', page) |
87 | | - ) |
88 | | -}) |
89 | | -Object.keys(reference).forEach(page => { |
90 | | - import(`~/markdown/reference/${page}/README.md` /* webpackChunkName: "docs/reference" */).then( |
91 | | - readme => process(readme.default, 'reference', page) |
92 | | - ) |
93 | | -}) |
94 | | -Object.keys(misc).forEach(page => { |
95 | | - import(`~/markdown/misc/${page}/README.md` /* webpackChunkName: "docs/misc" */).then(readme => |
96 | | - process(readme.default, 'misc', page) |
97 | | - ) |
98 | | -}) |
| 43 | +let scriptsInjected = false |
99 | 44 |
|
100 | 45 | export default { |
101 | 46 | data() { |
102 | 47 | return { |
103 | | - search: '' |
| 48 | + docsearch: null |
104 | 49 | } |
105 | 50 | }, |
106 | | - computed: { |
107 | | - results() { |
108 | | - if (!this.search.length) { |
109 | | - return {} |
| 51 | + mounted() { |
| 52 | + this.loadDocsearch().then(this.initDocsearch) |
| 53 | + }, |
| 54 | + methods: { |
| 55 | + async loadDocsearch() { |
| 56 | + if (scriptsInjected) { |
| 57 | + return |
110 | 58 | } |
111 | 59 |
|
112 | | - // Break the searh into individual terms |
113 | | - const terms = this.search |
114 | | - .replace(/\s+/g, ' ') |
115 | | - .split(/\s+/) |
116 | | - .filter(t => t) |
117 | | - if (terms.length === 0) { |
118 | | - return {} |
119 | | - } |
| 60 | + // Search indexing config stored at: |
| 61 | + // https://github.com/algolia/docsearch-configs/blob/master/configs/bootstrap-vue.json |
120 | 62 |
|
121 | | - // Find results for each term |
122 | | - let results = terms.map(term => this.resultsFor(term)) |
| 63 | + const cdnBaseUrl = '//cdn.jsdelivr.net/docsearch.js/2/' |
| 64 | + const $body = document.body |
123 | 65 |
|
124 | | - // If no results return emptiness |
125 | | - if (results.length === 0) { |
126 | | - return {} |
127 | | - } |
| 66 | + // Load JS |
| 67 | + const loadJs = new Promise(resolve => { |
| 68 | + let $script = document.createElement('script') |
| 69 | + $script.setAttribute('type', 'text/javascript') |
| 70 | + $script.setAttribute('src', `${cdnBaseUrl}docsearch.min.js`) |
| 71 | + $body.appendChild($script) |
| 72 | + $script.onload = resolve |
| 73 | + }) |
128 | 74 |
|
129 | | - // Add our intersectionBy 'iteratee' key as the last array entry |
130 | | - results.push('href') |
131 | | - // Find the intersection (common) of all individual term results (all retults ANDed) |
132 | | - results = intersectionBy(...results) |
| 75 | + // Load CSS |
| 76 | + const loadCss = new Promise(resolve => { |
| 77 | + let $link = document.createElement('link') |
| 78 | + $link.setAttribute('rel', 'stylesheet') |
| 79 | + $link.setAttribute('type', 'text/css') |
| 80 | + $link.setAttribute('href', `${cdnBaseUrl}docsearch.min.css`) |
| 81 | + $body.appendChild($link) |
| 82 | + $link.onload = resolve |
| 83 | + }) |
133 | 84 |
|
134 | | - // Return the first 6 results or an empty array |
135 | | - return groupBy(results.slice(0, 6), 'section') |
136 | | - } |
137 | | - }, |
138 | | - methods: { |
139 | | - resultsFor(term) { |
140 | | - // Return the search entries for a particular search term |
141 | | - const regex = new RegExp(`\\b${term}`, 'i') |
142 | | - return SEARCH.reduce((results, item) => { |
143 | | - if (regex.test(item.title) || regex.test(item.section)) { |
144 | | - results.push(item) |
145 | | - } |
146 | | - return results |
147 | | - }, []) |
| 85 | + await Promise.all([loadJs, loadCss]) |
| 86 | +
|
| 87 | + scriptsInjected = true |
| 88 | + }, |
| 89 | + initDocsearch() { |
| 90 | + if (this.docsearch) { |
| 91 | + return |
| 92 | + } |
| 93 | + // Initialize docsearch |
| 94 | + this.docsearch = window.docsearch({ |
| 95 | + apiKey: 'c816d3054b015320f0cfb40042f7e2bc', |
| 96 | + indexName: 'bootstrap-vue', |
| 97 | + inputSelector: '#bd-search-input', |
| 98 | + transformData(hits) { |
| 99 | + return hits.map(function(hit) { |
| 100 | + // Transform URL to a relative URL |
| 101 | + hit.url = relativeUrl(hit.url) |
| 102 | +
|
| 103 | + return hit |
| 104 | + }) |
| 105 | + }, |
| 106 | + // Set debug to `true` if you want to inspect the dropdown |
| 107 | + debug: false |
| 108 | + }) |
148 | 109 | } |
149 | 110 | } |
150 | 111 | } |
|
0 commit comments