Update Ad Placement, fix version sorting

components/EthicalAd.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    :class="$colorMode.value"
+    data-ea-publisher="modrinth-com"
+    :data-ea-type="type"
+    data-ea-manual="true"
+  />
+</template>
+
+<script>
+export default {
+  name: 'EthicalAd',
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+    },
+  },
+  mounted() {
+    try {
+      // eslint-disable-next-line no-undef
+      ethicalads.load()
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err)
+    }
+  },
+}
+</script>
+
+<style scoped>
+[data-ea-type='image'] {
+  margin: auto 10px;
+}
+</style>

components/ModPage.vue

@@ -22,7 +22,6 @@
           <p>{{ mod.description }}</p>
         </div>
       </div>
-      <div data-ea-publisher="modrinth-com" data-ea-type="text" />
       <div class="mod-navigation">
         <nuxt-link :to="'/mod/' + mod.id">
           <InfoIcon />
@@ -81,7 +80,7 @@
           </div>
         </div>
       </div>
-      <div>
+      <div v-if="versions.length > 0">
         <h3>Featured Versions</h3>
         <div
           v-for="version in versions"
@@ -127,12 +126,15 @@
             <DownloadIcon />
           </nuxt-link>
         </div>
+        <EthicalAd type="image" />
       </div>
     </section>
   </div>
 </template>
 
 <script>
+import EthicalAd from '@/components/EthicalAd'
+
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
@@ -145,6 +147,7 @@ import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
 export default {
   name: 'ModPage',
   components: {
+    EthicalAd,
     ExternalIcon,
     InfoIcon,
     VersionIcon,

pages/dashboard/projects.vue

@@ -54,14 +54,16 @@
         </tr>
       </tbody>
     </table>
-    <div data-ea-publisher="modrinth-com" data-ea-type="text" />
+    <EthicalAd />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import EthicalAd from '@/components/EthicalAd'
 
 export default {
+  components: { EthicalAd },
   async fetch() {
     try {
       let res = await axios.get(

pages/mods.vue

@@ -54,7 +54,7 @@
         ></pagination>
       </section>
       <div class="results column-grow-4">
-        <div data-ea-publisher="modrinth-com" data-ea-type="text" />
+        <EthicalAd type="text" />
         <SearchResult
           v-for="(result, index) in results"
           :id="result.mod_id"
@@ -261,6 +261,7 @@ import SearchResult from '@/components/ModResult'
 import Pagination from '@/components/Pagination'
 import SearchFilter from '@/components/SearchFilter'
 
+import EthicalAd from '@/components/EthicalAd'
 import TechCategory from '~/assets/images/categories/tech.svg?inline'
 import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
 import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
@@ -280,6 +281,7 @@ import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 export default {
   auth: false,
   components: {
+    EthicalAd,
     SearchResult,
     Pagination,
     Multiselect,
@@ -345,7 +347,7 @@ export default {
     async fillInitialVersions() {
       try {
         const res = await axios.get(
-          'https://api.modrinth.com/api/v1/tag/game_version'
+          'https://api.modrinth.com/api/v1/tag/game_version?type=release'
         )
 
         this.versions = res.data