Skip to content

Commit 10fa837

Browse files
posvaposva
authored
feat: add carbon ads (#724)
* feat: add carbon ads * refactor: add computed * refactor: background for style
1 parent 23c4360 commit 10fa837

File tree

4 files changed

+261
-16
lines changed

4 files changed

+261
-16
lines changed

‎src/.vuepress/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,11 @@ module.exports = {
417417
indexName: 'vuejs-v3',
418418
appId: 'BH4D9OD16A',
419419
apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f'
420+
},
421+
carbonAds: {
422+
carbon: 'CEBDT27Y',
423+
custom: 'CKYD62QM',
424+
placement: 'vuejsorg'
420425
}
421426
},
422427
plugins: [

‎src/.vuepress/theme/components/BuySellAds.vue‎

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

‎src/.vuepress/theme/components/CarbonAds.vue‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class="carbon-ads"></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'CarbonAds',
8+
props: {
9+
code: {
10+
type: String,
11+
required: true
12+
},
13+
placement: {
14+
type: String,
15+
required: true
16+
}
17+
},
18+
19+
mounted() {
20+
const s = document.createElement('script')
21+
s.id = '_carbonads_js'
22+
s.src = `//cdn.carbonads.com/carbon.js?serve=${this.code}&placement=${this.placement}`
23+
this.$el.appendChild(s)
24+
}
25+
}
26+
</script>
27+
28+
<style>
29+
.carbon-ads {
30+
min-height: 102px;
31+
padding: 1.5rem 1.5rem 0;
32+
margin-bottom: -0.5rem;
33+
font-size: 0.75rem;
34+
35+
width: 125px;
36+
position: fixed;
37+
z-index: 1;
38+
bottom: 22px;
39+
right: 14px;
40+
padding: 10px;
41+
border-radius: 4px;
42+
background-color: rgba(255, 255, 255, 0.8);
43+
/* background-color: #fff; */
44+
/* font-size: 13px; */
45+
}
46+
47+
@media screen and (max-width: 1300px) {
48+
.carbon-ads {
49+
position: relative;
50+
top: 87px;
51+
right: 12px;
52+
float: right;
53+
padding: 0 0 20px 30px;
54+
}
55+
}
56+
57+
.carbon-ads a {
58+
color: #444;
59+
font-weight: normal;
60+
display: inline;
61+
}
62+
63+
.carbon-ads .carbon-img {
64+
float: left;
65+
margin-right: 1rem;
66+
border: 1px solid var(--border-color);
67+
}
68+
69+
.carbon-ads .carbon-img img {
70+
display: block;
71+
}
72+
73+
.carbon-ads .carbon-poweredby {
74+
color: #999;
75+
display: block;
76+
margin-top: 0.5em;
77+
}
78+
79+
@media (max-width: 719px) {
80+
.carbon-ads .carbon-img img {
81+
width: 100px;
82+
height: 77px;
83+
}
84+
}
85+
</style>

‎src/.vuepress/theme/layouts/Layout.vue‎

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
@touchstart="onTouchStart"
66
@touchend="onTouchEnd"
77
>
8-
<VueMasteryBanner v-if="isBannerOpen" @close-banner="closeBanner" ref='vueMasteryBanner'/>
8+
<VueMasteryBanner
9+
v-if="isBannerOpen"
10+
@close-banner="closeBanner"
11+
ref="vueMasteryBanner"
12+
/>
913
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
1014

1115
<div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -23,9 +27,21 @@
2327

2428
<Page v-else :sidebar-items="sidebarItems">
2529
<template #top>
30+
<CarbonAds
31+
v-if="adsConfig"
32+
:key="'ca:' + $page.path"
33+
:code="adsConfig.carbon"
34+
:placement="adsConfig.placement"
35+
/>
2636
<slot name="page-top" />
2737
</template>
2838
<template #bottom>
39+
<BuySellAds
40+
v-if="adsConfig"
41+
:key="'bsa:' + $page.path"
42+
:code="adsConfig.custom"
43+
:placement="adsConfig.placement"
44+
/>
2945
<slot name="page-bottom" />
3046
</template>
3147
</Page>
@@ -38,6 +54,8 @@ import Navbar from '@theme/components/Navbar.vue'
3854
import Page from '@theme/components/Page.vue'
3955
import Sidebar from '@theme/components/Sidebar.vue'
4056
import VueMasteryBanner from '@theme/components/sponsors/VueMasteryBanner.vue'
57+
import BuySellAds from '@theme/components/BuySellAds.vue'
58+
import CarbonAds from '@theme/components/CarbonAds.vue'
4159
import { resolveSidebarItems } from '../util'
4260
4361
export default {
@@ -48,21 +66,23 @@ export default {
4866
Page,
4967
Sidebar,
5068
Navbar,
51-
VueMasteryBanner
69+
VueMasteryBanner,
70+
BuySellAds,
71+
CarbonAds
5272
},
5373
54-
data () {
74+
data() {
5575
return {
5676
isSidebarOpen: false,
57-
isBannerOpen: true,
77+
isBannerOpen: true,
5878
isMenuFixed: false,
5979
nameStorage: 'vuemastery-black-firday-2020-banner',
6080
menuPosition: 0
6181
}
6282
},
6383
6484
computed: {
65-
shouldShowNavbar () {
85+
shouldShowNavbar() {
6686
const { themeConfig } = this.$site
6787
const { frontmatter } = this.$page
6888
if (frontmatter.navbar === false || themeConfig.navbar === false) {
@@ -77,7 +97,7 @@ export default {
7797
)
7898
},
7999
80-
shouldShowSidebar () {
100+
shouldShowSidebar() {
81101
const { frontmatter } = this.$page
82102
return (
83103
!frontmatter.home &&
@@ -86,7 +106,7 @@ export default {
86106
)
87107
},
88108
89-
sidebarItems () {
109+
sidebarItems() {
90110
return resolveSidebarItems(
91111
this.$page,
92112
this.$page.regularPath,
@@ -95,7 +115,7 @@ export default {
95115
)
96116
},
97117
98-
pageClasses () {
118+
pageClasses() {
99119
const userPageClass = this.$page.frontmatter.pageClass
100120
return [
101121
{
@@ -107,10 +127,14 @@ export default {
107127
},
108128
userPageClass
109129
]
130+
},
131+
132+
adsConfig() {
133+
return this.$site.themeConfig.carbonAds
110134
}
111135
},
112136
113-
mounted () {
137+
mounted() {
114138
this.$router.afterEach(() => {
115139
this.isSidebarOpen = false
116140
})
@@ -124,20 +148,20 @@ export default {
124148
},
125149
126150
methods: {
127-
toggleSidebar (to) {
151+
toggleSidebar(to) {
128152
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
129153
this.$emit('toggle-sidebar', this.isSidebarOpen)
130154
},
131155
132156
// side swipe
133-
onTouchStart (e) {
157+
onTouchStart(e) {
134158
this.touchStart = {
135159
x: e.changedTouches[0].clientX,
136160
y: e.changedTouches[0].clientY
137161
}
138162
},
139163
140-
onTouchEnd (e) {
164+
onTouchEnd(e) {
141165
const dx = e.changedTouches[0].clientX - this.touchStart.x
142166
const dy = e.changedTouches[0].clientY - this.touchStart.y
143167
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
@@ -161,7 +185,7 @@ export default {
161185
this.isMenuFixed = this.isUnderBanner()
162186
},
163187
164-
closeBanner (e) {
188+
closeBanner(e) {
165189
// Remove events
166190
this.toggleBannerEvents(false)
167191
// Hide the banner
@@ -192,10 +216,26 @@ export default {
192216
193217
toggleBannerEvents(on) {
194218
// Add or remove event listerners attached to the DOM
195-
let method = on ? "addEventListener" : "removeEventListener"
196-
window[method]("resize", this.getMenuPosition)
197-
window[method]("scroll", this.fixMenuAfterBanner)
219+
let method = on ? 'addEventListener' : 'removeEventListener'
220+
window[method]('resize', this.getMenuPosition)
221+
window[method]('scroll', this.fixMenuAfterBanner)
198222
}
199223
}
200224
}
201225
</script>
226+
227+
<style>
228+
/* add a placeholder to give space to ads so they don't overlap with content */
229+
@media screen and (max-width: 1376px) {
230+
.content__default::before {
231+
content: '';
232+
position: relative;
233+
display: block;
234+
float: right;
235+
height: 221px;
236+
padding: 0 0 20px 30px;
237+
margin-top: 20px;
238+
margin-right: -24px;
239+
}
240+
}
241+
</style>

0 commit comments

Comments
 (0)