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

nextstrain · Oct 3, 2024 · 36d5bf4 · 36d5bf4
1 parent e6f673a
commit 36d5bf4
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 40 deletions.
diff --git a/static-site/src/pages/contact.jsx → static-site/app/contact/page.tsx b/static-site/src/pages/contact.jsx → static-site/app/contact/page.tsx
@@ -1,15 +1,15 @@
-import React from "react";
-import GenericPage from "../layouts/generic-page";
-import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
-import { H1, NarrowFocusParagraph } from "../components/splash/styles";
+import { ReactElement } from "react";
 
+import { BigSpacer } from "../../components/spacers";
+import FlexCenter from "../../components/flex-center";
+import FocusParagraphNarrow from "../../components/focus-paragraph";
 
-const Contact = () => (
-  <GenericPage>
-      <H1>Contact Us</H1>
+const Contact = (): ReactElement => (
+  <>
+      <h1>Contact Us</h1>
 
       <FlexCenter>
-        <NarrowFocusParagraph>
+        <FocusParagraphNarrow>
           We are a small team, but connecting with users is important to us.
           <br/>
           <br/>
@@ -31,11 +31,11 @@ const Contact = () => (
           <br/>
           We also host office hours via Zoom every week on Thursdays at 10AM US Pacific time.
           Email us for the meeting link.
-        </NarrowFocusParagraph>
+        </FocusParagraphNarrow>
       </FlexCenter>
 
       <BigSpacer/>
-  </GenericPage>
+  </>
 );
 
 export default Contact;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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;
 }