From 91dede00e8f6f3c466d077dec6d31c62399a7afe Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Wed, 25 Sep 2024 17:28:27 -0700
Subject: [PATCH] Convert 'contact' page to App Router [#134]

---
 static-site/app/contact/page.tsx              | 50 +++++++++++++++++++
 static-site/app/styles/globals.css            |  3 ++
 static-site/components/flex-center/index.tsx  | 11 ++++
 .../components/flex-center/styles.module.css  |  6 +++
 .../components/focus-paragraph/index.tsx      | 11 ++++
 .../focus-paragraph/styles.module.css         |  8 +++
 static-site/components/logos/index.tsx        | 25 +---------
 static-site/pages/contact.jsx                 |  3 --
 static-site/src/pages/contact.jsx             | 41 ---------------
 static-site/types.d.ts                        | 26 ++++++++--
 10 files changed, 113 insertions(+), 71 deletions(-)
 create mode 100644 static-site/app/contact/page.tsx
 create mode 100644 static-site/components/flex-center/index.tsx
 create mode 100644 static-site/components/flex-center/styles.module.css
 create mode 100644 static-site/components/focus-paragraph/index.tsx
 create mode 100644 static-site/components/focus-paragraph/styles.module.css
 delete mode 100644 static-site/pages/contact.jsx
 delete mode 100644 static-site/src/pages/contact.jsx

diff --git a/static-site/app/contact/page.tsx b/static-site/app/contact/page.tsx
new file mode 100644
index 000000000..972e0dc67
--- /dev/null
+++ b/static-site/app/contact/page.tsx
@@ -0,0 +1,50 @@
+import { ReactElement } from "react";
+
+import { BigSpacer } from "../../components/spacers";
+import FlexCenter from "../../components/flex-center";
+import FocusParagraphNarrow from "../../components/focus-paragraph";
+
+export default function ContactPage(): ReactElement {
+  return (
+    <>
+      <h1>Contact Us</h1>
+
+      <FlexCenter>
+        <FocusParagraphNarrow>
+          We are a small team, but connecting with users is important to us.
+          <br />
+          <br />
+          If you have a general question about Nextstrain, we encourage you to
+          post on our{" "}
+          <a
+            href="https://discussion.nextstrain.org"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            discussion forum
+          </a>
+          , where both Nextstrain team members and other community members can
+          assist you.
+          <br />
+          <br />
+          To send a bug report or feature request, please open an issue in one
+          of our{" "}
+          <a href="https://github.com/orgs/nextstrain/repositories">
+            GitHub repositories
+          </a>
+          .
+          <br />
+          <br />
+          For private inquiries, you can reach us at hello
+          <span style={{ display: "none" }}>obfuscate</span>@nextstrain.org.
+          <br />
+          <br />
+          We also host office hours via Zoom every week on Thursdays at 10AM US
+          Pacific time. Email us for the meeting link.
+        </FocusParagraphNarrow>
+      </FlexCenter>
+
+      <BigSpacer />
+    </>
+  );
+}
diff --git a/static-site/app/styles/globals.css b/static-site/app/styles/globals.css
index 197a86501..c51f4cc15 100644
--- a/static-site/app/styles/globals.css
+++ b/static-site/app/styles/globals.css
@@ -18,7 +18,10 @@
   --mediumGrey: #888;
   --lightGrey: #ccc;
 
+  --niceFontSize: 16px;
   --niceLineHeight: 1.6;
+
+  --tightLineHight: 1.4;
 }
 
 * {
diff --git a/static-site/components/flex-center/index.tsx b/static-site/components/flex-center/index.tsx
new file mode 100644
index 000000000..1a7d3dde4
--- /dev/null
+++ b/static-site/components/flex-center/index.tsx
@@ -0,0 +1,11 @@
+import { ReactElement, ReactNode } from "react";
+
+import styles from "./styles.module.css";
+
+export default function FlexCenter({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
+  return <div className={styles.flexCenter}>{children}</div>;
+}
diff --git a/static-site/components/flex-center/styles.module.css b/static-site/components/flex-center/styles.module.css
new file mode 100644
index 000000000..4b7c3d64f
--- /dev/null
+++ b/static-site/components/flex-center/styles.module.css
@@ -0,0 +1,6 @@
+.flexCenter {
+  display: flex;
+  justify-content: center;
+  margin: 0px;
+  padding: 0px;
+}
diff --git a/static-site/components/focus-paragraph/index.tsx b/static-site/components/focus-paragraph/index.tsx
new file mode 100644
index 000000000..3397a03a4
--- /dev/null
+++ b/static-site/components/focus-paragraph/index.tsx
@@ -0,0 +1,11 @@
+import { ReactElement, ReactNode } from "react";
+
+import styles from "./styles.module.css";
+
+export default function FocusParagraphNarrow({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement {
+  return <p className={styles.focus}>{children}</p>;
+}
diff --git a/static-site/components/focus-paragraph/styles.module.css b/static-site/components/focus-paragraph/styles.module.css
new file mode 100644
index 000000000..d7cbd048a
--- /dev/null
+++ b/static-site/components/focus-paragraph/styles.module.css
@@ -0,0 +1,8 @@
+.focus {
+  font-size: var(--niceFontSize);
+  font-weight: 300;
+  line-height: var(--tightLineHight);
+  margin: 20px 0px 0px;
+  max-width: 640px;
+  text-align: left;
+}
diff --git a/static-site/components/logos/index.tsx b/static-site/components/logos/index.tsx
index 226f11d8b..94aba4569 100644
--- a/static-site/components/logos/index.tsx
+++ b/static-site/components/logos/index.tsx
@@ -10,7 +10,6 @@ import ospLogo from "../../static/logos/osp-logo-small.png";
 import bzLogo from "../../static/logos/bz_logo.png";
 
 import styles from "./styles.module.css";
-import { width } from "../../src/components/Groups/Tiles/styles";
 
 type Logo = {
   imgSrc: string;
@@ -69,7 +68,7 @@ export default function Logos(): ReactElement {
 
         <div className={styles.allLogosContainer}>
           {logos.map((logo: Logo) => (
-            <Logo href={logo.href} imgSrc={logo.imgSrc} width={logo.width} />
+            <Logo key={logo.href} href={logo.href} imgSrc={logo.imgSrc} width={logo.width} />
           ))}
         </div>
       </div>
@@ -104,25 +103,3 @@ function Logo({
     </a>
   );
 }
-
-// export const Logos = () => (
-//   <div className="row">
-//     <div className="col-lg-12">
-
-//       <Styles.FooterParagraph>
-//         Nextstrain is supported by
-//       </Styles.FooterParagraph>
-
-//       <AllLogosContainer>
-//         <Logo href="http://www.fredhutch.org/" imgSrc={fredHutchLogo.default.src} width={90}/>
-//         <Logo href="http://www.unibas.ch/" imgSrc={uniBasLogo.default.src} width={110}/>
-//         <Logo href="https://www.nih.gov/" imgSrc={nihLogo.default.src} width={60}/>
-//         <Logo href="https://www.gatesfoundation.org/" imgSrc={bmgfLogo.default.src} width={130}/>
-//         <Logo href="https://www.sib.swiss/" imgSrc={sibLogo.default.src} width={80}/>
-//         <Logo href="https://www.mapbox.com" imgSrc={mapBoxLogo.default.src} width={110}/>
-//         <Logo href="https://www.nih.gov/news-events/news-releases/open-science-prize-announces-epidemic-tracking-tool-grand-prize-winner" imgSrc={ospLogo.default.src} width={100}/>
-//         <Logo href="http://biozentrum.org/" imgSrc={bzLogo.default.src} width={115}/>
-//       </AllLogosContainer>
-//     </div>
-//   </div>
-// );
diff --git a/static-site/pages/contact.jsx b/static-site/pages/contact.jsx
deleted file mode 100644
index a93b13cde..000000000
--- a/static-site/pages/contact.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/contact"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/contact.jsx b/static-site/src/pages/contact.jsx
deleted file mode 100644
index 9819cc171..000000000
--- a/static-site/src/pages/contact.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import GenericPage from "../layouts/generic-page";
-import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
-import { H1, NarrowFocusParagraph } from "../components/splash/styles";
-
-
-const Contact = () => (
-  <GenericPage>
-      <H1>Contact Us</H1>
-
-      <FlexCenter>
-        <NarrowFocusParagraph>
-          We are a small team, but connecting with users is important to us.
-          <br/>
-          <br/>
-          If you have a general question about Nextstrain, we encourage you to post on our{" "}
-          <a href="https://discussion.nextstrain.org" target="_blank" rel="noreferrer noopener">
-            discussion forum
-          </a>, where both Nextstrain team members and other community members can assist you.
-          <br/>
-          <br/>
-          To send a bug report or feature request, please open an issue in one of our{" "}
-          <a href="https://github.com/orgs/nextstrain/repositories">
-            GitHub repositories
-          </a>.
-          <br/>
-          <br/>
-          For private inquiries, you can reach us at
-          hello<span style={{display: "none"}}>obfuscate</span>@nextstrain.org.
-          <br/>
-          <br/>
-          We also host office hours via Zoom every week on Thursdays at 10AM US Pacific time.
-          Email us for the meeting link.
-        </NarrowFocusParagraph>
-      </FlexCenter>
-
-      <BigSpacer/>
-  </GenericPage>
-);
-
-export default Contact;
diff --git a/static-site/types.d.ts b/static-site/types.d.ts
index 2fe4c4785..38acd62a2 100644
--- a/static-site/types.d.ts
+++ b/static-site/types.d.ts
@@ -1,5 +1,25 @@
-declare module '*.yaml' {
+declare module "*.css" {
+  const value: unknown;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.png" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.yaml" {
   // Actual type should be set upon import via type assertion.
-  const contents: unknown
-  export default contents
+  const contents: unknown;
+  export default contents;
 }