SwiftPackageIndex · finestructure · Dec 5, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/FrontEnd/styles/colors.scss b/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(--light-grey);
+    --custom-collections-badge-text: var(--dark-grey);
 }
 
 // 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(--dark-grey);
+        --custom-collections-badge-text: var(--light-grey);
     }
 }
diff --git a/FrontEnd/styles/images.scss b/FrontEnd/styles/images.scss
@@ -28,6 +28,7 @@
     --image-clear-search: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1IDFjLTEzLjI1IDAtMjQgMTAuNzQtMjQgMjRzMTAuNzUgMjQgMjQgMjQgMjQtMTAuNzUgMjQtMjQtMTAuNzQtMjQtMjQtMjR6bTEzLjg4IDMyLjE0LTUuNzQgNS43My04LjE0LTguMTQtOC4xNCA4LjE0LTUuNzMtNS43MyA4LjE0LTguMTQtOC4xNC04LjE0IDUuNzMtNS43NCA4LjE0IDguMTQgOC4xNC04LjE0IDUuNzQgNS43NC04LjE0IDguMTR6IiBmaWxsPSIjZGFkYWRhIi8+PC9zdmc+');
     --image-compatibility-unknown: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5LjE3IDMxLjF2LTIuNDZjMC0xLjg3LjM4LTMuNDUgMS4xNS00Ljc0Ljc2LTEuMjkgMi4xMi0yLjU0IDQuMDctMy43NiAxLjU1LS45NyAyLjY2LTEuODUgMy4zNC0yLjYzczEuMDItMS42OCAxLjAyLTIuNjljMC0uOC0uMzYtMS40NC0xLjA5LTEuOS0uNzMtLjQ3LTEuNjctLjctMi44My0uNy0yLjg4IDAtNi4yNSAxLjAyLTEwLjExIDMuMDZsLTMuOTgtNy43OWM0Ljc1LTIuNzEgOS43MS00LjA3IDE0Ljg5LTQuMDcgNC4yNiAwIDcuNi45NCAxMC4wMiAyLjgxczMuNjQgNC40MiAzLjY0IDcuNjRjMCAyLjMxLS41NCA0LjMxLTEuNjIgNnMtMi44IDMuMjktNS4xNyA0LjhjLTIgMS4zLTMuMjYgMi4yNS0zLjc2IDIuODUtLjUxLjYtLjc2IDEuMzEtLjc2IDIuMTN2MS40NmgtOC43OXptLTEuMjMgMTAuMDJjMC0xLjc2LjUxLTMuMTEgMS41My00LjA2czIuNTItMS40MyA0LjUxLTEuNDMgMy4zNy40OCA0LjM5IDEuNDUgMS41MyAyLjMxIDEuNTMgNC4wNS0uNTMgMy4wOC0xLjU5IDQuMDRjLTEuMDYuOTUtMi41MSAxLjQzLTQuMzQgMS40M3MtMy4zNy0uNDctNC40NC0xLjQyLTEuNi0yLjI5LTEuNi00LjA1eiIgZmlsbD0iI2RhZGFkYSIvPjwvc3ZnPg==');
     --image-compatible: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE4LjMyIDQ0Ljg5LTE3LjU4LTE3LjU4IDguODUtOC44NCA4LjczIDguNzMgMjIuMDktMjIuMDkgOC44NSA4Ljg0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
+    --image-custom-collections: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzJmMmYyZiI+PHBhdGggZD0ibTI1IDIwLjkyYzIuNTItMS45MSA1LjY1LTMuMDYgOS4wNS0zLjA2IDIuMDYgMCA0LjAzLjQyIDUuODIgMS4xNy4wOC0uNjIuMTMtMS4yNS4xMy0xLjkgMC04LjI4LTYuNzItMTUtMTUtMTVzLTE1IDYuNzItMTUgMTVjMCAuNjQuMDUgMS4yNy4xMyAxLjkgMS43OS0uNzUgMy43NS0xLjE3IDUuODItMS4xNyAzLjQgMCA2LjUzIDEuMTUgOS4wNSAzLjA2eiIvPjxwYXRoIGQ9Im0xOS4wNSAzMi44NmMwLS42NC4wNS0xLjI3LjEzLTEuOS00Ljg0LTIuMDQtOC4zNy02LjU0LTkuMDUtMTEuOTMtNS4zOSAyLjI4LTkuMTggNy42MS05LjE4IDEzLjgzIDAgOC4yOCA2LjcyIDE1IDE1IDE1IDMuNCAwIDYuNTMtMS4xNSA5LjA1LTMuMDYtMy42MS0yLjc0LTUuOTUtNy4wNi01Ljk1LTExLjk0eiIvPjxwYXRoIGQ9Im0zOS44NyAxOS4wM2MtLjY4IDUuMzktNC4yMSA5Ljg5LTkuMDUgMTEuOTMuMDguNjIuMTMgMS4yNS4xMyAxLjkgMCA0Ljg4LTIuMzQgOS4yLTUuOTUgMTEuOTQgMi41MiAxLjkxIDUuNjUgMy4wNiA5LjA1IDMuMDYgOC4yOCAwIDE1LTYuNzIgMTUtMTUgMC02LjIyLTMuNzktMTEuNTYtOS4xOC0xMy44M3oiLz48L2c+PC9zdmc+');
     --image-dependencies: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQ1LjgyIDM2Ljcxdi0yMC4zNGwtMTMuNTQtNi45OGMuMDItLjIuMDMtLjQuMDMtLjYgMC00LjA0LTMuMjctNy4zMS03LjMxLTcuMzFzLTcuMzEgMy4yNy03LjMxIDcuMzFjMCAuMi4wMS40LjAzLjZsLTEzLjU0IDYuOTh2MjAuMzRjLTIuMDQgMS4wMy0zLjQ0IDMuMTMtMy40NCA1LjU3IDAgMy40NSAyLjc5IDYuMjQgNi4yNCA2LjI0czYuMjQtMi43OSA2LjI0LTYuMjRjMC0yLjQ0LTEuNC00LjU0LTMuNDQtNS41N3YtMTYuOTNsMTAuNTEtNS40MmMuNTcuNDggMS4yMi44OCAxLjkyIDEuMTd2MTcuMzhjLTIuMDQgMS4wMy0zLjQ0IDMuMTMtMy40NCA1LjU3IDAgMy40NSAyLjc5IDYuMjQgNi4yNCA2LjI0czYuMjQtMi43OSA2LjI0LTYuMjRjMC0yLjQ0LTEuNC00LjU0LTMuNDQtNS41N3YtMTcuMzdjLjctLjI5IDEuMzUtLjY5IDEuOTItMS4xN2wxMC41MSA1LjQydjE2LjkzYy0yLjA0IDEuMDMtMy40NCAzLjEzLTMuNDQgNS41NyAwIDMuNDUgMi43OSA2LjI0IDYuMjQgNi4yNHM2LjI0LTIuNzkgNi4yNC02LjI0YzAtMi40NC0xLjQtNC41NC0zLjQ0LTUuNTd6IiBmaWxsPSIjMmYyZjJmIi8+PC9zdmc+');
     --image-disclosure-down: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1IDM3LjY3LTEwLjI5LTEyLjY3LTEwLjI5LTEyLjY3aDIwLjU4IDIwLjU4bC0xMC4yOSAxMi42N3oiIGZpbGw9IiNkYWRhZGEiLz48L3N2Zz4=');
     --image-documentation: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI5LjQ4IDQuNTFoLTIwLjZ2NDAuOThoMzIuMjN2LTI5LjM1bC0xMS42My0xMS42M3ptLTE1LjU5IDEwLjE1aDE0LjF2NGgtMTQuMXptMCA5LjM0aDIyLjJ2NGgtMjIuMnptMjIuMjIgMTMuMzRoLTIyLjJ2LTRoMjIuMnoiIGZpbGw9IiMyZjJmMmYiLz48L3N2Zz4=');
@@ -68,6 +69,7 @@
         --image-clear-search: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1IDFjLTEzLjI1IDAtMjQgMTAuNzQtMjQgMjRzMTAuNzUgMjQgMjQgMjQgMjQtMTAuNzUgMjQtMjQtMTAuNzQtMjQtMjQtMjR6bTEzLjg4IDMyLjE0LTUuNzQgNS43My04LjE0LTguMTQtOC4xNCA4LjE0LTUuNzMtNS43MyA4LjE0LTguMTQtOC4xNC04LjE0IDUuNzMtNS43NCA4LjE0IDguMTQgOC4xNC04LjE0IDUuNzQgNS43NC04LjE0IDguMTR6IiBmaWxsPSIjMmYyZjJmIi8+PC9zdmc+');
         --image-compatibility-unknown: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5LjE3IDMxLjF2LTIuNDZjMC0xLjg3LjM4LTMuNDUgMS4xNS00Ljc0Ljc2LTEuMjkgMi4xMi0yLjU0IDQuMDctMy43NiAxLjU1LS45NyAyLjY2LTEuODUgMy4zNC0yLjYzczEuMDItMS42OCAxLjAyLTIuNjljMC0uOC0uMzYtMS40NC0xLjA5LTEuOS0uNzMtLjQ3LTEuNjctLjctMi44My0uNy0yLjg4IDAtNi4yNSAxLjAyLTEwLjExIDMuMDZsLTMuOTgtNy43OWM0Ljc1LTIuNzEgOS43MS00LjA3IDE0Ljg5LTQuMDcgNC4yNiAwIDcuNi45NCAxMC4wMiAyLjgxczMuNjQgNC40MiAzLjY0IDcuNjRjMCAyLjMxLS41NCA0LjMxLTEuNjIgNnMtMi44IDMuMjktNS4xNyA0LjhjLTIgMS4zLTMuMjYgMi4yNS0zLjc2IDIuODUtLjUxLjYtLjc2IDEuMzEtLjc2IDIuMTN2MS40NmgtOC43OXptLTEuMjMgMTAuMDJjMC0xLjc2LjUxLTMuMTEgMS41My00LjA2czIuNTItMS40MyA0LjUxLTEuNDMgMy4zNy40OCA0LjM5IDEuNDUgMS41MyAyLjMxIDEuNTMgNC4wNS0uNTMgMy4wOC0xLjU5IDQuMDRjLTEuMDYuOTUtMi41MSAxLjQzLTQuMzQgMS40M3MtMy4zNy0uNDctNC40NC0xLjQyLTEuNi0yLjI5LTEuNi00LjA1eiIgZmlsbD0iIzNlM2UzZSIvPjwvc3ZnPg==');
         --image-compatible: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE4LjMyIDQ0Ljg5LTE3LjU4LTE3LjU4IDguODUtOC44NCA4LjczIDguNzMgMjIuMDktMjIuMDkgOC44NSA4Ljg0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
+        --image-custom-collections: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2YxZjFmMSI+PHBhdGggZD0ibTI1IDIwLjkyYzIuNTItMS45MSA1LjY1LTMuMDYgOS4wNS0zLjA2IDIuMDYgMCA0LjAzLjQyIDUuODIgMS4xNy4wOC0uNjIuMTMtMS4yNS4xMy0xLjkgMC04LjI4LTYuNzItMTUtMTUtMTVzLTE1IDYuNzItMTUgMTVjMCAuNjQuMDUgMS4yNy4xMyAxLjkgMS43OS0uNzUgMy43NS0xLjE3IDUuODItMS4xNyAzLjQgMCA2LjUzIDEuMTUgOS4wNSAzLjA2eiIvPjxwYXRoIGQ9Im0xOS4wNSAzMi44NmMwLS42NC4wNS0xLjI3LjEzLTEuOS00Ljg0LTIuMDQtOC4zNy02LjU0LTkuMDUtMTEuOTMtNS4zOSAyLjI4LTkuMTggNy42MS05LjE4IDEzLjgzIDAgOC4yOCA2LjcyIDE1IDE1IDE1IDMuNCAwIDYuNTMtMS4xNSA5LjA1LTMuMDYtMy42MS0yLjc0LTUuOTUtNy4wNi01Ljk1LTExLjk0eiIvPjxwYXRoIGQ9Im0zOS44NyAxOS4wM2MtLjY4IDUuMzktNC4yMSA5Ljg5LTkuMDUgMTEuOTMuMDguNjIuMTMgMS4yNS4xMyAxLjkgMCA0Ljg4LTIuMzQgOS4yLTUuOTUgMTEuOTQgMi41MiAxLjkxIDUuNjUgMy4wNiA5LjA1IDMuMDYgOC4yOCAwIDE1LTYuNzIgMTUtMTUgMC02LjIyLTMuNzktMTEuNTYtOS4xOC0xMy44M3oiLz48L2c+PC9zdmc+');
         --image-dependencies: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQ1LjgyIDM2Ljcxdi0yMC4zNGwtMTMuNTQtNi45OGMuMDItLjIuMDMtLjQuMDMtLjYgMC00LjA0LTMuMjctNy4zMS03LjMxLTcuMzFzLTcuMzEgMy4yNy03LjMxIDcuMzFjMCAuMi4wMS40LjAzLjZsLTEzLjU0IDYuOTh2MjAuMzRjLTIuMDQgMS4wMy0zLjQ0IDMuMTMtMy40NCA1LjU3IDAgMy40NSAyLjc5IDYuMjQgNi4yNCA2LjI0czYuMjQtMi43OSA2LjI0LTYuMjRjMC0yLjQ0LTEuNC00LjU0LTMuNDQtNS41N3YtMTYuOTNsMTAuNTEtNS40MmMuNTcuNDggMS4yMi44OCAxLjkyIDEuMTd2MTcuMzhjLTIuMDQgMS4wMy0zLjQ0IDMuMTMtMy40NCA1LjU3IDAgMy40NSAyLjc5IDYuMjQgNi4yNCA2LjI0czYuMjQtMi43OSA2LjI0LTYuMjRjMC0yLjQ0LTEuNC00LjU0LTMuNDQtNS41N3YtMTcuMzdjLjctLjI5IDEuMzUtLjY5IDEuOTItMS4xN2wxMC41MSA1LjQydjE2LjkzYy0yLjA0IDEuMDMtMy40NCAzLjEzLTMuNDQgNS41NyAwIDMuNDUgMi43OSA2LjI0IDYuMjQgNi4yNHM2LjI0LTIuNzkgNi4yNC02LjI0YzAtMi40NC0xLjQtNC41NC0zLjQ0LTUuNTd6IiBmaWxsPSIjZGFkYWRhIi8+PC9zdmc+');
         --image-disclosure-down: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1IDM3LjY3LTEwLjI5LTEyLjY3LTEwLjI5LTEyLjY3aDIwLjU4IDIwLjU4bC0xMC4yOSAxMi42N3oiIGZpbGw9IiMyZjJmMmYiLz48L3N2Zz4=');
         --image-documentation: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTAgNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI5LjQ4IDQuNTFoLTIwLjZ2NDAuOThoMzIuMjN2LTI5LjM1bC0xMS42My0xMS42M3ptLTE1LjU5IDEwLjE1aDE0LjF2NGgtMTQuMXptMCA5LjM0aDIyLjJ2NGgtMjIuMnptMjIuMjIgMTMuMzRoLTIyLjJ2LTRoMjIuMnoiIGZpbGw9IiNkYWRhZGEiLz48L3N2Zz4=');

diff --git a/FrontEnd/styles/package.scss b/FrontEnd/styles/package.scss
@@ -32,7 +32,7 @@
             -webkit-line-clamp: 1;
         }
 
-        span {
+        small > span {
             margin: 0 2px;
         }
     }
@@ -156,15 +156,32 @@
                     align-items: center;
                 }
             }
-            
+
             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;
+                    }
+
+                    &:hover {
+                        .badge {
+                            color: var(--white);
+                            background-color: var(--link-highlight);
+                        }
+                    }
                 }
             }
         }
@@ -199,6 +216,30 @@
             }
         }
 
+        .custom-collections-sidebar {
+            display: flex;
+            flex-direction: column;
+
+            .custom-collection-badge {
+                display: inline-flex;
+                overflow: hidden;
+                font-size: 13px;
+                border: 1px solid var(--mid-green);
+                border-radius: 3px;
+
+                span {
+                    padding: 0 5px;
+                    color: var(--black);
+                    background-color: var(--very-light-green);
+
+                    &.badge {
+                        color: var(--white);
+                        background-color: var(--light-green);
+                    }
+                }
+            }
+        }
+
         section.main-compatibility .title {
             display: flex;
             align-items: baseline;

diff --git a/Resources/SVGs/custom-collections~dark.svg b/Resources/SVGs/custom-collections~dark.svg
diff --git a/Resources/SVGs/custom-collections~light.svg b/Resources/SVGs/custom-collections~light.svg
diff --git a/Sources/App/Controllers/CustomCollectionsController.swift b/Sources/App/Controllers/CustomCollectionsController.swift
@@ -73,6 +73,7 @@ enum CustomCollectionsController {
         let model = CustomCollectionShow.Model(
             key: collection.key,
             name: collection.name,
+            badge: collection.badge,
             packages: packageInfo,
             page: query.page,
             hasMoreResults: page.hasMoreResults

diff --git a/Sources/App/Views/CustomCollection/CustomCollectionShow+Model.swift b/Sources/App/Views/CustomCollection/CustomCollectionShow+Model.swift
@@ -16,20 +16,31 @@ extension CustomCollectionShow {
     struct Model {
         var key: String
         var name: String
+        var badge: String?
         var packages: [PackageInfo]
         var page: Int
         var hasMoreResults: Bool
 
         internal init(key: String,
                       name: String,
+                      badge: String?,
                       packages: [PackageInfo],
                       page: Int,
                       hasMoreResults: Bool) {
             self.key = key
             self.name = name
+            self.badge = badge
             self.packages = packages
             self.page = page
             self.hasMoreResults = hasMoreResults
         }
+
+        var fullName: String {
+            if let badge {
+                "\(badge) \(name)"
+            } else {
+                name
+            }
+        }
     }
 }
diff --git a/Sources/App/Views/CustomCollection/CustomCollectionShow+View.swift b/Sources/App/Views/CustomCollection/CustomCollectionShow+View.swift
@@ -38,23 +38,31 @@ enum CustomCollectionShow {
         override func breadcrumbs() -> [Breadcrumb] {
             [
                 Breadcrumb(title: "Home", url: SiteURL.home.relativeURL()),
-                Breadcrumb(title: model.name)
+                Breadcrumb(title: "Collections"),
+                Breadcrumb(title: model.fullName)
             ]
         }
 
         override func content() -> Node<HTML.BodyContext> {
             .group(
                 .h2(
                     .class("trimmed"),
-                    .text("\(model.name) package collection")
+                    .text("\(model.fullName) package collection")
                 ),
                 .p(
-                    .text("These packages are available as a package collection, "),
+                    .text("The packages in this collection are part of a custom package collection, "),
                     .a(
                         .href(SiteURL.packageCollections.relativeURL()),
-                        "usable in Xcode 13 or the Swift Package Manager 5.5"
+                        .text("usable in Xcode or SwiftPM")
+                    ),
+                    .text(". You can find out more about custom package collections and how to request one in the "),
+                    .a(
+                        .href(SiteURL.blogPost(.value("introducing-custom-package-collections")).relativeURL()),
+                        .text("launch blog post")
+
                     ),
                     .text(".")
+
                 ),
                 .copyableInputForm(buttonName: "Copy Package Collection URL",
                                    eventName: "Copy Package Collection URL Button",

diff --git a/Sources/App/Views/PackageController/GetRoute.Model+ext.swift b/Sources/App/Views/PackageController/GetRoute.Model+ext.swift
@@ -398,14 +398,53 @@ extension API.PackageController.GetRoute.Model {
         }
     }
 
-    func customCollectionsItem() -> Node<HTML.ListContext> {
-        guard !customCollections.isEmpty else { return .empty }
+    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 }
+
+        return .div(
+            .class("custom-collections-sidebar"),
             .forEach(customCollections, { collection in
                     .a(
                         .href(SiteURL.collections(.value(collection.key)).relativeURL()),
-                        .text("\(collection.name)")
+                        .div(
+                            .class("custom-collection-badge"),
+                            .unwrap(collection.badge, { badge in
+                                    .span(
+                                        .class("badge"),
+                                        .text(badge)
+                                    )
+                            }),
+                            .span(
+                                .text(collection.name)
+                            )
+                        )
                     )
             })
         )

diff --git a/Sources/App/Views/PackageController/PackageShow+View.swift b/Sources/App/Views/PackageController/PackageShow+View.swift
@@ -153,6 +153,7 @@ extension PackageShow {
                     .hr(
                         .class("minor")
                     ),
+                    model.customCollectionBadges(),
                     sidebarVersions(),
                     .hr(
                         .class("minor")
@@ -173,15 +174,15 @@ extension PackageShow {
                     model.historyListItem(),
                     model.activityListItem(),
                     model.dependenciesListItem(),
+                    model.customCollectionsListItem(),
                     model.licenseListItem(),
                     model.starsListItem(),
                     model.productTypeListItem(.library),
                     model.productTypeListItem(.executable),
                     model.productTypeListItem(.plugin),
                     model.targetTypeListItem(.macro),
                     model.dataRaceSafeListItem(),
-                    model.keywordsListItem(),
-                    model.customCollectionsItem()
+                    model.keywordsListItem()
                 )
             )
         }

diff --git a/Tests/AppTests/Mocks/CustomCollectionShow+mock.swift b/Tests/AppTests/Mocks/CustomCollectionShow+mock.swift
@@ -30,6 +30,7 @@ extension CustomCollectionShow.Model {
         ) }
         return .init(key: "custom-collection",
                      name: "Custom Collection",
+                     badge: "BADGE",
                      packages: packages, page: 1,
                      hasMoreResults: false)
     }