Convert 'team' page to App Router [#134]

Note: this includes some updates to the FocusParagraph component which
required some knock-on changes in the 'contact' page, due to the
exports of FocusParagraph changing.

static-site/app/contact/page.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { BigSpacer } from "../../components/spacers";
 import FlexCenter from "../../components/flex-center";
-import FocusParagraphNarrow from "../../components/focus-paragraph";
+import { FocusParagraphNarrow } from "../../components/focus-paragraph";
 
 export const metadata: Metadata = {
   title: "Contact",

static-site/app/team/page.tsx

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import React from "react";
+
+import FlexCenter from "../../components/flex-center";
+import { FocusParagraphCentered } from "../../components/focus-paragraph";
+import { BigSpacer } from "../../components/spacers";
+import { TeamPageList } from "../../components/people/avatars";
+
+import styles from "./styles.module.css";
+
+export const metadata: Metadata = {
+  title: "Team",
+};
+
+export default function TeamPage(): React.ReactElement {
+  return (
+    <div className={styles.teamPage}>
+      <BigSpacer count={4} />
+
+      <h1>Nextstrain core team</h1>
+
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Nextstrain was co-founded by:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="founders" />
+
+      <FlexCenter>
+        <FocusParagraphCentered>
+          The core team currently working on Nextstrain are:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="core" />
+
+      <h1>Nextstrain Alumni</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Our previous core Nextstrain team members, some of whom are still
+          working on projects involving Nextstrain and/or maintaining specific
+          analyses. Beyond the core team there have been many code contributions
+          from the wider scientific and programming community; please see{" "}
+          <a href="https://github.com/nextstrain">our GitHub organization</a> to
+          see the history of (code) contributions.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <BigSpacer />
+      <TeamPageList membersKey="alumni" />
+
+      <h1>Scientific Advisory Board</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          In Oct 2023, a scientific advisory board was founded to provide
+          guidance on future directions for the Nextstrain project.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="board" />
+    </div>
+  );
+}

static-site/app/team/styles.module.css

@@ -0,0 +1,10 @@
+.teamPage h1 {
+    color: var(--darkGrey);
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 32px;
+    margin-bottom: 20px;
+    margin-top: 0px;
+    min-width: 240px;
+    text-align: center;
+}

static-site/components/flex-center/styles.module.css

@@ -1,5 +1,6 @@
 .flexCenter {
   display: flex;
+  flex-wrap: nowrap;
   justify-content: center;
   margin: 0px;
   padding: 0px;

static-site/components/focus-paragraph/index.tsx

@@ -2,10 +2,18 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-export default function FocusParagraphNarrow({
+export function FocusParagraphCentered({
   children,
 }: {
   children: React.ReactNode;
 }): React.ReactElement {
-  return <p className={styles.focus}>{children}</p>;
+  return <p className={`${styles.focus} ${styles.centered}`}>{children}</p>;
+}
+
+export function FocusParagraphNarrow({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <p className={`${styles.focus} ${styles.narrow}`}>{children}</p>;
 }

static-site/components/focus-paragraph/styles.module.css

@@ -1,8 +1,22 @@
+/* this is the basic style for all FocusParagraph */
 .focus {
   font-size: var(--niceFontSize);
   font-weight: 300;
   line-height: var(--tightLineHight);
-  margin: 20px 0px 0px;
   max-width: 640px;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphCentered */
+.centered {
+  margin: 20px 0 0;
+  text-align: center;
+}
+.centered > strong {
+  font-weight: 500;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphNarrow */
+.narrow {
+  margin: 20px 0px 0px;
   text-align: left;
 }

static-site/components/people/avatars.module.css

@@ -1,30 +1,71 @@
-.commonWrapper {
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    margin-left: 5px;
-    border-radius: 50%;
-    vertical-align: middle;
-  }
+.commonWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.commonWrapper img {
+  border-radius: 50%;
+  margin-left: 5px;
+  vertical-align: middle;
 }
 
 .footerWrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+}
+.footerWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.footerWrapper img {
+  border-radius: 50%;
+  height: 32px;
+  margin-left: 5px;
+  margin-right: 8px;
+  vertical-align: middle;
+  width: 32px;
+}
+
+.teamPageWrapper {
+  display: grid;
+  font-size: 18px;
+  justify-content: center;
+  grid-template-columns: minmax(min-content, 500px);
+  padding: 20px 0px;
 
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    border-radius: 50%;
-    height: 32px;
-    margin-left: 5px;
-    margin-right: 8px;
-    vertical-align: middle;
-    width: 32px;
+  /* Bootstrap's .container applies 25px left and right margins.  Account for */
+  /* that when computing the minimum width to support two 333px columns. */
+  @media (min-width: calc(333px*2 + 25px*2)) {
+    grid-template-columns: repeat(auto-fit, 333px);
   }
 }
+.teamPageWrapper a {
+  color: var(--darkGrey);
+}
+.teamPageWrapper img {
+  border-radius: 50%;
+  height: 60px;
+  margin-left: 5px;
+  margin-right: 20px;
+  vertical-align: middle;
+  width: 60px;
+}
+
+.sideways {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding: 10px 15px;
+}
+
+.updown {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.blurb {
+  font-size: 14px;
+  text-align: left;
+}

static-site/components/people/avatars.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./avatars.module.scss";
+import styles from "./avatars.module.css";
 import { TeamMember, teamMembers } from "./teamMembers";
 
 export function FooterTeamList(): React.ReactElement {
@@ -26,6 +26,47 @@ export function FooterTeamList(): React.ReactElement {
   );
 }
 
+export function TeamPageList({
+  membersKey,
+}: {
+  membersKey: string;
+}): React.ReactElement {
+  const people: TeamMember[] = teamMembers[membersKey];
+
+  return (
+    <div className={styles.teamPageWrapper}>
+      {people.map(
+        (person: TeamMember): React.ReactElement => (
+          <div
+            className={styles.sideways}
+            key={person.name}
+            style={{ alignItems: person.blurb ? "top" : "center" }}
+          >
+            <MaybeLinked link={person.link}>
+              <img
+                alt={person.name}
+                src={require("../../static/team/" + person.image).default.src}
+              />
+            </MaybeLinked>
+            <div className={styles.updown}>
+              <MaybeLinked link={person.link}>
+                <span style={{ whiteSpace: "nowrap" }}>{person.name}</span>
+              </MaybeLinked>
+              {person.blurb && (
+                <div className={styles.blurb}>{person.blurb}</div>
+              )}
+            </div>
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+function Comma(): React.ReactElement {
+  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
+}
+
 function MaybeLinked({
   link,
   children,
@@ -35,8 +76,3 @@ function MaybeLinked({
 }) {
   return link ? <a href={link}>{children}</a> : children;
 }
-
-function Comma(): React.ReactElement {
-  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
-}
-