Add tags to showcase / snippet UIs

This commit is contained in:
Ben Visness 2021-11-11 11:31:23 -08:00
parent 4ea1338c32
commit 601adf2d16
4 changed files with 43 additions and 1 deletions

View File

@ -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() {

View File

@ -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(']')

View File

@ -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>

View File

@ -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 }}