Skip to content

Commit 9b95015

Browse files
author
febobo
committed
costom layout
1 parent 82c7658 commit 9b95015

30 files changed

+2818
-0
lines changed

‎docs/.vuepress/theme/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018-present, Yuxi (Evan) You
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

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

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

0 commit comments

Comments
 (0)