feat(app): startseite lokalisiert + liste nach aktivem locale gefiltert

This commit is contained in:
Jörg Lohrer 2026-04-21 14:07:17 +02:00
parent d256670b56
commit d7510953d2
1 changed files with 18 additions and 10 deletions

View File

@ -7,6 +7,8 @@
import PostCard from '$lib/components/PostCard.svelte'; import PostCard from '$lib/components/PostCard.svelte';
import LoadingOrError from '$lib/components/LoadingOrError.svelte'; import LoadingOrError from '$lib/components/LoadingOrError.svelte';
import SocialIcons from '$lib/components/SocialIcons.svelte'; import SocialIcons from '$lib/components/SocialIcons.svelte';
import { t, activeLocale } from '$lib/i18n';
import { get } from 'svelte/store';
// Lokales Profilbild aus static/ — schneller als der Nostr-kind:0-Roundtrip // Lokales Profilbild aus static/ — schneller als der Nostr-kind:0-Roundtrip
// fürs kind:0 -> picture-Feld (URL wäre identisch, aber Netzwerk-Latenz). // fürs kind:0 -> picture-Feld (URL wäre identisch, aber Netzwerk-Latenz).
@ -25,11 +27,11 @@
posts = list; posts = list;
loading = false; loading = false;
if (list.length === 0) { if (list.length === 0) {
error = 'Keine Posts gefunden auf den abgefragten Relays.'; error = get(t)('home.empty');
} }
} catch (e) { } catch (e) {
loading = false; loading = false;
error = e instanceof Error ? e.message : 'Unbekannter Fehler'; error = e instanceof Error ? e.message : get(t)('post.unknown_error');
} }
}); });
@ -46,8 +48,17 @@
const avatarSrc = HERO_AVATAR; const avatarSrc = HERO_AVATAR;
const about = $derived.by(() => profile?.about ?? ''); const about = $derived.by(() => profile?.about ?? '');
const website = $derived.by(() => profile?.website ?? ''); const website = $derived.by(() => profile?.website ?? '');
const latest = $derived(posts.slice(0, LATEST_COUNT)); let currentLocale = $state('de');
const hasMore = $derived(posts.length > LATEST_COUNT); activeLocale.subscribe((v) => (currentLocale = v));
const filtered = $derived.by(() =>
posts.filter((p) => {
const l = p.tags.find((tag) => tag[0] === 'l')?.[1];
return (l ?? 'de') === currentLocale;
})
);
const latest = $derived(filtered.slice(0, LATEST_COUNT));
const hasMore = $derived(filtered.length > LATEST_COUNT);
</script> </script>
<section class="hero"> <section class="hero">
@ -57,10 +68,7 @@
</div> </div>
<div class="hero-text"> <div class="hero-text">
<h1 class="hero-name">{displayName}</h1> <h1 class="hero-name">{displayName}</h1>
<p class="hero-greeting"> <p class="hero-greeting">{$t('home.greeting')}</p>
Hi <span aria-hidden="true">🖖</span> Willkommen auf meinem Blog
<span aria-hidden="true">🤗</span>
</p>
{#if about} {#if about}
<p class="hero-about">{about}</p> <p class="hero-about">{about}</p>
{/if} {/if}
@ -75,14 +83,14 @@
</section> </section>
<section class="latest"> <section class="latest">
<h2 class="section-title">Neueste Beiträge</h2> <h2 class="section-title">{$t('home.latest')}</h2>
<LoadingOrError {loading} {error} /> <LoadingOrError {loading} {error} />
{#each latest as post (post.id)} {#each latest as post (post.id)}
<PostCard event={post} /> <PostCard event={post} />
{/each} {/each}
{#if hasMore} {#if hasMore}
<div class="more"> <div class="more">
<a href="/archiv/" class="more-link">Alle Beiträge im Archiv →</a> <a href="/archiv/" class="more-link">{$t('home.more_archive')}</a>
</div> </div>
{/if} {/if}
</section> </section>