joerglohrerde/app/src/routes/[...slug]/+page.svelte

<script lang="ts">
	import type { NostrEvent } from '$lib/nostr/loaders';
	import { loadPost } from '$lib/nostr/loaders';
	import { AUTHOR_PUBKEY_HEX } from '$lib/nostr/config';
	import { buildHablaLink } from '$lib/nostr/naddr';
	import PostView from '$lib/components/PostView.svelte';
	import LoadingOrError from '$lib/components/LoadingOrError.svelte';
	import { t } from '$lib/i18n';
	import { get } from 'svelte/store';

	let { data } = $props();
	const dtag = $derived(data.dtag);

	let post: NostrEvent | null = $state(null);
	let loading = $state(true);
	let error: string | null = $state(null);

	const hablaLink = $derived(
		buildHablaLink({
			pubkey: AUTHOR_PUBKEY_HEX,
			kind: 30023,
			identifier: dtag
		})
	);

	$effect(() => {
		const currentDtag = dtag;
		post = null;
		loading = true;
		error = null;
		loadPost(currentDtag)
			.then((p) => {
				if (currentDtag !== dtag) return;
				if (!p) {
					error = get(t)('post.not_found', { values: { slug: currentDtag } });
				} else {
					post = p;
				}
			})
			.catch((e) => {
				if (currentDtag !== dtag) return;
				error = e instanceof Error ? e.message : get(t)('post.unknown_error');
			})
			.finally(() => {
				if (currentDtag === dtag) loading = false;
			});
	});
</script>

<nav class="breadcrumb"><a href="/">{$t('post.back_to_overview')}</a></nav>

<LoadingOrError {loading} {error} {hablaLink} />

{#if post}
	<PostView event={post} />
{/if}

<style>
	.breadcrumb {
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}
	.breadcrumb a {
		color: var(--accent);
		text-decoration: none;
	}
	.breadcrumb a:hover {
		text-decoration: underline;
	}
</style>