Klickbare Blog-Tags

Heute habe ich den Blog-Flow etwas runder gemacht: Im Artikel stehen jetzt Veroeffentlichungsdatum und Lesedauer zusammen, und die Tags sind direkt klickbar.

Inhaltsverzeichnis

Ausgangspunkt
Was ich geaendert habe
Technische Details
Ergebnis

Ausgangspunkt

Im Blog-Layout wurde bisher nur die Lesedauer angezeigt. Tags waren zwar sichtbar, aber nicht als Navigation nutzbar. Dadurch gab es keine schnelle Moeglichkeit, zu aehnlichen Artikeln zu springen.

Was ich geaendert habe

Metadaten im Artikelkopf erweitert
- Vor der Lesedauer wird jetzt das Datum angezeigt.
- Ausgabe: Veroeffentlicht: DD.MM.YYYY | Lesedauer: 2 min read
Tags im Artikel klickbar gemacht
- Die Tag-Chips verlinken jetzt auf /blog/tag/<tag>.
- Damit wird aus der reinen Anzeige eine echte Navigation.
Tag-Filterseite eingefuehrt
- Neue Route: src/pages/blog/tag/[tag].astro
- Die Seite listet nur Artikel mit passendem Keyword.
Blog-Listenkomponente erweitert
- BlogEntries akzeptiert jetzt optional tag.
- Wenn ein Tag gesetzt ist, werden Eintraege case-insensitive gefiltert.
Collection-Schema robuster gemacht
- Bei Datumsfeldern nutze ich jetzt z.coerce.date() statt z.date().
- Das ist fuer Frontmatter-Werte als String stabiler.

Technische Details

Die Filterlogik in der Blog-Liste bleibt bewusst klein:

const normalizedTag = tag?.toLowerCase().trim();

const filteredEntries = normalizedTag
  ? blogEntries.filter((entry) =>
      entry.data.keywords.some((keyword) => keyword.toLowerCase() === normalizedTag)
    )
  : blogEntries;

Und die Tag-Seiten werden statisch aus vorhandenen Keywords gebaut:

const tags = [...new Set(blogEntries.flatMap((entry) => entry.data.keywords))]
  .map((tag) => tag.trim())
  .filter(Boolean)
  .sort((a, b) => a.localeCompare(b));

Ergebnis

Der Blog fuehlt sich jetzt deutlich besser vernetzt an. Leser koennen direkt ueber Tags weiterklicken, und die Metadaten am Artikelanfang sind informativer ohne unruhig zu wirken.

Kleinere UI-Verbesserung, aber mit spuerbar besserer Navigation.