Skip to content

Commit ecd602f

Browse files
spearwolfspearwolf
committed
lookbook: demo title, description and source urls
1 parent ddca1f0 commit ecd602f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+217
-100
lines changed

‎apps/lookbook/src/components/DemoNavBar.astro

+9-20
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
import twopoint5d from '../images/twopoint5d-logo.svg?url';
33
import RainbowLine from './RainbowLine.astro';
44
import CloseDialogIcon from './icons/CloseDialogIcon.astro';
5-
import CodeIcon from './icons/CodeIcon.astro';
65
import GitHubInvertocatIcon from './icons/GitHubInvertocatIcon.astro';
7-
import HomeIcon from './icons/HomeIcon.astro';
86
97
export interface Props {
108
title: string;
@@ -22,22 +20,16 @@ const githubUrl = showSource?.['github'] ?? 'https://github.com/spearwolf/twopoi
2220
<div class="absolute bottom-0 z-50 -rotate-90 origin-bottom-left transform-gpu container pointer-events-none">
2321
<div class="flex justify-center">
2422
<header
25-
class="demo-navbar gap-2 flex justify-start items-center px-1.5 lg:pe-5 lg:ps-4 h-10 backdrop-blur-sm pointer-events-auto"
23+
class="demo-navbar gap-2 flex justify-start items-center px-1.5 lg:pe-3 lg:ps-3 h-10 backdrop-blur-sm pointer-events-auto rounded-b-sm"
2624
>
27-
<a href={import.meta.env.BASE_URL} class="interactive-action rotate-90">
28-
<HomeIcon />
29-
</a>
3025
<button class="interactive-action open-show-source-dialog-action">
3126
<img class="primary" src={twopoint5d} alt="twopoint5d" />
3227
</button>
33-
<button class="interactive-action open-show-source-dialog-action rotate-90">
34-
<CodeIcon />
35-
</button>
3628
</header>
3729
</div>
3830
</div>
3931

40-
<dialog class="show-source-dialog px-6 py-4 rounded-md backdrop-blur-sm">
32+
<dialog class="show-source-dialog min-w-80 max-w-xl px-6 py-4 rounded-md backdrop-blur-sm">
4133
<header class="flex flex-row items-center justify-between mb-4">
4234
<figure class="flex items-center justify-start text-slate-300">
4335
<figcaption>a</figcaption>
@@ -58,10 +50,13 @@ const githubUrl = showSource?.['github'] ?? 'https://github.com/spearwolf/twopoi
5850
</section>
5951
)
6052
}
53+
<section class="demo-description mb-4 text-sm text-slate-200">
54+
<slot name="description" />
55+
</section>
6156
<section>
6257
<h2 class="text-2xl">Explore Source Code</h2>
63-
<p class="text-sm">Want to see how it is done?</p>
64-
<ul class="mt-4 mb-6">
58+
<p class="text-sm text-slate-200">Want to see how it is done?</p>
59+
<ul class="max-w-xs mx-auto mt-4 mb-6">
6560
{
6661
githubUrl && (
6762
<li class="ring-1 ring-white rounded-md hover:bg-slate-800">
@@ -86,11 +81,11 @@ const githubUrl = showSource?.['github'] ?? 'https://github.com/spearwolf/twopoi
8681
}
8782

8883
.show-source-dialog {
89-
min-width: 320px;
9084
background-color: rgba(18 22 25 / 75%);
9185
color: #fff;
9286
outline: 1px solid #e5e500;
9387
box-shadow: 0 0 2px 3px rgba(0 0 0 / 20%);
88+
text-shadow: none;
9489
}
9590

9691
.show-source-dialog::backdrop {
@@ -120,13 +115,7 @@ const githubUrl = showSource?.['github'] ?? 'https://github.com/spearwolf/twopoi
120115
}
121116

122117
.demo-navbar img.primary {
123-
max-height: 32px;
124-
}
125-
126-
.interactive-action:hover {
127-
color: #fff;
128-
background-color: #333;
129-
border-radius: 2px;
118+
max-height: 36px;
130119
}
131120

132121
.interactive-action:focus-visible {

‎apps/lookbook/src/layouts/ReactDemo.astro

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ const {title, showSource} = Astro.props;
1919
<title>2.5d lookbook &#x2022; {title} demo</title>
2020
</head>
2121
<body>
22-
<DemoNavBar title={title} showSource={showSource} />
22+
<DemoNavBar title={title} showSource={showSource}>
23+
<slot name="demo-description" slot="description" />
24+
</DemoNavBar>
2325
<slot />
2426
</body>
2527
</html>

‎apps/lookbook/src/layouts/VanillaDemo.astro

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ const {title, showSource} = Astro.props;
1919
<title>2.5d lookbook &#x2022; {title} demo</title>
2020
</head>
2121
<body>
22-
<DemoNavBar title={title} showSource={showSource} />
22+
<DemoNavBar title={title} showSource={showSource}>
23+
<slot name="demo-description" slot="description" />
24+
</DemoNavBar>
2325
<slot />
2426
</body>
2527
</html>

‎apps/lookbook/src/pages/demos/_animated-sprites.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
"textures",
1313
"vanilla"
1414
],
15-
"previewImage": "animated-sprites.png"
15+
"previewImage": "animated-sprites.png",
16+
"showSource": {
17+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/animated-sprites.astro"
18+
}
1619
}

‎apps/lookbook/src/pages/demos/_clouds.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,8 @@
2020
"r3f",
2121
"demo"
2222
],
23-
"previewImage": "clouds.png"
23+
"previewImage": "clouds.png",
24+
"showSource": {
25+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/clouds/index.jsx"
26+
}
2427
}

‎apps/lookbook/src/pages/demos/_crosses-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A minimal example of how to use the VertexObjcts mesh with react-three/fiber",
44
"url": "/demos/crosses-r3f",
55
"tags": ["VO", "VertexObjectGeometry", "VertexObjects", "getDescriptorOf", "react", "r3f"],
6-
"previewImage": "crosses-r3f.png"
6+
"previewImage": "crosses-r3f.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/crosses-r3f/index.jsx"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_crosses.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A minimal example of how to use the VertexObjcts mesh",
44
"url": "/demos/crosses",
55
"tags": ["VO", "VertexObjectGeometry", "VertexObjects", "getDescriptorOf", "vanilla"],
6-
"previewImage": "crosses.png"
6+
"previewImage": "crosses.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/crosses.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_display-minimal.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A minimal example of how to use the Display helper class",
44
"url": "/demos/display-minimal",
55
"tags": ["TextureFactory", "Stage2D", "ParallaxProjection", "Display", "vanilla"],
6-
"previewImage": "minimal-display.png"
6+
"previewImage": "minimal-display.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/display-minimal.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_display-multi.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A test-page demonstrating the sizing behavior of the canvas element created by the Display helper class in different css contexts",
44
"url": "/demos/display-multi",
55
"tags": ["TextureFactory", "Stage2D", "ParallaxProjection", "Display", "vanilla"],
6-
"previewImage": "multiple-displays.png"
6+
"previewImage": "multiple-displays.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/display-multi.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_hello-react.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A minimal react demo that can be used as a starting point for a new react based demo",
44
"url": "/demos/hello-react",
55
"tags": ["react"],
6-
"previewImage": ""
6+
"previewImage": "",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/hello-react.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_instanced-quads.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A minimal example of how to render instanced vertex-objects",
44
"url": "/demos/instanced-quads",
55
"tags": ["InstancedVertexObjectGeometry", "VO", "VertexObjects", "instanced", "vanilla"],
6-
"previewImage": "instanced-quads.png"
6+
"previewImage": "instanced-quads.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/instanced-quads.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_map2d-camera-based-visibility-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,8 @@
2020
"react",
2121
"r3f"
2222
],
23-
"previewImage": "map2d-camera-based-visibility-r3f.png"
23+
"previewImage": "map2d-camera-based-visibility-r3f.png",
24+
"showSource": {
25+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/map2d-camera-based-visibility-r3f/index.jsx"
26+
}
2427
}

‎apps/lookbook/src/pages/demos/_map2d-layer3d.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@
1515
"map2d",
1616
"vanilla"
1717
],
18-
"previewImage": "map2d-layer3d.png"
18+
"previewImage": "map2d-layer3d.png",
19+
"showSource": {
20+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/map2d-layer3d.astro"
21+
}
1922
}

‎apps/lookbook/src/pages/demos/_map2d-rect-visi-area.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,8 @@
2121
"react",
2222
"r3f"
2323
],
24-
"previewImage": "map2d-rect-visi-area.png"
24+
"previewImage": "map2d-rect-visi-area.png",
25+
"showSource": {
26+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/map2d-rect-visi-area/index.jsx"
27+
}
2528
}

‎apps/lookbook/src/pages/demos/_map2d-tile-sprites-layer-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,8 @@
1919
"react",
2020
"r3f"
2121
],
22-
"previewImage": "map2d-tile-sprites-layer-r3f.png"
22+
"previewImage": "map2d-tile-sprites-layer-r3f.png",
23+
"showSource": {
24+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/map2d-tile-sprites-layer-r3f/index.jsx"
25+
}
2326
}

‎apps/lookbook/src/pages/demos/_map2d-tile-sprites-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,8 @@
1818
"react",
1919
"r3f"
2020
],
21-
"previewImage": "map2d-tile-sprites-r3f.png"
21+
"previewImage": "map2d-tile-sprites-r3f.png",
22+
"showSource": {
23+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/map2d-tile-sprites-r3f/index.jsx"
24+
}
2225
}

‎apps/lookbook/src/pages/demos/_map2d-tile-sprites.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@
1515
"map2d",
1616
"vanilla"
1717
],
18-
"previewImage": "map2d-tile-sprites.png"
18+
"previewImage": "map2d-tile-sprites.png",
19+
"showSource": {
20+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/map2d-tile-sprites.astro"
21+
}
1922
}

‎apps/lookbook/src/pages/demos/_parallax-kastani-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,8 @@
2222
"react",
2323
"r3f"
2424
],
25-
"previewImage": "parallax-kastani-r3f.png"
25+
"previewImage": "parallax-kastani-r3f.png",
26+
"showSource": {
27+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/parallax-kastani-r3f/index.jsx"
28+
}
2629
}

‎apps/lookbook/src/pages/demos/_quadtree-playground.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "A visual playground for the quadtree data structure",
44
"url": "/demos/quadtree-playground",
55
"tags": ["Stage2D", "OrthographicProjection", "Display", "ChunkQuadTreeNode", "vanilla", "playground"],
6-
"previewImage": "quadtree-playground.png"
6+
"previewImage": "quadtree-playground.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/quadtree-playground.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_textured-quads-from-texture-atlas.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "Render instanced quads with textures from a textures-atlas",
44
"url": "/demos/textured-quads-from-texture-atlas",
55
"tags": ["TextureAtlas", "TextureAtlasLoader", "VertexObjects", "instanced", "texture-atlas", "textures", "vanilla"],
6-
"previewImage": "textured-quads-from-texture-atlas.png"
6+
"previewImage": "textured-quads-from-texture-atlas.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/textured-quads-from-texture-atlas.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_textured-quads-from-tileset.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "Render instanced quads with texture frames from a tileset",
44
"url": "/demos/textured-quads-from-tileset",
55
"tags": ["TileSet", "TileSetLoader", "VertexObjects", "instanced", "tilesets", "textures", "vanilla"],
6-
"previewImage": "textured-quads-from-tileset.png"
6+
"previewImage": "textured-quads-from-tileset.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/textured-quads-from-tileset.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_textured-quads-po2image-loader.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "Render instanced quads with a power-of-2 image texture",
44
"url": "/demos/textured-quads-po2image-loader",
55
"tags": ["PowerOf2ImageLoader", "TextureCoords", "VertexObjects", "instanced", "textures", "vanilla"],
6-
"previewImage": "textured-quads-po2image-loader.png"
6+
"previewImage": "textured-quads-po2image-loader.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/textured-quads-po2image-loader.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_textured-quads.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"description": "How to render instanced and textured quads with the VertexObjects mesh",
44
"url": "/demos/textured-quads",
55
"tags": ["TextureCoords", "TextureImageLoader", "VertexObjects", "instanced", "textures", "vanilla"],
6-
"previewImage": "textured-quads.png"
6+
"previewImage": "textured-quads.png",
7+
"showSource": {
8+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/textured-quads.astro"
9+
}
710
}

‎apps/lookbook/src/pages/demos/_textured-sprites-from-tileset-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,8 @@
1818
"react",
1919
"r3f"
2020
],
21-
"previewImage": "textured-sprites-from-tileset-r3f.png"
21+
"previewImage": "textured-sprites-from-tileset-r3f.png",
22+
"showSource": {
23+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/textured-sprites-from-tileset-r3f/index.jsx"
24+
}
2225
}

‎apps/lookbook/src/pages/demos/_textured-sprites-r3f.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,8 @@
1818
"react",
1919
"r3f"
2020
],
21-
"previewImage": "textured-sprites-r3f.png"
21+
"previewImage": "textured-sprites-r3f.png",
22+
"showSource": {
23+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/components/demos/textured-sprites-r3f/index.jsx"
24+
}
2225
}

‎apps/lookbook/src/pages/demos/_textured-sprites.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,8 @@
1111
"textures",
1212
"vanilla"
1313
],
14-
"previewImage": "textured-sprites.png"
14+
"previewImage": "textured-sprites.png",
15+
"showSource": {
16+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/textured-sprites.astro"
17+
}
1518
}

‎apps/lookbook/src/pages/demos/_two5-post-processing.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
"<two5-glitch-pass/>",
1313
"two5-elements"
1414
],
15-
"previewImage": "two5-post-processing.png"
15+
"previewImage": "two5-post-processing.png",
16+
"showSource": {
17+
"github": "https://github.com/spearwolf/twopoint5d/blob/main/apps/lookbook/src/pages/demos/two5-post-processing.astro"
18+
}
1619
}

‎apps/lookbook/src/pages/demos/animated-billboards.astro

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
---
22
import Layout from '~layouts/VanillaDemo.astro';
3-
import {showSource, title} from './_animated-billboards.json';
3+
import {description, showSource, title} from './_animated-billboards.json';
44
---
55

66
<Layout title={title} showSource={showSource}>
77
<canvas id="canvas-container" resize-to="window"></canvas>
8+
9+
<p slot="demo-description">{description}</p>
810
</Layout>
911

1012
<style>

‎apps/lookbook/src/pages/demos/animated-sprites.astro

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
---
22
import Layout from '~layouts/VanillaDemo.astro';
3-
import {title} from './_animated-sprites.json';
3+
import {description, showSource, title} from './_animated-sprites.json';
44
---
55

6-
<Layout title={title}>
6+
<Layout title={title} showSource={showSource}>
77
<canvas id="canvas-container" resize-to="window"></canvas>
88
<section class="fixed top-4 right-4 flex gap-2">
99
<div class="actionBtn moreSprites">MORE</div>
1010
<div class="spriteCount">0</div>
1111
<div class="actionBtn lessSprites">LESS</div>
1212
</section>
13+
14+
<p slot="demo-description">{description}</p>
1315
</Layout>
1416

1517
<style>
@@ -53,7 +55,7 @@ import {title} from './_animated-sprites.json';
5355
import assetsUrl from '~demos/utils/assetsUrl';
5456

5557
const demo = new PerspectiveOrbitDemo(document.getElementById('canvas-container'), {antialias: false});
56-
58+
5759
const renderSpriteCount = (count: number) => {
5860
document.querySelector('.spriteCount').textContent = count.toString();
5961
};
@@ -81,9 +83,9 @@ import {title} from './_animated-sprites.json';
8183
bouncingSprites.startSpeedX = 50;
8284

8385
bouncingSprites.createSprites(INITIAL_SPRITE_COUNT, animId);
84-
86+
8587
renderSpriteCount(INITIAL_SPRITE_COUNT);
86-
88+
8789
const material = new AnimatedSpritesMaterial();
8890

8991
material.colorMap = texture;

0 commit comments

Comments
 (0)