Skip to content

Commit d7855fd

Browse files
avivaceavivace
committed
Eject default theme
1 parent 572b621 commit d7855fd

26 files changed

+2343
-0
lines changed

‎pages/.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.

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
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+
}
40+
))
41+
})
42+
},
43+
44+
update (options, lang) {
45+
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
46+
this.initialize(options, lang)
47+
}
48+
},
49+
50+
watch: {
51+
$lang (newValue) {
52+
this.update(this.options, newValue)
53+
},
54+
55+
options (newValue) {
56+
this.update(newValue, this.$lang)
57+
}
58+
}
59+
}
60+
</script>
61+
62+
<style lang="stylus">
63+
.algolia-search-wrapper
64+
& > span
65+
vertical-align middle
66+
.algolia-autocomplete
67+
line-height normal
68+
.ds-dropdown-menu
69+
background-color #fff
70+
border 1px solid #999
71+
border-radius 4px
72+
font-size 16px
73+
margin 6px 0 0
74+
padding 4px
75+
text-align left
76+
&:before
77+
border-color #999
78+
[class*=ds-dataset-]
79+
border none
80+
padding 0
81+
.ds-suggestions
82+
margin-top 0
83+
.ds-suggestion
84+
border-bottom 1px solid $borderColor
85+
.algolia-docsearch-suggestion--highlight
86+
color #2c815b
87+
.algolia-docsearch-suggestion
88+
border-color $borderColor
89+
padding 0
90+
.algolia-docsearch-suggestion--category-header
91+
padding 5px 10px
92+
margin-top 0
93+
background $accentColor
94+
color #fff
95+
font-weight 600
96+
.algolia-docsearch-suggestion--highlight
97+
background rgba(255, 255, 255, 0.6)
98+
.algolia-docsearch-suggestion--wrapper
99+
padding 0
100+
.algolia-docsearch-suggestion--title
101+
font-weight 600
102+
margin-bottom 0
103+
color $textColor
104+
.algolia-docsearch-suggestion--subcategory-column
105+
vertical-align top
106+
padding 5px 7px 5px 5px
107+
border-color $borderColor
108+
background #f1f3f5
109+
&:after
110+
display none
111+
.algolia-docsearch-suggestion--subcategory-column-text
112+
color #555
113+
.algolia-docsearch-footer
114+
border-color $borderColor
115+
.ds-cursor .algolia-docsearch-suggestion--content
116+
background-color #e7edf3 !important
117+
color $textColor
118+
119+
@media (min-width: $MQMobile)
120+
.algolia-search-wrapper
121+
.algolia-autocomplete
122+
.algolia-docsearch-suggestion
123+
.algolia-docsearch-suggestion--subcategory-column
124+
float none
125+
width 150px
126+
min-width 150px
127+
display table-cell
128+
.algolia-docsearch-suggestion--content
129+
float none
130+
display table-cell
131+
width 100%
132+
vertical-align top
133+
.ds-dropdown-menu
134+
min-width 515px !important
135+
136+
@media (max-width: $MQMobile)
137+
.algolia-search-wrapper
138+
.ds-dropdown-menu
139+
min-width calc(100vw - 4rem) !important
140+
max-width calc(100vw - 4rem) !important
141+
.algolia-docsearch-suggestion--wrapper
142+
padding 5px 7px 5px 5px !important
143+
.algolia-docsearch-suggestion--subcategory-column
144+
padding 0 !important
145+
background white !important
146+
.algolia-docsearch-suggestion--subcategory-column-text:after
147+
content " > "
148+
font-size 10px
149+
line-height 14.4px
150+
display inline-block
151+
width 5px
152+
margin -3px 3px 0
153+
vertical-align middle
154+
155+
</style>

‎pages/.vuepress/theme/components/DropdownLink.vue

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<template>
2+
<div
3+
class="dropdown-wrapper"
4+
:class="{ open }"
5+
>
6+
<a
7+
class="dropdown-title"
8+
@click="toggle"
9+
>
10+
<span class="title">{{ item.text }}</span>
11+
<span
12+
class="arrow"
13+
:class="open ? 'down' : 'right'"
14+
></span>
15+
</a>
16+
17+
<DropdownTransition>
18+
<ul
19+
class="nav-dropdown"
20+
v-show="open"
21+
>
22+
<li
23+
class="dropdown-item"
24+
:key="subItem.link || index"
25+
v-for="(subItem, index) in item.items"
26+
>
27+
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
28+
29+
<ul
30+
class="dropdown-subitem-wrapper"
31+
v-if="subItem.type === 'links'"
32+
>
33+
<li
34+
class="dropdown-subitem"
35+
:key="childSubItem.link"
36+
v-for="childSubItem in subItem.items"
37+
>
38+
<NavLink :item="childSubItem"/>
39+
</li>
40+
</ul>
41+
42+
<NavLink
43+
v-else
44+
:item="subItem"
45+
/>
46+
</li>
47+
</ul>
48+
</DropdownTransition>
49+
</div>
50+
</template>
51+
52+
<script>
53+
import NavLink from './NavLink.vue'
54+
import DropdownTransition from './DropdownTransition.vue'
55+
56+
export default {
57+
components: { NavLink, DropdownTransition },
58+
59+
data () {
60+
return {
61+
open: false
62+
}
63+
},
64+
65+
props: {
66+
item: {
67+
required: true
68+
}
69+
},
70+
71+
methods: {
72+
toggle () {
73+
this.open = !this.open
74+
}
75+
}
76+
}
77+
</script>
78+
79+
<style lang="stylus">
80+
.dropdown-wrapper
81+
cursor pointer
82+
.dropdown-title
83+
display block
84+
&:hover
85+
border-color transparent
86+
.arrow
87+
vertical-align middle
88+
margin-top -1px
89+
margin-left 0.4rem
90+
.nav-dropdown
91+
.dropdown-item
92+
color inherit
93+
line-height 1.7rem
94+
h4
95+
margin 0.45rem 0 0
96+
border-top 1px solid #eee
97+
padding 0.45rem 1.5rem 0 1.25rem
98+
.dropdown-subitem-wrapper
99+
padding 0
100+
list-style none
101+
.dropdown-subitem
102+
font-size 0.9em
103+
a
104+
display block
105+
line-height 1.7rem
106+
position relative
107+
border-bottom none
108+
font-weight 400
109+
margin-bottom 0
110+
padding 0 1.5rem 0 1.25rem
111+
&:hover
112+
color $accentColor
113+
&.router-link-active
114+
color $accentColor
115+
&::after
116+
content ""
117+
width 0
118+
height 0
119+
border-left 5px solid $accentColor
120+
border-top 3px solid transparent
121+
border-bottom 3px solid transparent
122+
position absolute
123+
top calc(50% - 2px)
124+
left 9px
125+
&:first-child h4
126+
margin-top 0
127+
padding-top 0
128+
border-top 0
129+
130+
@media (max-width: $MQMobile)
131+
.dropdown-wrapper
132+
&.open .dropdown-title
133+
margin-bottom 0.5rem
134+
.nav-dropdown
135+
transition height .1s ease-out
136+
overflow hidden
137+
.dropdown-item
138+
h4
139+
border-top 0
140+
margin-top 0
141+
padding-top 0
142+
h4, & > a
143+
font-size 15px
144+
line-height 2rem
145+
.dropdown-subitem
146+
font-size 14px
147+
padding-left 1rem
148+
149+
@media (min-width: $MQMobile)
150+
.dropdown-wrapper
151+
height 1.8rem
152+
&:hover .nav-dropdown
153+
// override the inline style.
154+
display block !important
155+
.dropdown-title .arrow
156+
// make the arrow always down at desktop
157+
border-left 4px solid transparent
158+
border-right 4px solid transparent
159+
border-top 6px solid $arrowBgColor
160+
border-bottom 0
161+
.nav-dropdown
162+
display none
163+
// Avoid height shaked by clicking
164+
height auto !important
165+
box-sizing border-box;
166+
max-height calc(100vh - 2.7rem)
167+
overflow-y auto
168+
position absolute
169+
top 100%
170+
right 0
171+
background-color #fff
172+
padding 0.6rem 0
173+
border 1px solid #ddd
174+
border-bottom-color #ccc
175+
text-align left
176+
border-radius 0.25rem
177+
white-space nowrap
178+
margin 0
179+
</style>

‎pages/.vuepress/theme/components/DropdownTransition.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<transition
3+
name="dropdown"
4+
@enter="setHeight"
5+
@after-enter="unsetHeight"
6+
@before-leave="setHeight"
7+
>
8+
<slot/>
9+
</transition>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'DropdownTransition',
15+
16+
methods: {
17+
setHeight (items) {
18+
// explicitly set height so that it can be transitioned
19+
items.style.height = items.scrollHeight + 'px'
20+
},
21+
22+
unsetHeight (items) {
23+
items.style.height = ''
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style lang="stylus">
30+
.dropdown-enter, .dropdown-leave-to
31+
height 0 !important
32+
33+
</style>

0 commit comments

Comments
 (0)