Feature: add comments for artwork page (currently limited to 30)

handler/pixiv.go

@@ -26,7 +26,8 @@ const (
 	ArtworkInformationURL = "https://www.pixiv.net/ajax/illust/%s"
 	ArtworkImagesURL      = "https://www.pixiv.net/ajax/illust/%s/pages"
 	ArtworkRelatedURL     = "https://www.pixiv.net/ajax/illust/%s/recommend/init?limit=%d"
-	ArtworkNewestURL      = "https://www.pixiv.net/ajax/illust/new?limit=200&type=%s&r18=%s&lastId=%s"
+	ArtworkCommentsURL    = "https://www.pixiv.net/ajax/illusts/comments/roots?illust_id=%s&limit=100"
+	ArtworkNewestURL      = "https://www.pixiv.net/ajax/illust/new?limit=30&type=%s&r18=%s&lastId=%s"
 	ArtworkRankingURL     = "https://www.pixiv.net/ranking.php?format=json&mode=%s&content=%s&p=%s"
 	SearchTagURL          = "https://www.pixiv.net/ajax/search/tags/%s"
 	SearchArtworksURL     = "https://www.pixiv.net/ajax/search/%s/%s?order=%s&mode=%s&p=%s"
@@ -197,6 +198,28 @@ func (p *PixivClient) GetArtworkByID(id string) (*models.Illust, error) {
 	return illust.Illust, nil
 }
 
+func (p *PixivClient) GetArtworkComments(id string) ([]models.Comment, error) {
+	var pr models.PixivResponse
+	var body struct {
+		Comments []models.Comment `json:"comments"`
+	}
+
+	s, _ := p.TextRequest(fmt.Sprintf(ArtworkCommentsURL, id))
+
+	err := json.Unmarshal([]byte(s), &pr)
+
+	if err != nil {
+		return nil, errors.New(fmt.Sprintf("Failed to extract data from JSON response from server. %s", err))
+	}
+	if pr.Error {
+		return nil, errors.New(pr.Message)
+	}
+
+	err = json.Unmarshal([]byte(pr.Body), &body)
+
+	return body.Comments, nil
+}
+
 func (p *PixivClient) GetUserArtworksID(id string, page int) (*string, error) {
 	s, _ := p.TextRequest(fmt.Sprintf(UserArtworksURL, id))
 

models/models.go

@@ -120,6 +120,15 @@ type IllustShort struct {
 	AiType       aiType        `json:"aiType"`
 }
 
+type Comment struct {
+	AuthorID   string `json:"userId"`
+	AuthorName string `json:"userName"`
+	Avatar     string `json:"img"`
+	Context    string `json:"comment"`
+	Stamp      string `json:"stampId"`
+	Date       string `json:"commentDate"`
+}
+
 type User struct {
 	ID              string        `json:"userId"`
 	Name            string        `json:"name"`

template/artwork.html

@@ -1,5 +1,4 @@
-{{ template "header.html" }}
+{{ template "header.html" }} {{ $parent := . }}
-{{ $parent := . }}
 <div class="container">
   <div class="artwork-page">
     {{ with .Illust }}
@@ -7,50 +6,75 @@
       <div class="artwork-images">
         {{ range .Images }}
         <a href="{{ proxyImage .Original }}" target="_blank">
-          <img src="{{ proxyImage .Large }}" alt="{{ proxyImage .Original }}" class="artwork-image-page" />
+          <img
+            src="{{ proxyImage .Large }}"
+            alt="{{ proxyImage .Original }}"
+            class="artwork-image-page"
+          />
         </a>
         {{ end }}
       </div>
-      <h2>{{ .Title }}</h3>
+      <h2>{{ .Title }}</h2>
-        <p>{{ .Description }}</p>
+      <p>{{ .Description }}</p>
 
-        <div class="artwork-tags">
+      <div class="artwork-tags">
+        {{ range .Tags }} {{ if isEmphasize .Name }}
+        <span class="artwork-tag-name emphasize">{{ .Name }}</span>
+        {{ else }}
+        <a href="/tags/{{ .Name }}" class="artwork-tag-name">#{{ .Name }}</a
+        ><span class="artwork-tag-altname">{{ .TranslatedName }}</span>
+        {{ end }} {{ end }}
+      </div>
+      <br />
+      <span>{{ .Views }} views | {{ .Bookmarks }} bookmarks</span>
+      <br />
+      <small>{{ .Date }}</small>
 
-          {{ range .Tags }}
+      <a href="/users/{{ $parent.Artist.ID }}" class="artwork-artist flex"
-          {{ if isEmphasize .Name }}
+        ><img
-          <span class="artwork-tag-name emphasize">{{ .Name }}</span>
+          src="{{ proxyImage $parent.Artist.Avatar }}"
-          {{ else }}
+          alt="{{ $parent.Artist.Name }}"
-          <a href="/tags/{{ .Name }}" class="artwork-tag-name">#{{ .Name }}</a><span class="artwork-tag-altname">{{
+          class="artwork-artist-avatar border-rounded"
-            .TranslatedName
+        />
-            }}</span>
+        {{ $parent.Artist.Name }}</a
-          {{ end }}
+      >
-          {{ end }}
+      <div class="thumbnail-container">
+        {{ range $parent.Artist.Artworks }}
+        <div class="artwork-thumbnail-small artwork-thumbnail">
+          {{ template "thumbnail-dt.html" . }}
         </div>
-        <br />
+        {{ end }}
-        <span>{{ .Views }} views | {{ .Bookmarks }} bookmarks</span>
+      </div>
-        <br />
+      <hr />
-        <small>{{ .Date }}</small>
+      <h2>Comments</h2>
+      {{ range $parent.Comments }}
+      <div class="comment">
+        <img
+          class="comment-avatar"
+          src="{{ proxyImage .Avatar }}"
+          alt="{{ .AuthorName }}"
+        />
+        <div class="comment-context">
+          <b>{{ .AuthorName }}</b>
+          <p>
+            {{ if .Stamp }}
+            <img
+              class="stamp"
+              src="https://s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
+              alt="https://s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
+            />
+            {{ else }} {{ .Context }} {{ end }}
+          </p>
 
-        <a href="/users/{{ $parent.Artist.ID }}" class="artwork-artist flex"><img
+          <small>{{ .Date }}</small>
-            src="{{ proxyImage $parent.Artist.Avatar }}" alt="{{ $parent.Artist.Name }}"
-            class="artwork-artist-avatar border-rounded" />
-          {{ $parent.Artist.Name }}</a>
-        <div class="thumbnail-container">
-          {{ range $parent.Artist.Artworks }}
-          <div class="artwork-thumbnail-small artwork-thumbnail">
-            {{ template "thumbnail-dt.html" . }}
-          </div>
-          {{ end }}
         </div>
-        <hr />
+      </div>
-        <h2>Comments</h2>
+      {{ end }}
-        To be added :)
     </div>
     {{ end }}
   </div>
   <h2>Related works</h2>
-  <div>
+  <div>{{ template "small-tn.html" .Related }}</div>
-    {{ template "small-tn.html" .Related }}
-  </div>
 </div>
+
 {{ template "footer.html" }}

template/css/style.css

@@ -260,6 +260,24 @@ body {
   width: auto;
   max-width: 100%;
 }
+.artwork-page .comment {
+  display: flex;
+  margin-bottom: 10px;
+}
+.artwork-page .comment p {
+  margin: 0;
+}
+.artwork-page .comment .comment-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.artwork-page .comment .stamp {
+  width: 96px;
+  height: 96px;
+  border-radius: 4px;
+}
 
 .user-background {
   display: flex;

template/css/style.scss

@@ -304,6 +304,28 @@ body {
       max-width: 100%;
     }
   }
+
+  .comment {
+    display: flex;
+    margin-bottom: 10px;
+
+    p {
+      margin: 0;
+    }
+
+    .comment-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+
+    .stamp {
+      width: 96px;
+      height: 96px;
+      border-radius: 4px;
+    }
+  }
 }
 
 .user-background {

views/routes.go

@@ -7,29 +7,24 @@ import (
 	"pixivfe/handler"
 	"strconv"
 	"time"
-	"unicode"
 
 	"github.com/gin-gonic/gin"
 )
 
-func capitalize(str string) string {
-	runes := []rune(str)
-	runes[0] = unicode.ToUpper(runes[0])
-	return string(runes)
-}
-
 var PC *models.PixivClient
 
 func artwork_page(c *gin.Context) {
 	id := c.Param("id")
 	illust, _ := PC.GetArtworkByID(id)
 	related, _ := PC.GetRelatedArtworks(id)
+	comments, _ := PC.GetArtworkComments(id)
 	artist_info, _ := PC.GetUserInformation(illust.UserID, 1)
 
 	c.HTML(http.StatusOK, "artwork.html", gin.H{
-		"Illust":  illust,
+		"Illust":   illust,
-		"Related": related,
+		"Related":  related,
-		"Artist":  artist_info,
+		"Artist":   artist_info,
+		"Comments": comments,
 	})
 }