Feature: Complete the artwork page (comments not added)

entity/models.go

@@ -17,7 +17,7 @@ type Illust struct {
 	Bookmarks     int                            `json:"total_bookmarks"`
 	SingleImage   map[string]string              `json:"meta_single_page"`
 	MultipleImage []map[string]map[string]string `json:"meta_pages"`
-	// Tags Tag[];
+	Tags          []Tag                          `json:"tags"`
 }
 
 type Spotlight struct {
@@ -28,6 +28,11 @@ type Spotlight struct {
 	Date      string `json:"publish_date"`
 }
 
+type Tag struct {
+	Name           string `json:"name"`
+	TranslatedName string `json:"translated_name"`
+}
+
 type UserBrief struct {
 	ID      int               `json:"id"`
 	Name    string            `json:"name"`

handler/illust.go

@@ -56,6 +56,21 @@ func GetNewestIllust(c *gin.Context) []entity.Illust {
 	return illusts
 }
 
+func GetMemberIllust(c *gin.Context, id string) []entity.Illust {
+	URL := "https://hibi.cocomi.cf/api/pixiv/member_illust?id=" + id
+	var illusts []entity.Illust
+
+	s := Request(URL)
+	g := GetInnerJSON(s, "illusts")
+
+	err := json.Unmarshal([]byte(g), &illusts)
+	if err != nil {
+		panic("Failed to parse JSON")
+	}
+
+	return illusts
+}
+
 func GetRelatedIllust(c *gin.Context) []entity.Illust {
 	id := c.Param("id")
 	URL := "https://hibi.cocomi.cf/api/pixiv/related?id=" + id

main.go

@@ -4,6 +4,7 @@ import (
 	"html/template"
 	"net/http"
 	"pixivfe/handler"
+	"strconv"
 
 	"github.com/gin-gonic/gin"
 )
@@ -15,7 +16,12 @@ func inc(n int) int {
 func artwork_page(c *gin.Context) {
 	illust := handler.GetIllustByID(c)
 	related := handler.GetRelatedIllust(c)
-	c.HTML(http.StatusOK, "artwork.html", gin.H{"Illust": illust, "Related": related})
+	recent_by_artist := handler.GetMemberIllust(c, strconv.Itoa(illust.Artist.ID))
+	c.HTML(http.StatusOK, "artwork.html", gin.H{
+		"Illust":  illust,
+		"Related": related,
+		"Recent":  recent_by_artist,
+	})
 }
 
 func index_page(c *gin.Context) {

template/artwork.html

@@ -1,19 +1,34 @@
 {{ template "header.html" }}
+{{ $parent := . }}
 <div class="container">
   <div class="artwork-page">
+    {{ with .Illust }}
     <div class="artwork-content">
       <div class="artwork-images">
         <!-- -->
-        <a href="#">
-          <img src="https://px2.rainchan.win/img-master/img/2023/05/14/10/00/17/108109545_p0_master1200.jpg" alt="#"
-            class="artwork-image-page" target="_blank" />
+        {{ if eq .Pages 1 }}
+        <a href="{{ .SingleImage.original_image_url }}" target="_blank">
+          <img src="{{ .Images.large }}" alt="{{ .Title }}" class="artwork-image-page" />
         </a>
+        {{ else }}
+        {{ range .MultipleImage }}
+        <a href="{{ .image_urls.original }}" target="_blank">
+          <img src="{{ .image_urls.large }}" alt="{{ .image_urls.original }}" class="artwork-image-page" />
+        </a>
+
+        {{ end }}
+        {{ end }}
       </div>
-      {{ with .Illust }}
       <h2>{{ .Title }}</h3>
         <p>{{ .Caption }}</p>
-        <p>Tags</p>
-        <br />
+
+        <div class="artwork-tags">
+
+          {{ range .Tags }}
+          <span class="artwork-tag-name">#{{ .Name }}</span><span class="artwork-tag-altname">{{ .TranslatedName
+            }}</span>
+          {{ end }}
+        </div>
         <span>{{ .Views }} views | {{ .Bookmarks }} bookmarks</span>
         <br />
         <small>{{ .Date }}</small>
@@ -21,12 +36,22 @@
         <a href="#" class="artwork-artist flex"><img src="{{ .Artist.Avatar.medium }}" alt="{{ .Artist.Name }}"
             class="artwork-artist-avatar border-rounded" />
           {{ .Artist.Name }}</a>
-        <div class="thumbnail-container">...</div>
+        <div class="thumbnail-container">
+          {{ range $parent.Recent }}
+          <div class="artwork-thumbnail-small artwork-thumbnail">
+            <a href="#">
+              <img src="{{ .Images.square_medium }}" alt="{{ .Title }}" class="artwork-master-image" />
+            </a>
+          </div>
+          {{ end }}
+        </div>
         <hr />
         <h2>Comments</h2>
-        {{ end }}
+        To be added :)
     </div>
+    {{ end }}
   </div>
+  <h2>Related works</h2>
   {{ range .Related }}
   <div class="artwork-thumbnail-small artwork-thumbnail">
     <a href="#">

template/css/style.css

@@ -134,7 +134,7 @@ body {
 }
 .artwork-page .artwork-content {
   margin: 0 20px;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 }
 .artwork-page .artwork-content a {
   color: #3d7699;
@@ -153,14 +153,26 @@ body {
   height: 50px;
   object-position: center top;
 }
+.artwork-page .artwork-tags {
+  display: inline-block;
+}
+.artwork-page .artwork-tags .artwork-tag-name {
+  margin-right: 5px;
+  color: #3d7699;
+  font-weight: bold;
+}
+.artwork-page .artwork-tags .artwork-tag-altname {
+  margin-right: 8px;
+}
 .artwork-page .artwork-images {
   display: flex;
-  justify-content: center;
+  align-items: center;
+  flex-direction: column;
   width: 100%;
 }
 .artwork-page .artwork-images .artwork-image-page {
   margin: 10px auto;
-  height: 578px;
+  max-height: 578px;
   width: auto;
   max-width: 100%;
 }

template/css/style.scss

@@ -157,7 +157,7 @@ body {
 
   .artwork-content {
     margin: 0 20px;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
 
     a {
       color: $blue;
@@ -181,14 +181,28 @@ body {
     }
   }
 
+  .artwork-tags {
+    display: inline-block;
+
+    .artwork-tag-name {
+      margin-right: 5px;
+      color: $blue;
+      font-weight: bold;
+    }
+    .artwork-tag-altname {
+      margin-right: 8px;
+    }
+  }
+
   .artwork-images {
     display: flex;
-    justify-content: center;
+    align-items: center;
+    flex-direction: column;
     width: 100%;
 
     .artwork-image-page {
       margin: 10px auto;
-      height: 578px;
+      max-height: 578px;
       width: auto;
       max-width: 100%;
     }