Add the constitution/[section] page

pages/about/constitution/[section].tsx

@@ -0,0 +1,84 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { GetStaticPaths, GetStaticProps } from "next";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import React from "react";
+
+import {
+  OrganizedContent,
+  createReadAllSection,
+} from "@/components/OrganizedContent";
+import {
+  getSectionNamesForPage,
+  getSectionsForPage,
+} from "@/lib/organized-content";
+
+import {
+  ConstitutionPage,
+  ConstitutionLink,
+  CONSTITUTION_PAGE,
+} from "../constitution";
+
+interface Section {
+  id: string;
+  title: string;
+}
+
+interface Props {
+  content: MDXRemoteSerializeResult;
+  sections: Section[];
+  current: number;
+}
+
+export default function ConstitutionSection({
+  content,
+  sections,
+  current,
+}: Props) {
+  return (
+    <ConstitutionPage>
+      <OrganizedContent
+        sections={sections}
+        id={sections[current].id}
+        link={ConstitutionLink}
+      >
+        <MDXRemote {...content} />
+      </OrganizedContent>
+    </ConstitutionPage>
+  );
+}
+
+export const getStaticProps: GetStaticProps<Props, Params> = async (
+  context
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const currentName = context.params!.section;
+  const fullSections = await getSectionsForPage(CONSTITUTION_PAGE);
+  const current = fullSections.findIndex(({ name }) => name === currentName);
+
+  const sections = fullSections.map(({ name, data: { title } }) => ({
+    id: name,
+    title,
+  }));
+
+  return {
+    props: {
+      content: fullSections[current].data.content,
+      current: current + 1,
+      sections: [createReadAllSection(sections, false), ...sections],
+    },
+  };
+};
+
+interface Params extends ParsedUrlQuery {
+  section: string;
+}
+
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  const names = await getSectionNamesForPage(CONSTITUTION_PAGE);
+
+  return {
+    paths: names.map((section) => ({ params: { section } })),
+    fallback: false,
+  };
+};