pmndrs · abernier · Aug 6, 2024 · Aug 6, 2024
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ $ npm ci
 # dev
 
 ```sh
-$ npm run -w demos/cards-with-border-radius dev
+$ npm run dev
 ```
 
 # build

diff --git a/apps/website/app/demos/[demoname]/Dev.tsx b/apps/website/app/demos/[demoname]/Dev.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function Dev({ demoname }: { demoname: string }) {
+  const { refresh } = useRouter();
+
+  const cmd = `npm run -w demos/${demoname} dev3`;
+
+  return (
+    <div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @scope {
+              pre {background:rgb(13,13,13); padding:1rem; border-radius:.35rem;}
+              code {color:white;}
+              code:before {content:"$ ";}
+
+              pre {
+                position:relative;
+                a {position:absolute; bottom:100%; right:0; cursor:pointer;}
+              }
+
+            }
+          `,
+        }}
+      />
+
+      <p>Start this demo with :</p>
+      <pre
+        onClick={(e) => {
+          navigator.clipboard.writeText(cmd);
+        }}
+      >
+        <code>{cmd}</code>
+        <a>copy</a>
+      </pre>
+      <p>
+        Then <a onClick={(e) => refresh()}>refresh</a>
+      </p>
+    </div>
+  );
+}
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 
 import { getDemos } from "@/lib/helper";
+import { Dev } from "./Dev";
 
 const demos = getDemos();
 
@@ -41,7 +42,18 @@ export async function generateStaticParams() {
   }));
 }
 
-export default function Page(props: Props) {
+async function checkUrlIsUp(url: string) {
+  const response = await fetch(url, {
+    method: "GET",
+    next: { revalidate: 0 },
+  }).catch(() => {});
+
+  return response?.ok || false;
+}
+
+const isDev = process.env.NODE_ENV === "development";
+
+export default async function Page(props: Props) {
   const { params } = props;
 
   const { demoname } = params;
@@ -50,16 +62,32 @@ export default function Page(props: Props) {
 
   const { embed_url } = demo;
 
+  let isUp;
+  if (isDev) {
+    isUp = await checkUrlIsUp(embed_url);
+  }
+  // console.log("isUp=", isUp);
+
   return (
-    <>
+    <div>
       <style
         dangerouslySetInnerHTML={{
           __html: `
-            iframe {width:100%; min-height:100dvh;}
+            @scope {
+              :scope {
+                height:100%;
+                display:flex; align-items:center; justify-content:center;
+              }
+              iframe {width:100%; min-height:100dvh;}
+            }
           `,
         }}
       />
-      <iframe src={embed_url} />;
-    </>
+      {isDev && !isUp ? (
+        <Dev demoname={demoname} />
+      ) : (
+        <iframe src={embed_url} />
+      )}
+    </div>
   );
 }
diff --git a/apps/website/app/globals.css b/apps/website/app/globals.css
@@ -6,3 +6,9 @@
 
 @import "open-props/normalize/dark";
 @import "open-props/normalize/light";
+
+a {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -25,7 +25,10 @@ export default function RootLayout({
             __html: `
               @scope {
                 :scope {background:#eee;}
-                main {position:fixed; width:100%; height:100dvh;}
+                
+                main {
+                  position:fixed; width:100%; height:100dvh;
+                }
               }
             `,
           }}

diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -39,7 +39,7 @@ export default function Nav({
   }, [demoname, demos]);
 
   return (
-    <>
+    <div>
       <style
         dangerouslySetInnerHTML={{
           __html: `
@@ -76,7 +76,10 @@ export default function Nav({
 
               a img {
                 object-fit:cover; aspect-ratio:16/9; width:auto; height:7rem;
+                color:inherit!important; font-size:.8rem;
+                background:none;
               }
+              a img:after {content:"";}
             }
           `,
         }}
@@ -91,13 +94,13 @@ export default function Nav({
                   href={`/demos/${name}`}
                   className={clsx({ active: demoname === name })}
                 >
-                  <Image src={thumb} width={16} height={9} alt="" />
+                  <Image src={thumb} width={16} height={9} alt={name} />
                 </Link>
               </li>
             );
           })}
         </ul>
       </nav>
-    </>
+    </div>
   );
 }
diff --git a/demos/aquarium/package.json b/demos/aquarium/package.json
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "dev": "vite --host",
-    "dev2": "e2e-dev $npm_package_name",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview",

diff --git a/demos/arkanoid-under-60-loc/package.json b/demos/arkanoid-under-60-loc/package.json
@@ -25,7 +25,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/arkanoid/package.json b/demos/arkanoid/package.json
@@ -20,7 +20,8 @@
     "zustand": "^3.4.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/audio-analyser/package.json b/demos/audio-analyser/package.json
@@ -26,7 +26,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/backdrop-and-cables/package.json b/demos/backdrop-and-cables/package.json
@@ -26,7 +26,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview",

diff --git a/demos/baking-soft-shadows/package.json b/demos/baking-soft-shadows/package.json
@@ -26,7 +26,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview",

diff --git a/demos/basic-ballpit/package.json b/demos/basic-ballpit/package.json
@@ -25,7 +25,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/basic-demo/package.json b/demos/basic-demo/package.json
@@ -23,7 +23,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bestservedbold-christmas-baubles/package.json b/demos/bestservedbold-christmas-baubles/package.json
@@ -29,7 +29,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bezier-curves-and-nodes/package.json b/demos/bezier-curves-and-nodes/package.json
@@ -28,7 +28,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bloom-hdr-workflow-gltf/package.json b/demos/bloom-hdr-workflow-gltf/package.json
@@ -28,7 +28,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bouncy-watch/package.json b/demos/bouncy-watch/package.json
@@ -25,7 +25,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bounds-and-makedefault/package.json b/demos/bounds-and-makedefault/package.json
@@ -24,7 +24,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bruno-simons-20k-challenge/package.json b/demos/bruno-simons-20k-challenge/package.json
@@ -30,7 +30,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/building-dynamic-envmaps/package.json b/demos/building-dynamic-envmaps/package.json
@@ -30,7 +30,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/building-live-envmaps/package.json b/demos/building-live-envmaps/package.json
@@ -26,7 +26,8 @@
     "vite": "^5.3.3"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/bvh/package.json b/demos/bvh/package.json
@@ -22,7 +22,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "bbuild2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/camera-scroll/package.json b/demos/camera-scroll/package.json
@@ -26,7 +26,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/camera-shake/package.json b/demos/camera-shake/package.json
@@ -24,7 +24,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/canvas-text/package.json b/demos/canvas-text/package.json
@@ -19,7 +19,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/cards-with-border-radius/package.json b/demos/cards-with-border-radius/package.json
@@ -16,7 +16,8 @@
     "three": "^0.165.0"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"

diff --git a/demos/cards/package.json b/demos/cards/package.json
@@ -24,7 +24,8 @@
     "vite": "^5.3.1"
   },
   "scripts": {
-    "dev": "vite --host --open",
+    "dev": "vite --host",
+    "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
     "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ $ npm ci @@
     # dev
     ```sh
-    $ npm run -w demos/cards-with-border-radius dev
+    $ npm run dev
     ```
     # build
@@ Expand Down @@