From f431b97559d7100be66d9da3bcde11f38f8ea457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 21 Feb 2026 20:38:28 +0100
Subject: [PATCH] refactor: extract partials for post components and create
 separate page template

---
 page.hbs                     | 17 +++++++++
 partials/feature-image.hbs   | 10 ++++++
 partials/post-navigation.hbs | 19 ++++++++++
 partials/related-posts.hbs   | 12 +++++++
 post.hbs                     | 68 +++++++-----------------------------
 5 files changed, 70 insertions(+), 56 deletions(-)
 create mode 100644 page.hbs
 create mode 100644 partials/feature-image.hbs
 create mode 100644 partials/post-navigation.hbs
 create mode 100644 partials/related-posts.hbs

diff --git a/page.hbs b/page.hbs
new file mode 100644
index 0000000..4166ea7
--- /dev/null
+++ b/page.hbs
@@ -0,0 +1,17 @@
+{{!< default}}
+
+{{#post}}
+<article class="container mx-auto px-4 py-12">
+    <header class="text-center mb-8 max-w-3xl mx-auto">
+        <h1 class="text-6xl font-bold tracking-tight text-[var(--text-primary)] mb-4">{{title}}</h1>
+    </header>
+
+    {{#if feature_image}}
+        {{> "feature-image"}}
+    {{/if}}
+
+    <section class="post-content max-w-3xl mx-auto text-[var(--text-primary)] leading-relaxed text-lg prose">
+        {{content}}
+    </section>
+</article>
+{{/post}}
diff --git a/partials/feature-image.hbs b/partials/feature-image.hbs
new file mode 100644
index 0000000..1bad3ae
--- /dev/null
+++ b/partials/feature-image.hbs
@@ -0,0 +1,10 @@
+<figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
+    <img
+        class="w-full h-auto object-cover"
+        src="{{img_url feature_image size="xl"}}"
+        srcset="{{img_url feature_image size="l"}} 1000w,
+                {{img_url feature_image size="xl"}} 2000w"
+        sizes="(max-width: 1000px) 1000px, 2000px"
+        alt="{{title fallback="No Title"}}"
+    >
+</figure>
diff --git a/partials/post-navigation.hbs b/partials/post-navigation.hbs
new file mode 100644
index 0000000..1b8c4bc
--- /dev/null
+++ b/partials/post-navigation.hbs
@@ -0,0 +1,19 @@
+<nav class="hidden has-[a]:grid mt-16 max-w-3xl mx-auto grid-cols-1 md:grid-cols-2 gap-4 pt-12">
+    {{#prev_post}}
+        <div class="prev-post-nav">
+            <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
+                <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">&larr; Previous Post</span>
+                <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
+            </a>
+        </div>
+    {{/prev_post}}
+
+    {{#next_post}}
+        <div class="next-post-nav text-right md:col-start-2">
+            <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
+                <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">Next Post &rarr;</span>
+                <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
+            </a>
+        </div>
+    {{/next_post}}
+</nav>
diff --git a/partials/related-posts.hbs b/partials/related-posts.hbs
new file mode 100644
index 0000000..aa73af6
--- /dev/null
+++ b/partials/related-posts.hbs
@@ -0,0 +1,12 @@
+{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+    {{#if related_posts}}
+        <section class="mt-16 pt-12 border-t border-[var(--bg-tertiary)]">
+            <h3 class="text-3xl font-bold mb-8 text-center">You might also like</h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                {{#foreach related_posts}}
+                    {{> "post-card"}}
+                {{/foreach}}
+            </div>
+        </section>
+    {{/if}}
+{{/get}}
diff --git a/post.hbs b/post.hbs
index b528a78..f19a90b 100644
--- a/post.hbs
+++ b/post.hbs
@@ -4,71 +4,27 @@
 <article class="container mx-auto px-4 py-12">
     <header class="text-center mb-8 max-w-3xl mx-auto">
         <h1 class="text-6xl font-bold tracking-tight text-[var(--text-primary)] mb-4">{{title fallback="No Title Provided"}}</h1>
-        {{#is "post"}}
-            <section class="post-meta text-[var(--text-secondary)] text-lg">
-                <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMMM DD, YYYY"}}</time>
-                {{#if primary_tag}}
-                    <span class="mx-2">&bull;</span>
-                    <a href="{{primary_tag.url}}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition duration-200">{{primary_tag.name}}</a>
-                {{/if}}
-            </section>
-        {{/is}}
+        <section class="post-meta text-[var(--text-secondary)] text-lg">
+            <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMMM DD, YYYY"}}</time>
+            {{#if primary_tag}}
+                <span class="mx-2">&bull;</span>
+                <a href="{{primary_tag.url}}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition duration-200">{{primary_tag.name}}</a>
+            {{/if}}
+        </section>
     </header>
 
     {{#if feature_image}}
-        <figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
-            <img
-                class="w-full h-auto object-cover"
-                src="{{img_url feature_image size="xl"}}"
-                srcset="{{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(max-width: 1000px) 1000px, 2000px"
-                alt="{{title fallback="No Title"}}"
-            >
-        </figure>
+        {{> "feature-image"}}
     {{/if}}
 
     <section class="post-content max-w-3xl mx-auto text-[var(--text-primary)] leading-relaxed text-lg prose">
         {{content fallback="<p>No content provided for this post.</p>"}}
     </section>
 
-    {{!-- Related Posts - Only show on posts, not pages --}}
-    {{#is "post"}}
-        {{!-- Next/Prev Navigation --}}
-        <nav class="hidden has-[a]:grid mt-16 max-w-3xl mx-auto grid-cols-1 md:grid-cols-2 gap-4 pt-12">
-            {{#prev_post}}
-                <div class="prev-post-nav">
-                    <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
-                        <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">&larr; Previous Post</span>
-                        <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
-                    </a>
-                </div>
-            {{/prev_post}}
+    {{> "post-navigation"}}
 
-            {{#next_post}}
-                <div class="next-post-nav text-right md:col-start-2">
-                    <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
-                        <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">Next Post &rarr;</span>
-                        <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
-                    </a>
-                </div>
-            {{/next_post}}
-        </nav>
-
-        {{#if primary_tag}}
-            {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
-                {{#if related_posts}}
-                    <section class="mt-16 pt-12 border-t border-[var(--bg-tertiary)]">
-                        <h3 class="text-3xl font-bold mb-8 text-center">You might also like</h3>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-                            {{#foreach related_posts}}
-                                {{> "post-card"}}
-                            {{/foreach}}
-                        </div>
-                    </section>
-                {{/if}}
-            {{/get}}
-        {{/if}}
-    {{/is}}
+    {{#if primary_tag}}
+        {{> "related-posts"}}
+    {{/if}}
 </article>
 {{/post}}