Pixivision: Basic article layout

routes/pixivision.go

@@ -29,5 +29,11 @@ func PixivisionArticlePage(c *fiber.Ctx) error {
 		return err
 	}
 
+	data.Thumbnail = session.ProxyImageUrlNoEscape(c, data.Thumbnail)
+	for i := range data.Items {
+		data.Items[i].Image = session.ProxyImageUrlNoEscape(c, data.Items[i].Image)
+		data.Items[i].Avatar = session.ProxyImageUrlNoEscape(c, data.Items[i].Avatar)
+	}
+
 	return c.Render("pixivision/article", fiber.Map{"Article": data})
 }

views/css/style.css

@@ -1164,6 +1164,12 @@ nav .sidebar-item img {
   margin: 0;
 }
 
+.vision-article {
+  background-color: #222;
+  border-radius: 5px;
+  padding: 5px 15px;
+}
+
 #calendar {
   width: 100%;
   height: auto;

views/css/style.scss

@@ -1412,8 +1412,6 @@ $font-fallback-sans: YuGothic,
     }
   }
 
-
-
   .vision-metadata {
     display: flex;
     flex-direction: column;
@@ -1438,6 +1436,12 @@ $font-fallback-sans: YuGothic,
   }
 }
 
+.vision-article {
+  background-color: $bg-secondary;
+  border-radius: 5px;
+  padding: 5px 15px;
+}
+
 #calendar {
   width: 100%;
   height: auto;

views/pages/pixivision/article.jet.html

@@ -1,3 +1,13 @@
-<div class="container">
-	{{Article.Title}}
+<div class="container vision-article">
+	<h2>{{Article.Title}}</h2>
+	{{ range _, desc := Article.Description }}
+	<p>{{desc}}</p>
+	{{ end }}
+
+	{{ range _, item := Article.Items }}
+	<div class="vision-article-item">
+		{{item.Title}}
+		<img src="{{item.Image}}" alt="{{item.Title}}" />
+	</div>
+	{{ end }}
 </div>