Convert pathogens to app router [#1066]

static-site/app/not-found.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 
-import styles from "./styles/not-found.module.css";
-
 export default function FourOhFour(): React.ReactElement {
   return (
     <>
-      <div className={styles.errorContainer}>
+      <div className="errorContainer">
         Oops - that page doesn’t exist! (404).
         <br />
         Maybe start again with <a href="/">our main page</a>?

static-site/app/pathogens/callback.tsx

@@ -0,0 +1,23 @@
+import { ResourceListingInfo } from "../../components/list-resources/types";
+
+/**
+ * A callback function used by the <ListResources> component (which
+ * see) to get the resources to display on the `/pathogens` page.
+ *
+ * @returns A Promise that resolves to a ResourceListingInfo
+ */
+export async function pathogenResourceListingCallback(): Promise<ResourceListingInfo> {
+  const sourceId = "core";
+  const sourceUrl = `list-resources/${sourceId}`;
+
+  const response = await fetch(sourceUrl, {
+    headers: { accept: "application/json" },
+  });
+  if (response.status !== 200) {
+    throw new Error(
+      `fetching data from "${sourceUrl}" returned status code ${response.status}`,
+    );
+  }
+
+  return (await response.json()).dataset[sourceId];
+}

static-site/app/pathogens/page.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import FlexCenter from "../../components/flex-center";
+import { FocusParagraphCentered } from "../../components/focus-paragraph";
+import ListResources from "../../components/list-resources";
+import { SmallSpacer, HugeSpacer } from "../../components/spacers";
+import * as coreResources from "../../content/resource-listing.yaml";
+
+/**
+ * React Server Component that generates and presents a list of
+ * pathogen resources.
+ */
+export default function Pathogens(): React.ReactElement {
+  return (
+    <>
+      <HugeSpacer />
+      <HugeSpacer />
+
+      <h1>Nextstrain-maintained pathogen analyses</h1>
+
+      <SmallSpacer />
+
+      <FlexCenter>
+        <FocusParagraphCentered>
+          These data represent analyses and situation-reports produced by the{" "}
+          <a href="/team">core Nextstrain team</a>. Explore analyses produced by
+          others on the <a href="/groups">Groups</a> and{" "}
+          <a href="/community">Community</a> pages.
+          <br />
+          <br />
+          We aim to provide a continually-updated view of publicly available
+          data to show pathogen evolution and epidemic spread. The pipeline used
+          to generate each dataset is available on{" "}
+          <a href="https://github.com/nextstrain/">our GitHub page</a> or by
+          loading a dataset and clicking the &ldquo;built with&rdquo; link at
+          the top of the page.
+        </FocusParagraphCentered>
+      </FlexCenter>
+
+      <HugeSpacer />
+
+      <ListResources
+        defaultGroupLinks
+        groupDisplayNames={coreResources["coreGroupDisplayNames"]}
+        quickLinks={coreResources["coreQuickLinks"]}
+        resourceType="dataset"
+        tileData={coreResources["coreTiles"]}
+        versioned
+      />
+
+      <HugeSpacer />
+    </>
+  );
+}

static-site/app/styles/globals.css

@@ -116,6 +116,22 @@ h6 {
   font-weight: 400;
 }
 
+div.errorContainer {
+  color: var(--errorRed);
+  font-size: 28px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0 80px;
+  text-align: center;
+}
+div.errorContainer a {
+  color: var(--errorRed);
+  font-weight: 300;
+  text-decoration: underline;
+}
+
 div.iconParagraph {
   font-size: var(--niceFontSize);
   font-weight: 300;

static-site/components/error-boundary/index.tsx

@@ -0,0 +1,90 @@
+import React, { ErrorInfo, ReactNode } from "react";
+
+/**
+ * An extension of the default `Error` class to make it possible for
+ * us to distinguish internally-arising Errors from others.
+ *
+ * @class
+ */
+export class InternalError extends Error {}
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  errorMessage: string;
+  hasError: boolean;
+}
+
+/**
+ * A React Server Component that wraps around something that might
+ * ow an error, and displays an error message when and if that
+ * happens.
+ *
+ * @class
+ */
+export class ErrorBoundary extends React.Component<Props, State> {
+  /**
+   * @constructor
+   */
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      errorMessage: "",
+      hasError: false,
+    };
+  }
+
+  /**
+   * React-specific helper function that will be called when a child
+   * component throws an error during rendering. Allows for the
+   * display of that error.
+   */
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      errorMessage:
+        error instanceof InternalError
+          ? error.message
+          : "Unknown error (thrown value was not an InternalError)",
+      hasError: true,
+    };
+  }
+
+  /**
+   * React-specific helper function that works with
+   * `getDerivedStateFromError` (which see) to enable error-message
+   * display.
+   *
+   * We override this to also echo the error message out the console.
+   *
+   * @override
+   */
+  override componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(error);
+    console.error(info);
+  }
+
+  /**
+   * React-specific helper for rendering a component.
+   *
+   * Needs to be overridden to conditionally display `this.state.errorMessage`
+   * when `this.state.hasError` is true.
+   *
+   * @override
+   */
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <div className="errorContainer">
+          {"Something isn't working!"}
+          <br />
+          Error: `{this.state.errorMessage}`
+          <br />
+          Please <a href="/contact">get in touch</a> if this keeps happening
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

static-site/components/expandable-tiles/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useState } from "react";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+
+import { GenericTileBase } from "./types";
+
+import styles from "./styles.module.css";
+
+/**
+ * Number of pixels by which to pad out the container height when the
+ * container is collapsed
+ */
+const expandPreviewHeight = 60;
+
+/**
+ * React Client Component to display an expandable div with a list of tiles.
+ *
+ * @param tiles - the list of tiles to display
+ * @param tileWidth - width of an individual tile in pixels
+ * @param tileHeight - height of an individual tile in pixels
+ * @param TileComponent - React Functional Component to render an individual tile
+ */
+export default function ExpandableTiles<Tile extends GenericTileBase>({
+  tiles,
+  tileWidth,
+  tileHeight,
+  TileComponent,
+}: {
+  tiles: Tile[];
+  tileWidth: number;
+  tileHeight: number;
+  TileComponent: React.FunctionComponent<{ tile: Tile }>;
+}): React.ReactElement {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  function _toggleExpand(): void {
+    setIsExpanded(!isExpanded);
+  }
+
+  const [tilesContainerHeight, setTilesContainerHeight] = useState<number>(0);
+
+  function tilesContainerRef(tilesContainer: HTMLDivElement): void {
+    if (
+      tilesContainer &&
+      tilesContainerHeight !== tilesContainer.clientHeight
+    ) {
+      setTilesContainerHeight(tilesContainer.clientHeight);
+    }
+  }
+
+  const isExpandable = tilesContainerHeight > tileHeight;
+
+  return (
+    <div>
+      <div
+        className={styles.expandableContainer}
+        style={{
+          maxHeight: isExpanded
+            ? `${tilesContainerHeight}px`
+            : `${tileHeight + expandPreviewHeight}px`,
+        }}
+      >
+        <div
+          ref={tilesContainerRef}
+          className={styles.tilesContainer}
+          style={{ gridTemplateColumns: `repeat(auto-fit, ${tileWidth}px)` }}
+        >
+          {tiles.map((el) => {
+            return <TileComponent tile={el} key={el.name} />;
+          })}
+        </div>
+
+        {isExpandable && !isExpanded && (
+          <div
+            onClick={_toggleExpand}
+            className={styles.previewOverlay}
+            style={{ height: `${expandPreviewHeight}px` }}
+          />
+        )}
+      </div>
+
+      {isExpandable && (
+        <div className={styles.arrowButton} onClick={_toggleExpand}>
+          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
+        </div>
+      )}
+      <div className={styles.spacer} />
+    </div>
+  );
+}

static-site/components/expandable-tiles/styles.module.css

@@ -0,0 +1,38 @@
+.arrowButton {
+  cursor: pointer;
+  font-size: 1.8rem;
+  height: 1em;
+  text-align: center;
+  width: 100%;
+}
+
+.expandableContainer {
+  overflow-y: hidden;
+  position: relative;
+  transition: max-height 0.3s ease;
+}
+
+.previewOverlay {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) -100%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.spacer {
+  min-height: 25px;
+}
+
+.tilesContainer {
+  display: grid;
+  gap: 10px;
+  justify-content: center;
+  overflow: hidden;
+}

static-site/components/expandable-tiles/types.ts

@@ -0,0 +1,4 @@
+export interface GenericTileBase {
+  img: string;
+  name: string;
+}