From 2260278786523d97c0d0ee2b06585ea42245fcb6 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:45:42 +0200
Subject: [PATCH] hugo: define sidebar badge using front matter

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 content/contribute/file-conventions.md |  1 +
 layouts/partials/sidebar.html          | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/content/contribute/file-conventions.md b/content/contribute/file-conventions.md
index 8f260e8705..4abf27d88c 100644
--- a/content/contribute/file-conventions.md
+++ b/content/contribute/file-conventions.md
@@ -31,6 +31,7 @@ following keys are supported. The title, description, and keywords are required.
 | sitemap         | no       | Exclude the page from indexing by search engines. When set to `false`, the page is excluded from `sitemap.xml`, and a `<meta name="robots" content="noindex"/>` header is added to the page.                   |
 | sidebar.reverse | no       | This parameter for section pages changes the sort order of the pages in that section. Pages that would normally appear at the top, by weight or by title, will instead appear near the bottom, and vice versa. |
 | sidebar.goto    | no       | Set this to change the URL that the sidebar should point to for this entry. See [pageless sidebar entries](#pageless-sidebar-entries).                                                                         |
+| sidebar.badge   | no       | Set this to add a badge to the sidebar entry for this page. This param option consists of two fields: `badge.text` and `badge.color`.                                                                          |
 
 Here's an example of a valid (but contrived) page metadata. The order of
 the metadata elements in the front matter isn't important.
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 95ae36cd2c..f7b4b57eb3 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -46,12 +46,14 @@
         {{- if .Permalink }}
           {{/* If the link is not empty, use it */}}
           <a class="select-none hover:text-blue-light hover:dark:text-blue-dark"
-            href="{{ .Permalink }}">{{ markdownify .LinkTitle }}</a>
+            href="{{ .Permalink }}">
+            {{ template "renderTitle" . }}
+          </a>
         {{- else }}
           {{/* Otherwise, just expand the section */}}
           <button @click="expanded = !expanded"
             class="select-none hover:text-blue-light hover:dark:text-blue-dark">
-            {{ markdownify .LinkTitle }}
+            {{ template "renderTitle" . }}
           </button>
           {{- end }}
       </span>
@@ -76,7 +78,9 @@
       <a class="py-2 w-full truncate block"
          href="{{ markdownify .Params.goto }}"
          title="{{ markdownify .Title }}">
-        <span class="flex items-center gap-2">{{ markdownify .LinkTitle }}</span>
+        <span class="flex items-center gap-2">
+          {{ template "renderTitle" . }}
+        </span>
       </a>
     </li>
   {{- else }}
@@ -85,8 +89,17 @@
       {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
       <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
           href="{{ .Permalink }}" title="{{ markdownify .Title }}"
-          ><span class="flex items-center gap-2">{{ markdownify .LinkTitle }}</span>
+          ><span class="flex items-center gap-2">
+            {{ template "renderTitle" . }}
+      </span>
       </a>
     </li>
   {{- end }}
 {{ end }}
+
+{{ define "renderTitle" }}
+  {{ .LinkTitle }}
+  {{- with .Params.sidebar.badge }}
+    {{- partial "components/badge.html" (dict "color" .color "content" .text) }}
+  {{- end }}
+{{ end }}