docs: add team section (#2422)

loculus-project · Aug 13, 2024 · af85df9 · af85df9
1 parent b68f2cd
commit af85df9
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 1 deletion.
diff --git a/docs/src/components/ConditionalLink.astro b/docs/src/components/ConditionalLink.astro
@@ -0,0 +1,17 @@
+---
+export interface Props {
+    link?: string;
+}
+
+const { link } = Astro.props;
+---
+
+{
+    link === undefined ? (
+        <slot />
+    ) : (
+        <a href={link}>
+            <slot />
+        </a>
+    )
+}
diff --git a/docs/src/components/Team.astro b/docs/src/components/Team.astro
@@ -0,0 +1,64 @@
+---
+import { shuffle } from '../utils/shuffle';
+import ConditionalLink from './ConditionalLink.astro';
+
+type Member = {
+    name: string;
+    description: string;
+    picture: string;
+    link?: string;
+};
+
+export interface Props {
+    members: Member[];
+    title: string;
+    titleSide?: 'left' | 'right';
+    description: string;
+    randomize?: boolean;
+    small?: boolean;
+}
+
+const { members, title, description, randomize = false, titleSide = 'left', small = false } = Astro.props;
+
+let displayMembers = members;
+if (randomize) {
+    displayMembers = shuffle(members);
+}
+
+const titleRight = titleSide === 'right';
+---
+
+<div
+    class={`not-content flex flex-col flex-wrap items-center gap-4 ${titleRight ? 'md:flex-row-reverse' : 'md:flex-row'}`}
+>
+    <div class={`w-60 text-center ${titleRight ? 'md:text-right' : 'md:text-left'}`}>
+        <div class='text-4xl text-[var(--sl-color-text-accent)]'>{title}</div>
+        <div class='mt-2 leading-normal'>{description}</div>
+    </div>
+    <div class='flex flex-1 flex-wrap justify-center gap-6'>
+        {
+            displayMembers.map((member) => (
+                <ConditionalLink link={member.link}>
+                    <div
+                        class={`w-38 group !mt-0 flex flex-col items-center text-center ${small ? 'md:w-32' : 'md:w-44'}`}
+                    >
+                        <img
+                            class='rounded-full'
+                            src={member.picture}
+                            alt={'Picture of ' + member.name}
+                            width={140}
+                            height={140}
+                        />
+                        <div
+                            class='!mt-0 text-lg font-semibold'
+                            class:list={[{ 'group-hover:underline': member.link !== undefined }]}
+                        >
+                            {member.name}
+                        </div>
+                        <div class='!mt-0'>{member.description}</div>
+                    </div>
+                </ConditionalLink>
+            ))
+        }
+    </div>
+</div>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -16,7 +16,9 @@ hero:
           icon: external
 ---
 
-import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+import { CardGrid, LinkCard } from '@astrojs/starlight/components';
+import Team from '../../components/Team.astro';
+import members from '../../team.json';
 
 ## Key resources
 
@@ -28,3 +30,32 @@ import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
 
 
 </CardGrid>
+
+## Team
+
+<Team
+    title='Nest architects'
+    description='the people who designed and led the development'
+    members={members.architects}
+    randomize={true}
+/>
+
+<hr />
+
+<Team
+    title='Wise owls'
+    description='the people who guided, encouraged and funded the development'
+    members={members.mentors}
+    randomize={true}
+    titleSide='right'
+/>
+
+<hr />
+
+<Team
+    title='Branch weavers'
+    description='the people who contributed to the development'
+    members={members.developers}
+    randomize={true}
+    small={true}
+/>
diff --git a/docs/src/team.json b/docs/src/team.json
@@ -0,0 +1,90 @@
+{
+    "architects": [
+        {
+            "name": "Chaoran Chen",
+            "description": "ETH Zurich",
+            "picture": "https://avatars.githubusercontent.com/u/18666552?v=4",
+            "link": "https://bsse.ethz.ch/cevo/the-group/people/person-detail.cchen.html"
+        },
+        {
+            "name": "Theo Sanderson",
+            "description": "Francis Crick Institute",
+            "picture": "https://avatars.githubusercontent.com/u/19732295?v=4",
+            "link": "https://theo.io/"
+        },
+        {
+            "name": "Cornelius Roemer",
+            "description": "University of Basel",
+            "picture": "https://avatars.githubusercontent.com/u/25161793?v=4",
+            "link": "https://neherlab.org/cornelius-roemer.html"
+        }
+    ],
+    "mentors": [
+        {
+            "name": "Tanja Stadler",
+            "description": "ETH Zurich",
+            "picture": "https://avatars.githubusercontent.com/u/8371380?v=4",
+            "link": "https://bsse.ethz.ch/cevo/the-group/people/person-detail.tstadler.html"
+        },
+        {
+            "name": "Emma Hodcroft",
+            "description": "Swiss TPH",
+            "picture": "https://avatars.githubusercontent.com/u/14290674?v=4",
+            "link": "https://www.swisstph.ch/de/staff/profile/people/emma-hodcroft"
+        },
+        {
+            "name": "Richard Neher",
+            "description": "University of Basel",
+            "picture": "https://avatars.githubusercontent.com/u/8379168?v=4",
+            "link": "https://neherlab.org/richard-neher.html"
+        },
+        {
+            "name": "Artem Babaian",
+            "description": "University of Toronto",
+            "picture": "https://avatars.githubusercontent.com/u/9220907?v=4",
+            "link": "https://moleculargenetics.utoronto.ca/faculty/artem-babaian"
+        }
+    ],
+    "developers": [
+        {
+            "name": "Anna Parker",
+            "description": "ETH Zurich",
+            "picture": "https://avatars.githubusercontent.com/u/50943381?s=96&v=4"
+        },
+        {
+            "name": "Fabian Engelniederhammer",
+            "description": "TNG Technology",
+            "picture": "https://avatars.githubusercontent.com/u/92720311?s=96&v=4"
+        },
+        {
+            "name": "Jonas Kellerer",
+            "description": "TNG Technology",
+            "picture": "https://avatars.githubusercontent.com/u/122305307?s=96&v=4"
+        },
+        {
+            "name": "Tobias Kampmann",
+            "description": "TNG Technology",
+            "picture": "https://avatars.githubusercontent.com/u/138436052?v=4"
+        },
+        {
+            "name": "Alexander Taepper",
+            "description": "ETH Zurich",
+            "picture": "https://avatars.githubusercontent.com/u/25206390?v=4"
+        },
+        {
+            "name": "Christian Jaeger",
+            "description": "ETH Zurich",
+            "picture": "https://avatars.githubusercontent.com/u/31164?s=96&v=4"
+        },
+        {
+            "name": "Luke Pereira",
+            "description": "University of Toronto",
+            "picture": "https://avatars.githubusercontent.com/u/19697621?s=96&v=4"
+        },
+        {
+            "name": "Alex Morales",
+            "description": "University of Toronto",
+            "picture": "https://avatars.githubusercontent.com/u/4924797?s=96&v=4"
+        }
+    ]
+}
diff --git a/docs/src/utils/shuffle.ts b/docs/src/utils/shuffle.ts
@@ -0,0 +1,6 @@
+export const shuffle = <T>(array: T[]): T[] => {
+    return array
+        .map((value) => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value);
+};