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.
143 lines
3.3 KiB
143 lines
3.3 KiB
<script lang="ts"> |
|
import type { NostrEvent } from '../../types/nostr.js'; |
|
import EventMenu from '../EventMenu.svelte'; |
|
|
|
interface Props { |
|
event: NostrEvent; |
|
showMenu?: boolean; |
|
} |
|
|
|
let { event, showMenu = true }: Props = $props(); |
|
|
|
// Extract metadata tags (using $derived for reactivity) |
|
const image = $derived(event.tags.find(t => t[0] === 'image' && t[1])?.[1]); |
|
const description = $derived(event.tags.find(t => t[0] === 'description' && t[1])?.[1]); |
|
const summary = $derived(event.tags.find(t => t[0] === 'summary' && t[1])?.[1]); |
|
const author = $derived(event.tags.find(t => t[0] === 'author' && t[1])?.[1]); |
|
const title = $derived( |
|
event.tags.find(t => t[0] === 'title' && t[1])?.[1] || |
|
(() => { |
|
// Fallback to d-tag in Title Case |
|
const dTag = event.tags.find(t => t[0] === 'd' && t[1])?.[1]; |
|
if (dTag) { |
|
return dTag.split('-').map(word => |
|
word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() |
|
).join(' '); |
|
} |
|
return null; |
|
})() |
|
); |
|
|
|
const hasMetadata = $derived(image || description || summary || author || title); |
|
</script> |
|
|
|
{#if hasMetadata} |
|
<div class="metadata-card"> |
|
<div class="metadata-header"> |
|
{#if title} |
|
<h2 class="metadata-title">{title}</h2> |
|
{/if} |
|
{#if showMenu} |
|
<EventMenu event={event} showContentActions={false} /> |
|
{/if} |
|
</div> |
|
|
|
{#if image} |
|
<div class="metadata-image"> |
|
<img |
|
src={image} |
|
alt={title || description || summary || 'Metadata image'} |
|
loading="lazy" |
|
/> |
|
</div> |
|
{/if} |
|
|
|
<div class="metadata-content"> |
|
{#if description} |
|
<p class="metadata-description">{description}</p> |
|
{/if} |
|
|
|
{#if summary} |
|
<p class="metadata-summary">{summary}</p> |
|
{/if} |
|
|
|
{#if author} |
|
<p class="metadata-author">Author: {author}</p> |
|
{/if} |
|
</div> |
|
</div> |
|
{/if} |
|
|
|
<style> |
|
.metadata-card { |
|
border: 1px solid var(--fog-border, #e5e7eb); |
|
border-radius: 0.5rem; |
|
padding: 1.5rem; |
|
margin-bottom: 1.5rem; |
|
background: var(--fog-post, #ffffff); |
|
} |
|
|
|
:global(.dark) .metadata-card { |
|
border-color: var(--fog-dark-border, #374151); |
|
background: var(--fog-dark-post, #1f2937); |
|
} |
|
|
|
.metadata-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.metadata-title { |
|
margin: 0; |
|
font-size: 1.5rem; |
|
font-weight: 600; |
|
color: var(--fog-text, #1f2937); |
|
flex: 1; |
|
} |
|
|
|
:global(.dark) .metadata-title { |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.metadata-image { |
|
margin-bottom: 1rem; |
|
border-radius: 0.5rem; |
|
overflow: hidden; |
|
} |
|
|
|
.metadata-image img { |
|
width: 100%; |
|
height: auto; |
|
display: block; |
|
} |
|
|
|
.metadata-content { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.75rem; |
|
} |
|
|
|
.metadata-description, |
|
.metadata-summary { |
|
margin: 0; |
|
color: var(--fog-text, #1f2937); |
|
line-height: 1.6; |
|
} |
|
|
|
:global(.dark) .metadata-description, |
|
:global(.dark) .metadata-summary { |
|
color: var(--fog-dark-text, #f9fafb); |
|
} |
|
|
|
.metadata-author { |
|
margin: 0; |
|
font-size: 0.875rem; |
|
color: var(--fog-text-light, #6b7280); |
|
} |
|
|
|
:global(.dark) .metadata-author { |
|
color: var(--fog-dark-text-light, #9ca3af); |
|
} |
|
</style>
|
|
|