Overhaul CSS bundling.

Makefile

@@ -3,32 +3,31 @@ build: clean
 	bun run script/build.ts
 
 .PHONY: dev
-dev:
+dev: setup
 	bun run script/dev.ts
 
 .PHONY: format
-format:
-	bun x @biomejs/biome format --write ./script ./src
+format: setup
+	bun x @biomejs/biome check --write
 
 .PHONY: lint
-lint:
-	bun x @biomejs/biome check ./script ./src
+lint: setup
+	bun x @biomejs/biome check
 
 .PHONY: setup
 setup:
-	bun install
+	bun install --no-save
 
-SFTP_PATH = "timer.cubing.net:~/timer.cubing.net/"
-URL       = "https://timer.cubing.net/"
+.PHONY: test
+test:
+	lint
+
+.PHONY: prepublishOnly
+prepublishOnly: clean test
 
 .PHONY: deploy
 deploy: build
-	rsync -avz \
-		--exclude .DS_Store \
-		--exclude .git \
-		./dist/timer.cubing.net/ \
-		${SFTP_PATH}
-	echo "\nDone deploying. Go to ${URL}\n"
+	bun x @cubing/deploy
 
 .PHONY: clean
 clean:

biome.json

@@ -1,15 +1,14 @@
 {
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "files": {
+    "ignore": ["./dist", "./package.json"]
+  },
   "formatter": {
     "indentStyle": "space",
-    "indentWidth": 2,
-    "ignore": [
-      "./src/timer.cubing.net/resources/vendor/cubing-icons/cubing-icons.css"
-    ]
+    "indentWidth": 2
   },
   "linter": {
-    "enabled": true,
     "rules": {
-      "recommended": true,
       "complexity": {
         "useLiteralKeys": "off"
       },
@@ -20,9 +19,6 @@
         "noNonNullAssertion": "off",
         "noInferrableTypes": "off"
       }
-    },
-    "ignore": [
-      "./src/timer.cubing.net/resources/vendor/cubing-icons/cubing-icons.css"
-    ]
+    }
   }
 }

package.json

@@ -12,6 +12,8 @@
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@cubing/icons": "^2.1.0-pre.4",
+    "@fontsource/ubuntu": "^5.1.1",
     "@types/dom-screen-wake-lock": "^1.0.1",
     "@types/pouchdb": "^6.4.0",
     "comlink": "^4.4.1",
@@ -23,9 +25,10 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.0",
+    "@cubing/deploy": "^0.1.8",
     "@types/chai": "^4.3.6",
     "@types/mocha": "^10.0.1",
-    "barely-a-dev-server": "^0.6.0",
+    "barely-a-dev-server": "^0.7.0",
     "chai": "^4.3.8",
     "esbuild": "^0.19.3",
     "lib": "^5.1.0",
@@ -35,16 +38,11 @@
     "workbox-precaching": "^7.0.0"
   },
   "scripts": {
-    "prepublishOnly": "make dist",
-    "lint": "npx @biomejs/biome check ./script ./src",
-    "format": "npx @biomejs/biome format --write ./script ./src"
+    "build": "make build",
+    "dev": "make dev",
+    "prepublishOnly": "make prepublishOnly"
   },
-  "cache": {
-    "globPatterns": [
-      "**/*.{html,js,css,jpg,png,ttf,ico}"
-    ],
-    "ignoreURLParametersMatching": [
-      ".*"
-    ]
+  "@cubing/deploy": {
+    "https://timer.cubing.net/": {}
   }
 }

script/barelyServeCommonOptions.ts

@@ -0,0 +1,16 @@
+import type { barelyServe } from "barely-a-dev-server";
+
+export const barelyServeCommonOptions: Parameters<typeof barelyServe>[0] = {
+  entryRoot: "src/timer.cubing.net",
+  bundleCSS: true,
+  esbuildOptions: {
+    loader: {
+      ".ttf": "copy",
+      ".woff": "copy",
+      ".woff2": "copy",
+    },
+    banner: {
+      js: "globalThis.global = globalThis; // Workaround for a `pouch-db` dep. 😕\n",
+    },
+  },
+};

script/build.ts

@@ -1,33 +1,26 @@
 import { barelyServe } from "barely-a-dev-server";
 import { build } from "esbuild";
 import { injectManifest } from "workbox-build";
+import { barelyServeCommonOptions } from "./barelyServeCommonOptions";
 
 barelyServe({
+  ...barelyServeCommonOptions,
   dev: false,
-  entryRoot: "src/timer.cubing.net",
-  outDir: "dist/timer.cubing.net",
-  esbuildOptions: {
-    external: ["crypto"],
-    loader: { ".svg": "copy", ".ico": "copy" },
-    banner: {
-      js: "globalThis.global = globalThis; // Workaround for a `pouch-db` dep. 😕\n",
-    },
-    sourcemap: true,
-  },
+  outDir: "dist/web/timer.cubing.net",
 });
 
 await build({
   entryPoints: ["src/service-worker/sw.ts"],
   bundle: true,
-  format: "cjs", // 😕 Can't use module worker in Firefox yet.
-  outfile: "dist/timer.cubing.net/sw.js",
+  format: "esm", // TODO: test in Firefox
+  outfile: "dist/web/timer.cubing.net/sw.js",
 });
 
 await new Promise((resolve) => setTimeout(resolve, 1000));
 
 await injectManifest({
-  globDirectory: "dist/timer.cubing.net/",
-  globPatterns: ["**/*.{js,ico,html,png,css,ttf,txt,svg}"],
-  swDest: "dist/timer.cubing.net/sw.js",
-  swSrc: "dist/timer.cubing.net/sw.js",
+  globDirectory: "dist/web/timer.cubing.net/",
+  globPatterns: ["**/*.{js,ico,html,png,css,ttf,woff,woff2,txt,svg}"],
+  swDest: "dist/web/timer.cubing.net/sw.js",
+  swSrc: "dist/web/timer.cubing.net/sw.js",
 });

script/dev.ts

@@ -1,15 +1,8 @@
 import { barelyServe } from "barely-a-dev-server";
+import { barelyServeCommonOptions } from "./barelyServeCommonOptions";
 
 barelyServe({
-  entryRoot: "src/timer.cubing.net",
+  ...barelyServeCommonOptions,
   devDomain: "timer.localhost",
   port: 3334,
-  esbuildOptions: {
-    external: ["crypto"],
-    loader: { ".svg": "copy", ".ico": "copy" },
-    banner: {
-      js: "globalThis.global = globalThis; // Workaround for a `pouch-db` dep. 😕\n",
-    },
-    sourcemap: true,
-  },
 });

src/timer.cubing.net/ui/ScrambleView.ts

@@ -56,8 +56,17 @@ export class ScrambleView {
   setEvent(eventID: EventID) {
     removeClassesStartingWith(this.scrambleText, "event-");
     this.scrambleText.classList.add(`event-${eventID}`);
-    removeClassesStartingWith(this.cubingIcon, "icon-");
-    this.cubingIcon.classList.add(`icon-${eventID}`);
+
+    const iconEventID =
+      {
+        master_tetraminx: "mtetram", // TOOD
+        redi_cube: "redi", // TOOD
+        baby_fto: "pyramorphix", // similar image for now
+      }[eventID] ?? eventID;
+    removeClassesStartingWith(this.cubingIcon, "event-");
+    removeClassesStartingWith(this.cubingIcon, "unofficial-");
+    this.cubingIcon.classList.add(`event-${iconEventID}`);
+    this.cubingIcon.classList.add(`unofficial-${iconEventID}`);
     if (
       this.eventSelectDropdown.value !== eventID &&
       this.optionElementsByEventID[eventID]

src/timer.cubing.net/ui/style.css

@@ -1,3 +1,6 @@
+@import "@cubing/icons/css";
+@import "@fontsource/ubuntu";
+
 @font-face {
   font-family: digital-7-mono;
   src: url("../resources/vendor/fonts/digital-7/digital-7-mono.ttf")
@@ -10,11 +13,6 @@
     format("truetype");
 }
 
-@font-face {
-  font-family: "Ubuntu";
-  src: url("../resources/vendor/fonts/ubuntu/Ubuntu-Regular.ttf");
-}
-
 * {
   box-sizing: border-box;
   --main-text-size: min(max(min(5vh, 2.5rem), 1vw), 4vh);