Skip to content

Commit d6cdfd5

Browse files
jspringejspringe
committed
Docs WIP
1 parent 7cb844e commit d6cdfd5

33 files changed

+2653
-67
lines changed

‎docs/.vuepress/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ module.exports = {
77
['link', { rel: 'icon', href: `/wmi-squares.png` }],
88
],
99

10+
markdown: {
11+
lineNumbers: true
12+
},
1013
themeConfig: {
14+
bottom: "MIT Licensed | Copyright © 2019-present Joe Springe | This library is not in any way associated with nor endorsed by Microsoft™.",
1115
logo: '/wmi-squares.svg',
1216
nav: [
1317
{ text: 'Home', link: '/' },

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

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

‎docs/.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 '@theme/components/NavLink.vue'
54+
import DropdownTransition from '@theme/components/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>

‎docs/.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)