[FEATURE]: staging to production merge

app/components/Title.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import classNames from "classnames";
 import type { PropsWithChildren } from "react";
 

app/components/pageTransition/FlowerBlobTransition.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import classNames from "classnames";
 import anime from "animejs";
 
 import type { PropsWithChildren } from "react";
@@ -53,11 +52,32 @@ const DOM_NODES = Object.freeze({
 
 const FlowerBlobTransition = ({
   children,
-  styleProps,
-}: PropsWithChildren<{ styleProps?: Array<string> }>) => {
+  animationKey,
+  classNamesProp,
+}: PropsWithChildren<{
+  animationKey: string;
+  classNamesProp?: Array<string>;
+}>) => {
   const [showAnimationContent, setShowAnimationContent] = useState(true);
 
   useEffect(() => {
+    /* 1. only play the animation if this if the first time the page has loaded */
+    if (typeof window !== "undefined") {
+      const animationHasPlayed = window.sessionStorage.getItem(
+        `flowerBlobTransition-${animationKey}`
+      );
+
+      if (animationHasPlayed === "true") {
+        setShowAnimationContent(false);
+      } else {
+        window.sessionStorage.setItem(
+          `flowerBlobTransition-${animationKey}`,
+          "true"
+        );
+      }
+    }
+
+    /* 2. instantiate the animation */
     const domNodes = {};
 
     domNodes["svg"] = document.querySelector("svg");
@@ -82,10 +102,8 @@ const FlowerBlobTransition = ({
       easing: "easeInOutQuad",
     });
 
-    // todo: have a delay and then state update to remove the stuff from the DOM
     setTimeout(() => {
       // todo: determine a more accurate animation delay time (should be a composite)
-      // todo: think about running the state update after removing the bindings
 
       /* 1. remove animejs bindings */
       anime.remove(domNodes["path"]);
@@ -94,8 +112,6 @@ const FlowerBlobTransition = ({
       /* 2. through a conditional render, don't show the animation content */
       setShowAnimationContent(false);
     }, 5000);
-
-    // todo: cleanup function to remove the binding to animejs
   }, []);
 
   return (

app/components/pageTransition/GradientMapTransition.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+import { useTransition } from "@remix-run/react";
+import classNames from "classnames";
+
+const GradientMapTransition = ({
+  children,
+  classNameProps,
+}: PropsWithChildren<{ classNameProps?: Array<string> }>) => {
+  const transition = useTransition();
+
+  if (transition.state === "loading") {
+    return (
+      <div className={classNames(classNameProps?.join(" "))}>
+        <div className="h-full w-full animate-ping bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-rose-100 to-teal-100" />
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default GradientMapTransition;

app/components/pageTransition/MorphingTransition.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect } from "react";
-import classNames from "classnames";
 import anime from "animejs";
 
 import type { PropsWithChildren } from "react";
 
 const MorphingTransition = ({
   children,
-  styleProps,
-}: PropsWithChildren<{ styleProps?: Array<string> }>) => {
+  classNameProps,
+}: PropsWithChildren<{ classNameProps?: Array<string> }>) => {
   useEffect(() => {
     const domNodes = {};
 
@@ -33,6 +32,13 @@ const MorphingTransition = ({
       easing: "easeOutQuad",
       d: domNodes["path"].getAttribute("pathdata:id"),
     });
+
+    return () => {
+      /* 1. remove animejs bindings */
+      anime.remove(domNodes["introduction"]);
+      anime.remove(domNodes["shape"]);
+      anime.remove(domNodes["path"]);
+    };
   }, []);
 
   return (

app/components/pageTransition/index.ts

@@ -1,4 +1,9 @@
 import MorphingTransition from "./MorphingTransition";
 import FlowerBlobTransition from "./FlowerBlobTransition";
+import GradientMapTransition from "./GradientMapTransition";
 
-export { MorphingTransition, FlowerBlobTransition };
+export default {
+  MorphingTransition,
+  FlowerBlobTransition,
+  GradientMapTransition,
+};

app/routes/braindumps.list.$braindumpId.tsx

@@ -5,20 +5,20 @@ import { useLoaderData } from "@remix-run/react";
 import notionClient from "~/integrations/notion";
 
 //? COMPONENTS
-import ImageContainer from "~/components/ImageContainer";
-import Paragraph from "~/components/Paragraph";
+import A from "~/components/A";
 import Title from "~/components/Title";
 import CodeBlock from "~/components/CodeBlock";
-import A from "~/components/A";
-import { FlowerBlobTransition } from "~/components/pageTransition";
+import Paragraph from "~/components/Paragraph";
+import { PillButton } from "~/components/button";
+import ImageContainer from "~/components/ImageContainer";
+import PageTransition from "~/components/pageTransition";
 
 //? TYPES
 import type { PropsWithChildren } from "react";
 import type { GetBlockResponse } from "@notionhq/client/build/src/api-endpoints";
 
 //? STYLES
 import styles from "highlight.js/styles/base16/zenburn.css";
-import { PillButton } from "~/components/button";
 
 export const loader = async ({
   params,
@@ -193,7 +193,10 @@ export default function BraindumpIndex() {
 
   return (
     <div className="relative">
-      <FlowerBlobTransition>
+      <PageTransition.FlowerBlobTransition
+        key={braindumpMeta["id"]}
+        animationKey={braindumpMeta["id"]}
+      >
         <div className="bg-pink pt-24">
           <InnerLayout>
             {Header}
@@ -203,7 +206,7 @@ export default function BraindumpIndex() {
             </div>
           </InnerLayout>
         </div>
-      </FlowerBlobTransition>
+      </PageTransition.FlowerBlobTransition>
     </div>
   );
 }

app/routes/braindumps/index.tsx

@@ -1,12 +1,15 @@
+import React from "react";
+import { Link } from "@remix-run/react";
+
+//? components
 import Title from "~/components/Title";
+import Layout from "~/components/Layout";
 import { AnimatedButton } from "~/components/button";
-import { Link } from "@remix-run/react";
+import PageTransition from "~/components/pageTransition";
 
 const Introduction = () => {
-  //! NB: h-[calc(100vh-4rem)] needed to explicitly set the height otherwise we get scrollbars
-  //! https://github.com/slackermorris/better-brain-blogging/issues/10#issuecomment-1437429507
   return (
-    <div className="flex h-[calc(100vh-4rem)] w-2/3">
+    <Layout.FullHeight classNameProp={["w-2/3"]}>
       <div className="flex flex-col space-y-32 p-16">
         <Title.H3>
           Inside is a collection of braindumps. These are things I have tried to
@@ -25,10 +28,16 @@ const Introduction = () => {
           </Link>
         </div>
       </div>
-    </div>
+    </Layout.FullHeight>
   );
 };
 
 export default function BraindumpsIndex() {
-  return <Introduction />;
+  return (
+    <PageTransition.GradientMapTransition
+      classNameProps={["h-[calc(100vh-4rem)]", "w-2/3", "overflow-hidden"]}
+    >
+      <Introduction />
+    </PageTransition.GradientMapTransition>
+  );
 }

app/routes/braindumps/list.tsx

@@ -6,13 +6,11 @@ import notionClient from "~/integrations/notion";
 import { retrieveBraindumpsFromNotionDatabase } from "./notion-crm";
 
 //? COMPONENTS
-import { Link } from "@remix-run/react";
 import P from "~/components/P";
 import Title from "~/components/Title";
-import { MorphingTransition } from "~/components/pageTransition";
-
-// @ts-ignore
-// ! EXPORT PROPER TYPE DEFINITONS
+import { Link } from "@remix-run/react";
+import Layout from "~/components/Layout";
+import PageTransition from "~/components/pageTransition";
 import FuzzyScrawl from "fuzzy-scrawl";
 
 //? TYPES
@@ -28,7 +26,6 @@ import type { NotionDatabaseAPIMapperResponse } from "./notion-crm";
 // @ts-ignore
 // ! EXPORT PROPER TYPE DEFINITONS
 import fuzzyScrawlStyles from "fuzzy-scrawl-styles";
-import Layout from "../../components/Layout";
 
 type ThrownResponses = ThrownResponse<404, string>;
 
@@ -94,59 +91,63 @@ export default function BraindumpsList() {
   if (!braindumps) return null;
 
   return (
-    <Layout.FullHeight classNameProp={["w-2/3"]}>
-      <MorphingTransition>
-        <div className="p-24">
-          {Object.entries(braindumps).map(
-            (
-              [category, relatedBraindumps]: [
-                category: string,
-                relatedBraindumps: NotionDatabaseAPIMapperResponse
-              ],
-              keyOfCategories: number
-            ) => {
-              return (
-                <div key={keyOfCategories} className="w-full pb-8">
-                  <Title.H3
-                    styleProps={[
-                      "py-3.5",
-                      "text-4xl",
-                      "font-extrabold",
-                      "uppercase",
-                      "tracking-tight",
-                    ]}
-                  >
-                    {category}
-                  </Title.H3>
-
-                  <div className="bg-white pl-3.5">
-                    {relatedBraindumps.map(
-                      (
-                        braindump: NotionDatabaseAPIMapperResponse[0],
-                        index: number,
-                        braindumps: NotionDatabaseAPIMapperResponse
-                      ) => {
-                        const showFuzzyScrawl =
-                          index ===
-                          Math.floor(Math.random() * braindumps.length);
-
-                        return (
-                          <BraindumpDetails
-                            key={index}
-                            braindump={braindump}
-                            showFuzzyScrawl={showFuzzyScrawl}
-                          />
-                        );
-                      }
-                    )}
+    <PageTransition.GradientMapTransition
+      classNameProps={["h-[calc(100vh-4rem)]", "w-2/3", "overflow-hidden"]}
+    >
+      <Layout.FullHeight classNameProp={["w-2/3"]}>
+        <PageTransition.MorphingTransition>
+          <div className="p-24">
+            {Object.entries(braindumps).map(
+              (
+                [category, relatedBraindumps]: [
+                  category: string,
+                  relatedBraindumps: NotionDatabaseAPIMapperResponse
+                ],
+                keyOfCategories: number
+              ) => {
+                return (
+                  <div key={keyOfCategories} className="w-full pb-8">
+                    <Title.H3
+                      styleProps={[
+                        "py-3.5",
+                        "text-4xl",
+                        "font-extrabold",
+                        "uppercase",
+                        "tracking-tight",
+                      ]}
+                    >
+                      {category}
+                    </Title.H3>
+
+                    <div className="bg-white pl-3.5">
+                      {relatedBraindumps.map(
+                        (
+                          braindump: NotionDatabaseAPIMapperResponse[0],
+                          index: number,
+                          braindumps: NotionDatabaseAPIMapperResponse
+                        ) => {
+                          const showFuzzyScrawl =
+                            index ===
+                            Math.floor(Math.random() * braindumps.length);
+
+                          return (
+                            <BraindumpDetails
+                              key={index}
+                              braindump={braindump}
+                              showFuzzyScrawl={showFuzzyScrawl}
+                            />
+                          );
+                        }
+                      )}
+                    </div>
                   </div>
-                </div>
-              );
-            }
-          )}
-        </div>
-      </MorphingTransition>
-    </Layout.FullHeight>
+                );
+              }
+            )}
+          </div>
+        </PageTransition.MorphingTransition>
+      </Layout.FullHeight>
+    </PageTransition.GradientMapTransition>
   );
 }
 
@@ -181,14 +182,14 @@ function BraindumpDetails({
           braindump["Markdown"] ? (
             <FuzzyScrawl.ScrawlComponent
               content={<LinkToBraindump />}
-              svgFxFilterIndex={3}
-              filterType="circle"
+              svgFxFilterIndex={Math.floor(Math.random() * 7)}
+              filterType={Math.floor(Math.random() * 2) ? "circle" : "line"}
             />
           ) : (
             <FuzzyScrawl.ScrawlComponent
               content={<BraindumpName />}
-              svgFxFilterIndex={0}
-              filterType="line"
+              svgFxFilterIndex={Math.floor(Math.random() * 7)}
+              filterType={Math.floor(Math.random() * 2) ? "circle" : "line"}
             />
           )
         ) : braindump["Markdown"] ? (