Display tags in posts (#11)

api/album.go

@@ -37,7 +37,7 @@ func FetchAlbum(albumID string) (types.Album, error) {
 }
 
 func FetchPosts(albumID string) (types.Album, error) {
-	res, err := http.Get("https://api.imgur.com/post/v1/posts/" + albumID + "?client_id=" + viper.GetString("RIMGU_IMGUR_CLIENT_ID") + "&include=media%2Caccount")
+	res, err := http.Get("https://api.imgur.com/post/v1/posts/" + albumID + "?client_id=" + viper.GetString("RIMGU_IMGUR_CLIENT_ID") + "&include=media%2Caccount%2Ctags")
 	if err != nil {
 		return types.Album{}, err
 	}
@@ -73,6 +73,18 @@ func ParseAlbum(data gjson.Result) (types.Album, error) {
 		},
 	)
 
+	tags := make([]types.Tag, 0)
+	data.Get("tags").ForEach(
+		func(key gjson.Result, value gjson.Result) bool {
+			tags = append(tags, types.Tag{
+				Tag: value.Get("tag").String(),
+				Display: value.Get("display").String(),
+				Background: "/" + value.Get("background_id").String() + ".webp",
+			})
+			return true
+		},
+	)
+
 	createdAt, err := utils.FormatDate(data.Get("created_at").String())
 	if err != nil {
 		return types.Album{}, err
@@ -88,6 +100,7 @@ func ParseAlbum(data gjson.Result) (types.Album, error) {
 		Comments:            data.Get("comment_count").Int(),
 		CreatedAt:           createdAt,
 		Media:               media,
+		Tags:								 tags,
 	}
 
 	account := data.Get("account")

pages/gallery.go

@@ -9,7 +9,7 @@ import (
 
 func HandleGallery(c *fiber.Ctx) error {
 	utils.SetHeaders(c)
-	c.Set("Content-Security-Policy", "default-src 'none'; media-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; block-all-mixed-content")
+	c.Set("Content-Security-Policy", "default-src 'none'; media-src 'self'; style-src 'unsafe-inline' 'self'; img-src 'self'; font-src 'self'; block-all-mixed-content")
 
 	album, err := api.FetchAlbum(c.Params("galleryID"))
 	if err != nil {

static/css/album.css

@@ -36,4 +36,24 @@ img {
   flex-direction: row;
   align-items: center;
   gap: 5px;
+}
+
+.tags {
+  display: flex;
+  gap: 10px;
+  flex-flow: wrap;
+}
+
+.tag {
+  border-radius: 10px;
+  padding: 7px;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-blend-mode: multiply;
+  min-width: 110px;
+}
+
+.tag__display {
+  font-weight: 700;
+  color: #fff;
+  text-align: center;
 }

types/Album.go

@@ -12,4 +12,5 @@ type Album struct {
 	Comments            int64
 	User								User
 	Media               []Media
+	Tags								[]Tag
 }

views/post.hbs

@@ -74,6 +74,18 @@
     <br>
     {{/each}}
 
+    {{#if post.tags}}
+    <div class="tags">
+      {{#each post.tags}}
+      <a href="/t/{{this.Tag}}">
+        <div class="tag" style="background-image: url('{{this.Background}}');">
+          <p class="tag__display">{{this.Display}}</p>
+        </div>
+      </a>
+      {{/each}}
+    </div>
+    {{/if}}
+
     {{#if comments}}
     <div>
       <hr>