From cf042551f645c9c5e0c9ec7bab35f808fcda67d5 Mon Sep 17 00:00:00 2001
From: Thilo Billerbeck <thilo.billerbeck@officerent.de>
Date: Sun, 19 May 2024 20:55:14 +0200
Subject: [PATCH] add implementation for subteams (#1428)

resolves  #1420

(Please don#t merge this with the changes to moderation, this is just an
example to preview the changes here, I'll remove them before merging
since the commits get squashed anyway)
---
 .../community/teams/MembersDisplay.astro      | 65 +++++++++++++++++++
 src/content/teams/08_moderation.mdx           | 41 ++++++++++++
 src/pages/community/teams/[...slug].astro     | 64 +++++++-----------
 3 files changed, 129 insertions(+), 41 deletions(-)
 create mode 100644 src/components/pages/community/teams/MembersDisplay.astro

diff --git a/src/components/pages/community/teams/MembersDisplay.astro b/src/components/pages/community/teams/MembersDisplay.astro
new file mode 100644
index 0000000000..e866dfcdd2
--- /dev/null
+++ b/src/components/pages/community/teams/MembersDisplay.astro
@@ -0,0 +1,65 @@
+---
+const { title = "Members", isSubteam = false, members, contact, class: extraClasses } = Astro.props;
+const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
+---
+
+<aside
+    class:list={[
+        !isSubteam && "bg-nix-blue-extralight rounded-xl px-4 py-3 w-full",
+        extraClasses]}>
+    <h2 class={titleClasses}>{title}</h2>
+    <ul class="mt-2 list-disc ml-4 font-light">
+        {
+            members.map((member) => (
+                <li class="mb-1 last:mb-0">
+                    {member.name}
+                    {member.discourse && (
+                        <>
+                            (
+                            <a
+                                href={
+                                    "https://discourse.nixos.org/u/" +
+                                    member.discourse
+                                }
+                            >
+                                @{member.discourse}
+                            </a>
+                            )
+                        </>
+                    )}
+                    {member.github && (
+                        <>
+                            (
+                            <a href={"https://github.com/" + member.github}>
+                                @{member.github}
+                            </a>
+                            )
+                        </>
+                    )}
+                    {member.title && (
+                        <>
+                            &mdash;
+                            {member.title}
+                        </>
+                    )}
+                </li>
+            ))
+        }
+    </ul>
+    {
+        contact && (
+            <>
+                <h2 class="text-3xl font-heading font-bold text-nix-blue mt-4">
+                    Contact
+                </h2>
+                <ul class="mt-2 list-disc ml-4">
+                    {contact.map((contact) => (
+                        <li class="mb-1 last:mb-0">
+                            <a href={contact.href}>{contact.name}</a>
+                        </li>
+                    ))}
+                </ul>
+            </>
+        )
+    }
+</aside>
diff --git a/src/content/teams/08_moderation.mdx b/src/content/teams/08_moderation.mdx
index e7f6479b02..8ff3bae930 100644
--- a/src/content/teams/08_moderation.mdx
+++ b/src/content/teams/08_moderation.mdx
@@ -20,6 +20,47 @@ contact:
   href: https://discourse.nixos.org/c/meta/moderation-team/40
 - name: GitHub
   href: https://github.com/NixOS/moderation
+subteams:
+- name: TestTeam
+  members:
+  - name: Martin Weinelt
+    discourse: hexa
+    title:
+  - name: lassulus
+    discourse: lassulus
+    title:
+- name: TestTeam
+  members:
+  - name: Martin Weinelt
+    discourse: hexa
+    title:
+  - name: lassulus
+    discourse: lassulus
+    title:
+- name: TestTeam
+  members:
+  - name: Martin Weinelt
+    discourse: hexa
+    title:
+  - name: lassulus
+    discourse: lassulus
+    title:
+- name: TestTeam
+  members:
+  - name: Martin Weinelt
+    discourse: hexa
+    title:
+  - name: lassulus
+    discourse: lassulus
+    title:
+- name: TestTeam
+  members:
+  - name: Martin Weinelt
+    discourse: hexa
+    title:
+  - name: lassulus
+    discourse: lassulus
+    title:
 ---
 
 This team is responsible for moderating participation on [official community
diff --git a/src/pages/community/teams/[...slug].astro b/src/pages/community/teams/[...slug].astro
index 2f1d8df33a..343ab710fd 100644
--- a/src/pages/community/teams/[...slug].astro
+++ b/src/pages/community/teams/[...slug].astro
@@ -4,7 +4,7 @@ import { getCollection } from "astro:content";
 import Layout from "../../../layouts/Layout.astro";
 import PageHeader from "../../../components/layout/PageHeader.astro";
 import Container from "../../../components/layout/Container.astro";
-import Tag from "../../../components/ui/Tag.astro";
+import MembersDisplay from "../../../components/pages/community/teams/MembersDisplay.astro";
 
 export async function getStaticPaths() {
   const teamEntries = await getCollection("teams");
@@ -21,48 +21,30 @@ const { Content } = await entry.render();
 <Layout title={entry.data.name}>
   <PageHeader text={entry.data.name} parentPath="/community" />
   <Container class="my-8">
-    <aside
-      class="float-right bg-nix-blue-extralight rounded-xl px-4 py-3 mb-4 ml-4 w-full sm:w-1/2 md:max-w-96"
-    >
-      <h1 class="text-3xl font-heading font-bold text-nix-blue">Members</h1>
-      <ul class="mt-2 list-disc ml-4 font-light">
-        {
-          entry.data.members.map((member) => (
-            <li class="mb-1 last:mb-0">
-              {member.name}
-              {member.discourse && (
-                <>
-                (<a href={"https://discourse.nixos.org/u/" + member.discourse}>@{member.discourse}</a>)
-                </>
-              )}
-              {member.github && (
-                <>
-                (<a href={"https://github.com/" + member.github}>@{member.github}</a>)
-                </>
-              )}
-              {member.title && (
-                <>
-                &mdash;
-                {member.title}
-                </>
-              )}
-            </li>
-          ))
-        }
-      </ul>
-      <h1 class="text-3xl font-heading font-bold text-nix-blue mt-4">Contact</h1>
-      <ul class="mt-2 list-disc ml-4">
-        {
-          entry.data.contact.map((contact) => (
-            <li class="mb-1 last:mb-0">
-              <a href={contact.href}>{contact.name}</a>
-            </li>
-          ))
-        }
-      </ul>
-    </aside>
+    <MembersDisplay
+      class="float-right mb-4 ml-4 sm:w-1/2 md:max-w-96"
+      members={entry.data.members}
+      contact={entry.data.contact}
+    />
     <article>
       <Content />
     </article>
+    {
+      entry.data.subteams && entry.data.subteams.length > 0 && (
+        <>
+          <div class="flex gap-4 flex-wrap pt-4">
+              {entry.data.subteams.map((subteam) => (
+              <MembersDisplay
+                key={subteam.name}
+                title={subteam.name}
+                class="mb-4"
+                members={subteam.members}
+                isSubteam
+              />
+            ))}
+          </div>
+        </>
+      )
+    }
   </Container>
 </Layout>