Add tags to showcase / snippet UIs

public/js/showcase.js

@@ -7,6 +7,7 @@ const TimelineMediaTypes = {
 
 const showcaseItemTemplate = makeTemplateCloner("showcase_item");
 const modalTemplate = makeTemplateCloner("timeline_modal");
+const tagTemplate = makeTemplateCloner("timeline_item_tag");
 
 function showcaseTimestamp(rawDate) {
     const date = new Date(rawDate*1000);
@@ -95,6 +96,17 @@ function makeShowcaseItem(timelineItem) {
             modalEl.date.textContent = timestamp;
             modalEl.date.setAttribute("href", timelineItem.snippet_url);
 
+            if (timelineItem.tags.length === 0) {
+                modalEl.tags.remove();
+            } else {
+                for (const tag of timelineItem.tags) {
+                    const tagItem = tagTemplate();
+                    tagItem.tag.innerText = tag.text;
+
+                    modalEl.tags.appendChild(tagItem.root);
+                }
+            }
+
             modalEl.discord_link.href = timelineItem.discord_message_url;
 
             function close() {

src/templates/mapping.go

@@ -307,8 +307,24 @@ func TimelineItemsToJSON(items []TimelineItem) string {
 
 		builder.WriteString(`"discord_message_url":"`)
 		builder.WriteString(item.DiscordMessageUrl)
+		builder.WriteString(`",`)
+
+		builder.WriteString(`"tags":[`)
+		for _, tag := range item.Tags {
+			builder.WriteString(`{`)
+
+			builder.WriteString(`"text":"`)
+			builder.WriteString(tag.Text)
+			builder.WriteString(`",`)
+
+			builder.WriteString(`"url":"`)
+			builder.WriteString(tag.Url)
 			builder.WriteString(`"`)
 
+			builder.WriteString(`}`)
+		}
+		builder.WriteString(`]`)
+
 		builder.WriteRune('}')
 	}
 	builder.WriteRune(']')

src/templates/src/include/showcase_templates.html

@@ -30,6 +30,7 @@
 			<div data-tmpl="description">
 				Unknown description
 			</div>
+			<div data-tmpl="tags" class="pt2 flex"></div>
 			<div class="i f7 pt2">
 				<a data-tmpl="discord_link" target="_blank">View original message on Discord</a>
 			</div>
@@ -38,3 +39,7 @@
 	</div>
 </div>
 </template>
+
+<template id="timeline_item_tag">
+<div data-tmpl="tag" class="bg-theme-dimmer ph2 pv1 br2"></div>
+</template>

src/templates/src/snippet.html

@@ -24,6 +24,15 @@
                 {{ end }}
             {{ end }}
         </div>
+        {{ with .Snippet.Tags }}
+            <div class="mt3 flex">
+                {{ range $i, $tag := . }}
+                    <div class="bg-theme-dimmer ph2 pv1 br2 {{ if gt $i 0 }}ml2{{ end }}">
+                        {{ $tag.Text }}
+                    </div>
+                {{ end }}
+            </div>
+        {{ end }}
     </div>
 </div>
 {{ end }}