Add section for community contributors

src/components/CommunityContributors.astro

@@ -0,0 +1,107 @@
+---
+import { Image } from "astro:assets";
+import { community_contributors } from "../data/community-contributors.ts";
+---
+
+<div class="community-contributors">
+    {
+        community_contributors
+            .map((contributor) => (
+                <div class="contributor">
+                    <a href={contributor.url} target="_blank" aria-label={contributor.name}>
+                        <Image src={contributor.icon} alt="" inferSize />
+                    </a>
+                    <span class="name tooltip">{contributor.name}</span>
+                </div>
+            ))
+    }
+</div>
+
+<style>
+    .community-contributors {
+        display: flex;
+        justify-content: center;
+        width: 90%;
+        margin-left: 5%;
+        justify-items: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .contributor {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 0.5em;
+        padding: 0px;
+        font-size: 0.9em;
+        pointer-events: none;
+        text-decoration: none;
+        position: relative;
+    }
+
+    .contributor > a {
+        height: 3em;
+        width: 3em;
+        align-self: center;
+        border-radius: 100%;
+        margin: 0.25em;
+        pointer-events: all;
+        cursor: pointer;
+        transition:
+            width 0.1s ease-in-out,
+            height 0.1s ease-in-out,
+            margin 0.1s ease-in-out,
+            filter 0.1s ease-in-out;
+    }
+
+    .contributor > a > img {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+    }
+
+    .contributor > a:hover {
+        filter: brightness(50%);
+        height: 3.5em;
+        width: 3.5em;
+        margin: 0em;
+    }
+
+    .tooltip {
+        position: absolute;
+        display: block;
+        top: 100%;
+        margin: 0.5em;
+        padding: 0.5em;
+        border-radius: 0.25em;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, 0.75);
+        backdrop-filter: blur(0.25em);
+        width: max-content;
+        max-width: 50vw; /* prevent tooltip going off screen */
+    }
+    .contributor > a:hover ~ .tooltip {
+        opacity: 1;
+    }
+
+    .name {
+        font-family: Titanfall;
+        font-size: 1em;
+        align-self: center;
+        font-weight: light;
+        white-space: wrap;
+    }
+
+    a {
+        display: inline-block;
+        vertical-align: middle;
+        width: 16px;
+        height: 16px;
+        margin-right: 12px;
+        pointer-events: none;
+        margin-top: -2px;
+    }
+</style>

src/data/community-contributors.ts

@@ -0,0 +1,9 @@
+// Auto-generated from Python script
+
+export interface CommunityContributor {
+    url?: string;
+    icon: string;
+    name: string;
+}
+export const community_contributors: CommunityContributor[] = [
+]

src/pages/credits.astro

@@ -1,5 +1,6 @@
 ---
 import Contributors from "../components/Contributors.astro";
+import CommunityContributors from "../components/CommunityContributors.astro";
 import { ContributorType } from "../data/contributors";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -15,6 +16,12 @@ import Layout from "../layouts/Layout.astro";
         <Contributors type={ContributorType.CONTRIBUTOR} small />
     </div>
 
+    <div class="pane">
+        <div class="section">Community</div>
+        <p class="blurb">Smaller contributions by the wider community</p>
+        <CommunityContributors />
+    </div>
+
     <div class="pane">
         <div class="section">Past contributors</div>
         <p class="blurb">We are ever greatful for past contributions by these developers and wish them all their best on their journey beyond Northstar</p>
@@ -39,11 +46,9 @@ import Layout from "../layouts/Layout.astro";
 
 <style>
     .blurb {
-        padding-bottom: 1em;
         text-align: center;
         color: #999;
         text-overflow: wrap;
-        height: 3em;
     }
 
     .attribution {