From 09e6a15085936d6b8fbc2cadcf794121b44a865e Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Sat, 23 Oct 2021 17:28:06 -0500 Subject: [PATCH] Rejigger timelines to avoid explicit types --- local/resetdb.sh | 8 +- public/js/showcase.js | 29 +-- public/style.css | 4 +- src/rawdata/scss/_timeline.scss | 15 +- src/templates/mapping.go | 30 ++- src/templates/src/atom.xml | 22 +- src/templates/src/include/timeline_item.html | 50 ++-- src/templates/src/snippet.html | 24 +- src/templates/src/user_profile.html | 70 ++++-- src/templates/templates.go | 40 +--- src/templates/types.go | 64 ++--- src/website/feed.go | 1 - src/website/jam.go | 2 +- src/website/landing.go | 2 +- src/website/showcase.go | 2 +- src/website/snippet.go | 57 +++-- src/website/timeline_helper.go | 234 +++++++++++-------- src/website/user.go | 29 +-- 18 files changed, 357 insertions(+), 326 deletions(-) diff --git a/local/resetdb.sh b/local/resetdb.sh index f8cf387f..7f1e7401 100755 --- a/local/resetdb.sh +++ b/local/resetdb.sh @@ -1,6 +1,6 @@ #!/bin/bash -set -eou pipefail +set -euxo pipefail # This script is for use in local development only. It wipes the existing db, # creates a new empty one, runs the initial migration to create the schema, @@ -9,8 +9,8 @@ set -eou pipefail # TODO(opensource): We should adapt Asaf's seedfile command and then delete this. THIS_PATH=$(pwd) -BETA_PATH='/mnt/c/Users/bvisn/Developer/handmade/handmade-beta' -# BETA_PATH='/Users/benvisness/Developer/handmade/handmade-beta' +#BETA_PATH='/mnt/c/Users/bvisn/Developer/handmade/handmade-beta' + BETA_PATH='/Users/benvisness/Developer/handmade/handmade-beta' pushd $BETA_PATH docker-compose down -v @@ -19,4 +19,4 @@ pushd $BETA_PATH docker-compose exec postgres bash -c "psql -U postgres -c \"CREATE ROLE hmn CREATEDB LOGIN PASSWORD 'password';\"" popd -go run src/main.go seedfile local/backups/hmn_pg_dump_live_2021-09-06 +go run src/main.go seedfile local/backups/hmn_pg_dump_live_2021-10-23 diff --git a/public/js/showcase.js b/public/js/showcase.js index 122e9ead..30fe9ee6 100644 --- a/public/js/showcase.js +++ b/public/js/showcase.js @@ -1,14 +1,9 @@ -const TimelineTypes = { - UNKNOWN: 0, - FORUM_THREAD: 1, - FORUM_REPLY: 2, - BLOG_POST: 3, - BLOG_COMMENT: 4, - SNIPPET_IMAGE: 5, - SNIPPET_VIDEO: 6, - SNIPPET_AUDIO: 7, - SNIPPET_YOUTUBE: 8 -}; +const TimelineMediaTypes = { + IMAGE: 1, + VIDEO: 2, + AUDIO: 3, + EMBED: 4, +} const showcaseItemTemplate = makeTemplateCloner("showcase_item"); const modalTemplate = makeTemplateCloner("timeline_modal"); @@ -39,10 +34,10 @@ function makeShowcaseItem(timelineItem) { let addThumbnailFunc = () => {}; let createModalContentFunc = () => {}; - switch (timelineItem.type) { - case TimelineTypes.SNIPPET_IMAGE: + switch (timelineItem.media_type) { + case TimelineMediaTypes.IMAGE: addThumbnailFunc = () => { - itemEl.thumbnail.style.backgroundImage = `url('${timelineItem.asset_url}')`; + itemEl.thumbnail.style.backgroundImage = `url('${timelineItem.thumbnail_url}')`; }; createModalContentFunc = () => { @@ -53,10 +48,10 @@ function makeShowcaseItem(timelineItem) { }; break; - case TimelineTypes.SNIPPET_VIDEO: + case TimelineMediaTypes.VIDEO: addThumbnailFunc = () => { const video = document.createElement('video'); - video.src = timelineItem.asset_url; + video.src = timelineItem.asset_url; // TODO: Use image thumbnails video.controls = false; video.classList.add('h-100'); video.preload = 'metadata'; @@ -73,7 +68,7 @@ function makeShowcaseItem(timelineItem) { }; break; - case TimelineTypes.SNIPPET_AUDIO: + case TimelineMediaTypes.AUDIO: createModalContentFunc = () => { const modalAudio = document.createElement('audio'); modalAudio.src = timelineItem.asset_url; diff --git a/public/style.css b/public/style.css index befa431e..2e6eba83 100644 --- a/public/style.css +++ b/public/style.css @@ -9364,12 +9364,12 @@ span.icon-rss::before { display: block; max-width: 100%; max-height: 80vh; } - .timeline-item .timeline-content-box.youtube { + .timeline-item .timeline-content-box.embed { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } - .timeline-item .timeline-content-box.youtube > iframe { + .timeline-item .timeline-content-box.embed > iframe { position: absolute; top: 0; left: 0; diff --git a/src/rawdata/scss/_timeline.scss b/src/rawdata/scss/_timeline.scss index 82645147..a7f8d793 100644 --- a/src/rawdata/scss/_timeline.scss +++ b/src/rawdata/scss/_timeline.scss @@ -1,17 +1,4 @@ .timeline { - &.no-forums .forums { - display: none; - } - &.no-blogs .blogs { - display: none; - } - &.no-library .library { - display: none; - } - &.no-snippets .snippets { - display: none; - } - .timeline-item { @include usevar(background-color, card-background); @include usevar(color, main-color); @@ -41,7 +28,7 @@ max-height: 80vh; } - .timeline-content-box.youtube { + .timeline-content-box.embed { // NOTE(asaf): CSS trick to get an iframe to auto resize position: relative; width: 100%; diff --git a/src/templates/mapping.go b/src/templates/mapping.go index 0e998ca0..c1ec220b 100644 --- a/src/templates/mapping.go +++ b/src/templates/mapping.go @@ -254,10 +254,6 @@ func TimelineItemsToJSON(items []TimelineItem) string { } builder.WriteRune('{') - builder.WriteString(`"type":`) - builder.WriteString(strconv.Itoa(int(item.Type))) - builder.WriteRune(',') - builder.WriteString(`"date":`) builder.WriteString(strconv.FormatInt(item.Date.UTC().Unix(), 10)) builder.WriteRune(',') @@ -288,16 +284,36 @@ func TimelineItemsToJSON(items []TimelineItem) string { builder.WriteString(item.Url) builder.WriteString(`",`) + var mediaType TimelineItemMediaType + var assetUrl string + var thumbnailUrl string + var width, height int + if len(item.EmbedMedia) > 0 { + mediaType = item.EmbedMedia[0].Type + assetUrl = item.EmbedMedia[0].AssetUrl + thumbnailUrl = item.EmbedMedia[0].ThumbnailUrl + width = item.EmbedMedia[0].Width + height = item.EmbedMedia[0].Height + } + + builder.WriteString(`"media_type":`) + builder.WriteString(strconv.Itoa(int(mediaType))) + builder.WriteRune(',') + builder.WriteString(`"width":`) - builder.WriteString(strconv.Itoa(item.Width)) + builder.WriteString(strconv.Itoa(width)) builder.WriteRune(',') builder.WriteString(`"height":`) - builder.WriteString(strconv.Itoa(item.Height)) + builder.WriteString(strconv.Itoa(height)) builder.WriteRune(',') builder.WriteString(`"asset_url":"`) - builder.WriteString(item.AssetUrl) + builder.WriteString(assetUrl) + builder.WriteString(`",`) + + builder.WriteString(`"thumbnail_url":"`) + builder.WriteString(thumbnailUrl) builder.WriteString(`",`) builder.WriteString(`"discord_message_url":"`) diff --git a/src/templates/src/atom.xml b/src/templates/src/atom.xml index 460e774e..5b62da7e 100644 --- a/src/templates/src/atom.xml +++ b/src/templates/src/atom.xml @@ -46,7 +46,7 @@ New showcase item by {{ .OwnerName }} - {{ .UUID }} + {{ string2uuid .Url }} {{ rfc3339 .Date }} {{ .OwnerName }} @@ -54,13 +54,19 @@
- {{ .Description }} - {{ if snippetimage . }} - - {{ else if snippetvideo . }} -
diff --git a/src/templates/src/include/timeline_item.html b/src/templates/src/include/timeline_item.html index 7b374f45..988f6cd3 100644 --- a/src/templates/src/include/timeline_item.html +++ b/src/templates/src/include/timeline_item.html @@ -1,5 +1,31 @@ -{{ if timelinepostitem . }} -
+{{/* +TODO: The logic in here for how to present various types of timeline items needs to be more robust. +*/}} + +{{ if or .Description .EmbedMedia }} +
+ +
{{ .Description }}
+ {{ range .EmbedMedia }} +
+ {{ if eq .Type mediaimage }} + + {{ else if eq .Type mediavideo }} +
+ {{ end }} +
+{{ else }} +
{{ template "breadcrumbs.html" .Breadcrumbs }} @@ -9,25 +35,5 @@
-{{ else if timelinesnippetitem . }} -
- -

{{ .Description }}

-
- {{ if snippetvideo . }} -
-
{{ end }} diff --git a/src/templates/src/snippet.html b/src/templates/src/snippet.html index 79d00153..1bed41b5 100644 --- a/src/templates/src/snippet.html +++ b/src/templates/src/snippet.html @@ -10,17 +10,19 @@

{{ .Snippet.Description }}

- {{ if snippetimage .Snippet }} - - {{ else if snippetvideo .Snippet }} -