Re-add EthicalAds

components/DashboardPage.vue

@@ -22,10 +22,10 @@
             Settings
           </nuxt-link>
         </div>
-        <m-footer class="footer" />
         <client-only>
-          <EthicalAd type="image" />
+          <EthicalAd type="image" ad-id="dashboard" />
         </client-only>
+        <m-footer class="footer" />
       </div>
       <div class="content">
         <slot />
@@ -59,4 +59,8 @@ export default {
     font-weight: var(--font-weight-extrabold);
   }
 }
+
+.footer {
+  padding-top: 0;
+}
 </style>

components/EthicalAd.vue

@@ -1,11 +1,82 @@
 <template>
-  <div></div>
+  <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 scoped></style>
+<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

@@ -21,7 +21,7 @@
           </div>
         </div>
         <client-only>
-          <EthicalAd type="text" />
+          <EthicalAd :ad-id="mod.id" type="text" />
         </client-only>
         <div class="mod-navigation">
           <div class="tabs">
@@ -69,6 +69,16 @@
             >
               Edit
             </nuxt-link>
+            <nuxt-link
+              v-if="
+                this.$auth.loggedIn &&
+                members.find((x) => x.user_id === this.$auth.user.id)
+              "
+              :to="'/mod/' + mod.id + '/settings'"
+              class="tab"
+            >
+              Settings
+            </nuxt-link>
             <div class="filler" />
           </div>
         </div>