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>

nuxt.config.js

@@ -63,6 +63,10 @@ export default {
         async: true,
         defer: true,
       },
+      {
+        src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
+        async: true,
+      },
     ],
   },
 
@@ -159,7 +163,7 @@ export default {
     transpile: ['vue-tooltip', 'vue-notification'],
     styleResources: {
       scss: './assets/styles/injected.scss',
-    }
+    },
   },
   loading: {
     color: 'green',

pages/index.vue

@@ -261,6 +261,7 @@ export default {
 .hero {
   margin-left: 15%;
   width: 30%;
+  z-index: 1;
   h3 {
     font-size: 18px;
     font-weight: bolder;

pages/mod/_id/settings.vue

@@ -0,0 +1,91 @@
+<template>
+  <ModPage :mod="mod" :versions="versions" :members="members"> </ModPage>
+</template>
+
+<script>
+import axios from 'axios'
+import ModPage from '@/components/ModPage'
+
+export default {
+  components: { ModPage },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    const mod = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mod/${data.params.id}`,
+        config
+      )
+    ).data
+
+    const [members, allMembers, versions] = (
+      await Promise.all([
+        axios.get(`https://api.modrinth.com/api/v1/team/${mod.team}/members`),
+        axios.get(
+          `https://api.modrinth.com/api/v1/team/${mod.team}/members`,
+          config
+        ),
+        axios.get(
+          `https://api.modrinth.com/api/v1/versions?ids=${JSON.stringify(
+            mod.versions
+          )}`,
+          config
+        ),
+      ])
+    ).map((it) => it.data)
+
+    const [users, allUsers] = (
+      await Promise.all([
+        axios.get(
+          `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
+            members.map((it) => it.user_id)
+          )}`,
+          config
+        ),
+        axios.get(
+          `https://api.modrinth.com/api/v1/users?ids=${JSON.stringify(
+            allMembers.map((it) => it.user_id)
+          )}`,
+          config
+        ),
+      ])
+    ).map((it) => it.data)
+
+    users.forEach((it, index) => {
+      members[index].avatar_url = it.avatar_url
+      members[index].name = it.username
+    })
+
+    allUsers.forEach((it, index) => {
+      allMembers[index].avatar_url = it.avatar_url
+      allMembers[index].name = it.username
+      allMembers[index].accepted = members.find(
+        (it) => allMembers[index].user_id === it.user_id
+      )
+    })
+
+    return {
+      mod,
+      versions: versions.reverse(),
+      members,
+      allMembers,
+      allUsers,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.markdown-body {
+  padding: 1rem;
+  margin-bottom: var(--spacing-card-md);
+  background: var(--color-raised-bg);
+  border-radius: var(--size-rounded-card);
+}
+</style>

pages/mods.vue

@@ -64,7 +64,7 @@
         </section>
         <div class="results column-grow-4">
           <client-only>
-            <EthicalAd type="text" />
+            <EthicalAd type="text" ad-id="search" />
           </client-only>
           <SearchResult
             v-for="(result, index) in results"

pages/user/_id.vue

@@ -49,7 +49,7 @@
       </div>
       <div class="content">
         <client-only>
-          <EthicalAd />
+          <EthicalAd ad-id="profile" />
         </client-only>
         <div class="mods">
           <SearchResult