Use JS not TS for demo, put in docs dir

zen-fs · Nov 6, 2024 · 0b6b82e · 0b6b82e
1 parent bb33628
commit 0b6b82e
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 39 deletions.
diff --git a/.github/workflows/demo.yml → .github/workflows/docs+demo.yml b/.github/workflows/demo.yml → .github/workflows/docs+demo.yml
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules
 dist
-docs
+docs/(!demo)
 *.log
 tmp
 build
diff --git a/example/demo.css → docs/demo/demo.css b/example/demo.css → docs/demo/demo.css
diff --git a/example/demo.ts → docs/demo/demo.js b/example/demo.ts → docs/demo/demo.js
@@ -1,35 +1,39 @@
-import { configure, fs, type DeviceFS } from '@zenfs/core';
+import { configure, fs } from '@zenfs/core';
 import { framebuffer, dsp } from '@zenfs/devices';
 
 // this is optional, but I set them, so I have control
-const canvas = document.querySelector<HTMLCanvasElement>('#fb')!;
+const canvas = document.querySelector('#fb');
+const { width, height } = canvas;
+
 const audioContext = new AudioContext();
 
 // add initial devices like /dev/null, etc
 await configure({ addDevices: true });
 
-const devfs = fs.mounts.get('/dev') as DeviceFS;
+const devfs = fs.mounts.get('/dev');
 
 // mount framebuffer & dsp
 devfs.createDevice('/fb0', framebuffer({ canvas }));
 devfs.createDevice('/dsp', await dsp({ audioContext }));
 
 // example: write static to framebuffer
-const screen = new Uint8Array(canvas.width * canvas.height * 4);
-function makestaticFb() {
-	for (let i = 0; i < screen.byteLength; i += 4) {
-		screen[i] = Math.random() * 255;
-		screen[i + 1] = Math.random() * 255;
-		screen[i + 2] = Math.random() * 255;
-		screen[i + 3] = 255;
+const screen = new Uint8Array(width * height * 4);
+
+function makeGradientFb() {
+	for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const index = (y * width + x) * 4;
+			const gradientValue = (x / width) * 255;
+			screen.set([gradientValue, gradientValue, 255 - gradientValue, 255], index);
+		}
 	}
 	fs.promises.writeFile('/dev/fb0', screen);
-	requestAnimationFrame(makestaticFb);
+	requestAnimationFrame(makeGradientFb);
 }
-makestaticFb();
+makeGradientFb();
 
 // example: write static to audio
-const audioBuffer = new Float32Array(new ArrayBuffer(audioContext.sampleRate * 4));
+const audioBuffer = new Float32Array(audioContext.sampleRate * 4);
 setInterval(() => {
 	for (let i in audioBuffer) {
 		audioBuffer[i] = Math.random() * 2 - 1;

diff --git a/example/index.html → docs/demo/index.html b/example/index.html → docs/demo/index.html
@@ -6,6 +6,13 @@
 	<body>
 		<p>This will demonstrate drawing to a framebuffer & creating audio:</p>
 		<canvas id="fb"></canvas>
-		<script type="module" src="./demo.ts"></script>
+		<script type="importmap">
+			{
+				"imports": {
+					"@zenfs/": "https://esm.sh/@zenfs/"
+				}
+			}
+		</script>
+		<script type="module" src="./demo.js"></script>
 	</body>
 </html>
diff --git a/example/tsconfig.json b/example/tsconfig.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
 		"format:check": "prettier --check .",
 		"lint": "eslint src",
 		"build": "tsc -p tsconfig.json",
-		"build:docs": "vite build",
+		"build:docs": "typedoc",
 		"test": "tsx --test --experimental-test-coverage",
 		"prepublishOnly": "npm run build",
 		"start": "vite",

diff --git a/vite.config.js b/vite.config.js