feat: add sister site banner

Rule-34 · Mar 18, 2023 · 57dca7f · 57dca7f
1 parent 9a3a79a
commit 57dca7f
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 46 deletions.
diff --git a/components/layout/AnnouncementBanner.vue b/components/layout/AnnouncementBanner.vue
@@ -0,0 +1,84 @@
+<template>
+	<div
+		v-if="show"
+		class="relative isolate flex items-center gap-x-6 overflow-hidden bg-black py-2.5 px-6 sm:px-3.5 sm:before:flex-1"
+	>
+		<!-- Background -->
+		<svg
+			aria-hidden="true"
+			class="absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 w-[36.0625rem] -translate-y-1/2 transform-gpu blur-2xl"
+			viewBox="0 0 577 310"
+		>
+			<path
+				id="a906133b-f855-4023-a54c-38d70c72fe9c"
+				d="m142.787 168.697-75.331 62.132L.016 88.702l142.771 79.995 135.671-111.9c-16.495 64.083-23.088 173.257 82.496 97.291C492.935 59.13 494.936-54.366 549.339 30.385c43.523 67.8 24.892 159.548 10.136 196.946l-128.493-95.28-36.628 177.599-251.567-140.953Z"
+				fill="url(#be47b6c9-9c22-49b2-a209-168b52fa0ada)"
+				fill-opacity=".9"
+			/>
+			<defs>
+				<linearGradient
+					id="be47b6c9-9c22-49b2-a209-168b52fa0ada"
+					gradientUnits="userSpaceOnUse"
+					x1="614.778"
+					x2="-42.453"
+					y1="26.617"
+					y2="96.115"
+				>
+					<stop stop-color="#9089FC" />
+					<stop
+						offset="1"
+						stop-color="#FF80B5"
+					/>
+				</linearGradient>
+			</defs>
+		</svg>
+		<svg
+			aria-hidden="true"
+			class="absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 w-[36.0625rem] -translate-y-1/2 transform-gpu blur-2xl"
+			viewBox="0 0 577 310"
+		>
+			<use href="#a906133b-f855-4023-a54c-38d70c72fe9c" />
+		</svg>
+
+		<!-- Banner -->
+		<p class="text-sm leading-6 text-gray-100">
+			<a
+				href="https://hentaiporn.app/?utm_source=Rule34App&utm_medium=Banner"
+				rel="noopener"
+				target="_blank"
+			>
+				<strong class="font-semibold">New sister website:</strong> 120K+ high-quality Hentai images & videos,
+				lightning-fast, new content every 5 mins&nbsp;<span aria-hidden="true">&rarr;</span></a
+			>
+		</p>
+		<div class="flex flex-1 justify-end">
+			<button
+				class="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+				type="button"
+				@click="show = false"
+			>
+				<span class="sr-only">Dismiss</span>
+				<XIcon
+					aria-hidden="true"
+					class="icon h-5 w-5 text-gray-100"
+				/>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { XIcon } from 'vue-feather-icons'
+
+export default {
+	components: {
+		XIcon
+	},
+
+	data() {
+		return {
+			show: true
+		}
+	}
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,26 +1,28 @@
 <template>
-  <!-- Apply touch for showing menu and search -->
-  <div
-    v-touch="{
-      left: (e) => touchHandler('left', e),
-      right: (e) => touchHandler('right', e)
-    }"
-  >
-    <SideNavArea />
+	<!-- Apply touch for showing menu and search -->
+	<div
+		v-touch="{
+			left: (e) => touchHandler('left', e),
+			right: (e) => touchHandler('right', e)
+		}"
+	>
+		<AnnouncementBanner />
 
-    <transition name='sidenav'>
-      <SideNav v-if='isSideNavActive' />
-    </transition>
+		<SideNavArea />
 
-    <portal-target name='search' />
+		<transition name="sidenav">
+			<SideNav v-if="isSideNavActive" />
+		</transition>
 
-    <portal-target name='body' />
+		<portal-target name="search" />
 
-    <SupportPopUpManager />
+		<portal-target name="body" />
 
-    <!-- Layout content -->
-    <Nuxt />
-  </div>
+		<SupportPopUpManager />
+
+		<!-- Layout content -->
+		<Nuxt />
+	</div>
 </template>
 
 <script>
@@ -33,56 +35,56 @@ import NavigationMixin from '~/components/layout/navigation/NavigationMixin.js'
 import TouchHandlerMixin from '~/components/layout/navigation/sidenav/TouchHandlerMixin.js'
 
 export default {
-  directives: { Touch },
-
-  /**
-   * Warning:
-   * Some methods and variables are set by Mixins
-   */
-  mixins: [NavigationMixin, TouchHandlerMixin],
-
-  head() {
-    return {
-      // Define color theme based on settings
-      bodyAttrs: {
-        class: 'bg-darkGray-700'
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters('navigation', ['isSideNavActive']),
-    ...mapGetters('user', ['getUserSettings'])
-  }
+	directives: { Touch },
+
+	/**
+	 * Warning:
+	 * Some methods and variables are set by Mixins
+	 */
+	mixins: [NavigationMixin, TouchHandlerMixin],
+
+	head() {
+		return {
+			// Define color theme based on settings
+			bodyAttrs: {
+				class: 'bg-darkGray-700'
+			}
+		}
+	},
+
+	computed: {
+		...mapGetters('navigation', ['isSideNavActive']),
+		...mapGetters('user', ['getUserSettings'])
+	}
 }
 
 console.info(
-  '%cWe ❤︎ open source!',
-  'font-size:32px;font-weight:bold;letter-spacing:0.02em;color:hsl(205, 78%, 62%);background-color:white;padding:8px 16px;'
+	'%cWe ❤︎ open source!',
+	'font-size:32px;font-weight:bold;letter-spacing:0.02em;color:hsl(205, 78%, 62%);background-color:white;padding:8px 16px;'
 )
 console.info(
-  '%cContribute: https://redirect.r34.app/github\nJoin our discord: https://redirect.r34.app/discord',
-  'background-color:hsl(0, 0%, 7%);padding:4px 8px;font-size:16px;color:white;'
+	'%cContribute: https://redirect.r34.app/github\nJoin our discord: https://redirect.r34.app/discord',
+	'background-color:hsl(0, 0%, 7%);padding:4px 8px;font-size:16px;color:white;'
 )
 </script>
 
-<style lang='postcss'>
+<style lang="postcss">
 /* Transition */
 
 /* Initial state */
 .sidenav-enter,
 .sidenav-leave-to {
-  transform: translateX(-100vw);
+	transform: translateX(-100vw);
 }
 
 /* Toggled stated */
 .sidenav-enter-to {
-  transform: translateX(0px);
+	transform: translateX(0px);
 }
 
 /* Transition that is gonna be applied */
 .sidenav-enter-active,
 .sidenav-leave-active {
-  @apply transition-transform duration-300;
+	@apply transition-transform duration-300;
 }
 </style>