Refactor constitution and code of conduct pages shapes backgrounds

components/OrganizedContent/ReadAll.tsx

@@ -8,11 +8,7 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
-import {
-  mobileShapesConfig,
-  aboutShapesConfig,
-  GetShapesConfig,
-} from "../ShapesBackground";
+import { GetShapesConfig } from "../ShapesBackground";
 
 import { Header } from "./Header";
 
@@ -32,10 +28,17 @@ export interface Options {
   pagePath: string;
   title: string;
   image: string;
+  getShapesConfig: GetShapesConfig;
   link?: ComponentType<LinkProps>;
 }
 
-export function createReadAllPage({ title, image, pagePath, link }: Options) {
+export function createReadAllPage({
+  title,
+  image,
+  pagePath,
+  getShapesConfig,
+  link,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   function Page({ sections }: Props) {
@@ -65,10 +68,7 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
     );
   }
 
-  // TODO: differentiate between About pages and Resources pages
-  Page.getShapesConfig = (() => {
-    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
-  }) as GetShapesConfig;
+  Page.getShapesConfig = getShapesConfig;
 
   return Page;
 }

components/OrganizedContent/Section.tsx

@@ -7,11 +7,7 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
-import {
-  mobileShapesConfig,
-  aboutShapesConfig,
-  GetShapesConfig,
-} from "../ShapesBackground";
+import { GetShapesConfig } from "../ShapesBackground";
 
 import { Header } from "./Header";
 
@@ -30,10 +26,17 @@ export interface Options {
   title: string;
   pagePath: string;
   image: string;
+  getShapesConfig: GetShapesConfig;
   link?: ComponentType<LinkProps>;
 }
 
-export function createSectionPage({ title, image, pagePath, link }: Options) {
+export function createSectionPage({
+  title,
+  image,
+  pagePath,
+  getShapesConfig,
+  link,
+}: Options) {
   const Link = link ?? createLink(pagePath);
 
   function Page(this: void, { content, sections, current }: Props) {
@@ -50,10 +53,7 @@ export function createSectionPage({ title, image, pagePath, link }: Options) {
     );
   }
 
-  // TODO: differentiate between About pages and Resources pages
-  Page.getShapesConfig = (() => {
-    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
-  }) as GetShapesConfig;
+  Page.getShapesConfig = getShapesConfig;
 
   return Page;
 }

pages/about/constitution.tsx

@@ -2,6 +2,10 @@ import path from "path";
 
 import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
 import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+} from "@/components/ShapesBackground";
 
 export const CONSTITUTION_PAGE = path.join("about", "constitution");
 
@@ -9,6 +13,8 @@ export default createReadAllPage({
   title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
+  getShapesConfig: () =>
+    window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
 });
 
 export const getStaticProps = createReadAllGetStaticProps(CONSTITUTION_PAGE);

pages/about/constitution/[section].tsx

@@ -3,6 +3,10 @@ import {
   createSectionGetStaticPaths,
   createSectionGetStaticProps,
 } from "@/components/OrganizedContent/static";
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+} from "@/components/ShapesBackground";
 
 import { CONSTITUTION_PAGE } from "../constitution";
 
@@ -10,6 +14,8 @@ export default createSectionPage({
   title: "Constitution",
   image: "images/constitution.svg",
   pagePath: CONSTITUTION_PAGE,
+  getShapesConfig: () =>
+    window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
 });
 
 export const getStaticProps = createSectionGetStaticProps(CONSTITUTION_PAGE);