feat(lesereisen): GeschichteListRow with JOURNEY badge + i18n keys
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
49
frontend/src/lib/geschichte/GeschichteListRow.svelte
Normal file
49
frontend/src/lib/geschichte/GeschichteListRow.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { plainExcerpt } from '$lib/shared/utils/extractText';
|
||||
import { formatDate } from '$lib/shared/utils/date';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type GeschichteRow = Pick<
|
||||
components['schemas']['GeschichteSummary'],
|
||||
'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
|
||||
>;
|
||||
|
||||
let { geschichte }: { geschichte: GeschichteRow } = $props();
|
||||
|
||||
const isJourney = $derived(geschichte.type === 'JOURNEY');
|
||||
|
||||
const publishedAt = $derived.by(() => {
|
||||
if (!geschichte.publishedAt) return null;
|
||||
return formatDate(geschichte.publishedAt.slice(0, 10), 'short');
|
||||
});
|
||||
|
||||
const authorName = $derived.by(() => {
|
||||
const a = geschichte.author;
|
||||
if (!a) return '';
|
||||
const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
|
||||
return full || a.email || '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<a href="/geschichten/{geschichte.id}" class="block">
|
||||
<div class="mb-1 flex items-center gap-1.5">
|
||||
<h2 class="font-serif text-xl font-bold text-ink">{geschichte.title}</h2>
|
||||
{#if isJourney}
|
||||
<span
|
||||
data-testid="journey-badge"
|
||||
class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
|
||||
>
|
||||
{m.journey_badge_list()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mb-3 font-sans text-xs text-ink-3">
|
||||
{authorName}
|
||||
{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
|
||||
</p>
|
||||
{#if geschichte.body}
|
||||
<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
|
||||
<p class="font-serif text-base text-ink-2">{plainExcerpt(geschichte.body, 150)}</p>
|
||||
{/if}
|
||||
</a>
|
||||
Reference in New Issue
Block a user