Added mobile friendly ads & ads (#161)

* Fix spacing issues on mobile

* Added back linting on modules directory.
Please don't look at the dirty fixes :x

* Add support for responsive ads.

* Add lazy loading of images.

components/ads/Advertisement.vue

@@ -1,25 +1,90 @@
 <template>
   <div class="ad-wrapper">
-    <div class="ad">
-      <GptAd :ad-unit="adUnit" :size="size" />
+    <div v-if="displayed" class="ad">
+      <GptAd
+        :key="format.adUnit"
+        ref="ad_slot"
+        :ad-unit="format.adUnit"
+        :size="format.size"
+        :is-responsive="true"
+      />
     </div>
   </div>
 </template>
 
 <script>
+const sizes = {
+  banner: {
+    adUnit: 'banner',
+    size: '728x90,468x60',
+  },
+  square: {
+    adUnit: 'square',
+    size: '250x250,200x200',
+  },
+}
+
 /* eslint-disable no-undef */
 export default {
   name: 'Advertisement',
   props: {
-    size: {
+    type: {
       type: String,
       required: true,
     },
-    adUnit: {
+    smallScreen: {
       type: String,
       required: true,
     },
   },
+  data() {
+    return {
+      format: null,
+      displayed: false,
+      onSmallScreen: false,
+      windowResizeListenerDebounce: null,
+    }
+  },
+
+  mounted() {
+    // Register hook on resize
+    window.addEventListener('resize', this.handleWindowResize)
+
+    // Find ad
+    if (!(this.type in sizes)) {
+      console.error('Ad type not recognized.')
+      return
+    }
+    // Set the informations
+    this.format = sizes[this.type]
+    this.displayed = true
+    if (process.browser) {
+      this.handleWindowResize()
+    }
+  },
+  methods: {
+    handleWindowResize() {
+      clearTimeout(this.windowResizeListenerDebounce)
+      this.windowResizeListenerDebounce = setTimeout(() => {
+        if (window.innerWidth > 1024) {
+          if (this.onSmallScreen) {
+            // Return everything to normal size
+            this.onSmallScreen = false
+            this.format = sizes[this.type]
+            this.displayed = true
+          }
+          return
+        }
+        this.onSmallScreen = true
+        if (this.smallScreen === 'destroy') {
+          this.displayed = false
+        } else if (this.smallScreen in sizes) {
+          console.log('Changing ad size to ', this.smallScreen)
+          this.format = sizes[this.smallScreen]
+        }
+      }, 300)
+    },
+  },
 }
 </script>
 

components/layout/ModPage.vue

@@ -65,8 +65,8 @@
         </div>
         <Advertisement
           v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          ad-unit="banner"
-          size="728x90,468x60"
+          type="banner"
+          small-screen="square"
         />
         <div class="mod-navigation">
           <div class="tabs">
@@ -130,11 +130,6 @@
         </div>
         <div class="mod-content">
           <slot />
-          <Advertisement
-            v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-            ad-unit="banner"
-            size="728x90,468x60"
-          />
         </div>
       </div>
       <section class="mod-info">
@@ -331,8 +326,8 @@
         </div>
         <Advertisement
           v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          ad-unit="square"
-          size="250x250,200x200"
+          type="square"
+          small-screen="destroy"
         />
         <m-footer class="footer" />
       </section>

components/ui/ProjectCard.vue

@@ -6,6 +6,7 @@
           <img
             :src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
             :alt="name"
+            loading="lazy"
           />
         </nuxt-link>
       </div>