Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Make ad stateless again

Browse source
This commit is contained in:
Sam Carlton 2022-07-27 13:11:28 -05:00
parent d882191df8
commit 9e817f0f6c
1 changed files with 6 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/ad-inline.vue
View file

@ -38,8 +38,6 @@
/* Carbon ads */ /* Carbon ads */
import CarbonInline from './carbon-inline.vue' import CarbonInline from './carbon-inline.vue'
const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
const ads = { const ads = {
// Since Vue renders the ad on the server // Since Vue renders the ad on the server
// but destroys the ad when hydrating on // but destroys the ad when hydrating on
@ -48,7 +46,7 @@ const ads = {
// and so that our ad css still get's imported. // and so that our ad css still get's imported.
'placeholder': { 'placeholder': {
url: '/', url: '/',
imageSrc: transparentImage, imageSrc: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
imageAlt: '', imageAlt: '',
copy: '', copy: '',
corner: '', corner: '',
@ -98,16 +96,9 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () {
return {
// We store imageSrc in data
// so that vue knows to update attribute after hydration.
imageSrc: transparentImage,
}
},
computed: { computed: {
adName () { adName () {
// console.log( 'kindName', this.page?.kindName ) console.log( 'kindName', this.page?.kindName )
if ( this.name === 'placeholder' ) { if ( this.name === 'placeholder' ) {
return 'placeholder' return 'placeholder'
@ -122,10 +113,13 @@ export default {
}, },
ad () { ad () {
return ads[ this.adName ] return ads[ this.adName ]
},
imageSrc () {
return this.ad.imageSrc
} }
}, },
mounted () { mounted () {
this.imageSrc = this.ad.imageSrc console.log( 'mounted', this.adName )
} }
} }
</script> </script>