diff --git a/pkgs/clan-vm-manager/clan_vm_manager/views/webview.py b/pkgs/clan-vm-manager/clan_vm_manager/views/webview.py index fece3835..4d8e9cd6 100644 --- a/pkgs/clan-vm-manager/clan_vm_manager/views/webview.py +++ b/pkgs/clan-vm-manager/clan_vm_manager/views/webview.py @@ -46,6 +46,12 @@ class WebView: self.method_registry: dict[str, Callable] = methods self.webview = WebKit.WebView() + + settings = self.webview.get_settings() + # settings. + settings.set_property("enable-developer-extras", True) + self.webview.set_settings(settings) + self.manager = self.webview.get_user_content_manager() # Can be called with: window.webkit.messageHandlers.gtk.postMessage("...") # Important: it seems postMessage must be given some payload, otherwise it won't trigger the event diff --git a/pkgs/webview-ui/app/gtk.webview.js b/pkgs/webview-ui/app/gtk.webview.js index 875f89de..a7d67c00 100644 --- a/pkgs/webview-ui/app/gtk.webview.js +++ b/pkgs/webview-ui/app/gtk.webview.js @@ -5,6 +5,9 @@ const distPath = path.resolve(__dirname, "dist"); const manifestPath = path.join(distPath, ".vite/manifest.json"); const outputPath = path.join(distPath, "index.html"); +const postcss = require("postcss"); +const css_url = require("postcss-url"); + fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => { if (err) { return console.error("Failed to read manifest:", err); @@ -25,22 +28,48 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => { // Add linked stylesheets assets.forEach((asset) => { - console.log(asset); + // console.log(asset); if (asset.src === "index.html") { asset.css.forEach((cssEntry) => { + // css to be processed + + const css = fs.readFileSync(`dist/${cssEntry}`, "utf8"); + + // process css + postcss() + .use( + css_url({ + url: (asset, dir) => { + const res = path.basename(asset.url); + console.log(`Rewriting CSS url(): ${asset.url} to ${res}`); + return res; + }, + }) + ) + .process(css, { + from: `dist/${cssEntry}`, + to: `dist/${cssEntry}`, + }) + .then((result) => { + fs.writeFileSync(`dist/${cssEntry}`, result.css, "utf8"); + }); + + // Extend the HTML content with the linked stylesheet + console.log(`Relinking html css stylesheet: ${cssEntry}`); htmlContent += `\n `; }); } }); htmlContent += ` - - -
-`; + + +
+ `; // Add scripts assets.forEach((asset) => { if (asset.file.endsWith(".js")) { + console.log(`Relinking js script: ${asset.file}`); htmlContent += `\n `; } }); diff --git a/pkgs/webview-ui/app/package-lock.json b/pkgs/webview-ui/app/package-lock.json index db9f0b4c..57d2ff14 100644 --- a/pkgs/webview-ui/app/package-lock.json +++ b/pkgs/webview-ui/app/package-lock.json @@ -25,6 +25,7 @@ "json-schema-faker": "^0.5.6", "json-schema-to-ts": "^3.1.0", "postcss": "^8.4.38", + "postcss-url": "^10.1.3", "prettier": "^3.2.5", "solid-devtools": "^0.29.2", "tailwindcss": "^3.4.3", @@ -2220,6 +2221,12 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/cuint": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", + "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==", + "dev": true + }, "node_modules/culori": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", @@ -4005,6 +4012,73 @@ "node": ">=4" } }, + "node_modules/postcss-url": { + "version": "10.1.3", + "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz", + "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==", + "dev": true, + "dependencies": { + "make-dir": "~3.1.0", + "mime": "~2.5.2", + "minimatch": "~3.0.4", + "xxhashjs": "~0.2.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-url/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/postcss-url/node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/postcss-url/node_modules/mime": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", + "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/postcss-url/node_modules/minimatch": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz", + "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -5152,6 +5226,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xxhashjs": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz", + "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==", + "dev": true, + "dependencies": { + "cuint": "^0.2.2" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/pkgs/webview-ui/app/package.json b/pkgs/webview-ui/app/package.json index 5f92b7d9..361c0cab 100644 --- a/pkgs/webview-ui/app/package.json +++ b/pkgs/webview-ui/app/package.json @@ -24,6 +24,7 @@ "json-schema-faker": "^0.5.6", "json-schema-to-ts": "^3.1.0", "postcss": "^8.4.38", + "postcss-url": "^10.1.3", "prettier": "^3.2.5", "solid-devtools": "^0.29.2", "tailwindcss": "^3.4.3", diff --git a/pkgs/webview-ui/app/src/routes/machines/view.tsx b/pkgs/webview-ui/app/src/routes/machines/view.tsx index eb8f5108..049933dc 100644 --- a/pkgs/webview-ui/app/src/routes/machines/view.tsx +++ b/pkgs/webview-ui/app/src/routes/machines/view.tsx @@ -20,7 +20,7 @@ export const MachineListView: Component = () => { {/* Loading skeleton */} -
  • +
    @@ -32,43 +32,45 @@ export const MachineListView: Component = () => {
    -
    • +     No machines found - - {(entry) => ( -
  • -
    -
    - - devices_other - -
    -
    -
    -

    {entry.machine_name}

    -

    - {entry.machine_description || "No description"} -

    -
    -
    - +
      + + {(entry) => ( +
    • +
      +
      + + devices_other + +
      +
      +
      +

      {entry.machine_name}

      +

      + {entry.machine_description || "No description"} +

      +
      +
      + +
      -
    -
    • - )} -     + + )} + +     diff --git a/pkgs/webview-ui/flake-module.nix b/pkgs/webview-ui/flake-module.nix index 83d5e019..a4770385 100644 --- a/pkgs/webview-ui/flake-module.nix +++ b/pkgs/webview-ui/flake-module.nix @@ -11,7 +11,7 @@ npmDeps = pkgs.fetchNpmDeps { src = ./app; - hash = "sha256-4ZurUbY5uMq7KeKnYRJ1+/Go9WoURFOpeZgLE0S6WZI="; + hash = "sha256-EadzSkIsV/cJtdxpIUvvpQhu5h3VyF8bLMpwfksNmWQ="; }; # The prepack script runs the build script, which we'd rather do in the build phase. npmPackFlags = [ "--ignore-scripts" ];