Add badge for displaying amount of images in an illust

pixivmodels.cpp

@@ -120,6 +120,7 @@ void from_json(const nlohmann::json& j, Illust& illust) {
     } else {
         illust.images = {get_illust_image(illust_details)};
     }
+    illust.page_count = to_ull(illust_details.at("page_count").get_ref<const nlohmann::json::string_t&>());
 }
 
 void from_json(const nlohmann::json& j, Illusts& illusts) {
@@ -167,7 +168,8 @@ void from_json(const nlohmann::json& j, SearchResults& search_results) {
 
             .comment = std::nullopt,
             .tags = std::move(tags),
-            .images = {get_illust_image(i)}
+            .images = {get_illust_image(i)},
+            .page_count = i.at("pageCount").get<size_t>()
         };
         search_results.illusts.illusts.push_back(illust);
     }

pixivmodels.h

@@ -44,6 +44,7 @@ struct Illust {
     std::optional<std::string> comment;
     std::vector<Tag> tags;
     std::vector<Images> images;
+    size_t page_count;
 };
 
 struct Illusts {

routes/artworks.cpp

@@ -67,7 +67,7 @@ static inline Element generate_user_link(const httplib::Request& req, const Conf
 static inline Element generate_images(const httplib::Request& req, const Config& config, const Illust& illust) {
     using namespace std::string_literals;
 
-    Element div("div", {{"class", "illust"}}, {});
+    Element div("div", {{"class", "illustimages"}}, {});
     bool show_pages = illust.images.size() > 1;
 
     if (show_pages) {

routes/css.cpp

@@ -8,6 +8,8 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
         --background-color: black;
         --text-color: white;
 
+        --illust-badge-background-color: rgba(0, 0, 0, .5);
+
         --error-background-color: rgb(100, 0, 0);
         --error-border-color: red;
         --error-text-color: white;
@@ -65,11 +67,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
         margin-left: .5em;
     }
 
-    /* USER ILLUSTRATIONS PAGE (and illustrations page) */
+    /* ILLUSTRATIONS GRID (used in user illustrations page and search results page) */
     .grid {
+        gap: 1em;
         display: flex;
         flex-wrap: wrap;
-        gap: 1em;
         justify-content: center;
     }
     .grid img {
@@ -79,6 +81,18 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
     .grid p {
         width: 15em;
     }
+    .illustsgriditem {
+        position: relative;
+    }
+    .illustbadge {
+        position: absolute;
+        top: .25em;
+        right: .25em;
+        padding: .25em;
+        color: var(--text-color);
+        background-color: var(--illust-badge-background-color);
+        text-decoration: none !important;
+    }
 
     /* ILLUSTRATIONS PAGE */
     .illusttags {
@@ -86,11 +100,11 @@ void css_route(const httplib::Request& req, httplib::Response& res) {
         flex-wrap: wrap;
         gap: 0 1em;
     }
-    .illust {
+    .illustimages {
         display: grid;
         text-align: center;
     }
-    .illust .landmark {
+    .illustimages .landmark {
         padding-top: 1em;
         padding-bottom: 1em;
     }

servehelper.cpp

@@ -5,7 +5,9 @@
 #include "servehelper.h"
 
 static Element generate_pager(const Illusts& illusts, size_t page, const char* id);
-static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts);
+static inline Element generate_illusts_grid(const httplib::Request& req, const Config& config, const Illusts& illusts);
+static inline Element generate_illusts_grid_item(const httplib::Request& req, const Config& config, const Illust& illust);
+static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url);
 
 void serve(const httplib::Request& req, httplib::Response& res, const Config& config, std::string title, Element element) {
     using namespace std::string_literals;
@@ -104,7 +106,7 @@ Element generate_illusts_pager(const httplib::Request& req, const Config& config
     return Element("div", {{"id", id}}, {
         generate_pager(illusts, page, id),
         Element("br"),
-        generate_content(req, config, illusts),
+        generate_illusts_grid(req, config, illusts),
         generate_pager(illusts, page, id)
     });
 }
@@ -132,19 +134,40 @@ static Element generate_pager(const Illusts& illusts, size_t page, const char* i
     });
 }
 
-static inline Element generate_content(const httplib::Request& req, const Config& config, const Illusts& illusts) {
+static inline Element generate_illusts_grid(const httplib::Request& req, const Config& config, const Illusts& illusts) {
     Element div("div", {{"class", "grid"}}, {});
 
     div.nodes.reserve(illusts.illusts.size());
     for (const Illust& i : illusts.illusts) {
-        std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(i.illust_id);
+        div.nodes.push_back(generate_illusts_grid_item(req, config, i));
-        std::string image_url = proxy_image_url(config, i.images[0].thumbnail_or_original(1));
-
-        div.nodes.push_back(Element("a", {{"href", {std::move(illust_url)}}}, {
-            Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
-            Element("p", {i.title})
-        }));
     }
 
     return div;
 }
+
+static inline Element generate_illusts_grid_item(const httplib::Request& req, const Config& config, const Illust& illust) {
+    std::string illust_url = get_origin(req, config) + "/artworks/" + std::to_string(illust.illust_id);
+    std::string image_url = proxy_image_url(config, illust.images[0].thumbnail_or_original(1));
+
+    Element div("div", {{"class", "illustsgriditem"}}, {
+        Element("a", {{"href", illust_url}}, {
+            Element("img", {{"loading", "lazy"}, {"src", std::move(image_url)}}, {}),
+            Element("p", {illust.title})
+        })
+    });
+
+    if (illust.page_count > 1) {
+        div.nodes.push_back(generate_illust_badge(illust, std::move(illust_url)));
+    }
+
+    return div;
+}
+
+static inline Element generate_illust_badge(const Illust& illust, const std::string& illust_url) {
+    std::string text = std::to_string(illust.page_count) + " pages";
+    std::string illust_preview_url = illust_url + "?preview=1";
+
+    return Element("a", {{"class", "illustbadge"}, {"href", std::move(illust_preview_url)}}, {
+        std::move(text)
+    });
+}