This repository has been archived by the owner on May 13, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
1,644 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: '', | ||
}, | ||
], | ||
}, | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.