i18n(posts): route BlogOverview filter strings through translations
Deploy to Firebase Hosting / deploy (push) Successful in 3m36s

Adds 12 new keys (blog_search_*, blog_year_*, blog_upcoming_events,
blog_results_*, blog_filter_reset, blog_no_results, blog_rss_subscribe)
and uses them in place of the hardcoded German strings.
This commit is contained in:
Peter Meier
2026-04-14 15:50:19 +02:00
parent b2296a79db
commit e66ff01e18
2 changed files with 24 additions and 13 deletions
+12 -13
View File
@@ -119,14 +119,14 @@
{#if searchIndex} {#if searchIndex}
<div class="mb-4 flex flex-wrap items-center gap-2"> <div class="mb-4 flex flex-wrap items-center gap-2">
<label class="relative block w-full sm:max-w-sm"> <label class="relative block w-full sm:max-w-sm">
<span class="sr-only">Suche</span> <span class="sr-only">{t(T.blog_search_label)}</span>
<span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"> <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
<Ico icon="mdi:magnify" class="h-4 w-4" /> <Ico icon="mdi:magnify" class="h-4 w-4" />
</span> </span>
<input <input
type="search" type="search"
bind:value={query} bind:value={query}
placeholder="Beiträge durchsuchen…" placeholder={t(T.blog_search_placeholder)}
class="w-full rounded-sm border border-zinc-300 bg-white py-2 pr-9 pl-8 text-sm focus:border-zinc-500 focus:outline-none" class="w-full rounded-sm border border-zinc-300 bg-white py-2 pr-9 pl-8 text-sm focus:border-zinc-500 focus:outline-none"
/> />
{#if query} {#if query}
@@ -134,7 +134,7 @@
type="button" type="button"
onclick={() => (query = "")} onclick={() => (query = "")}
class="absolute top-1/2 right-1.5 -translate-y-1/2 rounded-sm p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" class="absolute top-1/2 right-1.5 -translate-y-1/2 rounded-sm p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
aria-label="Suche leeren" aria-label={t(T.blog_search_clear)}
> >
<Ico icon="mdi:close" class="h-4 w-4" /> <Ico icon="mdi:close" class="h-4 w-4" />
</button> </button>
@@ -142,7 +142,7 @@
</label> </label>
{#if availableYears.length > 0} {#if availableYears.length > 0}
<label class="relative inline-flex items-center"> <label class="relative inline-flex items-center">
<span class="sr-only">Jahr</span> <span class="sr-only">{t(T.blog_year_label)}</span>
<span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"> <span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
<Ico icon="mdi:calendar" class="h-4 w-4" /> <Ico icon="mdi:calendar" class="h-4 w-4" />
</span> </span>
@@ -150,7 +150,7 @@
bind:value={year} bind:value={year}
class="appearance-none rounded-sm border border-zinc-300 bg-white py-2 pr-7 pl-8 text-sm focus:border-zinc-500 focus:outline-none" class="appearance-none rounded-sm border border-zinc-300 bg-white py-2 pr-7 pl-8 text-sm focus:border-zinc-500 focus:outline-none"
> >
<option value="">Alle Jahre</option> <option value="">{t(T.blog_year_all)}</option>
{#each availableYears as y} {#each availableYears as y}
<option value={y}>{y}</option> <option value={y}>{y}</option>
{/each} {/each}
@@ -167,7 +167,7 @@
<section class="mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4"> <section class="mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4">
<h2 class="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-zinc-700 uppercase"> <h2 class="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-zinc-700 uppercase">
<Ico icon="mdi:calendar-clock" class="h-4 w-4" /> <Ico icon="mdi:calendar-clock" class="h-4 w-4" />
Nächste Termine {t(T.blog_upcoming_events)}
</h2> </h2>
<ul class="space-y-2"> <ul class="space-y-2">
{#each upcomingEvents as ev} {#each upcomingEvents as ev}
@@ -187,16 +187,15 @@
{#if isFiltering} {#if isFiltering}
<div class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600"> <div class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600">
<span> <span>
{filteredResults.length} {t(T.blog_results_count, { count: filteredResults.length })}
{filteredResults.length === 1 ? "Treffer" : "Treffer"} {#if query}{t(T.blog_results_for, { query })}{/if}
{#if query}für „{query}"{/if} {#if year}{t(T.blog_results_in_year, { year })}{/if}
{#if year}im Jahr {year}{/if}
</span> </span>
<button <button
type="button" type="button"
onclick={() => { query = ""; year = ""; }} onclick={() => { query = ""; year = ""; }}
class="text-zinc-500 underline hover:text-zinc-900" class="text-zinc-500 underline hover:text-zinc-900"
>Filter zurücksetzen</button> >{t(T.blog_filter_reset)}</button>
</div> </div>
{#if filteredResults.length > 0} {#if filteredResults.length > 0}
<div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> <div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -218,7 +217,7 @@
</div> </div>
{:else} {:else}
<div class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600"> <div class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600">
Keine Treffer. Versuche einen anderen Suchbegriff. {t(T.blog_no_results)}
</div> </div>
{/if} {/if}
{:else} {:else}
@@ -295,7 +294,7 @@
<div class="mt-4 text-xs text-zinc-600"> <div class="mt-4 text-xs text-zinc-600">
<a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline"> <a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline">
<Ico icon="mdi:rss" class="h-3.5 w-3.5" /> <Ico icon="mdi:rss" class="h-3.5 w-3.5" />
RSS-Feed abonnieren {t(T.blog_rss_subscribe)}
</a> </a>
</div> </div>
{/if} {/if}
+12
View File
@@ -159,6 +159,18 @@ const TRANSLATION_KEYS = [
"post_map_open_osm", "post_map_open_osm",
"post_map_activate", "post_map_activate",
"post_overview_all", "post_overview_all",
"blog_search_label",
"blog_search_placeholder",
"blog_search_clear",
"blog_year_label",
"blog_year_all",
"blog_upcoming_events",
"blog_results_count",
"blog_results_for",
"blog_results_in_year",
"blog_filter_reset",
"blog_no_results",
"blog_rss_subscribe",
] as const; ] as const;
export type TranslationKey = (typeof TRANSLATION_KEYS)[number]; export type TranslationKey = (typeof TRANSLATION_KEYS)[number];