Added links for contributors to their open collective pages

app/assets/css/main.css

@@ -251,6 +251,10 @@ pre {
   color: var(--bs-secondary);
 }
 
+.open-collective-card {
+  text-decoration: none;
+}
+
 .open-collective-card .card-title {
   font-size: 16px;
   font-weight: 500;

app/models/Contributor.scala

@@ -10,6 +10,7 @@ case class Contributor(
     totalAmountDonated: Int,
     `type`: String,
     description: Option[String],
+    collectiveSlug: Option[String],
     image: String
 )
 

app/views/includes/individual_card.scala.html

@@ -1,10 +1,12 @@
 @(contributor: Contributor)
-<article class="card open-collective-card">
-  <div class="card-body d-flex flex-column align-items-center">
-      <div class="card-avatar">
-          <img src='@contributor.image' alt="logo" />
-      </div>
+<a class="open-collective-card" href='https://opencollective.com/@contributor.collectiveSlug' target="_blank" rel="noopener noreferrer">
+    <article class="card">
+        <div class="card-body d-flex flex-column align-items-center">
+            <div class="card-avatar">
+                <img src='@contributor.image' alt="logo" />
+            </div>
 
-      <h3 class="card-title text-center">@contributor.name</h3>
-  </div>
-</article>
+            <h3 class="card-title text-center">@contributor.name</h3>
+        </div>
+    </article>
+</a>

app/views/includes/organization_card.scala.html

@@ -1,22 +1,24 @@
 @import java.time.format.DateTimeFormatter
 @(contributor: Contributor)
-<article class="card open-collective-card">
-    <div class="card-body">
-        <div class="d-flex align-items-start justify-content-between">
-            <div class="card-avatar">
-                <img src='@contributor.image' alt="logo" />
+<a class="open-collective-card" href='https://opencollective.com/@contributor.collectiveSlug' target="_blank" rel="noopener noreferrer">
+    <article class="card">
+        <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between">
+                <div class="card-avatar">
+                    <img src='@contributor.image' alt="logo" />
+                </div>
+
+                @if(contributor.description.nonEmpty) {
+                    <span class="badge text-bg-success">@contributor.description</span>
+                }
             </div>
-
-            @if(contributor.description.nonEmpty) {
-                <span class="badge text-bg-success">@contributor.description</span>
-            }
-        </div>
 
-        <h3 class="card-title">@contributor.name</h3>
+            <h3 class="card-title">@contributor.name</h3>
 
-        <div class="d-flex align-items-center justify-content-between">
-            <span class="text-success fs-5 fw-semibold">$ @Math.round(contributor.totalAmountDonated / 100)</span>
-            <span class="text-secondary">since @contributor.since.format(DateTimeFormatter.ofPattern("MMM YYYY"))</span>
+            <div class="d-flex align-items-center justify-content-between">
+                <span class="text-success fs-5 fw-semibold">$ @Math.round(contributor.totalAmountDonated / 100)</span>
+                <span class="text-secondary">since @contributor.since.format(DateTimeFormatter.ofPattern("MMM YYYY"))</span>
+            </div>
         </div>
-    </div>
-</article>
+    </article>
+</a>

app/wrappers/OpenCollectiveWebApi.scala

@@ -27,6 +27,7 @@ class OpenCollectiveWebApi @Inject() (
                           totalAmountDonated
                           type
                           description
+                          collectiveSlug
                           image
                       }
                   }