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

Commit

Permalink
feat: init example
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz committed Jun 2, 2019
1 parent 0084208 commit b9b64d7
Show file tree
Hide file tree
Showing 42 changed files with 1,644 additions and 99 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# Output
lib
.temp

### Code ###
# Visual Studio Code - https://code.visualstudio.com/
Expand Down
41 changes: 41 additions & 0 deletions example/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
module.exports = {
title: `VuePress`,
themeConfig: {
nav: [
{
text: 'Home',
link: '/',
},
{
text: 'Tutorials',
link: '/tutorials/',
},
{
text: 'Documentation',
link: 'https://v1.vuepress.vuejs.org',
},
],
footer: {
contact: [
{
type: 'github',
link: '',
},
{
type: 'twitter',
link: '',
},
],
copyright: [
{
text: 'Privacy Policy',
link: 'https://policies.google.com/privacy?hl=en-US',
},
{
text: 'MIT Licensed | Copyright © 2018-present Vue.js',
link: '',
},
],
},
},
}
143 changes: 143 additions & 0 deletions example/.vuepress/theme/components/Footer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<template>
<footer class="footer">
<div class="footer-left-wrap">
<ul class="contact" v-if="contact">
<li class="contact-item" v-for="item in contact">
<component :is="item.iconComponent"></component>
<NavLink :link="item.link">{{ item.text }}</NavLink>
</li>
</ul>
</div>

<div class="footer-right-wrap">
<ul class="copyright" v-if="copyright">
<li class="copyright-item" v-for="item in copyright">
<NavLink :link="item.link">{{ item.text }}</NavLink>
</li>
</ul>
</div>
</footer>
</template>

<script>
import NavLink from './NavLink'
import {
GithubIcon,
FacebookIcon,
TwitterIcon,
} from 'vue-feather-icons'
export default {
components: {
NavLink,
GithubIcon,
FacebookIcon,
TwitterIcon,
},
methods: {
getIconComponentName(contactType) {
switch (contactType) {
case 'github':
return 'GithubIcon'
case 'facebook':
return 'FacebookIcon'
case 'twitter':
return 'TwitterIcon'
default:
return ''
}
},
},
computed: {
contact() {
return (
this.$themeConfig.footer && this.$themeConfig.footer.contact || []
)
.map(({ type, link }) => {
return {
iconComponent: this.getIconComponentName(type),
link,
}
})
.filter(({ iconComponent }) => iconComponent)
},
copyright() {
return (
this.$themeConfig.footer && this.$themeConfig.footer.copyright || []
)
},
},
}
</script>

<style lang="stylus" scoped>
ol, ul
list-style none
margin 0
padding 0
.footer
height 60px
box-sizing border-box
// background-color darken(#3eaf7c, 70%)
background-color #000
color #FFF
display flex
padding 15px 32px
.footer-left-wrap
line-height 30px
flex 1
display flex
.contact
display flex
.contact-item
flex 1
margin-right 10px
a
font-size 12px
color rgba(255, 255, 255, 0.45)
text-decoration none
.footer-right-wrap
flex 1
display flex
align-items center
justify-content flex-end
.copyright
display flex
justify-content flex-end
.copyright-item
flex 0 0 auto
padding 0 10px
position relative
line-height 12px
border-right 1px solid rgba(255, 255, 255, 0.6)
&:last-child
border-right none
a
font-size 12px
color rgba(255, 255, 255, 0.6)
text-decoration none
transition color.3s
&:hover
color rgba(255, 255, 255, 0.9)
@media (max-width: $MQMobile)
.footer
height 100px
flex-direction column
.footer-left-wrap
align-items center
justify-content center
</style>
108 changes: 108 additions & 0 deletions example/.vuepress/theme/components/Header.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<template>
<header id="header">
<div class="header-wrapper">
<h1 class="title">{{ $site.title }}</h1>
<div class="header-right-wrap">
<ul class="nav" v-if="$themeConfig.nav">
<li class="nav-item" v-for="item in $themeConfig.nav">
<NavLink :link="item.link">{{ item.text }}</NavLink>
</li>
</ul>
<SearchBox />
</div>
</div>
</header>
</template>

<script>
import SearchBox from '@SearchBox'
import NavLink from './NavLink'
export default {
components: {
SearchBox,
NavLink,
},
}
</script>

<style lang="stylus">
@import '~@app/style/config'
ol, ul
list-style none
margin 0
padding 0
#header
z-index 12
position fixed
top 0
width 100vw
box-sizing border-box
// background lighten(#3eaf7c, 90%)
background-color #FdFdFd
font-family Abel, sans-serif
padding 20px 32px 20px
margin auto
border-bottom 1px solid rgba(0, 0, 0, 0.15)
// border-bottom 5px solid lighten(#3eaf7c, 50%)
.header-wrapper
display flex
line-height 40px
height 40px
.title
flex 0 0 200px
// color #3eaf7c
// color lighten(#3eaf7c, 10%)
color #000
font-size 30px
font-weight bold
margin 0
letter-spacing 2px
display block
font-weight 900
.header-right-wrap
flex 1
display flex
justify-content flex-end
.nav
flex 0 0 auto
display flex
margin 0
align-items end
.nav-item
flex 1
margin-left 20px
a
font-size 20px
color #000
// color lighten(#3eaf7c, 30%)
text-decoration none
transition color .3s
&:hover
color lighten(#3eaf7c, 10%)
.search-box
margin-left 20px
input
border-radius 0
border: 1px solid rgba(0, 0, 0, 0.15)
.suggestions
top: 40px
right 0
@media (max-width: $MQMobile)
.header-wrapper
flex-direction column
.header-right-wrap
display none
</style>
28 changes: 28 additions & 0 deletions example/.vuepress/theme/components/LayoutWrapper.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<template>
<div>
<Header/>

<div class="content-wrapper">
<slot/>
</div>

<Footer/>
</div>
</template>

<script>
import Header from '@theme/components/Header'
import Footer from '@theme/components/Footer'
export default {
components: { Header, Footer }
}
</script>

<style lang="stylus">
.content-wrapper
padding-top 80px
min-height calc(100vh - 80px - 60px)
max-width 740px
padding-left calc((100vw - 220px - 740px) / 2)
</style>
50 changes: 50 additions & 0 deletions example/.vuepress/theme/components/NavLink.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<router-link
class="nav-link"
:to="normalizedlink"
v-if="!isExternal(normalizedlink)"
:exact="exact"
>
<slot/>
</router-link>
<a
v-else
:href="normalizedlink"
class="nav-link external"
:target="isMailto(normalizedlink) || isTel(normalizedlink) ? null : '_blank'"
:rel="isMailto(normalizedlink) || isTel(normalizedlink) ? null : 'noopener noreferrer'"
>
<slot/>
</a>
</template>

<script>
import { isExternal, isMailto, isTel, ensureExt } from './util'
export default {
props: {
link: {
required: true
}
},
computed: {
normalizedlink () {
return ensureExt(this.link)
},
exact () {
if (this.$site.locales) {
return Object.keys(this.$site.locales).some(rootLink => rootLink === this.normalizedlink)
}
return this.normalizedlink === '/'
}
},
methods: {
isExternal,
isMailto,
isTel
}
}
</script>
Loading

0 comments on commit b9b64d7

Please sign in to comment.