hide nsfw labeled posts

src/lib/components/bluesky-post/index.ts

···
 	// const reason = data.reason;
 	// const reply = data.reply?.parent;
 	// const replyId = reply?.uri?.split('/').pop();
+	console.log(JSON.parse(JSON.stringify(data)));
 
 	const id = post.uri.split('/').pop();
 
···
 				} as PostEmbed)
 			: undefined,
 
-		htmlContent: blueskyPostToHTML(post, baseUrl)
+		htmlContent: blueskyPostToHTML(post, baseUrl),
+		labels: post.labels ? post.labels.map((label) => label.val) : undefined
 	};
 }
 

src/lib/components/post/Post.svelte

···
 	import type { Snippet } from 'svelte';
 	import { numberToHumanReadable } from '..';
 	import { RelativeTime } from '@foxui/time';
+	import PostEmbed from './PostEmbed.svelte';
 
 	let {
 		ref = $bindable(),
···
 				{/if}
 			</Prose>
 
-			{#if data.embed}
-				<Embed embed={data.embed} />
-			{/if}
+			<PostEmbed {data} />
 
 			{#if showReply || showRepost || showLike || showBookmark || customActions}
 				<div

src/lib/components/post/PostEmbed.svelte

···
+<script lang="ts">
+	import { hasNSFWLabel, type PostData } from '.';
+	import Embed from './embeds/Embed.svelte';
+
+	let {
+		data
+	}: {
+		data: PostData;
+	} = $props();
+
+	let showNSFW = $state(false);
+</script>
+
+{#if hasNSFWLabel(data) && !showNSFW}
+	<button
+		onclick={() => (showNSFW = true)}
+		class="border-base-500/20 bg-base-200/50 text-base-600 dark:border-base-400/20 dark:bg-base-800/50 dark:text-base-400 accent:border-accent-900 mt-4 flex h-18 w-full cursor-pointer items-center justify-center rounded-2xl border text-center text-sm"
+	>
+		NSFW content, click to show.
+	</button>
+{:else if data.embed}
+	<Embed embed={data.embed} />
+{/if}

src/lib/components/post/index.ts

···
 	htmlContent?: string;
 
 	replies?: PostData[];
+
+	labels?: string[];
 };
+
+export const nsfwLabels = ['porn', 'sexual', 'graphic-media', 'nudity'];
+
+export function hasNSFWLabel(post: PostData): boolean {
+	if (!post.labels) return false;
+
+	return post.labels.some((label) => nsfwLabels.includes(label));
+}
 
 export { default as Post } from './Post.svelte';