Use dynamic routes for /community pages

static-site/app/community/[user]/[repo]/[...path]/page.tsx

@@ -0,0 +1,26 @@
+import CommunityRepoPage from "../../../repo-page";
+
+/**
+ * Renders an error page for non-existent resource paths.
+ *
+ * This should only be reached if the server's router (src/routing) does not
+ * find an existing resource at the path. Falls back to showing the repo page
+ * with an error banner.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+    repo: string;
+    path: string[];
+  };
+}): React.ReactElement {
+  return (
+    <CommunityRepoPage
+      user={params.user}
+      repo={params.repo}
+      extra={params.path.join("/")}
+    />
+  );
+}

static-site/app/community/[user]/[repo]/page.tsx

@@ -0,0 +1,20 @@
+import CommunityRepoPage from "../../repo-page";
+
+/**
+ * Renders the community repo page.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+    repo: string;
+  };
+}): React.ReactElement {
+  return (
+    <CommunityRepoPage
+      user={params.user}
+      repo={params.repo}
+    />
+  );
+}

static-site/app/community/[user]/page.tsx

@@ -0,0 +1,14 @@
+import { MissingRepoErrorPage } from "../error-page";
+
+/**
+ * Renders an error page for incomplete user-only paths.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+  };
+}): React.ReactElement {
+  return <MissingRepoErrorPage user={params.user} />;
+}

static-site/app/community/[[...community]]/content.tsx → static-site/app/community/content.tsx

@@ -2,15 +2,15 @@
 
 import React from "react";
 
-import DatasetSelect from "../../../components/dataset-select";
+import DatasetSelect from "../../components/dataset-select";
 import {
   DatasetSelectColumnsType,
   DatasetType,
-} from "../../../components/dataset-select/types";
-import FlexCenter from "../../../components/flex-center";
-import { FocusParagraphCentered } from "../../../components/focus-paragraph";
-import { SmallSpacer, HugeSpacer } from "../../../components/spacers";
-import communityDatasetsYaml from "../../../content/community-datasets.yaml";
+} from "../../components/dataset-select/types";
+import FlexCenter from "../../components/flex-center";
+import { FocusParagraphCentered } from "../../components/focus-paragraph";
+import { SmallSpacer, HugeSpacer } from "../../components/spacers";
+import communityDatasetsYaml from "../../content/community-datasets.yaml";
 import { title } from "./constants";
 
 /** Column definitions for <DatasetSelect> */

static-site/app/community/error-page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+
+import ErrorMessage from "../../components/error-message";
+import CommunityPageContent from "./content";
+import { usePathname } from "next/navigation";
+
+/**
+ * Renders an error page for incomplete user-only paths.
+ */
+export function MissingRepoErrorPage({
+  user,
+}: {
+  user: string;
+}): React.ReactElement {
+  const errorPath = "nextstrain.org" + usePathname();
+  return (
+    <>
+      <ErrorMessage
+        title={`The path "${errorPath}" is not valid. If you are looking for resources under "${user}", add a repo to the path: "${errorPath}/{repo}"`}
+        contents={<p>Here is the community page instead.</p>}
+      />
+      <CommunityPageContent />
+    </>
+  );
+}

static-site/app/community/narratives/[user]/[repo]/[...path]/page.tsx

@@ -0,0 +1,27 @@
+import CommunityRepoPage from "../../../../repo-page";
+
+/**
+ * Renders an error page for non-existent resource paths.
+ *
+ * This should only be reached if the server's router (src/routing) does not
+ * find an existing resource at the path. Falls back to showing the repo page
+ * with an error banner.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+    repo: string;
+    path: string[];
+  };
+}): React.ReactElement {
+  return (
+    <CommunityRepoPage
+      user={params.user}
+      repo={params.repo}
+      extra={params.path.join("/")}
+      isNarrative={true}
+    />
+  );
+}

static-site/app/community/narratives/[user]/[repo]/page.tsx

@@ -0,0 +1,20 @@
+import CommunityRepoPage from "../../../repo-page";
+
+/**
+ * Renders the community repo page.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+    repo: string;
+  };
+}): React.ReactElement {
+  return (
+    <CommunityRepoPage
+      user={params.user}
+      repo={params.repo}
+    />
+  );
+}

static-site/app/community/narratives/[user]/page.tsx

@@ -0,0 +1,14 @@
+import { MissingRepoErrorPage } from "../../error-page";
+
+/**
+ * Renders an error page for incomplete user-only paths.
+ */
+export default function Page({
+  params,
+}: {
+  params: {
+    user: string;
+  };
+}): React.ReactElement {
+  return <MissingRepoErrorPage user={params.user} />;
+}

static-site/app/community/[[...community]]/page.tsx → static-site/app/community/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Metadata } from "next";
 
-import CommuityPageRouter from "./router";
+import CommunityPageContent from "./content";
 import { title } from "./constants";
 
 export const metadata: Metadata = {
@@ -16,11 +16,7 @@ export const metadata: Metadata = {
  * Metadata API (which we want to use so we have functional OpenGraph
  * tags, etc.), so this component exists to wrap the router Client
  * Component and inject the page title from the metadata into it.
- *
- * See <CommunityPageRouter> for additional information about how URLs
- * that look like `/community/plus/other/stuff` are routed, how errors
- * are handled, etc.
  */
 export default function CommunityPage(): React.ReactElement {
-  return <CommuityPageRouter />;
+  return <CommunityPageContent />;
 }

static-site/app/community/[[...community]]/community-repo-page.tsx → static-site/app/community/repo-page.tsx

@@ -1,13 +1,15 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 
-import DatasetSelect from "../../../components/dataset-select";
-import { DatasetType } from "../../../components/dataset-select/types";
-import ErrorMessage from "../../../components/error-message";
+import DatasetSelect from "../../components/dataset-select";
+import { DatasetType } from "../../components/dataset-select/types";
+import ErrorMessage from "../../components/error-message";
 import SourceInfoHeading, {
   SourceInfo,
-} from "../../../components/source-info-heading";
-import { HugeSpacer } from "../../../components/spacers";
-import fetchAndParseJSON from "../../../util/fetch-and-parse-json";
+} from "../../components/source-info-heading";
+import { HugeSpacer } from "../../components/spacers";
+import fetchAndParseJSON from "../../util/fetch-and-parse-json";
 
 /** Data structure for `/charon/getAvailable` response */
 interface AvailableData {
@@ -27,7 +29,7 @@ interface CommunityResource {
 }
 
 /**
- * A React Server Component for displaying a page for a community
+ * A React Client Component for displaying a page for a community
  * repo, with metadata about the repo and user, and listing of
  * available datasets and narratives in that repo.
  */
@@ -42,11 +44,11 @@ export default function CommunityRepoPage({
   /** Github repo name */
   repo: string;
   /** Any extra elements in the requested URL past the user and repo */
-  extra: string;
+  extra?: string;
   /** Was the request for a narrative? (i.e., did `/narratives/`
    * appear in the URL?)
    */
-  isNarrative: boolean;
+  isNarrative?: boolean;
 }): React.ReactElement {
   // these flags control what's displayed: the repo content and/or an error banner
   const [showContent, setShowContent] = useState<boolean>(false);