giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: show garden badge in all post list views and overviews

Browse Source 
- garden-badge.njk now resolves stage from post.data.gardenStage in
  list contexts (no set required), or gardenStage in post page context
- Badge added after categories in: blog, articles, notes, photos,
  bookmarks, likes, replies, reposts, recent-posts section
- Badge is clickable, links to /garden/#<stage>
This commit is contained in:
svemagie
2026-03-15 09:04:29 +01:00
parent bb1b2d1fda
commit 01a36d4163
10 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
_includes/components/garden-badge.njk
View File

@@ -1,14 +1,16 @@
{#
garden-badge.njk — Digital Garden stage indicator
Usage: {% include "components/garden-badge.njk" %}
Requires: gardenStage variable in scope (from post frontmatter)
Usage (post page): {% include "components/garden-badge.njk" %}
Usage (list page): {% set gardenStage = post.data.gardenStage %}{% include "components/garden-badge.njk" %}
Resolves from: gardenStage (direct) or post.data.gardenStage (list context)
Renders a coloured pill badge linking to /garden/#<stage>
#}
{% if gardenStage %}
{% set _stageInfo = gardenStage | gardenStageInfo %}
{% set _stage = gardenStage or (post.data.gardenStage if post else null) %}
{% if _stage %}
{% set _stageInfo = _stage | gardenStageInfo %}
{% if _stageInfo %}
<a href="/garden/#{{ gardenStage }}"
class="garden-badge garden-badge--{{ gardenStage }}"
<a href="/garden/#{{ _stage }}"
class="garden-badge garden-badge--{{ _stage }}"
title="{{ _stageInfo.description }}"
aria-label="Garden stage: {{ _stageInfo.label }}">
<span aria-hidden="true">{{ _stageInfo.emoji }}</span>

7
_includes/components/sections/recent-posts.njk
View File

@@ -72,6 +72,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{{ likedUrl | unfurlCard | safe }}
<a class="u-like-of text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
@@ -111,6 +112,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{% if post.data.title %}
<h3 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
@@ -155,6 +157,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{{ repostedUrl | unfurlCard | safe }}
<a class="u-repost-of text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
@@ -194,6 +197,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{{ replyToUrl | unfurlCard | safe }}
<a class="u-in-reply-to text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
@@ -234,6 +238,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<div class="photo-gallery mt-3">
{% for img in post.data.photo | head(2) %}
@@ -278,6 +283,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</div>
{% if showSummary and post.templateContent %}
@@ -308,6 +314,7 @@
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{% if post.content and post.content.html %}

3
articles.njk
View File

@@ -48,6 +48,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }}
@@ -77,6 +78,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -89,6 +91,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

10
blog.njk
View File

@@ -80,6 +80,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{% unfurl likedUrl %}
<a class="u-like-of text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
@@ -119,6 +120,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
@@ -163,6 +165,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{% unfurl repostedUrl %}
<a class="u-repost-of text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
@@ -202,6 +205,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{% unfurl replyToUrl %}
<a class="u-in-reply-to text-xs text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
@@ -240,6 +244,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<div class="photo-gallery mt-3">
{% for img in post.data.photo %}
@@ -284,6 +289,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</div>
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
@@ -312,6 +318,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{{ post.templateContent | safe }}
@@ -335,6 +342,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<span class="p-ai-code-level hidden">{{ postAiCode or "0" }}</span>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</li>
{% endfor %}
</ul>
@@ -357,6 +365,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -369,6 +378,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

3
bookmarks.njk
View File

@@ -50,6 +50,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
@@ -86,6 +87,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -98,6 +100,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

3
likes.njk
View File

@@ -48,6 +48,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set likedUrl = post.data.likeOf or post.data.like_of %}
@@ -87,6 +88,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -99,6 +101,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

3
notes.njk
View File

@@ -43,6 +43,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{% if post.content and post.content.html %}
@@ -78,6 +79,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -90,6 +92,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

3
photos.njk
View File

@@ -41,6 +41,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
{% if post.data.photo %}
@@ -82,6 +83,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -94,6 +96,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

4
replies.njk
View File

@@ -53,6 +53,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
@@ -86,6 +87,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
via Web
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</p>
{% endif %}
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
@@ -116,6 +118,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -128,6 +131,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}

3
reposts.njk
View File

@@ -53,6 +53,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{% endif %}
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
{% set repostedUrl = post.data.repostOf or post.data.repost_of %}
@@ -92,6 +93,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
Previous
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
@@ -104,6 +106,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
{% include "components/garden-badge.njk" %}
</div>
</nav>
{% endif %}