Merge pull request 'Webview: css font and icon import transformation' (#1501) from hsjobeki-main into main

2024-05-30 16:28:14 +00:00 · 2024-05-30 16:28:14 +00:00 · 076b98ff00
commit 076b98ff00
parent f1c02bbd46 6999685bba
6 changed files with 158 additions and 37 deletions
--- 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
--- 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    <link rel="stylesheet" href="${cssEntry}">`;
      });
    }
  });

  htmlContent += `
-</head>
-<body>
-    <div id="app"></div>
-`;
+  </head>
+  <body>
+  <div id="app"></div>
+  `;
  // Add scripts
  assets.forEach((asset) => {
    if (asset.file.endsWith(".js")) {
+      console.log(`Relinking js script: ${asset.file}`);
      htmlContent += `\n    <script src="${asset.file}"></script>`;
    }
  });
--- 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",
--- 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",
--- 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 = () => {
      <Switch>
        <Match when={loading()}>
          {/* Loading skeleton */}
-          <li>
+          <div>
            <div class="card card-side m-2 bg-base-100 shadow-lg">
              <figure class="pl-2">
                <div class="skeleton size-12"></div>
@ -32,43 +32,45 @@ export const MachineListView: Component = () => {
                <div class="skeleton h-8 w-72"></div>
              </div>
            </div>
-          </li>
+          </div>
        </Match>
        <Match when={!loading() && Object.entries(machines()).length === 0}>
          No machines found
        </Match>
        <Match when={!loading()}>
-          <For each={list()}>
-            {(entry) => (
-              <li>
-                <div class="card card-side m-2 bg-base-100 shadow-lg">
-                  <figure class="pl-2">
-                    <span class="material-icons content-center text-5xl">
-                      devices_other
-                    </span>
-                  </figure>
-                  <div class="card-body flex-row justify-between">
-                    <div class="flex flex-col">
-                      <h2 class="card-title">{entry.machine_name}</h2>
-                      <p
-                        classList={{
-                          "text-gray-400": !entry.machine_description,
-                          "text-gray-600": !!entry.machine_description,
-                        }}
-                      >
-                        {entry.machine_description || "No description"}
-                      </p>
-                    </div>
-                    <div>
-                      <button class="btn btn-ghost">
-                        <span class="material-icons">more_vert</span>
-                      </button>
+          <ul>
+            <For each={list()}>
+              {(entry) => (
+                <li>
+                  <div class="card card-side m-2 bg-base-100 shadow-lg">
+                    <figure class="pl-2">
+                      <span class="material-icons content-center text-5xl">
+                        devices_other
+                      </span>
+                    </figure>
+                    <div class="card-body flex-row justify-between">
+                      <div class="flex flex-col">
+                        <h2 class="card-title">{entry.machine_name}</h2>
+                        <p
+                          classList={{
+                            "text-gray-400": !entry.machine_description,
+                            "text-gray-600": !!entry.machine_description,
+                          }}
+                        >
+                          {entry.machine_description || "No description"}
+                        </p>
+                      </div>
+                      <div>
+                        <button class="btn btn-ghost">
+                          <span class="material-icons">more_vert</span>
+                        </button>
+                      </div>
                    </div>
                  </div>
-                </div>
-              </li>
-            )}
-          </For>
+                </li>
+              )}
+            </For>
+          </ul>
        </Match>
      </Switch>
    </div>
--- 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" ];