Added georestriction with SFW mode.

components/actors/tile.vue

@@ -11,7 +11,7 @@
 				class="avatar-link no-link"
 			>
 				<img
-					v-if="actor.avatar"
+					v-if="actor.avatar && !restriction"
 					:src="getPath(actor.avatar, 'thumbnail')"
 					:style="{ 'background-image': `url(${getPath(actor.avatar, 'lazy')})` }"
 					loading="lazy"
@@ -103,7 +103,7 @@ const props = defineProps({
 });
 
 const pageContext = inject('pageContext');
-const { user } = pageContext;
+const { user, restriction } = pageContext;
 const pageStash = pageContext.pageProps.stash;
 const currentStash = pageStash || pageContext.assets?.primaryStash;
 

components/campaigns/campaign.vue

@@ -1,6 +1,17 @@
 <template>
+	<div
+		v-if="restriction"
+		class="restricted"
+	>
+		<div>Traxxx is restricted in your region</div>
+		<a
+			href="/sfw"
+			class="link"
+		>Learn more</a>
+	</div>
+
 	<iframe
-		v-if="campaign?.banner?.type === 'html'"
+		v-else-if="campaign?.banner?.type === 'html'"
 		ref="iframe"
 		:width="campaign.banner.width"
 		:height="campaign.banner.height"
@@ -31,6 +42,11 @@
 </template>
 
 <script setup>
+import { inject } from 'vue';
+
+const pageContext = inject('pageContext');
+const { restriction } = pageContext;
+
 const props = defineProps({
 	campaign: {
 		type: Object,
@@ -75,4 +91,15 @@ const bannerSrc = (() => {
 	max-width: 100%;
 	object-fit: contain;
 }
+
+.restricted {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: .5rem;
+	font-weight: bold;
+	padding: .5rem;
+}
 </style>

components/scenes/tile.vue

@@ -130,7 +130,7 @@ const props = defineProps({
 });
 
 const pageContext = inject('pageContext');
-const user = pageContext.user;
+const { user, restriction } = pageContext;
 const pageStash = pageContext.pageProps.stash;
 const currentStash = pageStash || pageContext.assets?.primaryStash;
 

components/tags/photos.vue

@@ -9,14 +9,13 @@
 			v-for="photo in photos"
 			:key="`photo-${photo.id}`"
 			:title="photo.comment"
-			:href="`/img/${photo.path}`"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="photo-container"
 		>
 			<img
-				:src="`/${photo.thumbnail}`"
-				:style="{ 'background-image': `url(/${photo.lazy})` }"
+				:src="getPath(photo, 'thumbnail')"
+				:style="{ 'background-image': `url(${getPath(photo, 'lazy')})` }"
 				:alt="photo.comment"
 				:width="photo.width"
 				:height="photo.height"
@@ -47,6 +46,8 @@ import { computed, inject } from 'vue';
 import Logo from '#/components/tags/logo.vue';
 import Campaign from '#/components/campaigns/campaign.vue';
 
+import getPath from '#/src/get-path.js';
+
 const props = defineProps({
 	tag: {
 		type: Object,