feat(geschichten): add stripHtml util and GeschichtenCard component
stripHtml() strips tags via DOMParser (browser) with a regex fallback for SSR. plainExcerpt() truncates at a word boundary with an ellipsis. Both covered by Vitest specs. GeschichtenCard renders the top 3 published stories about a person on /persons/[id], with an editorial excerpt, publication date, author, and a "+ Geschichte schreiben" link visible only to BLOG_WRITERs. Footer link to /geschichten?personId=... appears once geschichten.length >= 3. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
87
frontend/src/lib/components/GeschichtenCard.svelte
Normal file
87
frontend/src/lib/components/GeschichtenCard.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import type { components } from '$lib/generated/api';
|
||||
import { plainExcerpt } from '$lib/utils/stripHtml';
|
||||
import { formatDate } from '$lib/utils/date';
|
||||
|
||||
type Geschichte = components['schemas']['Geschichte'];
|
||||
|
||||
interface Props {
|
||||
geschichten: Geschichte[];
|
||||
personId: string;
|
||||
personName: string;
|
||||
canWrite: boolean;
|
||||
}
|
||||
|
||||
let { geschichten, personId, personName, canWrite }: Props = $props();
|
||||
|
||||
const visible = $derived(geschichten.slice(0, 3));
|
||||
const hasOverflow = $derived(geschichten.length >= 3);
|
||||
|
||||
function formatPublishedDate(g: Geschichte): string | null {
|
||||
if (!g.publishedAt) return null;
|
||||
return formatDate(g.publishedAt.slice(0, 10), 'short');
|
||||
}
|
||||
|
||||
function authorName(g: Geschichte): string {
|
||||
const a = g.author;
|
||||
if (!a) return '';
|
||||
const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
|
||||
return full || a.email || '';
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if geschichten.length > 0}
|
||||
<section
|
||||
aria-labelledby="geschichten-card-heading"
|
||||
class="rounded-sm border border-line bg-surface p-6 shadow-sm"
|
||||
>
|
||||
<header class="mb-5 flex items-center justify-between">
|
||||
<h2
|
||||
id="geschichten-card-heading"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
||||
>
|
||||
{m.geschichten_card_heading()}
|
||||
</h2>
|
||||
{#if canWrite}
|
||||
<a
|
||||
href="/geschichten/new?personId={personId}"
|
||||
class="inline-flex items-center font-sans text-sm font-medium text-ink/60 hover:text-ink"
|
||||
>
|
||||
{m.geschichten_card_write_action()}
|
||||
</a>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<ul class="flex flex-col gap-4">
|
||||
{#each visible as g (g.id)}
|
||||
<li class="flex flex-col gap-1 border-b border-line pb-3 last:border-0 last:pb-0">
|
||||
<a
|
||||
href="/geschichten/{g.id}"
|
||||
class="font-serif text-base font-bold text-ink hover:underline"
|
||||
>
|
||||
{g.title}
|
||||
</a>
|
||||
<p class="font-sans text-xs text-ink-3">
|
||||
{authorName(g)}
|
||||
{#if formatPublishedDate(g)}· {formatPublishedDate(g)}{/if}
|
||||
</p>
|
||||
{#if g.body}
|
||||
<p class="font-serif text-sm text-ink-2">{plainExcerpt(g.body, 80)}</p>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
{#if hasOverflow}
|
||||
<footer class="mt-4 border-t border-line pt-3">
|
||||
<a
|
||||
href="/geschichten?personId={personId}"
|
||||
class="inline-flex items-center font-sans text-sm font-medium text-ink hover:underline"
|
||||
>
|
||||
{m.geschichten_card_show_all_for_person({ name: personName })} →
|
||||
</a>
|
||||
</footer>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user