docs: use ethical ads

logaretm · Feb 27, 2024 · cdf0a80 · cdf0a80
1 parent 504a807
commit cdf0a80
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 87 deletions.
diff --git a/docs/src/components/Ad.vue b/docs/src/components/Ad.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="!hasError" id="ad" :class="{ 'placement-home': placement === 'home-page' }"></div>
+  <div v-if="!hasError" id="ad" :class="{ 'placement-home': placement === 'home-page' }">
+    <!-- Show an image ad -->
+    <div data-ea-publisher="vee-validatelogaretmcom" data-ea-type="image"></div>
+  </div>
+
   <div v-else id="ad" class="error">
     <div class="p-4 flex flex-col">
       <span class="font-bold font-display">🙏 Enable Ads</span>
@@ -47,8 +51,7 @@ const hasError = ref(false);
 
 function loadScript() {
   const script = document.createElement('script');
-  script.src = '//cdn.carbonads.com/carbon.js?serve=CE7DKKQ7&placement=vee-validatelogaretmcom';
-  script.id = '_carbonads_js';
+  script.src = 'https://media.ethicalads.io/media/client/ethicalads.min.js';
 
   const el = document.querySelector('#ad');
   el?.appendChild(script);
@@ -64,106 +67,48 @@ onMounted(loadScript);
 
 <style lang="postcss">
 #ad {
-  @apply static text-gray-400 mt-4;
+  @apply static text-gray-400 mt-4 hidden md:block;
   z-index: 1;
 
-  #carbonads {
-    display: block;
-    overflow: hidden;
-    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.05);
-    border-radius: 4px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
-      Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    max-width: 300px;
-    font-size: 12px;
-    background-color: #fff;
-  }
-
-  #carbonads a {
-    text-decoration: none;
-  }
-
-  #carbonads span {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .carbon-img img {
-    display: block;
-    @apply mx-auto;
-  }
-
-  .carbon-text {
-    @apply p-2 block float-left text-left;
-    max-width: calc(100% - 130px - 1em);
-    color: currentColor;
-    padding-bottom: 20px;
-  }
-
-  .carbon-poweredby {
-    @apply p-2 absolute bottom-0 block uppercase;
-    left: 142px;
-    bottom: 0;
-    font-size: 10px;
-    color: currentColor;
-    font-weight: 500;
-    line-height: 1;
-    letter-spacing: 1px;
-  }
-}
-
-@screen lg {
-  #ad {
-    @apply rounded-md ml-0;
-    left: unset;
-    float: unset;
-    width: 160px;
-    z-index: 19;
-    background-color: #fff;
-    font-size: 13px;
-    #carbonads {
-      padding-top: 15px;
-      max-width: 100%;
-    }
+  .ea-placement {
+    @apply rounded-md overflow-hidden bg-zinc-200;
 
-    #carbonads span {
-      @apply flex-col;
-    }
+    .ea-content {
+      @apply m-0 rounded-none;
 
-    .carbon-img {
-      margin: 0;
-    }
+      a {
+        @apply text-zinc-500;
+      }
 
-    #carbonads,
-    .carbon-wrap {
-      display: flex;
-      flex-direction: column;
+      strong {
+        @apply text-accent-900;
+      }
     }
 
-    .carbon-text {
-      margin-top: 10px;
-      max-width: 100%;
-    }
-
-    .carbon-poweredby {
-      position: static;
-      margin-top: 10px;
+    .ea-callout {
+      @apply m-0 py-2 px-4 text-center bg-zinc-300 rounded-none;
     }
+  }
 
-    &.placement-home {
-      left: unset;
-    }
+  &.error {
+    width: 180px;
   }
 }
 
 .dark {
   #ad {
-    #carbonads {
+    .ea-placement {
       @apply bg-zinc-800;
     }
 
+    .ea-callout {
+      @apply bg-zinc-950;
+
+      a {
+        @apply text-zinc-600;
+      }
+    }
+
     &.error {
       @apply bg-zinc-800;
     }

diff --git a/docs/src/styles/home.css b/docs/src/styles/home.css
@@ -18,5 +18,9 @@
 }
 
 #ad {
-  @apply !fixed bottom-4 right-4;
+  @apply hidden;
+
+  @screen md {
+    @apply block !fixed bottom-4 right-4;
+  }
 }