minify html

no clue why i thought that was a sensible way to write code, it's impossible to see what uses what

eleventy.config.js

@@ -1,6 +1,7 @@
 const esbuild = require("esbuild");
 const eleventyAutoCacheBuster = require("eleventy-auto-cache-buster");
 const XXHash = require("xxhash");
+const htmlmin = require("html-minifier");
 
 const input = "src";
 const output = "_site";
@@ -27,6 +28,17 @@ module.exports = config => {
 			sourcemap: true,
 		}),
 	);
+	config.addTransform("htmlmin", function (content) {
+		if (this.page.outputPath && this.page.outputPath.endsWith(".html")) {
+			let minified = htmlmin.minify(content, {
+				useShortDoctype: true,
+				removeComments: true,
+				collapseWhitespace: true,
+			});
+			return minified;
+		}
+		return content;
+	});
 	//config.setServerPassthroughCopyBehavior("passthrough"); // doesn't work
 	config.addPassthroughCopy({ assets: "/" });
 	config.addWatchTarget("src/**/*.js");

package.json5

@@ -22,11 +22,12 @@
 		'@jamshop/eleventy-plugin-esbuild': '^1.0.2',
 		'@prettier/plugin-pug': '^3.0.0',
 		'eleventy-auto-cache-buster': '^0.3.0',
+		'html-minifier': '^4.0.0',
 		pako: '^2.1.0',
 		xxhash: '^0.3.0',
 	},
 	devDependencies: {
-		prettier: '^3.1.1',
 		'@types/pako': '^2.0.3',
+		prettier: '^3.1.1',
 	},
 }

pnpm-lock.yaml

@@ -53,6 +53,9 @@ dependencies:
   eleventy-auto-cache-buster:
     specifier: ^0.3.0
     version: 0.3.0
+  html-minifier:
+    specifier: ^4.0.0
+    version: 4.0.0
   pako:
     specifier: ^2.1.0
     version: 2.1.0
@@ -629,6 +632,13 @@ packages:
       set-function-length: 1.1.1
     dev: false
 
+  /camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+    dev: false
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -658,6 +668,13 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /clean-css@4.2.4:
+    resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==}
+    engines: {node: '>= 4.0'}
+    dependencies:
+      source-map: 0.6.1
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -674,6 +691,10 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: false
+
   /commander@5.1.0:
     resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
     engines: {node: '>= 6'}
@@ -1041,6 +1062,25 @@ packages:
       function-bind: 1.1.2
     dev: false
 
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: false
+
+  /html-minifier@4.0.0:
+    resolution: {integrity: sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      camel-case: 3.0.0
+      clean-css: 4.2.4
+      commander: 2.20.3
+      he: 1.2.0
+      param-case: 2.1.1
+      relateurl: 0.2.7
+      uglify-js: 3.17.4
+    dev: false
+
   /htmlparser2@7.2.0:
     resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==}
     dependencies:
@@ -1229,6 +1269,10 @@ packages:
     resolution: {integrity: sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==}
     dev: false
 
+  /lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+    dev: false
+
   /lru-cache@10.1.0:
     resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
@@ -1373,6 +1417,12 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: false
 
+  /no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+    dependencies:
+      lower-case: 1.1.4
+    dev: false
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -1416,6 +1466,12 @@ packages:
     resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
     dev: false
 
+  /param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+    dependencies:
+      no-case: 2.3.2
+    dev: false
+
   /parse-srcset@1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
     dev: false
@@ -1636,6 +1692,11 @@ packages:
       slash: 1.0.0
     dev: false
 
+  /relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -1820,13 +1881,16 @@ packages:
     hasBin: true
     requiresBuild: true
     dev: false
-    optional: true
 
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
     dev: false
 
+  /upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+    dev: false
+
   /void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}

src/embed.html

@@ -196,7 +196,7 @@
 				<div id="error"></div>
 				<div
 					id="canvas-container"
-					onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay(!bytebeat.isPlaying)}"
+					onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay()}"
 				>
 					<canvas id="canvas-main" width="1024" height="256"></canvas>
 					<div id="canvas-timecursor"></div>

src/embed.ts

@@ -1,5 +1,5 @@
 import { isPlainObject } from "./common.ts";
-import bytebeat from "./bytebeat.ts";
+import { canvasElem, setCanvasWidth, autoSizeCanvas, getSong, setSong } from "./bytebeat.ts";
 
 const nameids: [string, ...(string | ((show: boolean) => void))[]][] = [
 	["codeEditor", "code-editor-container"],
@@ -66,21 +66,21 @@ window.addEventListener(
 				}
 			}
 
-			if (data.forceScopeWidth !== undefined && bytebeat.canvasElem) {
+			if (data.forceScopeWidth !== undefined && canvasElem) {
 				if (typeof data.forceScopeWidth === "number") {
-					bytebeat.canvasElem.dataset.forcedWidth = true;
-					bytebeat.setCanvasWidth(data.forceScopeWidth);
+					canvasElem.dataset.forcedWidth = true;
+					setCanvasWidth(data.forceScopeWidth);
 				} else {
-					delete bytebeat.canvasElem.dataset.forcedWidth;
-					bytebeat.autoSizeCanvas();
+					delete canvasElem.dataset.forcedWidth;
+					autoSizeCanvas();
 				}
 			}
 
 			if (data.getSong) {
-				window.parent.postMessage({ song: bytebeat.getSong(true) }, "*");
+				window.parent.postMessage({ song: getSong(true) }, "*");
 			}
 			if (isPlainObject(data.setSong)) {
-				bytebeat.setSong(data.setSong, false);
+				setSong(data.setSong, false);
 			}
 		}
 	},

src/embed2.pug

@@ -127,7 +127,7 @@ html(data-embed lang="en")
 							option(value="48000")
 				#error
 				#canvas-container(
-					onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay(!bytebeat.isPlaying)}"
+					onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay()}"
 				)
 					canvas#canvas-main(height="256" width="1024")
 					#canvas-timecursor

src/index.pug

@@ -128,7 +128,7 @@ html(lang="en")
 							option(value="48000")
 				#error
 				#canvas-container(
-					onclick="bytebeat.setPlaySpeed(1); bytebeat.togglePlay(!bytebeat.isPlaying)"
+					onclick="bytebeat.setPlaySpeed(1); bytebeat.togglePlay()"
 				)
 					canvas#canvas-main(height="256" width="1024" aria-label="Oscillioscope")
 					#canvas-timecursor

src/load-library.ts

@@ -1,5 +1,5 @@
 import library from "./library.ts";
-import bytebeat from "./bytebeat.js";
+import { setSong } from "./bytebeat.js";
 
 function parseEntry(entry) {
 	if (Array.isArray(entry.codeOriginal)) {
@@ -35,7 +35,7 @@ function createCodeTypeElem(entry, name) {
 	codeTypeElem.className = `library-song-${name}`;
 
 	const fullSongData = stripEntryToSong(entry, name);
-	codeTypeElem.append(createByteSnippet(entry[name], () => bytebeat.setSong(fullSongData)));
+	codeTypeElem.append(createByteSnippet(entry[name], () => setSong(fullSongData)));
 
 	const codeLengthElem = document.createElement("span");
 	codeLengthElem.className = "library-song-info";
@@ -66,8 +66,8 @@ function createEntryElem(entry) {
 					? () =>
 							fetch(`/library/${elem.dataset.codeFile}`)
 								.then(response => response.text())
-								.then(code => bytebeat.setSong(Object.assign(songData, { code })))
-					: () => bytebeat.setSong(Object.assign({ code: elem.innerText }, songData));
+								.then(code => setSong(Object.assign(songData, { code })))
+					: () => setSong(Object.assign({ code: elem.innerText }, songData));
 
 				const snippetElem = createByteSnippet(elem.innerText, onclick);
 				elem.replaceWith(snippetElem);
@@ -195,7 +195,7 @@ function createEntryElem(entry) {
 				codeFileElem.addEventListener("click", () =>
 					fetch(`/library/${fileType.name}/${entry.file}`)
 						.then(response => response.text())
-						.then(code => bytebeat.setSong(Object.assign(songData, { code }))),
+						.then(code => setSong(Object.assign(songData, { code }))),
 				);
 				entryElem.append(codeFileElem, " ");
 			}