Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit b9b64d7

Browse files
ulivzulivz
committed
feat: init example
1 parent 0084208 commit b9b64d7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1644
-99
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# Output
22
lib
3+
.temp
34

45
### Code ###
56
# Visual Studio Code - https://code.visualstudio.com/

‎example/.vuepress/config.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module.exports = {
2+
title: `VuePress`,
3+
themeConfig: {
4+
nav: [
5+
{
6+
text: 'Home',
7+
link: '/',
8+
},
9+
{
10+
text: 'Tutorials',
11+
link: '/tutorials/',
12+
},
13+
{
14+
text: 'Documentation',
15+
link: 'https://v1.vuepress.vuejs.org',
16+
},
17+
],
18+
footer: {
19+
contact: [
20+
{
21+
type: 'github',
22+
link: '',
23+
},
24+
{
25+
type: 'twitter',
26+
link: '',
27+
},
28+
],
29+
copyright: [
30+
{
31+
text: 'Privacy Policy',
32+
link: 'https://policies.google.com/privacy?hl=en-US',
33+
},
34+
{
35+
text: 'MIT Licensed | Copyright © 2018-present Vue.js',
36+
link: '',
37+
},
38+
],
39+
},
40+
},
41+
}

‎example/.vuepress/theme/components/Footer.vue‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<footer class="footer">
3+
<div class="footer-left-wrap">
4+
<ul class="contact" v-if="contact">
5+
<li class="contact-item" v-for="item in contact">
6+
<component :is="item.iconComponent"></component>
7+
<NavLink :link="item.link">{{ item.text }}</NavLink>
8+
</li>
9+
</ul>
10+
</div>
11+
12+
<div class="footer-right-wrap">
13+
<ul class="copyright" v-if="copyright">
14+
<li class="copyright-item" v-for="item in copyright">
15+
<NavLink :link="item.link">{{ item.text }}</NavLink>
16+
</li>
17+
</ul>
18+
</div>
19+
</footer>
20+
</template>
21+
22+
<script>
23+
import NavLink from './NavLink'
24+
import {
25+
GithubIcon,
26+
FacebookIcon,
27+
TwitterIcon,
28+
} from 'vue-feather-icons'
29+
30+
export default {
31+
components: {
32+
NavLink,
33+
GithubIcon,
34+
FacebookIcon,
35+
TwitterIcon,
36+
},
37+
38+
methods: {
39+
getIconComponentName(contactType) {
40+
switch (contactType) {
41+
case 'github':
42+
return 'GithubIcon'
43+
case 'facebook':
44+
return 'FacebookIcon'
45+
case 'twitter':
46+
return 'TwitterIcon'
47+
default:
48+
return ''
49+
}
50+
},
51+
},
52+
53+
computed: {
54+
contact() {
55+
return (
56+
this.$themeConfig.footer && this.$themeConfig.footer.contact || []
57+
)
58+
.map(({ type, link }) => {
59+
return {
60+
iconComponent: this.getIconComponentName(type),
61+
link,
62+
}
63+
})
64+
.filter(({ iconComponent }) => iconComponent)
65+
},
66+
67+
copyright() {
68+
return (
69+
this.$themeConfig.footer && this.$themeConfig.footer.copyright || []
70+
)
71+
},
72+
},
73+
}
74+
</script>
75+
76+
<style lang="stylus" scoped>
77+
ol, ul
78+
list-style none
79+
margin 0
80+
padding 0
81+
82+
.footer
83+
height 60px
84+
box-sizing border-box
85+
// background-color darken(#3eaf7c, 70%)
86+
background-color #000
87+
color #FFF
88+
display flex
89+
padding 15px 32px
90+
91+
.footer-left-wrap
92+
line-height 30px
93+
flex 1
94+
display flex
95+
96+
.contact
97+
display flex
98+
99+
.contact-item
100+
flex 1
101+
margin-right 10px
102+
103+
a
104+
font-size 12px
105+
color rgba(255, 255, 255, 0.45)
106+
text-decoration none
107+
108+
.footer-right-wrap
109+
flex 1
110+
display flex
111+
align-items center
112+
justify-content flex-end
113+
114+
.copyright
115+
display flex
116+
justify-content flex-end
117+
118+
.copyright-item
119+
flex 0 0 auto
120+
padding 0 10px
121+
position relative
122+
line-height 12px
123+
border-right 1px solid rgba(255, 255, 255, 0.6)
124+
125+
&:last-child
126+
border-right none
127+
128+
a
129+
font-size 12px
130+
color rgba(255, 255, 255, 0.6)
131+
text-decoration none
132+
transition color.3s
133+
&:hover
134+
color rgba(255, 255, 255, 0.9)
135+
136+
@media (max-width: $MQMobile)
137+
.footer
138+
height 100px
139+
flex-direction column
140+
.footer-left-wrap
141+
align-items center
142+
justify-content center
143+
</style>

‎example/.vuepress/theme/components/Header.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<header id="header">
3+
<div class="header-wrapper">
4+
<h1 class="title">{{ $site.title }}</h1>
5+
<div class="header-right-wrap">
6+
<ul class="nav" v-if="$themeConfig.nav">
7+
<li class="nav-item" v-for="item in $themeConfig.nav">
8+
<NavLink :link="item.link">{{ item.text }}</NavLink>
9+
</li>
10+
</ul>
11+
<SearchBox />
12+
</div>
13+
</div>
14+
</header>
15+
</template>
16+
17+
<script>
18+
import SearchBox from '@SearchBox'
19+
import NavLink from './NavLink'
20+
21+
export default {
22+
components: {
23+
SearchBox,
24+
NavLink,
25+
},
26+
}
27+
</script>
28+
29+
<style lang="stylus">
30+
@import '~@app/style/config'
31+
32+
ol, ul
33+
list-style none
34+
margin 0
35+
padding 0
36+
37+
#header
38+
z-index 12
39+
position fixed
40+
top 0
41+
width 100vw
42+
box-sizing border-box
43+
// background lighten(#3eaf7c, 90%)
44+
background-color #FdFdFd
45+
font-family Abel, sans-serif
46+
padding 20px 32px 20px
47+
margin auto
48+
border-bottom 1px solid rgba(0, 0, 0, 0.15)
49+
// border-bottom 5px solid lighten(#3eaf7c, 50%)
50+
51+
.header-wrapper
52+
display flex
53+
line-height 40px
54+
height 40px
55+
56+
.title
57+
flex 0 0 200px
58+
// color #3eaf7c
59+
// color lighten(#3eaf7c, 10%)
60+
color #000
61+
font-size 30px
62+
font-weight bold
63+
margin 0
64+
letter-spacing 2px
65+
display block
66+
font-weight 900
67+
68+
.header-right-wrap
69+
flex 1
70+
display flex
71+
justify-content flex-end
72+
73+
.nav
74+
flex 0 0 auto
75+
display flex
76+
margin 0
77+
align-items end
78+
79+
.nav-item
80+
flex 1
81+
margin-left 20px
82+
83+
a
84+
font-size 20px
85+
color #000
86+
// color lighten(#3eaf7c, 30%)
87+
text-decoration none
88+
transition color .3s
89+
90+
&:hover
91+
color lighten(#3eaf7c, 10%)
92+
93+
94+
.search-box
95+
margin-left 20px
96+
input
97+
border-radius 0
98+
border: 1px solid rgba(0, 0, 0, 0.15)
99+
.suggestions
100+
top: 40px
101+
right 0
102+
103+
@media (max-width: $MQMobile)
104+
.header-wrapper
105+
flex-direction column
106+
.header-right-wrap
107+
display none
108+
</style>

‎example/.vuepress/theme/components/LayoutWrapper.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<Header/>
4+
5+
<div class="content-wrapper">
6+
<slot/>
7+
</div>
8+
9+
<Footer/>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import Header from '@theme/components/Header'
15+
import Footer from '@theme/components/Footer'
16+
17+
export default {
18+
components: { Header, Footer }
19+
}
20+
</script>
21+
22+
<style lang="stylus">
23+
.content-wrapper
24+
padding-top 80px
25+
min-height calc(100vh - 80px - 60px)
26+
max-width 740px
27+
padding-left calc((100vw - 220px - 740px) / 2)
28+
</style>

‎example/.vuepress/theme/components/NavLink.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<router-link
3+
class="nav-link"
4+
:to="normalizedlink"
5+
v-if="!isExternal(normalizedlink)"
6+
:exact="exact"
7+
>
8+
<slot/>
9+
</router-link>
10+
<a
11+
v-else
12+
:href="normalizedlink"
13+
class="nav-link external"
14+
:target="isMailto(normalizedlink) || isTel(normalizedlink) ? null : '_blank'"
15+
:rel="isMailto(normalizedlink) || isTel(normalizedlink) ? null : 'noopener noreferrer'"
16+
>
17+
<slot/>
18+
</a>
19+
</template>
20+
21+
<script>
22+
import { isExternal, isMailto, isTel, ensureExt } from './util'
23+
24+
export default {
25+
props: {
26+
link: {
27+
required: true
28+
}
29+
},
30+
31+
computed: {
32+
normalizedlink () {
33+
return ensureExt(this.link)
34+
},
35+
36+
exact () {
37+
if (this.$site.locales) {
38+
return Object.keys(this.$site.locales).some(rootLink => rootLink === this.normalizedlink)
39+
}
40+
return this.normalizedlink === '/'
41+
}
42+
},
43+
44+
methods: {
45+
isExternal,
46+
isMailto,
47+
isTel
48+
}
49+
}
50+
</script>

0 commit comments

Comments
 (0)