Skip to content

Commit 52eaca4

Browse files
growno1127growno1127
committed
TEMP fix for algolia suggestion result rewriting bug
vuejs/vuepress#1802
1 parent ed5c56e commit 52eaca4

File tree

2 files changed

+191
-0
lines changed

2 files changed

+191
-0
lines changed

‎.vuepress/theme/components/AlgoliaSearchBox.vue

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

‎.vuepress/theme/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const path = require("path");
2+
3+
module.exports = (options, 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+
// resolve algolia
9+
const isAlgoliaSearch =
10+
themeConfig.algolia ||
11+
Object.keys((siteConfig.locales && themeConfig.locales) || {}).some(
12+
base => themeConfig.locales[base].algolia
13+
);
14+
15+
return {
16+
"@AlgoliaSearchBox": isAlgoliaSearch
17+
? path.resolve(__dirname, "components/AlgoliaSearchBox.vue")
18+
: path.resolve(__dirname, "noopModule.js")
19+
};
20+
},
21+
22+
extend: "@vuepress/theme-default"
23+
});

0 commit comments

Comments
 (0)