UI cleanup and changes

This commit is contained in:
video-prize-ranch 2022-10-13 17:29:05 -04:00
parent 7cad41e11d
commit 50d71ad321
No known key found for this signature in database
9 changed files with 57 additions and 35 deletions

View File

@ -5,6 +5,7 @@ import (
"time" "time"
"codeberg.org/video-prize-ranch/rimgo/utils" "codeberg.org/video-prize-ranch/rimgo/utils"
"github.com/microcosm-cc/bluemonday"
"github.com/patrickmn/go-cache" "github.com/patrickmn/go-cache"
"github.com/tidwall/gjson" "github.com/tidwall/gjson"
) )
@ -103,13 +104,17 @@ func ParseAlbum(data gjson.Result) (Album, error) {
url := value.Get("url").String() url := value.Get("url").String()
url = strings.ReplaceAll(url, "https://i.imgur.com", "") 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{ media = append(media, Media{
Id: value.Get("id").String(), Id: value.Get("id").String(),
Name: value.Get("name").String(), Name: value.Get("name").String(),
MimeType: value.Get("mime_type").String(), MimeType: value.Get("mime_type").String(),
Type: value.Get("type").String(), Type: value.Get("type").String(),
Title: value.Get("metadata.title").String(), Title: value.Get("metadata.title").String(),
Description: value.Get("metadata.description").String(), Description: description,
Url: url, Url: url,
}) })

View File

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

2
go.mod
View File

@ -3,6 +3,7 @@ module codeberg.org/video-prize-ranch/rimgo
go 1.17 go 1.17
require ( require (
github.com/aymerick/raymond v2.0.2+incompatible
github.com/dustin/go-humanize v1.0.0 github.com/dustin/go-humanize v1.0.0
github.com/gofiber/fiber/v2 v2.36.0 github.com/gofiber/fiber/v2 v2.36.0
github.com/gofiber/template v1.6.30 github.com/gofiber/template v1.6.30
@ -16,7 +17,6 @@ require (
require ( require (
github.com/andybalholm/brotli v1.0.4 // indirect github.com/andybalholm/brotli v1.0.4 // indirect
github.com/aymerick/douceur v0.2.0 // 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/gorilla/css v1.0.0 // indirect
github.com/klauspost/compress v1.15.9 // indirect github.com/klauspost/compress v1.15.9 // indirect
github.com/tidwall/match v1.1.1 // indirect github.com/tidwall/match v1.1.1 // indirect

View File

@ -13,6 +13,7 @@ import (
"codeberg.org/video-prize-ranch/rimgo/static" "codeberg.org/video-prize-ranch/rimgo/static"
"codeberg.org/video-prize-ranch/rimgo/utils" "codeberg.org/video-prize-ranch/rimgo/utils"
"codeberg.org/video-prize-ranch/rimgo/views" "codeberg.org/video-prize-ranch/rimgo/views"
"github.com/aymerick/raymond"
"github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/filesystem" "github.com/gofiber/fiber/v2/middleware/filesystem"
"github.com/gofiber/fiber/v2/middleware/recover" "github.com/gofiber/fiber/v2/middleware/recover"
@ -41,6 +42,14 @@ func main() {
} }
engine := handlebars.NewFileSystem(http.FS(views.GetFiles()), ".hbs") 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{ app := fiber.New(fiber.Config{
Views: engine, Views: engine,
Prefork: utils.Config.FiberPrefork, Prefork: utils.Config.FiberPrefork,

View File

@ -2,19 +2,26 @@ h1 {
margin: 0; margin: 0;
} }
main p, h4 { .pfp {
text-align: center; border-radius: 100%;
} }
main video, .post__media {
main img { display: flex;
align-items: center;
flex-direction: column;
}
.post__media video,
.post__media img {
margin: 1em 0; margin: 1em 0;
max-width: 100%; max-width: 100%;
max-height: 85vh; max-height: 85vh;
} }
.pfp { .post__media p {
border-radius: 100%; margin-left: 1rem;
align-self: flex-start;
} }
.imageMeta__wrapper, .imageMeta__wrapper,
@ -31,6 +38,7 @@ main img {
.imageMeta__wrapper { .imageMeta__wrapper {
gap: 1rem; gap: 1rem;
margin-top: 0.5em;
} }
.user { .user {
@ -44,6 +52,7 @@ main img {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-flow: wrap; flex-flow: wrap;
margin-top: 1em;
} }
.tag { .tag {

View File

@ -24,11 +24,6 @@ nav {
align-items: center; align-items: center;
} }
.center {
display: flex;
justify-content: center;
}
.logo { .logo {
filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg);
} }

View File

@ -5,6 +5,7 @@
} }
.comments { .comments {
margin-top: 1em;
gap: 0.25em; gap: 0.25em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -49,7 +50,8 @@
.comment__media { .comment__media {
height: 10em; height: 10em;
display: block display: block;
margin: 0.5em 0;
} }
.comment__updatedDate { .comment__updatedDate {

View File

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

View File

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