Switch to Google Adsense

components/DashboardPage.vue

@@ -26,9 +26,6 @@
             Settings
           </nuxt-link>
         </div>
-        <client-only>
-          <EthicalAd type="image" ad-id="dashboard" />
-        </client-only>
         <m-footer class="footer" />
       </div>
       <div class="content">

components/EthicalAd.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="!showAlt"
-      :id="adId"
-      class="ethical-ad"
-      data-ea-publisher="modrinth-com"
-      :data-ea-type="type"
-      data-ea-manual="true"
-    />
-    <div v-else class="alt">
-      <p>
-        A privacy-focused ad used to fund this site would've been here. Please
-        disable your content blocker to support Modrinth and it's authors.
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EthicalAd',
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-    },
-    adId: {
-      type: String,
-      default: 'none',
-    },
-  },
-  data() {
-    return {
-      showAlt: false,
-    }
-  },
-  mounted() {
-    try {
-      // eslint-disable-next-line no-undef
-      if (typeof ethicalads === 'undefined') {
-        this.$notify({
-          group: 'ads',
-          title: 'Please disable your Content Blocker',
-          text:
-            'Modrinth uses privacy-focused ads, from EthicalAds. Ads are the only way that our site is able to pay modders and support itself. Our ads are non-intrusive and minimal, and we only have one per page. We can assure you that none of your data is sold or used for tracking purposes.',
-          type: 'error',
-        })
-        this.showAlt = true
-      } else {
-        const element = document.getElementsByClassName('ethical-ad')[0]
-        element.className = 'ethical-ad'
-        element.innerHTML = ''
-        // eslint-disable-next-line no-undef
-        ethicalads.load()
-        element.className = 'ethical-ad loaded ' + this.$colorMode.preference
-      }
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err)
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-[data-ea-type='text'] {
-  min-height: 70px;
-}
-[data-ea-type='image'] {
-  margin: auto 10px;
-  min-height: 260px;
-}
-.alt {
-  font-size: 14px;
-  border-radius: var(--size-rounded-sm);
-  background-color: var(--color-raised-bg);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  padding: 0.7em 1em;
-  margin: 1em 0 2em 0;
-}
-</style>

components/ModPage.vue

@@ -20,9 +20,13 @@
             </p>
           </div>
         </div>
-        <client-only>
-          <EthicalAd :ad-id="mod.id" type="text" />
-        </client-only>
+        <adsbygoogle
+          ad-slot="7510690716"
+          :page-url="
+            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
+          "
+          ad-format="horizontal"
+        />
         <div class="mod-navigation">
           <div class="tabs">
             <nuxt-link
@@ -75,6 +79,13 @@
         </div>
         <div class="mod-content">
           <slot />
+          <adsbygoogle
+            ad-slot="7510690716"
+            :page-url="
+              'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
+            "
+            ad-format="horizontal"
+          />
         </div>
       </div>
       <section class="mod-info">
@@ -266,6 +277,14 @@
             </a>
           </div>
         </div>
+        <adsbygoogle
+          ad-slot="7510690716"
+          :ad-style="{
+            display: 'inline-block',
+            width: '100%',
+            height: '240px',
+          }"
+        />
         <m-footer class="footer" />
       </section>
     </div>
@@ -273,8 +292,6 @@
 </template>
 
 <script>
-import EthicalAd from '@/components/EthicalAd'
-
 import Categories from '@/components/Categories'
 import MFooter from '@/components/MFooter'
 
@@ -298,7 +315,6 @@ export default {
   components: {
     MFooter,
     Categories,
-    EthicalAd,
     ExternalIcon,
     ForgeIcon,
     FabricIcon,