From 11c51b057c0a488c2bd3c5134a75daa3aa2c4ce2 Mon Sep 17 00:00:00 2001
From: Nick Coad <dev@coader.io>
Date: Wed, 4 Dec 2024 19:21:09 +1100
Subject: [PATCH] feat: group tags by category on post view (#3)

---
 Makefile                              |  8 +++++++-
 client/html/post_readonly_sidebar.tpl | 28 ++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/Makefile b/Makefile
index b6604ad2..c70d7c3e 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,13 @@ dc-up:
 dc-down:
 	docker compose down --volumes
 
-dc-reset:
+dc-restart:
 	make dc-down
 	make dc-up
 
+dc-build:
+	docker compose build
+
+dc-rebuild:
+	make dc-build
+	make dc-restart
\ No newline at end of file
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index 6dee5560..1cf58b7e 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -1,5 +1,6 @@
 <div class='readonly-sidebar'>
     <h1 style='line-height: 1.2em'><%= ctx.post.title %></h1>
+    <p style='line-height: 1.2em'><%= ctx.post.description %></p>
     <article class='details'>
         <section class='download'>
             <a rel='external' href='<%- ctx.post.contentUrl %>'>
@@ -84,11 +85,28 @@
         </nav>
     <% } %>
 
-    <nav class='tags'>
-        <h1>Tags (<%- ctx.post.tags.length %>)</h1>
-        <% if (ctx.post.tags.length) { %>
+    <%
+        function kebabToTitleCase(str) {
+            return str
+                .split('-') // Split the string into words using the hyphen as the delimiter
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize the first letter of each word
+                .join(' '); // Join the words back together with spaces
+        }
+        const categories = [];
+        
+        for (let tag of ctx.post.tags) {
+            if (!categories[tag.category]) {
+                categories[tag.category] = []
+            }
+            categories[tag.category].push(tag)
+        }
+    %>
+    
+    <% for (const [category, tags] of Object.entries(categories)) { %>
+        <h1><%= category === "default" ? "Other Tags" : kebabToTitleCase(category) %> (<%- tags.length %>)</h1>
+        <% if (tags.length) { %>
             <ul class='compact-tags'><!--
-                --><% for (let tag of ctx.post.tags) { %><!--
+                --><% for (const tag of tags) { %><!--
                     --><li><!--
                         --><% if (ctx.canViewTags) { %><!--
                         --><a href='<%- ctx.formatClientLink('tag', tag.names[0]) %>' class='<%= ctx.makeCssName(tag.category, 'tag') %>'><!--
@@ -116,5 +134,5 @@
                 <% } %>
             </p>
         <% } %>
-    </nav>
+    <% } %>
 </div>