forked from clan/clan-core
Webview: css font and icon import transformation
This commit is contained in:
parent
9bf76037aa
commit
6999685bba
@ -46,6 +46,12 @@ class WebView:
|
|||||||
self.method_registry: dict[str, Callable] = methods
|
self.method_registry: dict[str, Callable] = methods
|
||||||
|
|
||||||
self.webview = WebKit.WebView()
|
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()
|
self.manager = self.webview.get_user_content_manager()
|
||||||
# Can be called with: window.webkit.messageHandlers.gtk.postMessage("...")
|
# 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
|
# Important: it seems postMessage must be given some payload, otherwise it won't trigger the event
|
||||||
|
@ -5,6 +5,9 @@ const distPath = path.resolve(__dirname, "dist");
|
|||||||
const manifestPath = path.join(distPath, ".vite/manifest.json");
|
const manifestPath = path.join(distPath, ".vite/manifest.json");
|
||||||
const outputPath = path.join(distPath, "index.html");
|
const outputPath = path.join(distPath, "index.html");
|
||||||
|
|
||||||
|
const postcss = require("postcss");
|
||||||
|
const css_url = require("postcss-url");
|
||||||
|
|
||||||
fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
|
fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
return console.error("Failed to read manifest:", err);
|
return console.error("Failed to read manifest:", err);
|
||||||
@ -25,22 +28,48 @@ fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
|
|||||||
|
|
||||||
// Add linked stylesheets
|
// Add linked stylesheets
|
||||||
assets.forEach((asset) => {
|
assets.forEach((asset) => {
|
||||||
console.log(asset);
|
// console.log(asset);
|
||||||
if (asset.src === "index.html") {
|
if (asset.src === "index.html") {
|
||||||
asset.css.forEach((cssEntry) => {
|
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 += `\n <link rel="stylesheet" href="${cssEntry}">`;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
htmlContent += `
|
htmlContent += `
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
`;
|
`;
|
||||||
// Add scripts
|
// Add scripts
|
||||||
assets.forEach((asset) => {
|
assets.forEach((asset) => {
|
||||||
if (asset.file.endsWith(".js")) {
|
if (asset.file.endsWith(".js")) {
|
||||||
|
console.log(`Relinking js script: ${asset.file}`);
|
||||||
htmlContent += `\n <script src="${asset.file}"></script>`;
|
htmlContent += `\n <script src="${asset.file}"></script>`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
83
pkgs/webview-ui/app/package-lock.json
generated
83
pkgs/webview-ui/app/package-lock.json
generated
@ -25,6 +25,7 @@
|
|||||||
"json-schema-faker": "^0.5.6",
|
"json-schema-faker": "^0.5.6",
|
||||||
"json-schema-to-ts": "^3.1.0",
|
"json-schema-to-ts": "^3.1.0",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
|
"postcss-url": "^10.1.3",
|
||||||
"prettier": "^3.2.5",
|
"prettier": "^3.2.5",
|
||||||
"solid-devtools": "^0.29.2",
|
"solid-devtools": "^0.29.2",
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.3",
|
||||||
@ -2220,6 +2221,12 @@
|
|||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
"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": {
|
"node_modules/culori": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
|
||||||
@ -4005,6 +4012,73 @@
|
|||||||
"node": ">=4"
|
"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": {
|
"node_modules/postcss-value-parser": {
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
"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==",
|
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
"json-schema-faker": "^0.5.6",
|
"json-schema-faker": "^0.5.6",
|
||||||
"json-schema-to-ts": "^3.1.0",
|
"json-schema-to-ts": "^3.1.0",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
|
"postcss-url": "^10.1.3",
|
||||||
"prettier": "^3.2.5",
|
"prettier": "^3.2.5",
|
||||||
"solid-devtools": "^0.29.2",
|
"solid-devtools": "^0.29.2",
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.3",
|
||||||
|
@ -20,7 +20,7 @@ export const MachineListView: Component = () => {
|
|||||||
<Switch>
|
<Switch>
|
||||||
<Match when={loading()}>
|
<Match when={loading()}>
|
||||||
{/* Loading skeleton */}
|
{/* Loading skeleton */}
|
||||||
<li>
|
<div>
|
||||||
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
||||||
<figure class="pl-2">
|
<figure class="pl-2">
|
||||||
<div class="skeleton size-12"></div>
|
<div class="skeleton size-12"></div>
|
||||||
@ -32,43 +32,45 @@ export const MachineListView: Component = () => {
|
|||||||
<div class="skeleton h-8 w-72"></div>
|
<div class="skeleton h-8 w-72"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</Match>
|
</Match>
|
||||||
<Match when={!loading() && Object.entries(machines()).length === 0}>
|
<Match when={!loading() && Object.entries(machines()).length === 0}>
|
||||||
No machines found
|
No machines found
|
||||||
</Match>
|
</Match>
|
||||||
<Match when={!loading()}>
|
<Match when={!loading()}>
|
||||||
<For each={list()}>
|
<ul>
|
||||||
{(entry) => (
|
<For each={list()}>
|
||||||
<li>
|
{(entry) => (
|
||||||
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
<li>
|
||||||
<figure class="pl-2">
|
<div class="card card-side m-2 bg-base-100 shadow-lg">
|
||||||
<span class="material-icons content-center text-5xl">
|
<figure class="pl-2">
|
||||||
devices_other
|
<span class="material-icons content-center text-5xl">
|
||||||
</span>
|
devices_other
|
||||||
</figure>
|
</span>
|
||||||
<div class="card-body flex-row justify-between">
|
</figure>
|
||||||
<div class="flex flex-col">
|
<div class="card-body flex-row justify-between">
|
||||||
<h2 class="card-title">{entry.machine_name}</h2>
|
<div class="flex flex-col">
|
||||||
<p
|
<h2 class="card-title">{entry.machine_name}</h2>
|
||||||
classList={{
|
<p
|
||||||
"text-gray-400": !entry.machine_description,
|
classList={{
|
||||||
"text-gray-600": !!entry.machine_description,
|
"text-gray-400": !entry.machine_description,
|
||||||
}}
|
"text-gray-600": !!entry.machine_description,
|
||||||
>
|
}}
|
||||||
{entry.machine_description || "No description"}
|
>
|
||||||
</p>
|
{entry.machine_description || "No description"}
|
||||||
</div>
|
</p>
|
||||||
<div>
|
</div>
|
||||||
<button class="btn btn-ghost">
|
<div>
|
||||||
<span class="material-icons">more_vert</span>
|
<button class="btn btn-ghost">
|
||||||
</button>
|
<span class="material-icons">more_vert</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
)}
|
||||||
)}
|
</For>
|
||||||
</For>
|
</ul>
|
||||||
</Match>
|
</Match>
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
npmDeps = pkgs.fetchNpmDeps {
|
npmDeps = pkgs.fetchNpmDeps {
|
||||||
src = ./app;
|
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.
|
# The prepack script runs the build script, which we'd rather do in the build phase.
|
||||||
npmPackFlags = [ "--ignore-scripts" ];
|
npmPackFlags = [ "--ignore-scripts" ];
|
||||||
|
Loading…
Reference in New Issue
Block a user