From 04329c490d9a613a65e15d72d8ab8e85e010414b Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Wed, 8 Nov 2023 17:27:12 +1100
Subject: [PATCH] Added customisable rainbow text page for custom marketing
 material and goofing around main

---
 remix/app/components/Splash/Splash.tsx  | 13 +++++-
 remix/app/components/rainbowText.tsx    | 14 +++++-
 remix/app/components/textAnimation1.tsx |  8 +++-
 remix/app/routes/rainbow/*.tsx          | 59 +++++++++++++++++++++++++
 4 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 remix/app/routes/rainbow/*.tsx

diff --git a/remix/app/components/Splash/Splash.tsx b/remix/app/components/Splash/Splash.tsx
index 7977dc4..2a79edb 100644
--- a/remix/app/components/Splash/Splash.tsx
+++ b/remix/app/components/Splash/Splash.tsx
@@ -8,9 +8,18 @@ export const Splash = (props) => {
       alignItems="center"
       justifyContent="center"
       width="100vw"
-      height="100vh"
+      maxWidth="100vw"
+      minHeight="100vh"
+      paddingY="100px"
     >
-      <TextAnimation1></TextAnimation1>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        width="800px"
+        textAlign="center"
+      >
+        <TextAnimation1 ce={props?.ce} texts={props?.texts}></TextAnimation1>
+      </Flex>
     </Flex>
   )
 }
diff --git a/remix/app/components/rainbowText.tsx b/remix/app/components/rainbowText.tsx
index f115fef..6c5d63b 100644
--- a/remix/app/components/rainbowText.tsx
+++ b/remix/app/components/rainbowText.tsx
@@ -8,18 +8,28 @@ export const RainbowText = (props) => {
       sx={{
         "@keyframes moving-rainbow": {
           "0%": { backgroundPosition: "0 0" },
-          "100%": { backgroundPosition: "200% 0" },
+          "100%": { backgroundPosition: "calc(100px + 200%) 0" },
         },
         animation: "moving-rainbow 5s infinite linear",
+        "::selection": {
+          background: "transparent",
+        },
+        "::-moz-selection": {
+          background: "transparent",
+        },
       }}
       position="relative"
+      maxWidth="100%"
       color="transparent"
       fontSize="6xl"
       fontWeight="bold"
-      backgroundSize="200%"
+      backgroundSize="calc(100px + 200%)"
       bgGradient="linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)"
       backgroundClip="text"
       userSelect="none"
+      outline="none"
+      contentEditable={props?.ce}
+      spellcheck="false"
     >
       {props?.children}
     </Text>
diff --git a/remix/app/components/textAnimation1.tsx b/remix/app/components/textAnimation1.tsx
index 1f0378f..afdfb50 100644
--- a/remix/app/components/textAnimation1.tsx
+++ b/remix/app/components/textAnimation1.tsx
@@ -5,6 +5,10 @@ import { RainbowText } from "./rainbowText"
 
 export const TextAnimation1 = (props) => {
   const texts = React.useMemo(() => {
+    if (props?.texts?.length) {
+      return props?.texts
+    }
+
     return [
       "thingtime",
       "vibrant",
@@ -16,7 +20,7 @@ export const TextAnimation1 = (props) => {
       "love",
       // 'tt'
     ]
-  }, [])
+  }, [props?.texts])
 
   const [titleText, setTitleText] = React.useState(texts[0])
 
@@ -48,5 +52,5 @@ export const TextAnimation1 = (props) => {
     }, newTimeout)
   }, [titleText])
 
-  return <RainbowText>{titleText}</RainbowText>
+  return <RainbowText ce={props?.ce}>{titleText}</RainbowText>
 }
diff --git a/remix/app/routes/rainbow/*.tsx b/remix/app/routes/rainbow/*.tsx
new file mode 100644
index 0000000..0ea6dd9
--- /dev/null
+++ b/remix/app/routes/rainbow/*.tsx
@@ -0,0 +1,59 @@
+import React from "react"
+import { Flex } from "@chakra-ui/react"
+import { useLocation } from "@remix-run/react"
+
+import { Splash } from "~/components/Splash/Splash"
+import { useThingtime } from "~/components/Thingtime/useThingtime"
+
+export default function Index() {
+  const location = useLocation()
+  const { pathname } = location
+
+  const strippedPathname = React.useMemo(() => {
+    // modify /rainbow/* to just *
+
+    const ret = pathname.split("/")[2]
+
+    if (ret) {
+      return decodeURI(ret)
+    }
+
+    return "rainbow"
+  }, [pathname])
+
+  const texts = React.useMemo(() => {
+    const ret = [strippedPathname]
+
+    return ret
+  }, [strippedPathname])
+
+  return (
+    <Flex
+      sx={{
+        "::selection": {
+          background: "transparent",
+        },
+        "::-moz-selection": {
+          background: "transparent",
+        },
+        "*": {
+          "::selection": {
+            background: "transparent",
+          },
+          "::-moz-selection": {
+            background: "transparent",
+          },
+        },
+        "* grammarly-extension": {
+          display: "none !important",
+        },
+      }}
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth="100%"
+    >
+      <Splash texts={texts} ce={true}></Splash>
+    </Flex>
+  )
+}