@demo

.github/workflows/ci.yml

@@ -15,20 +15,21 @@ permissions:
 jobs:
   build-job:
     runs-on: ubuntu-latest
+    env:
+      TURBO_TELEMETRY_DISABLED: 1
 
     # Cancel multiple runs when pushing to main
     concurrency:
       group: ${{ github.event_name != 'pull_request' && 'group-pushmain' || github.run_id }}
       cancel-in-progress: ${{ github.event_name != 'pull_request' }}
 
-    # container:
-    #   image: ghcr.io/pmndrs/playwright:main
-    #   credentials:
-    #     username: ${{ github.actor }}
-    #     password: ${{ secrets.GITHUB_TOKEN }}
+    container:
+      image: mcr.microsoft.com/playwright:v1.45.3-jammy
 
     steps:
-      # Build
+      #
+      # Setup
+      #
       - uses: actions/checkout@v4
       - id: configurepages
         uses: actions/configure-pages@v5
@@ -38,18 +39,22 @@ jobs:
           cache: "npm"
       - run: npm ci
       - uses: rharkor/[email protected]
-      - run: npm run build
+
+      #
+      # Test
+      #
+      - run: npm test
         env:
           BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
-          PUBLIC_URL: ${{ steps.configurepages.outputs.base_url }}
 
-      # Tests (only for PRs)
-      - run: ./test.sh
-        if: github.event_name == 'pull_request'
+      #
+      # Build (only for pushes on main)
+      #
+      - run: npm run build
+        if: github.event_name != 'pull_request'
         env:
           BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
-
-      # Upload artifact (only for pushes on main)
+          BASE_URL: ${{ steps.configurepages.outputs.base_url }}
       - uses: actions/upload-pages-artifact@v3
         if: github.event_name != 'pull_request'
         with:

README.md

@@ -44,56 +44,55 @@ This will:
 3. copy final result into `out` folder
 
 > [!TIP]
-> This is totally fine `BASE_PATH`/`PUBLIC_URL` to be unset/empty. But for debug purposes(to be 1:1 with GitHub pages) you can:
+> This is totally fine `BASE_PATH`/`BASE_URL` to be unset/empty. But for debug purposes(to be 1:1 with GitHub pages) you can:
 >
 > ```sh
-> $ BASE_PATH=/examples PUBLIC_URL=http://localhost:4000 npm run build
+> $ BASE_PATH=/examples BASE_URL=http://localhost:4000 npm run build
 > $ npx serve out -p 4000
 > ```
 
 </details>
 
 # test
 
-Pre-requisites:
-
-- [build](#build)
-
-> [!WARNING]
-> Do not forget to (re-)[build](#build) first!
-
 ```sh
 $ npm test
 ```
 
 To update the snapshots: `npm test -- -- --update-snapshots`
 
-> [!IMPORTANT]
-> If you built the project with eg. `BASE_PATH=/examples` you'll need to:
->
-> ```sh
-> $ BASE_PATH=/examples npm test
-> ```
+<details>
+
+You can also:
+
+```sh
+$ BASE_PATH=/examples npm test
+```
+
+</details>
 
 ## Docker
 
-For generating reproductible snapshots, we still build static `out/` folder locally, but use dockerised environment to run playwright tests against:
+For generating reproductible snapshots, we use [`mcr.microsoft.com/playwright:v1.45.3-jammy`](https://playwright.dev/docs/docker#image-tags) Docker image.
 
 ```sh
-$ ./test.sh
+$ docker run -it --rm  \
+  -w /app -v "$(pwd)":/app -v /app/node_modules \
+  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh
+#
+# echo "Hey, I am acting like the CI"
+#
+# npm ci
+# npm test
 ```
 
-> [!NOTE]
-> A `-v "$(pwd)":/app` volume is mounted to the container, so any snapshot will be written to the host machine.
+or in one command to update snapshots:
 
-To update the snapshots: `./test.sh --update`
-
-> [!IMPORTANT]
-> If you built the project with eg. `BASE_PATH=/examples` you'll need to:
->
-> ```sh
-> $ BASE_PATH=/examples ./test.sh
-> ```
+```sh
+docker run --rm  \
+  -w /app -v "$(pwd)":/app -v /app/node_modules \
+  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh -c "npm ci && npm test -- -- --update-snapshots"
+```
 
 # Colophon
 

apps/website/lib/helper.ts

@@ -1,28 +1,21 @@
-import path, { dirname, resolve } from "path";
-import fs from "fs";
-import { fileURLToPath } from "url";
+// Importing JSON directly
+import pkg from "@/package.json";
+
 import { generatePort } from "@examples/e2e";
 
 const BASE_PATH = process.env.BASE_PATH || "";
-const PUBLIC_URL = process.env.PUBLIC_URL;
+const BASE_URL = process.env.BASE_URL;
 
 const host =
   process.env.NODE_ENV === "development"
     ? (port: number) => `http://localhost:${port}`
-    : () => (PUBLIC_URL ? new URL(PUBLIC_URL).origin : "");
+    : () => (BASE_URL ? new URL(BASE_URL).origin : "");
 
 export function getDemos() {
-  const __filename = fileURLToPath(import.meta.url); // Converts the URL to a file path
-  const __dirname = dirname(__filename); // Gets the directory name
-
-  const demosDir = resolve(__dirname, "../../../demos");
-
-  return fs
-    .readdirSync(demosDir)
-    .filter((file) => {
-      return fs.statSync(path.join(demosDir, file)).isDirectory();
-    })
-    .map((demoname) => {
+  return Object.keys(pkg.dependencies)
+    .filter((dep) => dep.startsWith("@demo/"))
+    .map((pkgname) => {
+      const demoname = pkgname.split("@demo/")[1];
       const port = generatePort(demoname);
       const h = host(port);
 

apps/website/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "dev2": "npm run dev",
     "build": "NODE_ENV=production next build",
-    "build2": "npm run build",
+    "build3": "npm run build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -16,7 +16,164 @@
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.5.1",
-    "tailwind-merge": "^2.4.0"
+    "tailwind-merge": "^2.4.0",
+    "@demo/aquarium": "*",
+    "@demo/arkanoid": "*",
+    "@demo/arkanoid-under-60-loc": "*",
+    "@demo/audio-analyser": "*",
+    "@demo/backdrop-and-cables": "*",
+    "@demo/baking-soft-shadows": "*",
+    "@demo/basic-ballpit": "*",
+    "@demo/basic-demo": "*",
+    "@demo/bestservedbold-christmas-baubles": "*",
+    "@demo/bezier-curves-and-nodes": "*",
+    "@demo/bloom-hdr-workflow-gltf": "*",
+    "@demo/bouncy-watch": "*",
+    "@demo/bounds-and-makedefault": "*",
+    "@demo/bruno-simons-20k-challenge": "*",
+    "@demo/building-dynamic-envmaps": "*",
+    "@demo/building-live-envmaps": "*",
+    "@demo/bvh": "*",
+    "@demo/camera-scroll": "*",
+    "@demo/camera-shake": "*",
+    "@demo/canvas-text": "*",
+    "@demo/cards": "*",
+    "@demo/cards-with-border-radius": "*",
+    "@demo/caustics": "*",
+    "@demo/cell-fracture": "*",
+    "@demo/clones": "*",
+    "@demo/clouds": "*",
+    "@demo/color-grading": "*",
+    "@demo/confetti": "*",
+    "@demo/csg-bunny-usegroups": "*",
+    "@demo/csg-house": "*",
+    "@demo/csg-operations-rapier-physics": "*",
+    "@demo/dbismut-furniture": "*",
+    "@demo/diamond-refraction": "*",
+    "@demo/diamond-ring": "*",
+    "@demo/drei-rendertexture": "*",
+    "@demo/ecctrl-fisheye": "*",
+    "@demo/edgesgeometry": "*",
+    "@demo/enter-portals": "*",
+    "@demo/environment-blur-and-transitions": "*",
+    "@demo/envmap-ground-projection": "*",
+    "@demo/faucets-select-highlight": "*",
+    "@demo/flexbox-yoga-in-webgl": "*",
+    "@demo/floating-diamonds": "*",
+    "@demo/floating-instanced-shoes": "*",
+    "@demo/floating-laptop": "*",
+    "@demo/flying-bananas": "*",
+    "@demo/frosted-glass": "*",
+    "@demo/gatsby-stars": "*",
+    "@demo/glass-flower": "*",
+    "@demo/gltf-animations": "*",
+    "@demo/gltf-animations-re-used": "*",
+    "@demo/gltf-animations-tied-to-scroll": "*",
+    "@demo/gltfjsx-400kb-drone": "*",
+    "@demo/gpgpu-curl-noise-dof": "*",
+    "@demo/grass-shader": "*",
+    "@demo/ground-projected-envmaps-lamina": "*",
+    "@demo/ground-reflections-and-video-textures": "*",
+    "@demo/hi-key-bubbles": "*",
+    "@demo/horizontal-tiles": "*",
+    "@demo/html-annotations": "*",
+    "@demo/html-input-fields": "*",
+    "@demo/html-markers": "*",
+    "@demo/image-gallery": "*",
+    "@demo/infinite-scroll": "*",
+    "@demo/instanced-particles-effects": "*",
+    "@demo/instanced-vertex-colors": "*",
+    "@demo/instances": "*",
+    "@demo/inter-epoxy-resin": "*",
+    "@demo/interactive-spline-scene-live-html": "*",
+    "@demo/inverted-stencil-buffer": "*",
+    "@demo/iridescent-decals": "*",
+    "@demo/lamina-1x": "*",
+    "@demo/landing-page": "*",
+    "@demo/learn-with-jason": "*",
+    "@demo/lulaby-city": "*",
+    "@demo/lusion-connectors": "*",
+    "@demo/magic-box": "*",
+    "@demo/merged-instance": "*",
+    "@demo/minecraft": "*",
+    "@demo/mixing-controls": "*",
+    "@demo/mixing-html-and-webgl": "*",
+    "@demo/mixing-html-and-webgl-w-occlusion": "*",
+    "@demo/moksha": "*",
+    "@demo/monitors": "*",
+    "@demo/motionpathcontrols": "*",
+    "@demo/mount-transitions": "*",
+    "@demo/multiple-views-with-uniform-controls": "*",
+    "@demo/nextjs-prism": "*",
+    "@demo/night-train": "*",
+    "@demo/object-clump": "*",
+    "@demo/pairing-threejs-to-ui": "*",
+    "@demo/pass-through-portals": "*",
+    "@demo/physics-with-convex-polyhedrons": "*",
+    "@demo/pinball-in-70-lines": "*",
+    "@demo/pmndrs-vercel": "*",
+    "@demo/portal-shapes": "*",
+    "@demo/portals": "*",
+    "@demo/progressive-loading-states-with-suspense": "*",
+    "@demo/racing-game": "*",
+    "@demo/ragdoll-physics": "*",
+    "@demo/rapier-physics": "*",
+    "@demo/rapier-ping-pong": "*",
+    "@demo/raycast-cycling": "*",
+    "@demo/re-using-geometry-and-level-of-detail": "*",
+    "@demo/re-using-gltfs": "*",
+    "@demo/react-ellipsecurve": "*",
+    "@demo/react-pp-outlines": "*",
+    "@demo/react-spring-animations": "*",
+    "@demo/room-with-soft-shadows": "*",
+    "@demo/router-transitions": "*",
+    "@demo/scrollcontrols-and-lens-refraction": "*",
+    "@demo/scrollcontrols-gltf": "*",
+    "@demo/scrollcontrols-with-minimap": "*",
+    "@demo/selective-outlines": "*",
+    "@demo/shader-fire": "*",
+    "@demo/shader-hmr": "*",
+    "@demo/shadermaterials": "*",
+    "@demo/shoe-configurator": "*",
+    "@demo/shopping": "*",
+    "@demo/simple-audio-analyser": "*",
+    "@demo/simple-physics-demo": "*",
+    "@demo/simple-physics-demo-with-debug-bounds": "*",
+    "@demo/sky-dome-with-annotations": "*",
+    "@demo/soft-shadows": "*",
+    "@demo/space-game": "*",
+    "@demo/sparks-and-effects": "*",
+    "@demo/spline-glass-shapes": "*",
+    "@demo/sport-hall": "*",
+    "@demo/springy-boxes": "*",
+    "@demo/ssgi-spheres-with-rapier-physics": "*",
+    "@demo/ssr-test": "*",
+    "@demo/stage-presets-gltfjsx": "*",
+    "@demo/staging-and-camerashake": "*",
+    "@demo/starwars": "*",
+    "@demo/stencil-mask": "*",
+    "@demo/svg-maps-with-html-annotations": "*",
+    "@demo/svg-renderer": "*",
+    "@demo/t-shirt-configurator": "*",
+    "@demo/the-three-graces": "*",
+    "@demo/threejs-journey-lv-1-fisheye": "*",
+    "@demo/threejs-journey-portal": "*",
+    "@demo/thunder-clouds": "*",
+    "@demo/transformcontrols-and-makedefault": "*",
+    "@demo/transparent-aesop-bottles": "*",
+    "@demo/trigger-meshes": "*",
+    "@demo/tying-canvas-to-scroll-offset": "*",
+    "@demo/useintersect-and-scrollcontrols": "*",
+    "@demo/video-cookies": "*",
+    "@demo/video-textures": "*",
+    "@demo/view-tracking": "*",
+    "@demo/viewcube": "*",
+    "@demo/viking-ship": "*",
+    "@demo/volumetric-light-godray": "*",
+    "@demo/volumetric-spotlight": "*",
+    "@demo/water-shader": "*",
+    "@demo/wobbling-sphere": "*",
+    "@demo/zustand-site": "*"
   },
   "devDependencies": {
     "@types/node": "^20",

demos/aquarium/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aquarium",
+  "name": "@demo/aquarium",
   "version": "1.0.0",
   "description": "",
   "homepage": "https://codesandbox.io/s/n7jf0f",

demos/arkanoid-under-60-loc/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "arkanoid-under-60-loc",
+  "name": "@demo/arkanoid-under-60-loc",
   "version": "1.0.0",
   "description": "Super small Arkanoid barebones implementation.",
   "homepage": "https://codesandbox.io/s/66cd7",

demos/arkanoid/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "arkanoid",
+  "name": "@demo/arkanoid",
   "version": "1.0.0",
   "description": "Simple arkanoid implementation using cannon physics.",
   "homepage": "https://codesandbox.io/s/2yqpv",

demos/audio-analyser/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "audio-analyser",
+  "name": "@demo/audio-analyser",
   "version": "1.0.0",
   "description": "Combining audio analysis with gltf cell fracture and reflections.",
   "homepage": "https://codesandbox.io/s/dvokj",

demos/backdrop-and-cables/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "backdrop-and-cables",
+  "name": "@demo/backdrop-and-cables",
   "version": "1.0.0",
   "description": "Using a studio backdrop, quadratic bezier line and contact shadows.",
   "homepage": "https://codesandbox.io/s/2ij9u",

demos/baking-soft-shadows/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "baking-soft-shadows",
+  "name": "@demo/baking-soft-shadows",
   "version": "1.0.0",
   "description": "How to use drei/AccumulativeShadows and RandomizedLight",
   "homepage": "https://codesandbox.io/s/hxcc1x",