Skip to content

Commit 1e0f1cd

Browse files
ProTipProTip
committed
Work around VuePress bug in algolia search
vuejs/vuepress#1802
1 parent 0a3b1ae commit 1e0f1cd

File tree

2 files changed

+184
-0
lines changed

2 files changed

+184
-0
lines changed

‎docs/.vuepress/theme/components/AlgoliaSearchBox.vue

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<template>
2+
<form
3+
id="search-form"
4+
class="algolia-search-wrapper search-box"
5+
role="search"
6+
>
7+
<input
8+
id="algolia-search-input"
9+
class="search-query"
10+
>
11+
</form>
12+
</template>
13+
14+
<script>
15+
export default {
16+
props: ['options'],
17+
mounted () {
18+
this.initialize(this.options, this.$lang)
19+
},
20+
methods: {
21+
initialize (userOptions, lang) {
22+
Promise.all([
23+
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
24+
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
25+
]).then(([docsearch]) => {
26+
docsearch = docsearch.default
27+
const { algoliaOptions = {}} = userOptions
28+
docsearch(Object.assign(
29+
{},
30+
userOptions,
31+
{
32+
inputSelector: '#algolia-search-input',
33+
// #697 Make docsearch work well at i18n mode.
34+
algoliaOptions: Object.assign({
35+
'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
36+
}, algoliaOptions),
37+
handleSelected: (input, event, suggestion) => {
38+
// MODIFICATION_FROM_THEME - old
39+
// this.$router.push(new URL(suggestion.url).pathname)
40+
// issue: this will redirect the page with duplicate site base
41+
// MODIFICATION_FROM_THEME - new
42+
let { pathname, hash } = new URL(suggestion.url)
43+
const baseUrl = this.$site.base;
44+
if (baseUrl && pathname.substr(0, baseUrl.length) === baseUrl) {
45+
pathname = pathname.substr(baseUrl.length - 1)
46+
}
47+
this.$router.push(`${pathname}${hash}`)
48+
// MODIFICATION_FROM_THEME - end
49+
}
50+
}
51+
))
52+
})
53+
},
54+
update (options, lang) {
55+
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">dddd'
56+
this.initialize(options, lang)
57+
}
58+
},
59+
watch: {
60+
$lang (newValue) {
61+
this.update(this.options, newValue)
62+
},
63+
options (newValue) {
64+
this.update(newValue, this.$lang)
65+
}
66+
}
67+
}
68+
</script>
69+
70+
<style lang="stylus">
71+
.algolia-search-wrapper
72+
& > span
73+
vertical-align middle
74+
.algolia-autocomplete
75+
line-height normal
76+
.ds-dropdown-menu
77+
background-color #fff
78+
border 1px solid #999
79+
border-radius 4px
80+
font-size 16px
81+
margin 6px 0 0
82+
padding 4px
83+
text-align left
84+
&:before
85+
border-color #999
86+
[class*=ds-dataset-]
87+
border none
88+
padding 0
89+
.ds-suggestions
90+
margin-top 0
91+
.ds-suggestion
92+
border-bottom 1px solid $borderColor
93+
.algolia-docsearch-suggestion--highlight
94+
color #2c815b
95+
.algolia-docsearch-suggestion
96+
border-color $borderColor
97+
padding 0
98+
.algolia-docsearch-suggestion--category-header
99+
padding 5px 10px
100+
margin-top 0
101+
background $accentColor
102+
color #fff
103+
font-weight 600
104+
.algolia-docsearch-suggestion--highlight
105+
background rgba(255, 255, 255, 0.6)
106+
.algolia-docsearch-suggestion--wrapper
107+
padding 0
108+
.algolia-docsearch-suggestion--title
109+
font-weight 600
110+
margin-bottom 0
111+
color $textColor
112+
.algolia-docsearch-suggestion--subcategory-column
113+
vertical-align top
114+
padding 5px 7px 5px 5px
115+
border-color $borderColor
116+
background #f1f3f5
117+
&:after
118+
display none
119+
.algolia-docsearch-suggestion--subcategory-column-text
120+
color #555
121+
.algolia-docsearch-footer
122+
border-color $borderColor
123+
.ds-cursor .algolia-docsearch-suggestion--content
124+
background-color #e7edf3 !important
125+
color $textColor
126+
@media (min-width: $MQMobile)
127+
.algolia-search-wrapper
128+
.algolia-autocomplete
129+
.algolia-docsearch-suggestion
130+
.algolia-docsearch-suggestion--subcategory-column
131+
float none
132+
width 150px
133+
min-width 150px
134+
display table-cell
135+
.algolia-docsearch-suggestion--content
136+
float none
137+
display table-cell
138+
width 100%
139+
vertical-align top
140+
.ds-dropdown-menu
141+
min-width 515px !important
142+
@media (max-width: $MQMobile)
143+
.algolia-search-wrapper
144+
.ds-dropdown-menu
145+
min-width calc(100vw - 4rem) !important
146+
max-width calc(100vw - 4rem) !important
147+
.algolia-docsearch-suggestion--wrapper
148+
padding 5px 7px 5px 5px !important
149+
.algolia-docsearch-suggestion--subcategory-column
150+
padding 0 !important
151+
background white !important
152+
.algolia-docsearch-suggestion--subcategory-column-text:after
153+
content " > "
154+
font-size 10px
155+
line-height 14.4px
156+
display inline-block
157+
width 5px
158+
margin -3px 3px 0
159+
vertical-align middle
160+
</style>

‎docs/.vuepress/theme/index.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const path = require('path');
2+
3+
module.exports = (_, ctx) => ({
4+
// MODIFICATION_FROM_THEME - this alias method is imported without change
5+
// to point to updated AlgoliaSearchBox.vue
6+
alias() {
7+
const { themeConfig, siteConfig } = ctx;
8+
9+
// resolve algolia
10+
const isAlgoliaSearch =
11+
themeConfig.algolia ||
12+
Object.keys((siteConfig.locales && themeConfig.locales) || {}).some(
13+
base => themeConfig.locales[base].algolia
14+
);
15+
16+
return {
17+
'@AlgoliaSearchBox': isAlgoliaSearch
18+
? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
19+
: path.resolve(__dirname, 'noopModule.js')
20+
};
21+
},
22+
23+
extend: '@vuepress/theme-default'
24+
});

0 commit comments

Comments
 (0)