From 0bbfaa59c4bdf5282f67fe3b2ab6ee45c7de4542 Mon Sep 17 00:00:00 2001 From: Amy Date: Thu, 19 Aug 2021 14:42:21 -0400 Subject: [PATCH 01/29] Create ShapesBackground component --- components/ShapesBackground.module.css | 15 +++++++++++++++ components/ShapesBackground.tsx | 12 ++++++++++++ pages/_app.module.css | 7 ------- pages/_app.tsx | 7 ++++--- 4 files changed, 31 insertions(+), 10 deletions(-) create mode 100644 components/ShapesBackground.module.css create mode 100644 components/ShapesBackground.tsx diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css new file mode 100644 index 00000000..535a0a0f --- /dev/null +++ b/components/ShapesBackground.module.css @@ -0,0 +1,15 @@ +.contentContainer { + position: relative; + + /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/ + flex-grow: 1; +} + +.shapesContainer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -10; +} diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx new file mode 100644 index 00000000..70c6c58f --- /dev/null +++ b/components/ShapesBackground.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +import styles from "./ShapesBackground.module.css"; + +export function ShapesBackground(props: { children: React.ReactNode }) { + return ( +
+
+ {props.children} +
+ ); +} diff --git a/pages/_app.module.css b/pages/_app.module.css index a9bb4d65..1fd1df46 100644 --- a/pages/_app.module.css +++ b/pages/_app.module.css @@ -3,10 +3,3 @@ flex-direction: column; min-height: 100vh; } - -/* This makes the footer stay at the bottom, even if there's not much content - * on the screen. - */ -.contentContainer { - flex-grow: 1; -} diff --git a/pages/_app.tsx b/pages/_app.tsx index 4fc6e4fe..0ec7d753 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,7 @@ 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 { ThemeProvider } from "@/components/Theme"; import styles from "./_app.module.css"; @@ -22,12 +23,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
- {/* Wrapping content with a div to allow for a display: block parent */} -
+ {/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */} + -
+
-- 2.39.2 From 04ecb67febd0edc92a2340e63f496b34fac1ced1 Mon Sep 17 00:00:00 2001 From: Amy Date: Thu, 19 Aug 2021 22:46:34 -0400 Subject: [PATCH 02/29] Move contentContainer back to _app.tsx --- components/ShapesBackground.module.css | 7 ------- components/ShapesBackground.tsx | 4 ++-- pages/_app.module.css | 7 +++++++ pages/_app.tsx | 14 ++++++++------ 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index 535a0a0f..a2ffd00c 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -1,10 +1,3 @@ -.contentContainer { - position: relative; - - /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/ - flex-grow: 1; -} - .shapesContainer { position: absolute; top: 0; diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index 70c6c58f..a3fa7812 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -4,9 +4,9 @@ import styles from "./ShapesBackground.module.css"; export function ShapesBackground(props: { children: React.ReactNode }) { return ( -
+ <>
{props.children} -
+ ); } diff --git a/pages/_app.module.css b/pages/_app.module.css index 1fd1df46..81ee01b5 100644 --- a/pages/_app.module.css +++ b/pages/_app.module.css @@ -3,3 +3,10 @@ flex-direction: column; min-height: 100vh; } + +.contentContainer { + position: relative; + + /* This makes the footer stay at the bottom, even if there's not much content on the screen.*/ + flex-grow: 1; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 0ec7d753..c023a528 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -23,12 +23,14 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
- {/* Wrapping content with a ShapesBackground to allow for shapes in the background and a display: block parent */} - - - - - + {/* Wrapping content with a div to allow for a display: block parent */} +
+ + + + + +
-- 2.39.2 From bbc8e94387ccfb4f05f441d78c03a335a1648b10 Mon Sep 17 00:00:00 2001 From: Amy Date: Thu, 19 Aug 2021 23:51:11 -0400 Subject: [PATCH 03/29] Add basic shapes background to home page --- components/ShapesBackground.module.css | 86 ++++++++++++++++++++++++++ components/ShapesBackground.tsx | 75 +++++++++++++++++++++- public/images/shapes/asterisk.svg | 12 ++++ public/images/shapes/circle.svg | 9 +++ public/images/shapes/cross.svg | 34 ++++++++++ public/images/shapes/dots.svg | 75 ++++++++++++++++++++++ public/images/shapes/hash.svg | 6 ++ public/images/shapes/plus.svg | 4 ++ public/images/shapes/ring.svg | 3 + public/images/shapes/triangle.svg | 3 + public/images/shapes/waves.svg | 4 ++ 11 files changed, 310 insertions(+), 1 deletion(-) create mode 100644 public/images/shapes/asterisk.svg create mode 100644 public/images/shapes/circle.svg create mode 100644 public/images/shapes/cross.svg create mode 100644 public/images/shapes/dots.svg create mode 100644 public/images/shapes/hash.svg create mode 100644 public/images/shapes/plus.svg create mode 100644 public/images/shapes/ring.svg create mode 100644 public/images/shapes/triangle.svg create mode 100644 public/images/shapes/waves.svg diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index a2ffd00c..f8f0540b 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -6,3 +6,89 @@ bottom: 0; z-index: -10; } + +.shape { + position: absolute; +} + +.blue { + filter: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) + brightness(92%) contrast(93%); +} + +.teal { + filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) + brightness(91%) contrast(88%); +} + +.opacity20 { + opacity: 20%; +} + +.opacity25 { + opacity: 25%; +} + +.opacity30 { + opacity: 30%; +} + +/* * * HOME PAGE * * */ + +.homeDots { + top: 6vh; + left: calc(-32rem / 16); + width: calc(168rem / 16); + height: calc(204rem / 16); +} + +.homeHash1 { + top: 32vh; + left: 12vw; + width: calc(60rem / 16); + height: calc(60rem / 16); +} + +.homeTriangle1 { + top: 5vh; + left: 20vw; + width: calc(68rem / 16); + height: calc(68rem / 16); + transform: rotate(18deg); +} + +.homeWaves1 { + top: 50vh; + left: 24vw; + width: calc(116rem / 16); + height: calc(58rem / 16); +} + +.homeTriangle2 { + top: 2vh; + right: 40vw; + width: calc(68rem / 16); + height: calc(68rem / 16); + transform: rotate(-26deg); +} + +.homePlus { + top: 42vh; + right: 22vw; + width: calc(48rem / 16); + height: calc(48rem / 16); +} + +.homeWaves2 { + top: 10vh; + right: 18vw; + width: calc(102rem / 16); + height: calc(50rem / 16); +} + +.homeHash2 { + top: 25vh; + right: 9vw; + width: calc(60rem / 16); + height: calc(60rem / 16); +} diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index a3fa7812..6ca63e6b 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -1,12 +1,85 @@ +import { useRouter } from "next/router"; import React from "react"; +import { Image } from "./Image"; + import styles from "./ShapesBackground.module.css"; export function ShapesBackground(props: { children: React.ReactNode }) { + const router = useRouter(); + return ( <> -
+
+ {routeList.find((el) => router.pathname === el.route)?.shapes() ?? null} +
{props.children} ); } + +const routeList = [ + { + route: "/", + shapes: HomeShapes, + }, +]; + +type ShapeType = + | "asterisk" + | "circle" + | "cross" + | "dots" + | "hash" + | "plus" + | "ring" + | "triangle" + | "waves"; + +function Shape(props: { shape: ShapeType; className: string }) { + return ( + + ); +} + +function HomeShapes() { + return ( + <> + + + + + + + + + + ); +} diff --git a/public/images/shapes/asterisk.svg b/public/images/shapes/asterisk.svg new file mode 100644 index 00000000..ac7878e7 --- /dev/null +++ b/public/images/shapes/asterisk.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/shapes/circle.svg b/public/images/shapes/circle.svg new file mode 100644 index 00000000..f8ca4eaa --- /dev/null +++ b/public/images/shapes/circle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/shapes/cross.svg b/public/images/shapes/cross.svg new file mode 100644 index 00000000..1ece2257 --- /dev/null +++ b/public/images/shapes/cross.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/shapes/dots.svg b/public/images/shapes/dots.svg new file mode 100644 index 00000000..dc3aad72 --- /dev/null +++ b/public/images/shapes/dots.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/shapes/hash.svg b/public/images/shapes/hash.svg new file mode 100644 index 00000000..ea67f08c --- /dev/null +++ b/public/images/shapes/hash.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/shapes/plus.svg b/public/images/shapes/plus.svg new file mode 100644 index 00000000..ff684ed4 --- /dev/null +++ b/public/images/shapes/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/shapes/ring.svg b/public/images/shapes/ring.svg new file mode 100644 index 00000000..a1bc7f05 --- /dev/null +++ b/public/images/shapes/ring.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/shapes/triangle.svg b/public/images/shapes/triangle.svg new file mode 100644 index 00000000..93a054aa --- /dev/null +++ b/public/images/shapes/triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/shapes/waves.svg b/public/images/shapes/waves.svg new file mode 100644 index 00000000..558b4a4f --- /dev/null +++ b/public/images/shapes/waves.svg @@ -0,0 +1,4 @@ + + + + -- 2.39.2 From 93824c31d83d489ae2203c1089ba991e0fc480a8 Mon Sep 17 00:00:00 2001 From: Amy Date: Fri, 20 Aug 2021 00:30:31 -0400 Subject: [PATCH 04/29] Improve shapes layout on home page --- components/ShapesBackground.module.css | 70 +++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index f8f0540b..68bc0b95 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -36,21 +36,21 @@ /* * * HOME PAGE * * */ .homeDots { - top: 6vh; + top: calc(0.06 * (580rem / 0.65) / 16); left: calc(-32rem / 16); width: calc(168rem / 16); height: calc(204rem / 16); } .homeHash1 { - top: 32vh; + top: calc(0.32 * (580rem / 0.65) / 16); left: 12vw; width: calc(60rem / 16); height: calc(60rem / 16); } .homeTriangle1 { - top: 5vh; + top: calc(0.05 * (580rem / 0.65) / 16); left: 20vw; width: calc(68rem / 16); height: calc(68rem / 16); @@ -58,14 +58,14 @@ } .homeWaves1 { - top: 50vh; + top: calc(0.5 * (580rem / 0.65) / 16); left: 24vw; width: calc(116rem / 16); height: calc(58rem / 16); } .homeTriangle2 { - top: 2vh; + top: calc(0.02 * (580rem / 0.65) / 16); right: 40vw; width: calc(68rem / 16); height: calc(68rem / 16); @@ -73,22 +73,76 @@ } .homePlus { - top: 42vh; + top: calc(0.42 * (580rem / 0.65) / 16); right: 22vw; width: calc(48rem / 16); height: calc(48rem / 16); } .homeWaves2 { - top: 10vh; + top: calc(0.1 * (580rem / 0.65) / 16); right: 18vw; width: calc(102rem / 16); height: calc(50rem / 16); } .homeHash2 { - top: 25vh; + top: calc(0.25 * (580rem / 0.65) / 16); right: 9vw; width: calc(60rem / 16); height: calc(60rem / 16); } + +@media only screen and (max-height: calc((580rem / 0.65) / 16)) { + .homeDots { + top: 6vh; + } + .homeHash1 { + top: 32vh; + } + .homeTriangle1 { + top: 5vh; + } + .homeWaves1 { + top: 50vh; + } + .homeTriangle2 { + top: 2vh; + } + .homePlus { + top: 42vh; + } + .homeWaves2 { + top: 10vh; + } + .homeHash2 { + top: 25vh; + } +} + +@media only screen and (max-height: calc((420rem / 0.65) / 16)) { + .homeDots { + top: calc(0.06 * (420rem / 0.65) / 16); + } + .homeHash1 { + top: calc(0.32 * (420rem / 0.65) / 16); + } + .homeTriangle1 { + top: calc(0.05 * (420rem / 0.65) / 16); + } + .homeWaves1 { + top: calc(0.5 * (420rem / 0.65) / 16); + } + .homeTriangle2 { + top: calc(0.02 * (420rem / 0.65) / 16); + } + .homePlus { + top: calc(0.42 * (420rem / 0.65) / 16); + } + .homeWaves2 { + top: calc(0.1 * (420rem / 0.65) / 16); + } + .homeHash2 { + top: calc(0.25 * (420rem / 0.65) / 16); + } +} -- 2.39.2 From bdd2ef380b0aa0d43a8c61dbe17a719dbfb40b8f Mon Sep 17 00:00:00 2001 From: Amy Date: Fri, 20 Aug 2021 00:43:08 -0400 Subject: [PATCH 05/29] Clean up comments --- components/ShapesBackground.module.css | 2 -- pages/index.module.css | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index 68bc0b95..c68bcc52 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -33,8 +33,6 @@ opacity: 30%; } -/* * * HOME PAGE * * */ - .homeDots { top: calc(0.06 * (580rem / 0.65) / 16); left: calc(-32rem / 16); diff --git a/pages/index.module.css b/pages/index.module.css index a68520e4..79cc7aef 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -110,7 +110,7 @@ gap: 1rem; } -/* On a smaller desktop screen, make the events/new flow vertically */ +/* On a smaller desktop screen, make the events/news flow vertically */ @media only screen and (max-width: calc(1100rem / 16)) { .cards { flex-direction: column; -- 2.39.2 From 79a3959ece58637bcf7a7023f6368b31814e2aff Mon Sep 17 00:00:00 2001 From: Amy Date: Fri, 20 Aug 2021 00:49:24 -0400 Subject: [PATCH 06/29] Refactor colour and opacity classes --- components/ShapesBackground.module.css | 37 ++++++++++++------------ components/ShapesBackground.tsx | 40 ++++++-------------------- 2 files changed, 26 insertions(+), 51 deletions(-) diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index c68bcc52..8ecc4df2 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -9,35 +9,20 @@ .shape { position: absolute; -} -.blue { - filter: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) + --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) brightness(92%) contrast(93%); -} - -.teal { - filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) + --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) brightness(91%) contrast(88%); } -.opacity20 { - opacity: 20%; -} - -.opacity25 { - opacity: 25%; -} - -.opacity30 { - opacity: 30%; -} - .homeDots { top: calc(0.06 * (580rem / 0.65) / 16); left: calc(-32rem / 16); width: calc(168rem / 16); height: calc(204rem / 16); + filter: var(--teal); + opacity: 25%; } .homeHash1 { @@ -45,6 +30,8 @@ left: 12vw; width: calc(60rem / 16); height: calc(60rem / 16); + filter: var(--blue); + opacity: 20%; } .homeTriangle1 { @@ -53,6 +40,8 @@ width: calc(68rem / 16); height: calc(68rem / 16); transform: rotate(18deg); + filter: var(--teal); + opacity: 30%; } .homeWaves1 { @@ -60,6 +49,8 @@ left: 24vw; width: calc(116rem / 16); height: calc(58rem / 16); + filter: var(--teal); + opacity: 20%; } .homeTriangle2 { @@ -68,6 +59,8 @@ width: calc(68rem / 16); height: calc(68rem / 16); transform: rotate(-26deg); + filter: var(--blue); + opacity: 20%; } .homePlus { @@ -75,6 +68,8 @@ right: 22vw; width: calc(48rem / 16); height: calc(48rem / 16); + filter: var(--blue); + opacity: 20%; } .homeWaves2 { @@ -82,6 +77,8 @@ right: 18vw; width: calc(102rem / 16); height: calc(50rem / 16); + filter: var(--teal); + opacity: 20%; } .homeHash2 { @@ -89,6 +86,8 @@ right: 9vw; width: calc(60rem / 16); height: calc(60rem / 16); + filter: var(--blue); + opacity: 20%; } @media only screen and (max-height: calc((580rem / 0.65) / 16)) { diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index 6ca63e6b..c8bc1269 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -48,38 +48,14 @@ function Shape(props: { shape: ShapeType; className: string }) { function HomeShapes() { return ( <> - - - - - - - - + + + + + + + + ); } -- 2.39.2 From c2e6078dff42f9842311c428c0c348587c69f025 Mon Sep 17 00:00:00 2001 From: Amy Date: Fri, 20 Aug 2021 01:20:24 -0400 Subject: [PATCH 07/29] Add shapes background to mobile home page --- components/ShapesBackground.module.css | 78 +++++++++++++++++++++----- 1 file changed, 65 insertions(+), 13 deletions(-) diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css index 8ecc4df2..6f261a1f 100644 --- a/components/ShapesBackground.module.css +++ b/components/ShapesBackground.module.css @@ -1,5 +1,6 @@ .shapesContainer { position: absolute; + overflow: hidden; top: 0; left: 0; right: 0; @@ -8,17 +9,19 @@ } .shape { - position: absolute; - --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) brightness(92%) contrast(93%); --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) brightness(91%) contrast(88%); + + position: absolute; + filter: var(--blue); + opacity: 20%; } .homeDots { top: calc(0.06 * (580rem / 0.65) / 16); - left: calc(-32rem / 16); + right: 90vw; width: calc(168rem / 16); height: calc(204rem / 16); filter: var(--teal); @@ -30,8 +33,6 @@ left: 12vw; width: calc(60rem / 16); height: calc(60rem / 16); - filter: var(--blue); - opacity: 20%; } .homeTriangle1 { @@ -50,7 +51,6 @@ width: calc(116rem / 16); height: calc(58rem / 16); filter: var(--teal); - opacity: 20%; } .homeTriangle2 { @@ -59,8 +59,6 @@ width: calc(68rem / 16); height: calc(68rem / 16); transform: rotate(-26deg); - filter: var(--blue); - opacity: 20%; } .homePlus { @@ -68,8 +66,6 @@ right: 22vw; width: calc(48rem / 16); height: calc(48rem / 16); - filter: var(--blue); - opacity: 20%; } .homeWaves2 { @@ -78,7 +74,6 @@ width: calc(102rem / 16); height: calc(50rem / 16); filter: var(--teal); - opacity: 20%; } .homeHash2 { @@ -86,8 +81,6 @@ right: 9vw; width: calc(60rem / 16); height: calc(60rem / 16); - filter: var(--blue); - opacity: 20%; } @media only screen and (max-height: calc((580rem / 0.65) / 16)) { @@ -143,3 +136,62 @@ top: calc(0.25 * (420rem / 0.65) / 16); } } + +@media only screen and (max-width: calc(768rem / 16)) { + .homeDots { + top: 0; + right: 80vw; + width: calc(168rem / 16); + height: calc(152rem / 16); + filter: var(--blue); + opacity: 20%; + } + + .homeHash1 { + top: calc(190rem / 16); + left: unset; + right: 87vw; + width: calc(60rem / 16); + height: calc(60rem / 16); + } + + .homeTriangle1 { + top: calc(266rem / 16); + left: unset; + right: 78vw; + width: calc(45rem / 16); + height: calc(45rem / 16); + transform: rotate(-26deg); + filter: var(--blue); + opacity: 20%; + } + + .homeWaves1 { + display: none; + } + + .homeTriangle2 { + top: calc(4rem / 16); + right: 3vw; + width: calc(45rem / 16); + height: calc(45rem / 16); + transform: rotate(16deg); + } + + .homePlus { + display: none; + } + + .homeWaves2 { + top: calc(168rem / 16); + left: 86vw; + right: unset; + width: calc(102rem / 16); + height: calc(50rem / 16); + filter: var(--blue); + } + + .homeHash2 { + display: none; + } +} -- 2.39.2 From da19ce8f01d66a6b7fc9f00cb3a42c5cf060119d Mon Sep 17 00:00:00 2001 From: Amy Date: Sat, 21 Aug 2021 02:31:40 -0400 Subject: [PATCH 08/29] Refactor shapes background pipeline --- components/ShapesBackground.tsx | 82 +++++++++++++++++++-------------- pages/_app.tsx | 17 ++++--- pages/index.tsx | 8 ++++ 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index c8bc1269..c8fbc7b8 100644 --- a/components/ShapesBackground.tsx +++ b/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({}); + + useEffect(() => { + setConfig(getConfig?.() ?? {}); + }, [getConfig]); return ( - <> -
- {routeList.find((el) => router.pathname === el.route)?.shapes() ?? null} -
- {props.children} - +
+ {Object.entries(config).map(([type, instances]) => + instances.map((attributes, idx) => ( + + )) + )} +
); } -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 ( ); } -function HomeShapes() { - return ( - <> - - - - - - - - - - ); -} +// function HomeShapes() { +// return ( +// <> +// +// +// +// +// +// +// +// +// +// ); +// } diff --git a/pages/_app.tsx b/pages/_app.tsx index c023a528..47009547 100644 --- a/pages/_app.tsx +++ b/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 { {/* Wrapping content with a div to allow for a display: block parent */}
- - - - - + + + +