Nirvlife: structure round 1 (#17)

* Chore(dev): make react template/dev.tsx async * Feat(core): fork and verify react-fullerpage (#18)
nirv-ai · May 29, 2023 · 413913e · 413913e
1 parent b09ba56
commit 413913e
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 47 deletions.
diff --git a/apps/nirvlife/dev.tsx b/apps/nirvlife/dev.tsx
@@ -1,34 +1,38 @@
 import * as path from "path";
-import { statSync } from "fs";
 import type { ServeOptions } from "bun";
+import { rm, stat } from "node:fs/promises";
 
 const PROJECT_ROOT = import.meta.dir;
 const PUBLIC_DIR = path.resolve(PROJECT_ROOT, "public");
 const BUILD_DIR = path.resolve(PROJECT_ROOT, "build");
 
-await Bun.build({
-  entrypoints: ["./src/main.tsx"],
-  outdir: "./build",
-})
-  .then((output) => {
-    console.info("\n\n built output", output);
+// TODO(noah): see if theres a `bun` way to do this
+// ^ i think bun accepts all the esbuild options so there should be
+await rm(BUILD_DIR, { force: true, recursive: true }).then(() =>
+  Bun.build({
+    entrypoints: ["./src/main.tsx"],
+    outdir: BUILD_DIR,
   })
-  .catch((e) => {
-    console.info("\n\n error in build", e);
-  });
+    .then((output) => {
+      console.info("\n\n built output", output);
+    })
+    .catch((e) => {
+      console.info("\n\n error in build", e);
+    })
+);
 
-function serveFromDir(config: {
+async function serveFromDir(config: {
   directory: string;
   path: string;
-}): Response | null {
+}): Promise<Response | null> {
   let basePath = path.join(config.directory, config.path);
   const suffixes = ["", ".html", "index.html"];
 
   for (const suffix of suffixes) {
     try {
       const pathWithSuffix = path.join(basePath, suffix);
-      const stat = statSync(pathWithSuffix);
-      if (stat && stat.isFile()) {
+      const fd = await stat(pathWithSuffix);
+      if (fd && fd.isFile()) {
         return new Response(Bun.file(pathWithSuffix));
       }
     } catch (err) {}
@@ -38,20 +42,23 @@ function serveFromDir(config: {
 }
 
 export default {
-  fetch(request) {
+  async fetch(request) {
     let reqPath = new URL(request.url).pathname;
     console.log(request.method, reqPath);
     if (reqPath === "/") reqPath = "/index.html";
 
     // check public
-    const publicResponse = serveFromDir({
+    const publicResponse = await serveFromDir({
       directory: PUBLIC_DIR,
       path: reqPath,
     });
     if (publicResponse) return publicResponse;
 
     // check /.build
-    const buildResponse = serveFromDir({ directory: BUILD_DIR, path: reqPath });
+    const buildResponse = await serveFromDir({
+      directory: BUILD_DIR,
+      path: reqPath,
+    });
     if (buildResponse) return buildResponse;
 
     return new Response("File not found", {

diff --git a/apps/nirvlife/package.json b/apps/nirvlife/package.json
@@ -7,32 +7,34 @@
   "dependencies": {
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@fontsource/baloo-2": "4.5.12",
-    "@fontsource/inconsolata": "4.5.10",
-    "@fontsource/indie-flower": "4.5.10",
-    "@fontsource/kelly-slab": "4.5.9",
-    "@fontsource/permanent-marker": "4.5.7",
-    "@fontsource/rubik": "4.5.14",
-    "@fontsource/shadows-into-light-two": "4.5.9",
+    "@fontsource/baloo-2": "5.0.1",
+    "@fontsource/inconsolata": "5.0.1",
+    "@fontsource/indie-flower": "5.0.1",
+    "@fontsource/kelly-slab": "5.0.1",
+    "@fontsource/permanent-marker": "5.0.1",
+    "@fontsource/rubik": "5.0.1",
+    "@fontsource/shadows-into-light-two": "5.0.1",
     "@hapi/bourne": "^3.0.0",
     "@lukemorales/query-key-factory": "^1.2.0",
     "@mui/icons-material": "5.11.16",
-    "@mui/lab": "5.0.0-alpha.130",
-    "@mui/material": "5.13.1",
-    "@mui/system": "5.13.1",
-    "@tanstack/query-core": "4.29.7",
-    "@tanstack/query-sync-storage-persister": "4.29.7",
-    "@tanstack/react-query": "4.29.7",
-    "@tanstack/react-query-devtools": "4.29.7",
-    "@tanstack/react-query-persist-client": "4.29.7",
+    "@mui/lab": "5.0.0-alpha.131",
+    "@mui/material": "5.13.2",
+    "@mui/system": "5.13.2",
+    "@tanstack/query-core": "4.29.11",
+    "@tanstack/query-sync-storage-persister": "4.29.11",
+    "@tanstack/react-query": "4.29.11",
+    "@tanstack/react-query-devtools": "4.29.11",
+    "@tanstack/react-query-persist-client": "4.29.11",
     "@tanstack/react-table": "8.9.1",
     "classnames": "^2.3.2",
+    "framer-motion": "^10.12.16",
     "ky": "0.33.3",
     "react": "18.2.0",
-    "react-aria": "^3.24.0",
+    "react-aria": "^3.25.0",
     "react-dom": "18.2.0",
+    "react-fullerpage": "[email protected]:noahehall/react-fullerpage.git#b51c0c0",
     "react-ideal-image": "[email protected]:noahehall/react-ideal-image.git#72d7328",
-    "react-query-kit": "^1.4.4",
+    "react-query-kit": "^1.4.5",
     "react-router-dom": "6.11.2",
     "react-scripts": "5.0.1",
     "react-waypoint": "^10.3.0",
@@ -41,18 +43,18 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.7.1",
-    "@types/react": "18.2.6",
+    "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@types/react-router-dom": "5.3.3",
-    "barrelsby": "2.7.0",
-    "bun-types": "^0.6.2",
+    "barrelsby": "2.8.0",
+    "bun-types": "canary",
     "npm-check-updates": "^16.10.12",
-    "postcss": "8.4.23",
+    "postcss": "8.4.24",
     "postcss-flexbugs-fixes": "5.0.2",
     "prettier": "^2.8.8",
     "react-refresh": "0.14.0",
-    "turbo": "^1.9.8",
-    "type-fest": "^3.10.0",
+    "turbo": "^1.9.9",
+    "type-fest": "^3.11.0",
     "typescript": "beta"
   },
   "scripts": {

diff --git a/apps/nirvlife/src/Components/App/AppLandingScreen.tsx b/apps/nirvlife/src/Components/App/AppLandingScreen.tsx
@@ -2,18 +2,51 @@ import { useTheme } from "@mui/material";
 
 import { Img, TextCopy } from "Library";
 import { ctaStacks, nirvaiRef, taglineRef } from "data";
+import { ReactFP, FPContainer, FPItem } from "react-fullerpage";
 // <img src={"/img/logo_main.png"} className="img" alt="nirvai" />
 
 const screenId = "app-landing-screen";
 export const AppLandingScreen = () => {
   const theme = useTheme();
 
+  // {/* <Img key="img" uris={["/img/girljumping.jpg"]} width={500} height={500} /> */}
   return (
-    <article id={screenId}>
-      {/* <Img key="img" uris={["/img/girljumping.jpg"]} width={500} height={500} /> */}
-      <TextCopy data={ctaStacks[0][0]} />
-      <TextCopy data={nirvaiRef} longform />
-      <TextCopy data={taglineRef} full />
-    </article>
+    <ReactFP style={{}}>
+      <FPContainer style={{}} transitionTiming={700}>
+        <FPItem
+          style={{
+            backgroundColor: "lime",
+            height: "80vh",
+            padding: "1em",
+          }}
+        >
+          <article>
+            <TextCopy data={ctaStacks[0][0]} />
+          </article>
+        </FPItem>
+
+        <FPItem
+          style={{
+            backgroundColor: "coral",
+            padding: "1em",
+          }}
+        >
+          <article>
+            <TextCopy data={nirvaiRef} longform />
+          </article>
+        </FPItem>
+
+        <FPItem
+          style={{
+            backgroundColor: "firebrick",
+            padding: "1em",
+          }}
+        >
+          <article>
+            <TextCopy data={taglineRef} full />
+          </article>
+        </FPItem>
+      </FPContainer>
+    </ReactFP>
   );
 };
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@tanstack/eslint-plugin-query": "4.29.4",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
-    "bun-types": "0.5.0",
+    "bun-types": "canary",
     "eslint": "8.29.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",