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

<template>
	<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
		<nuxt-link
			:to="flags.enableMedalPromotion ? '/servers?plan&ref=medal' : '/servers'"
			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
		>
			<img
				:src="`https://cdn-raw.modrinth.com/${flags.enableMedalPromotion ? 'medal-modrinth-servers' : 'modrinth-servers-placeholder'}-light.webp`"
				alt="Host your next server with Modrinth Servers"
				class="light-image hidden rounded-[inherit]"
			/>
			<img
				:src="`https://cdn-raw.modrinth.com/${flags.enableMedalPromotion ? 'medal-modrinth-servers' : 'modrinth-servers-placeholder'}-dark.webp`"
				alt="Host your next server with Modrinth Servers"
				class="dark-image rounded-[inherit]"
			/>
		</nuxt-link>
		<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>
const flags = useFeatureFlags()

useHead({
	script: [
		// {
		//   // Clean.io
		//   src: "https://cadmus.script.ac/d14pdm1b7fi5kh/script.js",
		// },
		{
			// Aditude
			src: 'https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js',
			async: true,
		},
		{
			// Optima
			src: 'https://bservr.com/o.js?uid=8118d1fdb2e0d6f32180bd27',
			async: true,
		},
		{
			src: '/inmobi.js',
			async: true,
		},
	],
	link: [
		{
			rel: 'preload',
			as: 'script',
			href: 'https://www.googletagservices.com/tag/js/gpt.js',
		},
	],
})

onMounted(() => {
	window.tude = window.tude || { cmd: [] }
	window.Raven = window.Raven || { cmd: [] }

	window.Raven.cmd.push(({ config }) => {
		config.setCustom({
			param1: 'web',
		})
	})

	tude.cmd.push(function () {
		tude.refreshAdsViaDivMappings([
			{
				divId: 'modrinth-rail-1',
				baseDivId: 'pb-slot-square-2',
				targeting: {
					location: 'web',
				},
			},
		])
	})
})
</script>
<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;
	}
}
</style>

<style lang="scss" scoped>
.light,
.light-mode {
	.dark-image {
		display: none;
	}

	.light-image {
		display: block;
	}
}
</style>