Skip to content

Commit cb87532

Browse files
ulivzulivz
committed
feat: @vuepress/theme-vue
1 parent 497ce80 commit cb87532

File tree

5 files changed

+220
-0
lines changed

5 files changed

+220
-0
lines changed

‎packages/@vuepress/theme-vue/components/BuySellAds.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<script>
2+
/* global _bsa */
3+
const ID = 'bsa-cpc-script'
4+
5+
export default {
6+
render (h) {
7+
return h('div', { class: 'bsa-cpc-wrapper' }, [
8+
h('div', { ref: 'ads', class: 'bsa-cpc' })
9+
])
10+
},
11+
mounted () {
12+
if (!document.getElementById(ID)) {
13+
const s = document.createElement('script')
14+
s.id = ID
15+
s.src = `//m.servedby-buysellads.com/monetization.js`
16+
document.head.appendChild(s)
17+
s.onload = () => {
18+
this.load()
19+
}
20+
} else {
21+
this.load()
22+
}
23+
},
24+
watch: {
25+
'$route' (to, from) {
26+
if (to.path !== from.path) {
27+
this.$refs.ads.innerHTML = ''
28+
this.load()
29+
}
30+
}
31+
},
32+
methods: {
33+
load () {
34+
if (typeof _bsa !== 'undefined' && _bsa) {
35+
_bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
36+
target: '.bsa-cpc',
37+
align: 'horizontal',
38+
disable_css: 'true'
39+
})
40+
}
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<style lang="stylus">
47+
.bsa-cpc-wrapper
48+
font-size 0.95rem
49+
max-width $contentWidth
50+
margin 0px auto
51+
padding 1rem 2rem 0
52+
margin-bottom -1rem
53+
54+
@media (max-width: $MQMobileNarrow)
55+
.bsa-cpc-wrapper
56+
padding 0 1.5rem
57+
58+
.bsa-cpc
59+
font-size .9em
60+
background-color #f8f8f8
61+
border-radius 6px
62+
a
63+
&._default_
64+
text-align left
65+
display block
66+
padding 10px 15px 12px
67+
margin-bottom 20px
68+
color #666
69+
font-weight 400
70+
line-height 18px
71+
.default-image
72+
img
73+
height 20px
74+
border-radius 3px
75+
vertical-align middle
76+
position relative
77+
top -1px
78+
.default-title
79+
font-weight 600
80+
.default-description
81+
&:after
82+
font-size 0.85em
83+
content "Sponsored"
84+
color #1C90F3
85+
border 1px solid #1C90F3
86+
border-radius 3px
87+
padding 0 4px 1px
88+
margin-left 6px
89+
.default-ad
90+
display none
91+
92+
.bsa-cpc a._default_ .default-image,
93+
.bsa-cpc a._default_ .default-title,
94+
.bsa-cpc a._default_ .default-description
95+
display inline
96+
vertical-align middle
97+
margin-right 6px
98+
</style>

‎packages/@vuepress/theme-vue/components/CarbonAds.vue

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script>
2+
export default {
3+
render (h) {
4+
return h('div', { class: 'carbon-ads' })
5+
},
6+
mounted () {
7+
this.load()
8+
},
9+
watch: {
10+
'$route' (to, from) {
11+
if (
12+
to.path !== from.path &&
13+
// Only reload if the ad has been loaded
14+
// otherwise it's possible that the script is appended but
15+
// the ads are not loaded yet. This would result in duplicated ads.
16+
this.$el.querySelector('#carbonads')
17+
) {
18+
this.$el.innerHTML = ''
19+
this.load()
20+
}
21+
}
22+
},
23+
methods: {
24+
load () {
25+
const s = document.createElement('script')
26+
s.id = '_carbonads_js'
27+
s.src = `//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg`
28+
this.$el.appendChild(s)
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style lang="stylus">
35+
.carbon-ads
36+
min-height 102px
37+
padding 1.5rem 1.5rem 0
38+
margin-bottom -0.5rem
39+
font-size 0.75rem
40+
a
41+
color #444
42+
font-weight normal
43+
display inline
44+
.carbon-img
45+
float left
46+
margin-right 1rem
47+
border 1px solid $borderColor
48+
img
49+
display block
50+
.carbon-poweredby
51+
color #999
52+
display block
53+
margin-top 0.5em
54+
55+
@media (max-width: $MQMobile)
56+
.carbon-ads
57+
.carbon-img img
58+
width 100px
59+
height 77px
60+
</style>

‎packages/@vuepress/theme-vue/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extend: '@vuepress/theme-default'
3+
}

‎packages/@vuepress/theme-vue/layouts/Layout.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<Layout>
3+
<CarbonAds slot="sidebar-top"/>
4+
<BuySellAds slot="page-bottom"/>
5+
</Layout>
6+
</template>
7+
8+
<script>
9+
import Layout from '@parent-theme/layouts/Layout.vue'
10+
import CarbonAds from '../components/CarbonAds.vue'
11+
import BuySellAds from '../components/BuySellAds.vue'
12+
13+
export default {
14+
components: {
15+
Layout,
16+
CarbonAds,
17+
BuySellAds
18+
},
19+
20+
mounted () {
21+
console.log('mounted')
22+
}
23+
}
24+
</script>

‎packages/@vuepress/theme-vue/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"private": true,
3+
"name": "@vuepress/theme-vue",
4+
"version": "1.0.0-alpha.17",
5+
"description": "VuePress theme for official Vue projects",
6+
"main": "index.js",
7+
"publishConfig": {
8+
"access": "public"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/vuejs/vuepress.git"
13+
},
14+
"keywords": [
15+
"documentation",
16+
"vue",
17+
"vuepress",
18+
"generator"
19+
],
20+
"author": "Evan You",
21+
"maintainers": [
22+
{
23+
"name": "ULIVZ",
24+
"email": "chl814@foxmail.com"
25+
}
26+
],
27+
"license": "MIT",
28+
"bugs": {
29+
"url": "https://github.com/vuejs/vuepress/issues"
30+
},
31+
"homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-vue#readme",
32+
"dependencies": {
33+
"@vuepress/theme-default": "^1.0.0-alpha.17"
34+
}
35+
}

0 commit comments

Comments
 (0)