feat: create advertisements

Rule-34 · Mar 29, 2023 · 8a56df5 · 8a56df5
1 parent cf323d7
commit 8a56df5
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 7 deletions.
diff --git a/components/pages/posts/Advertisement.vue b/components/pages/posts/Advertisement.vue
@@ -0,0 +1,56 @@
+<template>
+	<figure class="material-container advertisement">
+		<!-- -->
+
+		<!-- Media -->
+		<a
+			:href="advertisement.link"
+			rel="noopener nofollow"
+			target="_blank"
+		>
+			<img
+				:src="advertisement.media"
+				alt="Advertisement"
+			/>
+		</a>
+
+		<!-- Body -->
+		<figcaption class="whitespace-normal px-1 py-1.5 text-center text-sm text-gray-300">
+			Get
+			<NuxtLink
+				class="link"
+				to="/premium"
+				>Premium<!----></NuxtLink
+			><!---->: No ads + exclusive features!
+		</figcaption>
+	</figure>
+</template>
+
+<script>
+const ADVERTISEMENTS = [
+	// Premium
+	{
+		media: '',
+		link: '/premium'
+	},
+	// HentaiPorn
+	{
+		media: '',
+		link: 'https://hentaiporn.app/?utm_source=R34App&utm_medium=Advertisement'
+	}
+]
+
+export default {
+	name: 'Advertisement',
+
+	data() {
+		return {
+			advertisement: null
+		}
+	},
+
+	beforeMount() {
+		this.advertisement = ADVERTISEMENTS[Math.floor(Math.random() * ADVERTISEMENTS.length)]
+	}
+}
+</script>
diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -1,6 +1,6 @@
 <template>
 	<figure class="material-container">
-		<!-- Media -->
+		<!-- Error -->
 		<template v-if="error.show">
 			<Error
 				:error-data="error.message"
@@ -18,6 +18,7 @@
 			</Error>
 		</template>
 
+		<!-- Media -->
 		<template v-else-if="isImage">
 			<!-- Fix for weird space below button -->
 			<div class="flex overflow-hidden">
@@ -53,6 +54,7 @@
 			</div>
 		</template>
 
+		<!-- Media -->
 		<template v-else-if="isVideo">
 			<div
 				v-intersect="{

diff --git a/pages/index.vue b/pages/index.vue
@@ -31,12 +31,22 @@
 		<main class="flex min-h-full flex-auto flex-col space-y-4 pb-4">
 			<ul class="flex-auto space-y-4">
 				<template v-if="getPosts.length">
-					<li
-						v-for="POST in getPosts"
-						:key="POST.id"
-					>
-						<Post :post="POST" />
-					</li>
+					<!--          -->
+
+					<template v-for="(POST, index) in getPosts">
+						<!--            -->
+
+						<li :key="POST.id">
+							<Post :post="POST" />
+						</li>
+
+						<!-- Every 5 posts -->
+						<template v-if="!isUserPremium && index !== 0 && index % 5 === 0">
+							<li>
+								<Advertisement />
+							</li>
+						</template>
+					</template>
 				</template>
 
 				<template v-else-if="$fetchState.pending">