From 50d71ad321542dd06c6343b18c49394fd8d8ad0b Mon Sep 17 00:00:00 2001 From: video-prize-ranch Date: Thu, 13 Oct 2022 17:29:05 -0400 Subject: [PATCH] UI cleanup and changes --- api/album.go | 7 ++++++- api/comments.go | 2 ++ go.mod | 2 +- main.go | 9 +++++++++ static/css/album.css | 21 +++++++++++++++------ static/css/base.css | 5 ----- static/css/comments.css | 4 +++- views/partials/comment.hbs | 5 +++++ views/post.hbs | 37 ++++++++++++++++--------------------- 9 files changed, 57 insertions(+), 35 deletions(-) diff --git a/api/album.go b/api/album.go index eca7ab3..ef20c3b 100644 --- a/api/album.go +++ b/api/album.go @@ -5,6 +5,7 @@ import ( "time" "codeberg.org/video-prize-ranch/rimgo/utils" + "github.com/microcosm-cc/bluemonday" "github.com/patrickmn/go-cache" "github.com/tidwall/gjson" ) @@ -103,13 +104,17 @@ func ParseAlbum(data gjson.Result) (Album, error) { url := value.Get("url").String() url = strings.ReplaceAll(url, "https://i.imgur.com", "") + description := value.Get("metadata.description").String() + description = strings.ReplaceAll(description, "\n", "
") + description = bluemonday.UGCPolicy().Sanitize(description) + media = append(media, Media{ Id: value.Get("id").String(), Name: value.Get("name").String(), MimeType: value.Get("mime_type").String(), Type: value.Get("type").String(), Title: value.Get("metadata.title").String(), - Description: value.Get("metadata.description").String(), + Description: description, Url: url, }) diff --git a/api/comments.go b/api/comments.go index 2feb526..7ee36c8 100644 --- a/api/comments.go +++ b/api/comments.go @@ -92,6 +92,8 @@ func ParseComment(data gjson.Result) Comment { comment := data.Get("comment").String() + comment = strings.ReplaceAll(comment, "\n", "
") + for _, match := range imgRe.FindAllString(comment, -1) { img := iImgurRe.ReplaceAllString(match, "") img = `` diff --git a/go.mod b/go.mod index 01d980a..46898e4 100644 --- a/go.mod +++ b/go.mod @@ -3,6 +3,7 @@ module codeberg.org/video-prize-ranch/rimgo go 1.17 require ( + github.com/aymerick/raymond v2.0.2+incompatible github.com/dustin/go-humanize v1.0.0 github.com/gofiber/fiber/v2 v2.36.0 github.com/gofiber/template v1.6.30 @@ -16,7 +17,6 @@ require ( require ( github.com/andybalholm/brotli v1.0.4 // indirect github.com/aymerick/douceur v0.2.0 // indirect - github.com/aymerick/raymond v2.0.2+incompatible // indirect github.com/gorilla/css v1.0.0 // indirect github.com/klauspost/compress v1.15.9 // indirect github.com/tidwall/match v1.1.1 // indirect diff --git a/main.go b/main.go index f6bf3c6..89875c5 100644 --- a/main.go +++ b/main.go @@ -13,6 +13,7 @@ import ( "codeberg.org/video-prize-ranch/rimgo/static" "codeberg.org/video-prize-ranch/rimgo/utils" "codeberg.org/video-prize-ranch/rimgo/views" + "github.com/aymerick/raymond" "github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2/middleware/filesystem" "github.com/gofiber/fiber/v2/middleware/recover" @@ -41,6 +42,14 @@ func main() { } engine := handlebars.NewFileSystem(http.FS(views.GetFiles()), ".hbs") + + engine.AddFunc("noteq", func(a interface{}, b interface{}, options *raymond.Options) interface{} { + if raymond.Str(a) != raymond.Str(b) { + return options.Fn() + } + return "" + }) + app := fiber.New(fiber.Config{ Views: engine, Prefork: utils.Config.FiberPrefork, diff --git a/static/css/album.css b/static/css/album.css index 9977ece..e98e7cf 100644 --- a/static/css/album.css +++ b/static/css/album.css @@ -2,19 +2,26 @@ h1 { margin: 0; } -main p, h4 { - text-align: center; +.pfp { + border-radius: 100%; } -main video, -main img { +.post__media { + display: flex; + align-items: center; + flex-direction: column; +} + +.post__media video, +.post__media img { margin: 1em 0; max-width: 100%; max-height: 85vh; } -.pfp { - border-radius: 100%; +.post__media p { + margin-left: 1rem; + align-self: flex-start; } .imageMeta__wrapper, @@ -31,6 +38,7 @@ main img { .imageMeta__wrapper { gap: 1rem; + margin-top: 0.5em; } .user { @@ -44,6 +52,7 @@ main img { display: flex; gap: 10px; flex-flow: wrap; + margin-top: 1em; } .tag { diff --git a/static/css/base.css b/static/css/base.css index d156466..a58ceef 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -24,11 +24,6 @@ nav { align-items: center; } -.center { - display: flex; - justify-content: center; -} - .logo { filter: invert(1) hue-rotate(180deg); } diff --git a/static/css/comments.css b/static/css/comments.css index 4db525c..734d0e9 100644 --- a/static/css/comments.css +++ b/static/css/comments.css @@ -5,6 +5,7 @@ } .comments { + margin-top: 1em; gap: 0.25em; display: flex; flex-direction: column; @@ -49,7 +50,8 @@ .comment__media { height: 10em; - display: block + display: block; + margin: 0.5em 0; } .comment__updatedDate { diff --git a/views/partials/comment.hbs b/views/partials/comment.hbs index 297efad..77bb65c 100644 --- a/views/partials/comment.hbs +++ b/views/partials/comment.hbs @@ -1,9 +1,14 @@
+ {{#noteq this.User.Username "[deleted]"}}

{{this.User.Username}}

 + {{/noteq}} + {{#equal this.User.Username "[deleted]"}} +

[deleted]

+ {{/equal}}
{{{this.Comment}}} diff --git a/views/post.hbs b/views/post.hbs index 1bf4da1..0f0215d 100644 --- a/views/post.hbs +++ b/views/post.hbs @@ -28,16 +28,12 @@
{{#if post.User.Username}} -
- - - - -

- {{post.User.Username}} -

- -
+ + +

+ {{post.User.Username}} +

+ {{/if}}
@@ -51,12 +47,12 @@
- {{#each post.Media}} - {{#if this.Title}} -

{{this.Title}}

- {{/if}} +
+ {{#each post.Media}} + {{#if this.Title}} +

{{this.Title}}

+ {{/if}} -
{{#equal this.Type "image"}} {{/equal}} @@ -65,12 +61,12 @@ {{/equal}} -
- - {{#if this.Description}} -

{{this.Description}}

- {{/if}} + + {{#if this.Description}} +

{{{this.Description}}}

+ {{/if}} {{/each}} +
{{#if post.tags}}
@@ -105,7 +101,6 @@ {{/each}}
-
{{/if}}