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

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 />
+    </>
+  );
+}

static-site/app/styles/globals.css

@@ -18,7 +18,10 @@
   --mediumGrey: #888;
   --lightGrey: #ccc;
 
+  --niceFontSize: 16px;
   --niceLineHeight: 1.6;
+
+  --tightLineHight: 1.4;
 }
 
 * {

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>;
+}

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

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

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>;
+}

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;
+}

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>
-// );

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;
 }