Merge pull request #8 from OrionReed/hue-selectors

Customisable colours based on selector matching

README.md

@@ -7,6 +7,15 @@ A 3D DOM viewer for Firefox, Chrome, and Safari
 ## Install
 Download the latest [release](https://github.com/OrionReed/dom3d/releases) and unzip the file.
 
+<details>
+<summary><b>Tiny Bookmarklet version</b></summary>
+Simply prefix this code with `javascript:` and save it as a bookmark on Chrome or Firefox. This is a 1-1 equivelant to the full extension with the default configuration.
+
+```js
+(()=>{let e=t=>[...t.children].reduce((t,n)=>Math.max(t,e(n)),0)+1,t=e(document.body),n=(e,n=0,o=0)=>`hsl(${n}, 75%, ${Math.min(10+e*(1+60/t),90)+o}%)`,o=document.body;o.style.overflow="visible",o.style.transformStyle="preserve-3d",o.style.perspective=1e4;let r=window.innerWidth/2,i=window.innerHeight/2;o.style.perspectiveOrigin=o.style.transformOrigin=`${r}px ${i}px`,function e(t,o,r,i){for(let l=t.childNodes,s=l.length,d=0;d<s;d++){let s=l[d];if(1!==s.nodeType)continue;let f=n(o,190,-5);Object.assign(s.style,{transform:"translateZ(20px)",overflow:"visible",transformStyle:"preserve-3d",backgroundColor:f});let a=r,c=i;s.offsetParent===t&&(a+=t.offsetLeft,c+=t.offsetTop),e(s,o+1,a,c)}}(o,0,0,0),document.addEventListener("mousemove",e=>{let t=180*(1-e.clientY/window.innerHeight)-90,n=180*e.clientX/window.innerWidth-90;o.style.transform=`rotateX(${t}deg) rotateY(${n}deg)`})})();
+```
+</details>
+
 **In Firefox**
 1. Go to `about:debugging#/runtime/this-firefox`
 2. Click "Load Temporary Addon"

biome.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	}
+}

build.js

@@ -1,21 +1,24 @@
-const fs = require('fs-extra');
-const path = require('path');
+const fs = require("fs-extra");
+const path = require("node:path");
 
-const MANIFEST_COMMON = 'manifest.json';
+const MANIFEST_COMMON = "manifest.json";
 
 // Retrieve the browser name from command-line arguments
 const browserName = process.argv[2];
 
 // Validate the input argument
 if (!browserName) {
-  console.error('Usage: node build.js <browserName>');
-  process.exit(1);
+	console.error("Usage: node build.js <browserName>");
+	process.exit(1);
 }
 
 // Define file paths based on the browser name
 const commonManifestPath = path.join(__dirname, MANIFEST_COMMON);
-const browserSpecificManifestPath = path.join(__dirname, `manifest-${browserName}.json`);
-const outputPath = path.join(__dirname, 'dist', browserName);
+const browserSpecificManifestPath = path.join(
+	__dirname,
+	`manifest-${browserName}.json`,
+);
+const outputPath = path.join(__dirname, "dist", browserName);
 
 // Clear the dist/{browser} directory
 fs.removeSync(outputPath);
@@ -24,18 +27,24 @@ fs.removeSync(outputPath);
 fs.ensureDirSync(outputPath);
 
 // Copy src to dist/{browser}
-const srcPath = path.join(__dirname, 'src');
+const srcPath = path.join(__dirname, "src");
 fs.copySync(srcPath, outputPath);
 
 // Read and parse the JSON files
-const commonManifest = JSON.parse(fs.readFileSync(commonManifestPath, 'utf8'));
-const browserSpecificManifest = JSON.parse(fs.readFileSync(browserSpecificManifestPath, 'utf8'));
+const commonManifest = JSON.parse(fs.readFileSync(commonManifestPath, "utf8"));
+const browserSpecificManifest = JSON.parse(
+	fs.readFileSync(browserSpecificManifestPath, "utf8"),
+);
 
 // Merge the two objects
 const combinedManifest = { ...commonManifest, ...browserSpecificManifest };
 
 // Write the combined JSON to the output file
-const manifestOutputPath = path.join(outputPath, 'manifest.json');
-fs.writeFileSync(manifestOutputPath, JSON.stringify(combinedManifest, null, 2), 'utf8');
-
-console.log(` Build successful: ${browserName}`);
+const manifestOutputPath = path.join(outputPath, "manifest.json");
+fs.writeFileSync(
+	manifestOutputPath,
+	JSON.stringify(combinedManifest, null, 2),
+	"utf8",
+);
+
+console.log(` Build successful: ${browserName}`);

manifest.json

@@ -15,6 +15,6 @@
     "default_icon": {
       "128": "assets/dom3d-128.png"
     },
-    "default_title": "DOM3D"
+    "default_title": "dom3d"
   }
 }

package.json

@@ -11,7 +11,8 @@
   },
   "license": "GPL-3.0",
   "devDependencies": {
+    "@biomejs/biome": "1.6.3",
     "fs-extra": "^11.2.0",
     "nodemon": "^3.1.0"
   }
-}
+}