UI cleanup and changes

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", "<br>")
+			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,
 			})
 

api/comments.go

@@ -92,6 +92,8 @@ func ParseComment(data gjson.Result) Comment {
 
 	comment := data.Get("comment").String()
 
+	comment = strings.ReplaceAll(comment, "\n", "<br>")
+
 	for _, match := range imgRe.FindAllString(comment, -1) {
 		img := iImgurRe.ReplaceAllString(match, "")
 		img = `<img src="` + img + `" class="comment__media" loading="lazy"/>`

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

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,

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 {

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);
 }

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 {

views/partials/comment.hbs

@@ -1,9 +1,14 @@
 <div class="comment">
   <div class="comment__user">
+    {{#noteq this.User.Username "[deleted]"}}
     <img src="{{this.User.Avatar}}" class="pfp" width="24" height="24" loading="lazy">
     <a href="/user/{{this.User.Username}}">
       <p class="comment__user__username"><b>{{this.User.Username}}</b></p>
     </a>
+    {{/noteq}}
+    {{#equal this.User.Username "[deleted]"}}
+      <p class="comment__user__username"><b>[deleted]</b></p>
+    {{/equal}}
   </div>
   <div>
     {{{this.Comment}}}

views/post.hbs

@@ -28,16 +28,12 @@
   <main>
     <div class="imageMeta__wrapper">
       {{#if post.User.Username}}
-      <div class="user">
-        <a href="/user/{{post.User.Username}}">
-          <img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" loading="lazy" />
-        </a>
-        <a href="/user/{{post.User.Username}}">
-          <p>
-            <b>{{post.User.Username}}</b>
-          </p>
-        </a>
-      </div>
+      <a href="/user/{{post.User.Username}}" class="user">
+        <img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" />
+        <p>
+          <b>{{post.User.Username}}</b>
+        </p>
+      </a>
       {{/if}}
       <div class="imageMeta">
         <div class="imageMeta__item">
@@ -51,12 +47,12 @@
       </div>
     </div>
 
-    {{#each post.Media}}
-    {{#if this.Title}}
-    <h4>{{this.Title}}</h4>
-    {{/if}}
+    <div class="post__media">
+      {{#each post.Media}}
+      {{#if this.Title}}
+      <h4>{{this.Title}}</h4>
+      {{/if}}
 
-    <div class="center">
       {{#equal this.Type "image"}}
       <img src="{{this.Url}}" loading="lazy">
       {{/equal}}
@@ -65,12 +61,12 @@
         <source type="{{this.MimeType}}" src="{{this.Url}}" />
       </video>
       {{/equal}}
-    </div>
 
-    {{#if this.Description}}
-    <p>{{this.Description}}</p>
-    {{/if}}
+      {{#if this.Description}}
+      <p>{{{this.Description}}}</p>
+      {{/if}}
     {{/each}}
+    </div>
 
     {{#if post.tags}}
     <div class="tags">
@@ -105,7 +101,6 @@
         {{/each}}
       </div>
     </div>
-    <hr>
     {{/if}}
   </section>