docs: ad fallback

Author: logaretm

docs/src/components/Ad.vue

@@ -1,21 +1,62 @@
 <template>
-  <div id="ad" :class="{ 'placement-home': placement === 'home-page' }"></div>
+  <div v-if="!hasError" id="ad" :class="{ 'placement-home': placement === 'home-page' }"></div>
+  <div v-else id="ad" class="error">
+    <div class="p-4 flex flex-col">
+      <span class="font-bold font-display">🙏 Enable Ads</span>
+      <span class="mt-2"> Please enable ads on your browser for this website. </span>
+      <span class="mt-1"> Ads are a funding source to this project. </span>
+
+      <div class="mt-2 or-fund-it">
+        <span class="mx-1 whitespace-nowrap">or consider</span>
+      </div>
+
+      <a
+        target="_blank"
+        rel="noopener"
+        href="https://github.com/sponsors/logaretm"
+        class="mt-2 bg-pink-600 py-1 px-2 text-white font-medium flex items-center justify-center font-display rounded group hover:bg-pink-700"
+      >
+        <svg
+          class="stroke-current transform transition duration-200 group-hover:scale-110 w-5 h-5 mr-1"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+          ></path>
+        </svg>
+
+        Sponsor
+      </a>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
 defineProps<{
   placement?: 'content' | 'home-page';
 }>();
 
+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';
 
   const el = document.querySelector('#ad');
   el?.appendChild(script);
+  script.onerror = error => {
+    if (navigator.onLine) {
+      hasError.value = true;
+    }
+  };
 }
 
 onMounted(loadScript);
@@ -122,6 +163,22 @@ onMounted(loadScript);
     #carbonads {
       @apply bg-zinc-800;
     }
+
+    &.error {
+      @apply bg-zinc-800;
+    }
+  }
+}
+
+.or-fund-it {
+  @apply text-zinc-500 flex items-center space-x-2;
+
+  &::before,
+  &::after {
+    height: 1px;
+    width: 100%;
+    content: '';
+    @apply flex-shrink bg-zinc-500;
   }
 }
 </style>