lookbook: github demo source link WIP

spearwolf · May 15, 2024 · ddca1f0 · ddca1f0
1 parent 195e82f
commit ddca1f0
Show file tree

Hide file tree

Showing 10 changed files with 370 additions and 232 deletions.
diff --git a/apps/lookbook/package.json b/apps/lookbook/package.json
@@ -24,6 +24,7 @@
     "astro": "^4.3.2",
     "leva": "^0.9.35",
     "lil-gui": "^0.19.1",
+    "nanostores": "^0.10.3",
     "r3f-perf": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/lookbook/src/components/DemoNavBar.astro b/apps/lookbook/src/components/DemoNavBar.astro
@@ -1,9 +1,22 @@
 ---
 import twopoint5d from '../images/twopoint5d-logo.svg?url';
+import RainbowLine from './RainbowLine.astro';
 import CloseDialogIcon from './icons/CloseDialogIcon.astro';
 import CodeIcon from './icons/CodeIcon.astro';
 import GitHubInvertocatIcon from './icons/GitHubInvertocatIcon.astro';
 import HomeIcon from './icons/HomeIcon.astro';
+
+export interface Props {
+  title: string;
+  showSource?: Record<string, string>;
+}
+
+const {title, showSource = {}} = Astro.props;
+
+const githubUrl = showSource?.['github'] ?? 'https://github.com/spearwolf/twopoint5d/tree/main';
+
+// TODO create qr-code with link to demo (for mobile)
+//      see https://github.com/danielgjackson/qrcodejs
 ---
 
 <div class="absolute bottom-0 z-50 -rotate-90 origin-bottom-left transform-gpu container pointer-events-none">
@@ -37,16 +50,28 @@ import HomeIcon from './icons/HomeIcon.astro';
       <CloseDialogIcon />
     </button>
   </header>
+  {
+    title && (
+      <section class="demo-title mb-4">
+        <h1 class="text-l">{title}</h1>
+        <RainbowLine colorSliceWidth={8} cycleDirection="left" />
+      </section>
+    )
+  }
   <section>
     <h2 class="text-2xl">Explore Source Code</h2>
     <p class="text-sm">Want to see how it is done?</p>
     <ul class="mt-4 mb-6">
-      <li class="ring-1 ring-white rounded-md hover:bg-slate-800">
-        <a class="flex flex-row justify-center items-center text-sm py-2 gap-2" href="">
-          <GitHubInvertocatIcon class="h-10" />
-          <span>Show source on GitHub</span>
-        </a>
-      </li>
+      {
+        githubUrl && (
+          <li class="ring-1 ring-white rounded-md hover:bg-slate-800">
+            <a class="flex flex-row justify-center items-center text-sm py-2 gap-2" href={githubUrl} target="_blank">
+              <GitHubInvertocatIcon class="h-10" />
+              <span>Show source on GitHub</span>
+            </a>
+          </li>
+        )
+      }
     </ul>
     <a class="block mb-1 text-xs text-center text-slate-400 underline" href="https://github.com/spearwolf/twopoint5d"
       >Just take me to the project repository</a
@@ -56,6 +81,10 @@ import HomeIcon from './icons/HomeIcon.astro';
 </dialog>
 
 <style>
+  .demo-title {
+    --rainbow-line-height: 2px;
+  }
+
   .show-source-dialog {
     min-width: 320px;
     background-color: rgba(18 22 25 / 75%);

diff --git a/apps/lookbook/src/components/RainbowLine.astro b/apps/lookbook/src/components/RainbowLine.astro
@@ -1,13 +1,29 @@
 ---
 interface Props {
   shadow?: boolean;
+  colorSliceWidth?: number;
+  sliceCycleTime?: number;
+  cycleDirection?: 'left' | 'right';
 }
 
-const {shadow = false} = Astro.props;
+const {shadow = false, colorSliceWidth = 10, sliceCycleTime = 7, cycleDirection = 'right'} = Astro.props;
 ---
 
-<rainbow-line class="rainbow"></rainbow-line>
-{shadow && <rainbow-line class="rainbow-shadow" />}
+<rainbow-line
+  class="rainbow"
+  color-slice-width={colorSliceWidth}
+  slice-cycle-time={sliceCycleTime}
+  cycle-direction={cycleDirection}></rainbow-line>
+{
+  shadow && (
+    <rainbow-line
+      class="rainbow-shadow"
+      color-slice-width={colorSliceWidth}
+      slice-cycle-time={sliceCycleTime}
+      cycle-direction={cycleDirection}
+    />
+  )
+}
 
 <script is:inline async type="module" src={`${import.meta.env.BASE_URL}/js/rainbow-line-v0.2.1.js`}></script>
 

diff --git a/apps/lookbook/src/layouts/ReactDemo.astro b/apps/lookbook/src/layouts/ReactDemo.astro
@@ -3,9 +3,10 @@ import DemoNavBar from '~components/DemoNavBar.astro';
 
 export interface Props {
   title: string;
+  showSource?: Record<string, string>;
 }
 
-const {title} = Astro.props;
+const {title, showSource} = Astro.props;
 ---
 
 <!doctype html>
@@ -18,7 +19,7 @@ const {title} = Astro.props;
     <title>2.5d lookbook &#x2022; {title} demo</title>
   </head>
   <body>
-    <DemoNavBar />
+    <DemoNavBar title={title} showSource={showSource} />
     <slot />
   </body>
 </html>

diff --git a/apps/lookbook/src/layouts/VanillaDemo.astro b/apps/lookbook/src/layouts/VanillaDemo.astro
@@ -3,9 +3,10 @@ import DemoNavBar from '~components/DemoNavBar.astro';
 
 export interface Props {
   title: string;
+  showSource?: Record<string, string>;
 }
 
-const {title} = Astro.props;
+const {title, showSource} = Astro.props;
 ---
 
 <!doctype html>
@@ -18,10 +19,11 @@ const {title} = Astro.props;
     <title>2.5d lookbook &#x2022; {title} demo</title>
   </head>
   <body>
-    <DemoNavBar />
+    <DemoNavBar title={title} showSource={showSource} />
     <slot />
   </body>
 </html>
+
 <style is:global>
   html {
     font-family: system-ui, sans-serif;

diff --git a/apps/lookbook/src/pages/demos/_animated-billboards.json b/apps/lookbook/src/pages/demos/_animated-billboards.json
@@ -14,5 +14,8 @@
     "vanilla",
     "demo"
   ],
-  "previewImage": "animated-billboards.png"
+  "previewImage": "animated-billboards.png",
+  "showSource": {
+    "github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/animated-billboards.astro"
+  }
 }
diff --git a/apps/lookbook/src/pages/demos/_splotch-starfield.json b/apps/lookbook/src/pages/demos/_splotch-starfield.json
@@ -13,5 +13,8 @@
     "<two5-unreal-bloom-pass/>",
     "two5-elements"
   ],
-  "previewImage": "splotch-starfield.png"
+  "previewImage": "splotch-starfield.png",
+  "showSource": {
+    "github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/splotch-starfield.astro"
+  }
 }
diff --git a/apps/lookbook/src/pages/demos/animated-billboards.astro b/apps/lookbook/src/pages/demos/animated-billboards.astro
@@ -1,9 +1,9 @@
 ---
 import Layout from '~layouts/VanillaDemo.astro';
-import {title} from './_animated-billboards.json';
+import {showSource, title} from './_animated-billboards.json';
 ---
 
-<Layout title={title}>
+<Layout title={title} showSource={showSource}>
   <canvas id="canvas-container" resize-to="window"></canvas>
 </Layout>
 

diff --git a/apps/lookbook/src/pages/demos/splotch-starfield.astro b/apps/lookbook/src/pages/demos/splotch-starfield.astro
@@ -1,9 +1,9 @@
 ---
 import Layout from '~layouts/VanillaDemo.astro';
-import {title} from './_splotch-starfield.json';
+import {showSource, title} from './_splotch-starfield.json';
 ---
 
-<Layout title={title}>
+<Layout title={title} showSource={showSource}>
   <section class="container">
     <two5-display id="mydisplay" class="display">
       <two5-texture-store id="texstore" src="/lookbook/assets/textures.json">