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;

apps/frontend/src/pages/collection/[id].vue

@@ -248,10 +248,9 @@
             </div>
           </template>
         </div>
+        <AdPlaceholder />
       </div>
       <div class="normal-page__content">
-        <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
-
         <nav class="navigation-card">
           <NavRow
             :links="[
@@ -380,7 +379,7 @@ import {
   LibraryIcon,
   BoxIcon,
 } from "@modrinth/assets";
-import { PopoutMenu, FileInput, DropdownSelect, Promotion, Avatar, Button } from "@modrinth/ui";
+import { PopoutMenu, FileInput, DropdownSelect, Avatar, Button } from "@modrinth/ui";
 
 import WorldIcon from "assets/images/utils/world.svg";
 import UpToDate from "assets/images/illustrations/up_to_date.svg";
@@ -388,6 +387,7 @@ import { addNotification } from "~/composables/notifs.js";
 import ModalConfirm from "~/components/ui/ModalConfirm.vue";
 import NavRow from "~/components/ui/NavRow.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
+import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 
 const vintl = useVIntl();
 const { formatMessage } = vintl;

apps/frontend/src/pages/organization/[id].vue

@@ -109,6 +109,8 @@
           </div>
         </div>
 
+        <AdPlaceholder />
+
         <div class="creator-list universal-card">
           <div class="title-and-link">
             <h3>Members</h3>
@@ -129,7 +131,6 @@
     </div>
     <div v-if="!routeHasSettings" class="normal-page__content">
       <ModalCreation ref="modal_creation" :organization-id="organization.id" />
-      <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
       <div v-if="isInvited" class="universal-card information invited">
         <h2>Invitation to join {{ organization.name }}</h2>
         <p>You have been invited to join {{ organization.name }}.</p>
@@ -228,13 +229,14 @@ import {
   CheckIcon,
   XIcon,
 } from "@modrinth/assets";
-import { Avatar, Breadcrumbs, Promotion } from "@modrinth/ui";
+import { Avatar, Breadcrumbs } from "@modrinth/ui";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
 import NavRow from "~/components/ui/NavRow.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
 import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
+import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 
 import OrganizationIcon from "~/assets/images/utils/organization.svg?component";
 import DownloadIcon from "~/assets/images/utils/download.svg?component";

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -134,7 +134,6 @@
       </section>
     </aside>
     <section class="normal-page__content">
-      <Promotion v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0)" :external="false" />
       <div class="card search-controls">
         <div class="search-filter-container">
           <button
@@ -257,7 +256,7 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { Promotion, Pagination, ScrollablePanel, Checkbox } from "@modrinth/ui";
+import { Pagination, ScrollablePanel, Checkbox } from "@modrinth/ui";
 import { BanIcon, DropdownIcon, CheckIcon, FilterXIcon } from "@modrinth/assets";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
@@ -283,7 +282,6 @@ const route = useNativeRoute();
 
 const cosmetics = useCosmetics();
 const tags = useTags();
-const auth = await useAuth();
 
 const query = ref("");
 const facets = ref([]);

apps/frontend/src/public/inmobi.js

@@ -0,0 +1,160 @@
+(function () {
+  var host = "modrinth.com";
+  // var host = window.location.hostname;
+  var element = document.createElement("script");
+  var firstScript = document.getElementsByTagName("script")[0];
+  var url = "https://cmp.inmobi.com".concat(
+    "/choice/",
+    "GANCBjEfRH5Fe",
+    "/",
+    host,
+    "/choice.js?tag_version=V3",
+  );
+  var uspTries = 0;
+  var uspTriesLimit = 3;
+  element.async = true;
+  element.type = "text/javascript";
+  element.src = url;
+
+  firstScript.parentNode.insertBefore(element, firstScript);
+
+  function makeStub() {
+    var TCF_LOCATOR_NAME = "__tcfapiLocator";
+    var queue = [];
+    var win = window;
+    var cmpFrame;
+
+    function addFrame() {
+      var doc = win.document;
+      var otherCMP = !!win.frames[TCF_LOCATOR_NAME];
+
+      if (!otherCMP) {
+        if (doc.body) {
+          var iframe = doc.createElement("iframe");
+
+          iframe.style.cssText = "display:none";
+          iframe.name = TCF_LOCATOR_NAME;
+          doc.body.appendChild(iframe);
+        } else {
+          setTimeout(addFrame, 5);
+        }
+      }
+      return !otherCMP;
+    }
+
+    function tcfAPIHandler() {
+      var gdprApplies;
+      var args = arguments;
+
+      if (!args.length) {
+        return queue;
+      } else if (args[0] === "setGdprApplies") {
+        if (args.length > 3 && args[2] === 2 && typeof args[3] === "boolean") {
+          gdprApplies = args[3];
+          if (typeof args[2] === "function") {
+            args[2]("set", true);
+          }
+        }
+      } else if (args[0] === "ping") {
+        var retr = {
+          gdprApplies: gdprApplies,
+          cmpLoaded: false,
+          cmpStatus: "stub",
+        };
+
+        if (typeof args[2] === "function") {
+          args[2](retr);
+        }
+      } else {
+        if (args[0] === "init" && typeof args[3] === "object") {
+          args[3] = Object.assign(args[3], { tag_version: "V3" });
+        }
+        queue.push(args);
+      }
+    }
+
+    function postMessageEventHandler(event) {
+      var msgIsString = typeof event.data === "string";
+      var json = {};
+
+      try {
+        if (msgIsString) {
+          json = JSON.parse(event.data);
+        } else {
+          json = event.data;
+        }
+      } catch (ignore) {}
+
+      var payload = json.__tcfapiCall;
+
+      if (payload) {
+        window.__tcfapi(
+          payload.command,
+          payload.version,
+          function (retValue, success) {
+            var returnMsg = {
+              __tcfapiReturn: {
+                returnValue: retValue,
+                success: success,
+                callId: payload.callId,
+              },
+            };
+            if (msgIsString) {
+              returnMsg = JSON.stringify(returnMsg);
+            }
+            if (event && event.source && event.source.postMessage) {
+              event.source.postMessage(returnMsg, "*");
+            }
+          },
+          payload.parameter,
+        );
+      }
+    }
+
+    while (win) {
+      try {
+        if (win.frames[TCF_LOCATOR_NAME]) {
+          cmpFrame = win;
+          break;
+        }
+      } catch (ignore) {}
+
+      if (win === window.top) {
+        break;
+      }
+      win = win.parent;
+    }
+    if (!cmpFrame) {
+      addFrame();
+      win.__tcfapi = tcfAPIHandler;
+      win.addEventListener("message", postMessageEventHandler, false);
+    }
+  }
+
+  makeStub();
+
+  var uspStubFunction = function () {
+    var arg = arguments;
+    if (typeof window.__uspapi !== uspStubFunction) {
+      setTimeout(function () {
+        if (typeof window.__uspapi !== "undefined") {
+          window.__uspapi.apply(window.__uspapi, arg);
+        }
+      }, 500);
+    }
+  };
+
+  var checkIfUspIsReady = function () {
+    uspTries++;
+    if (window.__uspapi === uspStubFunction && uspTries < uspTriesLimit) {
+      console.warn("USP is not accessible");
+    } else {
+      clearInterval(uspInterval);
+    }
+  };
+
+  if (typeof window.__uspapi === "undefined") {
+    window.__uspapi = uspStubFunction;
+    var uspInterval = setInterval(checkIfUspIsReady, 6000);
+  }
+})();