You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
93 lines
2.6 KiB
<script lang="ts"> |
|
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
|
import { scale } from "svelte/transition"; |
|
import { Card, Img } from "flowbite-svelte"; |
|
import { userBadge } from "$lib/snippets/UserSnippets.svelte"; |
|
import Interactions from "$components/util/Interactions.svelte"; |
|
import { quintOut } from "svelte/easing"; |
|
import CardActions from "$components/util/CardActions.svelte"; |
|
import { getMatchingTags } from "$lib/utils/nostrUtils"; |
|
|
|
const { |
|
rootId, |
|
event, |
|
onBlogUpdate, |
|
active = true, |
|
} = $props<{ |
|
rootId: string; |
|
event: NDKEvent; |
|
onBlogUpdate?: any; |
|
active: boolean; |
|
}>(); |
|
|
|
let title: string = $derived(event.getMatchingTags("title")[0]?.[1]); |
|
let author: string = $derived( |
|
getMatchingTags(event, "author")[0]?.[1] ?? "unknown", |
|
); |
|
let image: string = $derived(event.getMatchingTags("image")[0]?.[1] ?? null); |
|
let authorPubkey: string = $derived( |
|
event.getMatchingTags("p")[0]?.[1] ?? null, |
|
); |
|
let hashtags: string = $derived(event.getMatchingTags("t") ?? null); |
|
|
|
function publishedAt() { |
|
const date = event.created_at ? new Date(event.created_at * 1000) : ""; |
|
if (date !== "") { |
|
const formattedDate = new Intl.DateTimeFormat("en-US", { |
|
year: "numeric", |
|
month: "short", |
|
day: "2-digit", |
|
}).format(date); |
|
return formattedDate ?? ""; |
|
} |
|
return ""; |
|
} |
|
|
|
function showBlog() { |
|
onBlogUpdate?.(rootId); |
|
} |
|
</script> |
|
|
|
{#if title != null} |
|
<Card |
|
class="ArticleBox card-leather w-full grid max-w-xl {active |
|
? 'active' |
|
: ''}" |
|
> |
|
<div class="space-y-4"> |
|
<div class="flex flex-row justify-between my-2"> |
|
<div class="flex flex-col"> |
|
{@render userBadge(authorPubkey, author)} |
|
<span class="text-gray-700 dark:text-gray-300">{publishedAt()}</span> |
|
</div> |
|
<CardActions {event} /> |
|
</div> |
|
|
|
|
|
|
|
{#if image && active} |
|
<div |
|
class="ArticleBoxImage flex col justify-center" |
|
in:scale={{ start: 0.8, duration: 500, delay: 100, easing: quintOut }} |
|
> |
|
<Img src={image} class="rounded w-full max-h-72 object-cover" /> |
|
</div> |
|
{/if} |
|
<div class="flex flex-col flex-grow space-y-4"> |
|
<button onclick={() => showBlog()} class="text-left"> |
|
<h2 class="text-lg font-bold line-clamp-2" {title}>{title}</h2> |
|
</button> |
|
{#if hashtags} |
|
<div class="tags"> |
|
{#each hashtags as tag} |
|
<span>{tag}</span> |
|
{/each} |
|
</div> |
|
{/if} |
|
</div> |
|
{#if active} |
|
<Interactions {rootId} {event} /> |
|
{/if} |
|
</div> |
|
</Card> |
|
{/if}
|
|
|