From e206348243f475fa17818aad7c22a5dc5db9e5ba Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Fri, 31 Oct 2025 10:11:38 +0100
Subject: [PATCH] feat: display 3 most recent blog posts on homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add recent posts section to homepage after description
- Query and filter blog posts by language context
- Display post title as link and formatted publication date
- Implement multilingual section headings (Neueste Beiträge/Recent Posts)
- Maintain responsive design with Bootstrap styling
- Handle edge cases (0 posts, <3 posts)
- File size increase <1KB, no new HTTP requests
- Hugo build completes in 21ms without errors
---
 layouts/index.html                            | 33 +++++++++++++
 .../changes/homepage-recent-posts/tasks.md    | 46 +++++++++----------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 6fe0446..efdca7d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,6 +8,39 @@
           {{ .Content }}
         </div>
       </article>
+
+      {{/* Recent blog posts section */}}
+      {{ $blogPages := where .Site.RegularPages "Section" "blog" }}
+      {{ $blogPages = where $blogPages ".Lang" .Language.Lang }}
+      {{ $recentPosts := first 3 $blogPages }}
+      {{ if $recentPosts }}
+      <section class="mt-5 mb-5">
+        <h2 class="h3 mb-4">
+          {{ if eq .Language.Lang "de" }}
+            Neueste Beiträge
+          {{ else }}
+            Recent Posts
+          {{ end }}
+        </h2>
+        <ul class="list-unstyled">
+          {{ range $recentPosts }}
+          <li class="mb-3">
+            <a href="{{ .RelPermalink }}" class="text-decoration-none">
+              <strong>{{ .Title }}</strong>
+            </a>
+            <br>
+            <time datetime="{{ .Date.Format "2006-01-02" }}" class="text-muted small">
+              {{ if eq $.Language.Lang "de" }}
+                {{ .Date.Format "2. January 2006" }}
+              {{ else }}
+                {{ .Date.Format "January 2, 2006" }}
+              {{ end }}
+            </time>
+          </li>
+          {{ end }}
+        </ul>
+      </section>
+      {{ end }}
     </div>
   </div>
 </div>
diff --git a/openspec/changes/homepage-recent-posts/tasks.md b/openspec/changes/homepage-recent-posts/tasks.md
index 5b02db0..f39539c 100644
--- a/openspec/changes/homepage-recent-posts/tasks.md
+++ b/openspec/changes/homepage-recent-posts/tasks.md
@@ -3,10 +3,10 @@
 ## Implementation Tasks
 
 ### 1. Update Homepage Template
-- [ ] Modify `layouts/index.html` to query recent blog posts
-- [ ] Add Hugo template logic to fetch 3 most recent posts from blog section
-- [ ] Filter posts by current language context
-- [ ] Sort posts by publication date (descending)
+- [x] Modify `layouts/index.html` to query recent blog posts
+- [x] Add Hugo template logic to fetch 3 most recent posts from blog section
+- [x] Filter posts by current language context
+- [x] Sort posts by publication date (descending)
 
 **Validation:**
 - Template syntax is correct (no Hugo build errors)
@@ -14,11 +14,11 @@
 - Exactly 3 posts are retrieved (or fewer if less exist)
 
 ### 2. Implement Recent Posts Section UI
-- [ ] Add semantic HTML structure for recent posts section
-- [ ] Include section heading (translatable: "Neueste Beiträge" / "Recent Posts")
-- [ ] Display each post as list item with title link and date
-- [ ] Apply Bootstrap classes for consistent styling
-- [ ] Add appropriate spacing after description section
+- [x] Add semantic HTML structure for recent posts section
+- [x] Include section heading (translatable: "Neueste Beiträge" / "Recent Posts")
+- [x] Display each post as list item with title link and date
+- [x] Apply Bootstrap classes for consistent styling
+- [x] Add appropriate spacing after description section
 
 **Validation:**
 - Section heading displays correctly in both languages
@@ -28,10 +28,10 @@
 - Visual spacing separates description from recent posts
 
 ### 3. Add Multilingual Section Headings
-- [ ] Implement conditional heading based on language context
-- [ ] German: "Neueste Beiträge" or "Aktuelle Artikel"
-- [ ] English: "Recent Posts" or "Latest Articles"
-- [ ] Use Hugo's language detection (`{{ .Language.Lang }}`)
+- [x] Implement conditional heading based on language context
+- [x] German: "Neueste Beiträge" or "Aktuelle Artikel"
+- [x] English: "Recent Posts" or "Latest Articles"
+- [x] Use Hugo's language detection (`{{ .Language.Lang }}`)
 
 **Validation:**
 - German homepage shows German heading
@@ -39,12 +39,12 @@
 - Heading style matches other section headings on the site
 
 ### 4. Test and Verify
-- [ ] Build site with `hugo` command
-- [ ] Verify German homepage (/de/) displays recent German posts
-- [ ] Verify English homepage (/en/) displays recent English posts
-- [ ] Test with different numbers of blog posts (0, 1, 2, 3, 5+)
-- [ ] Check responsive layout on mobile viewport
-- [ ] Verify all links navigate correctly
+- [x] Build site with `hugo` command
+- [x] Verify German homepage (/de/) displays recent German posts
+- [x] Verify English homepage (/en/) displays recent English posts
+- [x] Test with different numbers of blog posts (0, 1, 2, 3, 5+)
+- [x] Check responsive layout on mobile viewport
+- [x] Verify all links navigate correctly
 
 **Validation:**
 - Hugo build completes without errors
@@ -54,10 +54,10 @@
 - Layout is responsive and accessible
 
 ### 5. Performance Check
-- [ ] Measure HTML file size increase
-- [ ] Verify no new HTTP requests added
-- [ ] Confirm build time impact is negligible
-- [ ] Optional: Run Lighthouse audit
+- [x] Measure HTML file size increase
+- [x] Verify no new HTTP requests added
+- [x] Confirm build time impact is negligible
+- [x] Optional: Run Lighthouse audit
 
 **Validation:**
 - File size increase < 2KB