Refactor shapes background pipeline

components/ShapesBackground.tsx

@@ -1,31 +1,36 @@
-import { useRouter } from "next/router";
-import React from "react";
+import React, { CSSProperties, useEffect, useState } from "react";
 
 import { Image } from "./Image";
 
 import styles from "./ShapesBackground.module.css";
 
-export function ShapesBackground(props: { children: React.ReactNode }) {
-  const router = useRouter();
+interface Props {
+  getConfig?: GetShapesConfig;
+}
+
+export function ShapesBackground({ getConfig }: Props) {
+  const [config, setConfig] = useState<ShapesConfig>({});
+
+  useEffect(() => {
+    setConfig(getConfig?.() ?? {});
+  }, [getConfig]);
 
   return (
-    <>
-      <div className={styles.shapesContainer}>
-        {routeList.find((el) => router.pathname === el.route)?.shapes() ?? null}
-      </div>
-      {props.children}
-    </>
+    <div className={styles.shapesContainer}>
+      {Object.entries(config).map(([type, instances]) =>
+        instances.map((attributes, idx) => (
+          <Shape
+            key={idx.toString() + type}
+            type={type as ShapeType}
+            style={attributes}
+          />
+        ))
+      )}
+    </div>
   );
 }
 
-const routeList = [
-  {
-    route: "/",
-    shapes: HomeShapes,
-  },
-];
-
-type ShapeType =
+export type ShapeType =
   | "asterisk"
   | "circle"
   | "cross"
@@ -36,26 +41,33 @@ type ShapeType =
   | "triangle"
   | "waves";
 
-function Shape(props: { shape: ShapeType; className: string }) {
+export type ShapesConfig = {
+  [key in ShapeType]?: CSSProperties[];
+};
+
+export type GetShapesConfig = () => ShapesConfig;
+
+function Shape(props: { type: ShapeType; style: CSSProperties }) {
   return (
     <Image
-      src={`/images/shapes/${props.shape}.svg`}
-      className={`${styles.shape} ${props.className}`}
+      src={`/images/shapes/${props.type}.svg`}
+      className={styles.shape}
+      style={props.style}
     />
   );
 }
 
-function HomeShapes() {
-  return (
-    <>
-      <Shape shape="dots" className={styles.homeDots} />
-      <Shape shape="hash" className={styles.homeHash1} />
-      <Shape shape="triangle" className={styles.homeTriangle1} />
-      <Shape shape="waves" className={styles.homeWaves1} />
-      <Shape shape="triangle" className={styles.homeTriangle2} />
-      <Shape shape="plus" className={styles.homePlus} />
-      <Shape shape="waves" className={styles.homeWaves2} />
-      <Shape shape="hash" className={styles.homeHash2} />
-    </>
-  );
-}
+// function HomeShapes() {
+//   return (
+//     <>
+//       <Shape type="dots" className={styles.homeDots} />
+//       <Shape type="hash" className={styles.homeHash1} />
+//       <Shape type="triangle" className={styles.homeTriangle1} />
+//       <Shape type="waves" className={styles.homeWaves1} />
+//       <Shape type="triangle" className={styles.homeTriangle2} />
+//       <Shape type="plus" className={styles.homePlus} />
+//       <Shape type="waves" className={styles.homeWaves2} />
+//       <Shape type="hash" className={styles.homeHash2} />
+//     </>
+//   );
+// }

pages/_app.tsx

@@ -7,7 +7,10 @@ import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
-import { ShapesBackground } from "@/components/ShapesBackground";
+import {
+  GetShapesConfig,
+  ShapesBackground,
+} from "@/components/ShapesBackground";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -25,11 +28,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}
           <div className={styles.contentContainer}>
-            <ShapesBackground>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </ShapesBackground>
+            <ShapesBackground
+              getConfig={Component.getShapesConfig ?? undefined}
+            />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
           </div>
           <Footer />
         </div>
@@ -44,6 +48,7 @@ type PageComponent = NextComponentType<
   Record<string, unknown>
 > & {
   Layout?: ComponentType<{ children: ReactNode }>;
+  getShapesConfig?: GetShapesConfig;
 };
 
 type AppProps = DefaultAppProps & {

pages/index.tsx

@@ -6,6 +6,7 @@ import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { NewsCard } from "@/components/NewsCard";
+import { GetShapesConfig } from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 
 import AltTab, {
@@ -92,3 +93,10 @@ export default function Home() {
 Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
   return <div className={styles.page}>{props.children}</div>;
 };
+
+Home.getShapesConfig = (() => {
+  return {
+    triangle: [{ left: "2rem" }, { bottom: "2rem" }],
+    dots: [{ top: "100px", right: "50vw" }],
+  };
+}) as GetShapesConfig;