Added another variant back to the metadata lists.

Author: daveverwer

FrontEnd/styles/colors.scss

@@ -191,6 +191,9 @@
     --debug-console-background: var(--light-blue);
     --debug-console-border: var(--grey);
     --debug-console-button-hover: var(--light-grey);
+
+    --custom-collections-badge-background: var(--dark-grey);
+    --custom-collections-badge-text: var(--white);
 }
 
 // Dark mode.
@@ -317,5 +320,8 @@
         --debug-console-background: var(--dark-blue);
         --debug-console-border: var(--light-grey);
         --debug-console-button-hover: var(--dark-grey);
+
+        --custom-collections-badge-background: var(--light-grey);
+        --custom-collections-badge-text: var(--black);
     }
 }

FrontEnd/styles/package.scss

@@ -159,12 +159,22 @@
 
             li.custom-collections {
                 grid-column-start: span 2;
-                background-image: var(--image-tags);
+                background-image: var(--image-custom-collections);
 
                 a {
-                    display: flex;
-                    gap: 5px;
-                    align-items: center;
+                    vertical-align: baseline;
+
+                    .badge {
+                        position: relative;
+                        top: -1px;
+                        margin-right: 3px;
+                        padding: 1px 5px;
+                        font-size: 12px;
+                        font-weight: 600;
+                        color: var(--custom-collections-badge-text);
+                        background-color: var(--custom-collections-badge-background);
+                        border-radius: 3px;
+                    }
                 }
             }
         }
@@ -199,7 +209,7 @@
             }
         }
 
-        .custom-collections {
+        .custom-collections-sidebar {
             display: flex;
             flex-direction: column;
 

Sources/App/Views/PackageController/GetRoute.Model+ext.swift

@@ -398,11 +398,38 @@ extension API.PackageController.GetRoute.Model {
         }
     }
 
+    func customCollectionsListItem() -> Node<HTML.ListContext> {
+        guard customCollections.isEmpty == false
+        else { return .empty }
+
+        let closing = if customCollections.count > 1 { " collections." } else { " collection." }
+
+        return .li(
+            .class("custom-collections"),
+            .group(listPhrase(opening: .text("Member of the "),
+                              nodes: customCollections.map({ collection in
+                                      .a(
+                                        .href(SiteURL.collections(.value(collection.key)).relativeURL()),
+                                        .unwrap(collection.badge, { badge in
+                                                .span(
+                                                    .class("badge"),
+                                                    .text(badge)
+                                                )
+                                        }),
+                                        .text(collection.name)
+                                      )
+                              }),
+                              closing: .text(closing))
+            )
+        )
+    }
+
     func customCollectionBadges() -> Node<HTML.BodyContext> {
-        guard customCollections.isEmpty == false else { return .empty }
+        guard customCollections.isEmpty == false
+        else { return .empty }
 
         return .div(
-            .class("custom-collections"),
+            .class("custom-collections-sidebar"),
             .forEach(customCollections, { collection in
                     .a(
                         .href(SiteURL.collections(.value(collection.key)).relativeURL()),

Sources/App/Views/PackageController/PackageShow+View.swift

@@ -174,6 +174,7 @@ extension PackageShow {
                     model.historyListItem(),
                     model.activityListItem(),
                     model.dependenciesListItem(),
+                    model.customCollectionsListItem(),
                     model.licenseListItem(),
                     model.starsListItem(),
                     model.productTypeListItem(.library),