Add constitution and code of conduct pages shapes backgrounds

components/OrganizedContent/ReadAll.tsx

@@ -8,6 +8,12 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+  GetShapesConfig,
+} from "../ShapesBackground";
+
 import { Header } from "./Header";
 
 export interface SerializedSection {
@@ -32,7 +38,7 @@ export interface Options {
 export function createReadAllPage({ title, image, pagePath, link }: Options) {
   const Link = link ?? createLink(pagePath);
 
-  return function Page({ sections }: Props) {
+  function Page({ sections }: Props) {
     const readAllSection = createReadAllSection(
       sections.map(({ section, content }) => ({
         section,
@@ -57,5 +63,12 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
         </OrganizedContent>
       </Header>
     );
-  };
+  }
+
+  // TODO: differentiate between About pages and Resources pages
+  Page.getShapesConfig = (() => {
+    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
+  }) as GetShapesConfig;
+
+  return Page;
 }

components/OrganizedContent/Section.tsx

@@ -7,6 +7,12 @@ import {
   OrganizedContent,
 } from "@/components/OrganizedContent";
 
+import {
+  mobileShapesConfig,
+  aboutShapesConfig,
+  GetShapesConfig,
+} from "../ShapesBackground";
+
 import { Header } from "./Header";
 
 interface Section {
@@ -30,7 +36,7 @@ export interface Options {
 export function createSectionPage({ title, image, pagePath, link }: Options) {
   const Link = link ?? createLink(pagePath);
 
-  return function Page(this: void, { content, sections, current }: Props) {
+  function Page(this: void, { content, sections, current }: Props) {
     return (
       <Header title={title} image={image}>
         <OrganizedContent
@@ -42,5 +48,12 @@ export function createSectionPage({ title, image, pagePath, link }: Options) {
         </OrganizedContent>
       </Header>
     );
-  };
+  }
+
+  // TODO: differentiate between About pages and Resources pages
+  Page.getShapesConfig = (() => {
+    return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
+  }) as GetShapesConfig;
+
+  return Page;
 }

pages/about/our-supporters.tsx

@@ -26,8 +26,5 @@ export default function OurSupporters() {
 }
 
 OurSupporters.getShapesConfig = (() => {
-  if (window.innerWidth <= 768) {
-    return mobileShapesConfig;
-  }
-  return aboutShapesConfig;
+  return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
 }) as GetShapesConfig;