refactor: remove ad components

pull/90/head
Eduardo San Martin Morote 5 years ago
parent 2478b53c07
commit 4ab40bf26b

@ -7,15 +7,7 @@
<aside :class="{ open }">
<SideBar>
<template #top>
<slot name="sidebar-top">
<!-- use the title to force a new ad for every navigation -->
<CarbonAds
v-if="$site.themeConfig.carbonAds"
:key="$page.title"
:serve="$site.themeConfig.carbonAds.serve"
:placement="$site.themeConfig.carbonAds.placement"
/>
</slot>
<slot name="sidebar-top" />
</template>
<template #bottom>
<slot name="sidebar-bottom" />
@ -33,15 +25,7 @@
<slot name="page-top" />
</template>
<template #bottom>
<slot name="page-bottom">
<!-- use the title to force a new ad for every navigation -->
<BuySellAds
v-if="$site.themeConfig.carbonAds"
:key="$page.title"
:serve="$site.themeConfig.carbonAds.serve"
:placement="$site.themeConfig.carbonAds.placement"
/>
</slot>
<slot name="page-bottom" />
</template>
</Page>
</main>
@ -55,17 +39,13 @@ import NavBar from './components/NavBar.vue'
import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
import SideBar from './components/SideBar.vue'
import Page from './components/Page.vue'
import CarbonAds from './components/CarbonAds.vue'
import BuySellAds from './components/BuySellAds.vue'
export default {
components: {
NavBar,
ToggleSideBarButton,
SideBar,
Page,
CarbonAds,
BuySellAds
Page
},
setup() {

@ -1,109 +0,0 @@
<script>
import { h, onMounted } from 'vue'
/* global _bsa */
const ID = 'bsa-cpc-script'
export default {
name: 'BuySellAds',
props: {
serve: {
type: String,
required: true
},
placement: {
type: String,
required: true
}
},
setup(props) {
function load() {
if (typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', props.serve, `placement:${props.placement}`, {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
})
}
}
onMounted(() => {
if (!document.getElementById(ID)) {
const s = document.createElement('script')
s.id = ID
s.src = `//m.servedby-buysellads.com/monetization.js`
document.head.appendChild(s)
s.onload = () => {
load()
}
} else {
load()
}
})
return () =>
h('div', { class: 'bsa-cpc-wrapper' }, [h('div', { class: 'bsa-cpc' })])
}
}
</script>
<style>
.bsa-cpc-wrapper {
font-size: 0.95rem;
/* from Page.vue */
max-width: 50rem;
margin: 0px auto;
padding: 1rem 2rem 0;
margin-bottom: -1rem;
}
@media (max-width: 419px) {
.bsa-cpc-wrapper {
padding: 0 1.5rem;
}
}
.bsa-cpc {
font-size: 0.9em;
background-color: #f8f8f8;
border-radius: 6px;
}
.bsa-cpc a._default_ {
text-align: left;
display: block;
text-decoration: none;
padding: 10px 15px 12px;
margin-bottom: 20px;
color: #666;
font-weight: 400;
line-height: 18px;
}
.bsa-cpc a._default_ .default-image img {
height: 20px;
border-radius: 3px;
vertical-align: middle;
position: relative;
top: -1px;
}
.bsa-cpc a._default_ .default-title {
font-weight: 600;
}
.bsa-cpc a._default_ .default-description:after {
font-size: 0.85em;
content: 'Sponsored';
color: #1c90f3;
border: 1px solid #1c90f3;
border-radius: 3px;
padding: 0 4px 1px;
margin-left: 6px;
}
.bsa-cpc .default-ad {
display: none;
}
.bsa-cpc a._default_ .default-image,
.bsa-cpc a._default_ .default-title,
.bsa-cpc a._default_ .default-description {
display: inline;
vertical-align: middle;
margin-right: 6px;
}
</style>

@ -1,68 +0,0 @@
<script>
import { h, onMounted, ref } from 'vue'
export default {
name: 'CarbonAds',
props: {
serve: {
type: String,
required: true
},
placement: {
type: String,
required: true
}
},
setup(props) {
const el = ref()
onMounted(() => {
const s = document.createElement('script')
s.id = '_carbonads_js'
s.src = `//cdn.carbonads.com/carbon.js?serve=${props.serve}&placement=${props.placement}`
el.value.appendChild(s)
})
return () => h('div', { class: 'carbon-ads', ref: el })
}
}
</script>
<style>
.carbon-ads {
min-height: 102px;
padding: 1.5rem 1.5rem 0;
margin-bottom: 0.5rem;
font-size: 0.75rem;
}
.carbon-ads a {
color: #444;
font-weight: normal;
display: inline;
}
.carbon-ads .carbon-img {
float: left;
margin-right: 1rem;
border: 1px solid var(--border-color);
}
.carbon-ads .carbon-img img {
display: block;
}
.carbon-ads .carbon-poweredby {
color: #999;
display: block;
margin-top: 0.5em;
}
@media (max-width: 719px) {
.carbon-ads .carbon-img img {
width: 100px;
height: 77px;
}
}
</style>
Loading…
Cancel
Save