docs(ads): update to ethical ads (#1224)

docs/.vuepress/theme/components/CodeFund.vue

@@ -1,43 +0,0 @@
-<script>
-export default {
-  render (h) {
-    return h('div', {attrs: {id: 'codefund'}});
-  },
-  mounted () {
-    this.load();
-  },
-  watch: {
-    '$route' (to, from) {
-      if (
-        to.path !== from.path
-        // Only reload if the ad has been loaded
-        // otherwise it's possible that the script is appended but
-        // the ads are not loaded yet. This would result in duplicated ads.
-        && this.$el.querySelector('#cf')
-      ) {
-        this.$el.innerHTML = '';
-        this.load();
-      }
-    },
-  },
-  methods: {
-    load () {
-
-      // const template = 'default';
-      // const template = 'vertical';
-      // const template = 'float-with-close';
-      // const template = 'image-only';
-      // const template = 'image-centered';
-      // const template = 'square';
-      const template = 'centered';
-      // const template = 'bottom-bar';
-
-      const s = document.createElement('script');
-      s.id = '_codefund_js';
-      s.src = `//codefund.app/properties/193/funder.js?template=${template}`;
-      s.async = 'async';
-      this.$el.appendChild(s);
-    },
-  },
-};
-</script>

docs/.vuepress/theme/components/EthicalAds.vue

@@ -0,0 +1,54 @@
+<script>
+/**
+ * @see https://ethical-ad-client.readthedocs.io/en/latest/
+ */
+export default {
+  render(h) {
+    return h("div", {
+      attrs: {
+        id: "ads",
+        "data-ea-publisher": "vue-select",
+        "data-ea-type": "image"
+      },
+      class: "flat horizontal"
+    });
+  },
+  mounted() {
+    this.load();
+  },
+  watch: {
+    $route(to, from) {
+      if (
+        to.path !== from.path &&
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        [...this.$el.classList].includes("loaded")
+      ) {
+        this.$el.innerHTML = "";
+        this.$el.classList.remove("loaded");
+        this.load();
+      }
+    }
+  },
+  methods: {
+    load() {
+      const s = document.createElement("script");
+      s.id = "_ads_js";
+      s.src = `https://media.ethicalads.io/media/client/ethicalads.min.js`;
+      s.async = "async";
+      this.$el.appendChild(s);
+    }
+  }
+};
+</script>
+
+<style scoped>
+#ads {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 264px;
+}
+</style>

docs/.vuepress/theme/layouts/Layout.vue

@@ -1,27 +1,26 @@
 <template>
   <ParentLayout>
-    <CodeFund slot="sidebar-top"/>
+    <EthicalAds slot="sidebar-top" />
   </ParentLayout>
 </template>
 
 <script>
-import ParentLayout from '@parent-theme/layouts/Layout.vue'
+import ParentLayout from "@parent-theme/layouts/Layout.vue";
-import CodeFund from '../components/CodeFund.vue'
+import EthicalAds from "../components/EthicalAds.vue";
 
 export default {
   components: {
     ParentLayout,
-    CodeFund
+    EthicalAds
   }
-}
+};
 </script>
 
 <style>
-  #codefund {
+#ads {
-    border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid #eaecef;
-    min-height: 115px;
+}
-  }
+#ads + .sidebar-links {
-  #codefund + .sidebar-links {
+  padding-top: 1rem;
-    padding-top: 1rem;
+}
-  }
 </style>