feat: add blog categories, minor content tweaks

Author: mandrasch

public/.htaccess

@@ -7,3 +7,8 @@ RewriteEngine On
 #    and posts were at matthias-andrasch.eu/YYYY/<slug>/
 # ------------------------------------
 RewriteRule ^([0-9]{4})/(.*)$ /blog/$1/$2 [R=301,L]
+
+# ------------------------------------
+# 2) Old category URLs: /blog/cat/slug → /blog/kategorie/slug
+# ------------------------------------
+RewriteRule ^blog/cat/(.*)$ /blog/kategorie/$1 [R=301,L]

src/content/pages/absurditaet-des-lebens.md

@@ -12,4 +12,4 @@ Warum sind wir eigentlich auf diesem Planeten? Christian Uhle versucht, dieser F
 >
 > Albert Camus
 
-Mehr dazu: https://workwhileclimate.at/sinn-des-lebens/
+Mehr dazu: https://matthias-andrasch.eu/blog/2024/sinn-des-lebens/

src/content/pages/green-coding.md

@@ -20,7 +20,7 @@ Via "Where Is The Green In The Mindset? Improving Awareness For Green Coding In
 
 **Meine Blogartikel**
 
-- https://blog.matthias-andrasch.eu/cat/green-coding-green-web/
+- <a href="/blog/kategorie/green-coding-green-web">/blog/kategorie/green-coding-green-web</a>
 
 **Online-Communities**
 

src/pages/blog/[...page].astro

@@ -1,23 +1,32 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-import { getAllPosts, getFeaturedImage, formatDate, stripHtml } from '~/utils/wordpress';
+import { getAllPosts, getAllCategories, getFeaturedImage, formatDate, stripHtml } from '~/utils/wordpress';
+import type { WordPressCategory } from '~/utils/wordpress';
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPosts();
+  const [allPosts, allCategories] = await Promise.all([getAllPosts(), getAllCategories()]);
   const postsPerPage = 12;
   const totalPages = Math.ceil(allPosts.length / postsPerPage);
-  
+
+  // Build category lookup map
+  const categoryMap: Record<number, WordPressCategory> = {};
+  for (const cat of allCategories) {
+    categoryMap[cat.id] = cat;
+  }
+
   return Array.from({ length: totalPages }, (_, i) => ({
     params: { page: i === 0 ? undefined : String(i + 1) },
     props: {
       posts: allPosts.slice(i * postsPerPage, (i + 1) * postsPerPage),
       currentPage: i + 1,
       totalPages,
+      categoryMap,
+      allCategories,
     },
   }));
 }
 
-const { posts, currentPage, totalPages } = Astro.props;
+const { posts, currentPage, totalPages, categoryMap, allCategories } = Astro.props;
 
 const metadata = {
   title: currentPage === 1 ? 'Blog' : `Blog - Seite ${currentPage}`,
@@ -27,10 +36,31 @@ const metadata = {
 
 <Layout metadata={metadata}>
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
-    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
-      Blog
-    </h1>
-    
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
+      <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal font-heading">
+        Blog
+      </h1>
+
+      {allCategories.length > 0 && (
+        <div>
+          <select
+            id="category-filter"
+            class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 cursor-pointer"
+          >
+            <option value="">Kategorie wählen…</option>
+            {allCategories.map((cat) => (
+              <option value={`/blog/kategorie/${cat.slug}`}>{cat.name}</option>
+            ))}
+          </select>
+          <script is:inline>
+            document.getElementById('category-filter').addEventListener('change', function() {
+              if (this.value) window.location.href = this.value;
+            });
+          </script>
+        </div>
+      )}
+    </div>
+
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {posts.map((post) => {
         const featuredImage = getFeaturedImage(post);
@@ -52,8 +82,19 @@ const metadata = {
             )}
 
             <div class="p-5 flex flex-col flex-1">
-              <div class="text-sm text-muted mb-2">
-                {formatDate(post.date)}
+              <div class="text-sm text-muted mb-2 flex items-center gap-2">
+                <span>{formatDate(post.date)}</span>
+                {post.categories?.[0] && categoryMap[post.categories[0]] && (
+                  <>
+                    <span>·</span>
+                    <a
+                      href={`/blog/kategorie/${categoryMap[post.categories[0]].slug}`}
+                      class="hover:text-accent transition-colors"
+                    >
+                      {categoryMap[post.categories[0]].name}
+                    </a>
+                  </>
+                )}
               </div>
 
               <h2 class="text-lg font-bold mb-3 tracking-normal">

src/pages/blog/[year]/[slug].astro

@@ -1,21 +1,27 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
-import { getAllPosts, getPostBySlug, getFeaturedImage, formatDate, processContentWithPrivacy } from '~/utils/wordpress';
+import { getAllPosts, getAllCategories, getPostBySlug, getFeaturedImage, formatDate, processContentWithPrivacy } from '~/utils/wordpress';
+import type { WordPressCategory } from '~/utils/wordpress';
 import PrivacyEmbed from '~/components/blog/PrivacyEmbed.astro';
 
 export async function getStaticPaths() {
-  const posts = await getAllPosts();
+  const [posts, allCategories] = await Promise.all([getAllPosts(), getAllCategories()]);
+
+  const categoryMap: Record<number, WordPressCategory> = {};
+  for (const cat of allCategories) {
+    categoryMap[cat.id] = cat;
+  }
 
   return posts.map((post) => {
     const year = new Date(post.date).getFullYear().toString();
     return {
       params: { year, slug: post.slug },
-      props: { post },
+      props: { post, categoryMap },
     };
   });
 }
 
-const { post } = Astro.props;
+const { post, categoryMap } = Astro.props;
 
 if (!post) {
   return Astro.redirect('/404');
@@ -47,8 +53,17 @@ const metadata = {
 
     {/* Post header */}
     <header class="mb-8">
-      <div class="text-sm text-muted mb-4">
-        {formatDate(post.date)}
+      <div class="text-sm text-muted mb-4 flex items-center gap-2">
+        <span>{formatDate(post.date)}</span>
+        {post.categories?.[0] && categoryMap[post.categories[0]] && (
+          <>
+            <span>·</span>
+            <span>Kategorie: <a
+              href={`/blog/kategorie/${categoryMap[post.categories[0]].slug}`}
+              class="hover:text-accent transition-colors"
+            >{categoryMap[post.categories[0]].name}</a></span>
+          </>
+        )}
       </div>
 
       <h1

src/pages/blog/kategorie/[slug].astro

@@ -0,0 +1,93 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+import { getAllPosts, getAllCategories, getFeaturedImage, formatDate, stripHtml } from '~/utils/wordpress';
+
+export async function getStaticPaths() {
+  const [allPosts, allCategories] = await Promise.all([getAllPosts(), getAllCategories()]);
+
+  return allCategories.map((category) => ({
+    params: { slug: category.slug },
+    props: {
+      category,
+      posts: allPosts.filter((post) => post.categories.includes(category.id)),
+    },
+  }));
+}
+
+const { category, posts } = Astro.props;
+
+const metadata = {
+  title: `Kategorie: ${category.name}`,
+  description: `Alle Blogbeiträge in der Kategorie "${category.name}".`,
+};
+---
+
+<Layout metadata={metadata}>
+  <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
+    <div class="mb-8">
+      <a
+        href="/blog"
+        class="text-accent hover:underline inline-flex items-center gap-2 text-sm"
+      >
+        ← Alle Beiträge
+      </a>
+    </div>
+
+    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
+      Kategorie: {category.name}
+    </h1>
+
+    {posts.length === 0 ? (
+      <p class="text-muted">Keine Beiträge in dieser Kategorie.</p>
+    ) : (
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {posts.map((post) => {
+          const featuredImage = getFeaturedImage(post);
+          const excerpt = stripHtml(post.excerpt.rendered);
+          const year = new Date(post.date).getFullYear();
+          const postHref = `/blog/${year}/${post.slug}`;
+
+          return (
+            <article class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-shadow flex flex-col">
+              {featuredImage && (
+                <a href={postHref}>
+                  <img
+                    src={featuredImage.url}
+                    alt={featuredImage.alt}
+                    class="w-full h-48 object-cover hover:opacity-90 transition-opacity"
+                    loading="lazy"
+                  />
+                </a>
+              )}
+
+              <div class="p-5 flex flex-col flex-1">
+                <div class="text-sm text-muted mb-2">
+                  {formatDate(post.date)}
+                </div>
+
+                <h2 class="text-lg font-bold mb-3 tracking-normal">
+                  <a
+                    href={postHref}
+                    class="hover:text-accent transition-colors"
+                    set:html={post.title.rendered}
+                  />
+                </h2>
+
+                <div class="text-sm text-secondary mb-4 leading-relaxed line-clamp-3 flex-1">
+                  {excerpt}
+                </div>
+
+                <a
+                  href={postHref}
+                  class="text-accent hover:underline font-medium text-sm"
+                >
+                  Weiterlesen →
+                </a>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    )}
+  </section>
+</Layout>

src/pages/index.astro

@@ -21,7 +21,7 @@ const metadata = {
       </h1>
       <p class="text-xl text-secondary font-light mb-8">Full-Stack · Wien · Open Source</p>
       <p class="text-lg text-secondary leading-relaxed max-w-[540px]">
-        Hi, mein Name ist Matthias. 👋 Seit fünf Jahren lebe ich im schönen Wien, zugezogen aus Deutschland. Meine Brötchen bzw. Kaisersemmeln verdiene ich als Web-Entwickler – u.a. mit Nuxt, <a href="/projekte#craftcms" class="text-accent underline decoration-[var(--accent-green-glow)] decoration-2 underline-offset-4 hover:decoration-[var(--accent-green)] transition-all">Craft CMS</a> und <a href="/projekte#sveltekit" class="text-accent underline decoration-[var(--accent-green-glow)] decoration-2 underline-offset-4 hover:decoration-[var(--accent-green)] transition-all">Svelte(Kit)</a>. Mein Schwerpunkt liegt auf Full-Stack-Entwicklung und Barrierefreiheit.
+        Hi! 👋 Seit fünf Jahren lebe ich im schönen Wien, zugezogen aus Deutschland. Meine Brötchen bzw. Semmeln verdiene ich aktuell als Web-Entwickler – u.a. mit Nuxt, Craft CMS und Svelte(Kit). Mein Schwerpunkt liegt auf Full-Stack-Entwicklung und Barrierefreiheit, mehr Erfahrungen würde ich u.a. gern im Bereich Testing, UX und Green Coding sammeln. Privat beschäftige ich mich mit Sinn- und Gerechtigkeitsfragen. Die Welt ein Stück besser hinterlassen wäre zauberhaft - hierfür fehlt mir noch der passende Hebel.
       </p>
     </div>
     <div class="hero-photo relative order-first md:order-last justify-self-center md:justify-self-end">

src/utils/wordpress.ts

@@ -38,6 +38,14 @@ export interface WordPressPost {
   };
 }
 
+export interface WordPressCategory {
+  id: number;
+  count: number;
+  name: string;
+  slug: string;
+  description: string;
+}
+
 export interface WordPressFeaturedImage {
   url: string;
   alt: string;
@@ -83,6 +91,36 @@ export async function getPostBySlug(slug: string): Promise<WordPressPost | null>
   }
 }
 
+/**
+ * Fetch all categories from WordPress REST API
+ */
+export async function getAllCategories(): Promise<WordPressCategory[]> {
+  try {
+    const response = await fetch(`${WP_API_BASE}/categories?per_page=100`);
+
+    if (!response.ok) {
+      throw new Error(`WordPress API error: ${response.status}`);
+    }
+
+    const categories: WordPressCategory[] = await response.json();
+    // Filter out "Uncategorized" (id=1) and categories with no posts
+    // Decode HTML entities in category names
+    return categories
+      .filter((cat) => cat.slug !== 'uncategorized' && cat.count > 0)
+      .map((cat) => ({ ...cat, name: decodeHtmlEntities(cat.name) }));
+  } catch (error) {
+    console.error('Error fetching WordPress categories:', error);
+    return [];
+  }
+}
+
+/**
+ * Get the category name for a post (first category)
+ */
+export function getPostCategoryId(post: WordPressPost): number | null {
+  return post.categories?.[0] ?? null;
+}
+
 /**
  * Extract featured image from post data
  */
@@ -118,6 +156,22 @@ export function formatDate(dateString: string): string {
   }).format(date);
 }
 
+/**
+ * Decode HTML entities in a string
+ */
+export function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#8217;/g, "'")
+    .replace(/&#8220;/g, '\u201C')
+    .replace(/&#8221;/g, '\u201D')
+    .replace(/&hellip;/g, '\u2026')
+    .replace(/&nbsp;/g, ' ');
+}
+
 /**
  * Strip HTML tags from string (for excerpts)
  */