Aditude integration (#2184)

* Aditude integration

* remove diff

* remove unused vars

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="ad-parent mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
+  <div
+    v-if="!auth.user || isPermission(auth.user.badges, 1 << 0)"
+    class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised"
+  >
     <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
       <p class="m-0 text-2xl font-bold text-contrast">90% of ad revenue goes to creators</p>
       <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
@@ -10,12 +13,108 @@
         <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
       </nuxt-link>
     </div>
+    <div
+      class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
+    >
+      <div id="modrinth-rail-1" />
+    </div>
   </div>
 </template>
-<script setup lang="ts">
+<script setup>
 import { ChevronRightIcon } from "@modrinth/assets";
+
+useHead({
+  script: [
+    {
+      src: "https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js",
+      async: true,
+    },
+    {
+      src: "/inmobi.js",
+      async: true,
+    },
+  ],
+  link: [
+    {
+      rel: "preload",
+      as: "script",
+      href: "https://www.googletagservices.com/tag/js/gpt.js",
+    },
+  ],
+});
+
+const auth = await useAuth();
+
+onMounted(() => {
+  window.tude = window.tude || { cmd: [] };
+  tude.cmd.push(function () {
+    tude.refreshAdsViaDivMappings([
+      {
+        divId: "modrinth-rail-1",
+        baseDivId: "pb-slot-square-2",
+      },
+    ]);
+  });
+});
 </script>
-<style lang="scss" scoped>
+<style>
+iframe[id^="google_ads_iframe"] {
+  color-scheme: normal;
+  background: transparent;
+}
+
+#qc-cmp2-ui {
+  background: var(--color-raised-bg);
+  border-radius: var(--radius-lg);
+  color: var(--color-base);
+}
+
+#qc-cmp2-ui::before {
+  background: var(--color-raised-bg);
+}
+
+#qc-cmp2-ui::after {
+  background: var(--color-raised-bg);
+}
+
+#qc-cmp2-ui button[mode="primary"] {
+  background: var(--color-brand);
+  color: var(--color-accent-contrast);
+  border-radius: var(--radius-lg);
+  border: none;
+}
+
+#qc-cmp2-ui button[mode="secondary"] {
+  background: var(--color-button-bg);
+  color: var(--color-base);
+  border-radius: var(--radius-lg);
+  border: none;
+}
+
+#qc-cmp2-ui button[mode="link"] {
+  color: var(--color-link);
+}
+
+#qc-cmp2-ui h2 {
+  color: var(--color-contrast);
+  font-size: 1.5rem;
+}
+
+#qc-cmp2-ui div,
+#qc-cmp2-ui li,
+#qc-cmp2-ui strong,
+#qc-cmp2-ui p,
+#qc-cmp2-ui .qc-cmp2-list-item-title,
+#qc-cmp2-ui .qc-cmp2-expandable-info {
+  color: var(--color-base);
+  font-family: var(--font-standard);
+}
+
+#qc-cmp2-ui .qc-cmp2-toggle[aria-checked="true"] {
+  background-color: var(--color-brand);
+  border: 1px solid var(--color-brand);
+}
+
 @media (max-width: 1024px) {
   .ad-parent {
     display: none;