Changed top banner message

dufu1991 · Mar 24, 2023 · 60d52cc · 60d52cc
1 parent f22fc0d
commit 60d52cc
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 351 deletions.
diff --git a/src/components/Announcement.vue b/src/components/Announcement.vue
@@ -10,9 +10,9 @@
       <div class="d-flex">
 
         <div class="mr-3">
-          <!-- :src="gitHub.profile" -->
+          <!-- :src="getStrapiImg(getHomeDialog.announcementImg)" -->
             <img
-              :src="getStrapiImg(getHomeDialog.announcementImg)"
+              src="https://www.webbites.io/_nuxt/WebBites-Icon.209a5576.png"
               class="rounded-1 avatar-user"
               width="48"
               height="48"
@@ -49,8 +49,9 @@
     <article class="Box">
       <div class="d-flex">
 
+        <!-- :src="getStrapiImg(getHomeDialog.announcementImg)" -->
         <img
-          :src="getStrapiImg(getHomeDialog.announcementImg)"
+          src="https://www.webbites.io/_nuxt/WebBites-Icon.209a5576.png"
           class="rounded-1 avatar-user"
           width="48"
           height="48"
@@ -66,7 +67,8 @@
             </div>
 
             <div class="mb-2 f-w-400">
-              <vue-markdown :source="getHomeDialog.announcement"/>
+              For the past few months I've been busy working on my biggest project so far, <a href="https://www.webbites.io/?utm_source=macOSicons.com&utm_medium=topBanner&utm_campaign=waitlist">WebBites.io</a>, a new smart bookmarking service powered by AI! I hope you like and let me know what you think on <a href="https://twitter.com/elrumo">Twitter</a>!
+              <!-- <vue-markdown :source="getHomeDialog.announcement"/> -->
             </div>
           </div>
 

diff --git a/src/components/NativeAd.vue b/src/components/NativeAd.vue
@@ -22,10 +22,6 @@ export default {
 
     props:{
       sponsored: '',
-      // sponsored: {
-      //   type: Boolean,
-      //   default: false,
-      // },
       zoneKey: '',
       fullWidth: '',
       adId: '',
@@ -44,149 +40,76 @@ export default {
         }
     },
     
-    mounted: function(){
-      let parent = this
-      var adId = parent.adId
-
-      const templateCompact =  `
-                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="`+adId+`customAd" class="bsa-link coral-card">
-                  <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
-                  <div class="bsa-desc">##company## - ##tagline##</div>
-                  </a>
-                `
-
-      const templateCard =  `
-                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="`+adId+`customAd"" class="bsa-link">
-                    <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
-                      <div class="bsa-icon" style="background-image: url(##logo##);"></div>
-                    </div>
-                    <div class="text-ad-wrapper">
-                      <img style="background: ##backgroundColor##" src="##image##">
-                      <div class="bsa-desc">##description##</div>
-                    </div>
-                  </a>
-                `
-
-      let template = this.template == 1 ? templateCompact : templateCard
-      let zoneKey = this.zoneKey;
-      let count = this.count
-
-      function initAds() {
-        if (typeof _bsa !== 'undefined' && _bsa) {
-          _bsa.init('custom', zoneKey, 'placement:macosiconscom', {
-            target: '#' + adId,
-            template: template,
-          })
-          _bsa.callback = BSANativeCallbacks // This is the callback function
-        }
-      };
+    mounted(){
+      this.runAd();
+    },
 
-      function BSANativeCallbacks(a) {
-        // console.log(a.ads);
-        if (a.ads.length == 0) {
-          count++
-          console.log(adId + ' ' + count);
-          initAds();
-          // Do something here to display fallback when the ads array is empty
+    watch:{
+      refreshAd(val){
+        if (val) {
+          _bsa.reload('#' + this.adId)
+          // set refreshAd to false
+          this.$store.commit('setDataToArr', { arr: 'refreshAd', data: false })
         }
+      },
+      $route(to, from){
+        // this.runAd();
       }
-      
-      // initAds()
-      // return
+    },
+
+    methods:{
+      adClick(){
+        window.plausible("adClick", {props: {
+          path: this.$route.name
+        }})
+      },
+
+      runAd(){
+        let parent = this
+        let adId = parent.adId
+
+        const templateCompact = `
+                    <a href="##statlink##" target="_blank" rel="noopener sponsored" id="`+ adId + `customAd" class="bsa-link coral-card">
+                    <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
+                    <div class="bsa-desc">##company## - ##tagline##</div>
+                    </a>
+                  `
+
+        const templateCard = `
+                    <a href="##statlink##" target="_blank" rel="noopener sponsored" id="`+ adId + `customAd"" class="bsa-link">
+                      <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
+                        <div class="bsa-icon" style="background-image: url(##logo##);"></div>
+                      </div>
+                      <div class="text-ad-wrapper">
+                        <img style="background: ##backgroundColor##" src="##image##">
+                        <div class="bsa-desc">##description##</div>
+                      </div>
+                    </a>
+                  `
+
+        let template = this.template == 1 ? templateCompact : templateCard
+        let zoneKey = this.zoneKey;
 
-      function getAd(el){
         try {
-          if (typeof _bsa !== 'undefined' && !parent.isAd ) {
+          if (typeof _bsa !== 'undefined' && !parent.isAd) {
             document.getElementById(adId).innerHTML = ''
-            // el.innerHTML = ''
-            _bsa.init('custom', zoneKey, 'placement:macosiconscom',{
-              target: '#'+adId,
+            _bsa.init('custom', zoneKey, 'placement:macosiconscom', {
+              target: '#' + adId,
               template: template
             });
-            // _bsa.callback = BSANativeCallback
           }
         } catch (error) {
           console.log(error);
         }
       }
-
-      getAd()
-
-      var attempts = 0       
-
-      function adExist(){
-        var adExists
-
-        setTimeout(() => {
-          try {
-            adExists = document.getElementById(adId).children.length
-          } catch (error) {
-          }
-
-          if (adExists > 0 || attempts >= 25) return;
-          // if (attempts >= 25) return;
-          if (adExists == 0) {
-            try {
-              attempts++
-              adExist()
-              getAd()
-            } catch (error) {
-              attempts++
-              adExist()
-              getAd()
-              parent.isAd = false
-            }
-          } else return
-
-        }, 800);
-      }
-
-      let el = document.getElementById(adId)
-
-      // function BSANativeCallback(a){
-      //   console.log(a.ads);
-      //   if (a.ads.length == 0) {
-      //     getAd(el)
-      //     parent.isAd = true
-      //   }
-      // }
-
-      if (!parent.isAd) {
-          try {
-            adExist()
-          } catch (error) {
-          }
-      }
-
-      setTimeout(() =>{
-        try {
-          let nodeList = document.querySelector("#"+adId).children
-          
-          for(let el in nodeList){
-            let newNodeList = document.querySelector("#"+adId).children
-
-            if(newNodeList.length > 1){
-              console.log(newNodeList.length);
-              el.parentNode.removeChild(el);
-            } else{
-              // console.log(newNodeList.length);
-              return
-            }
-
-          };
-        } catch (error) {
-          
-        }
-      }, 100)
-
     },
 
-    methods:{
-      adClick(){
-        window.plausible("adClick", {props: {
-          path: this.$route.name
-        }})
+    computed: {
+      // get the getter getRefreshAd
+      refreshAd() {
+        return this.$store.getters.getRefreshAd
       }
+
     }
 }
 </script>