nico/kobopatch-webui
1
0
Fork 0
Code Activity

Don't load custom fonts, fix scripts
All checks were successful
Build and test project / build-and-test (push) Successful in 1m47s

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-17 13:59:57 +01:00
parent 0223346075
commit 6d4bce8e05
7 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -80,9 +80,11 @@ cd kobopatch-wasm
## Running locally ## Running locally
```bash ```bash
python3 -m http.server -d web/public/ 8888 ./run-locally.sh
``` ```
This serves the app at `http://localhost:8888`. If the WASM binary hasn't been built yet, the script automatically runs `setup.sh` and `build.sh` first.
## Testing ## Testing
To further validate the patched `KoboRoot.tgz` packages are identical to what a local version of `kobopatch` would generate, two integration tests have been added. To further validate the patched `KoboRoot.tgz` packages are identical to what a local version of `kobopatch` would generate, two integration tests have been added.

16
run-locally.sh Executable file
View File

@@ -0,0 +1,16 @@
#!/usr/bin/env bash
set -euo pipefail
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
WASM_DIR="$SCRIPT_DIR/kobopatch-wasm"
if [ ! -f "$SCRIPT_DIR/web/public/wasm/kobopatch.wasm" ]; then
echo "WASM binary not found, building..."
if [ ! -d "$WASM_DIR/kobopatch-src" ]; then
"$WASM_DIR/setup.sh"
fi
"$WASM_DIR/build.sh"
fi
echo "Serving at http://localhost:8888"
python3 -m http.server -d "$SCRIPT_DIR/web/public/" 8888

2
test.sh
View File

@@ -12,5 +12,5 @@ echo "=== Running WASM integration test ==="
echo "" echo ""
echo "=== Running E2E tests (Playwright) ===" echo "=== Running E2E tests (Playwright) ==="
cd "$SCRIPT_DIR/e2e" cd "$SCRIPT_DIR/tests/e2e"
npm test npm test

2
web/public/css/style.css
View File

@@ -30,7 +30,7 @@
} }
body { body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.6;

34
web/public/index.html
View File

@@ -4,10 +4,22 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KoboPatch Web UI</title> <title>KoboPatch Web UI</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- Inline critical styles so the hero + loader render before style.css arrives on slow connections -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> body { background: #f5f5f7; color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; margin: 0; }
<link rel="stylesheet" href="css/style.css?ts=1773690621"> main { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.hero { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.hero-accent { color: #2563eb; font-weight: 600; }
.beta-pill { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: #991b1b; color: #fff; padding: 0.15rem 0.5rem; border-radius: 10px; vertical-align: middle; position: relative; top: -0.15rem; }
.subtitle { color: #6b7280; font-size: 0.95rem; margin-top: 0.25rem; }
.initial-loader { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 0; }
.initial-loader p { margin: 0; font-size: 0.93rem; color: #6b7280; }
.spinner { width: 22px; height: 22px; border: 2.5px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
</style>
<link rel="stylesheet" href="css/style.css?ts=1773751630">
<script src="js/jszip.min.js"></script> <script src="js/jszip.min.js"></script>
</head> </head>
<body> <body>
@@ -17,6 +29,12 @@
<p class="subtitle">Apply patches to your Kobo Libra Colour, Kobo Clara Colour and Kobo Clara BW.</p> <p class="subtitle">Apply patches to your Kobo Libra Colour, Kobo Clara Colour and Kobo Clara BW.</p>
</header> </header>
<!-- Shown until JS initialises -->
<div id="initial-loader" class="initial-loader">
<div class="spinner"></div>
<p>Loading&hellip;</p>
</div>
<!-- Step indicator --> <!-- Step indicator -->
<nav id="step-nav" class="step-nav" hidden> <nav id="step-nav" class="step-nav" hidden>
<ol> <ol>
@@ -246,9 +264,9 @@
</dialog> </dialog>
<!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker --> <!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker -->
<script src="js/kobo-device.js?ts=1773690621"></script> <script src="js/kobo-device.js?ts=1773751630"></script>
<script src="js/kobopatch.js?ts=1773690621"></script> <script src="js/kobopatch.js?ts=1773751630"></script>
<script src="js/patch-ui.js?ts=1773690621"></script> <script src="js/patch-ui.js?ts=1773751630"></script>
<script src="js/app.js?ts=1773690621"></script> <script src="js/app.js?ts=1773751630"></script>
</body> </body>
</html> </html>

3
web/public/js/app.js
View File

@@ -133,6 +133,9 @@
} }
// --- Initial state --- // --- Initial state ---
const loader = document.getElementById('initial-loader');
if (loader) loader.remove();
const hasFileSystemAccess = KoboDevice.isSupported(); const hasFileSystemAccess = KoboDevice.isSupported();
if (hasFileSystemAccess) { if (hasFileSystemAccess) {
setNavStep(1); setNavStep(1);

2
web/public/js/patch-worker.js
View File

@@ -10,7 +10,7 @@ async function loadWasm() {
const go = new Go(); const go = new Go();
const result = await WebAssembly.instantiateStreaming( const result = await WebAssembly.instantiateStreaming(
fetch('../wasm/kobopatch.wasm?ts=1773690621'), fetch('../wasm/kobopatch.wasm?ts=1773751630'),
go.importObject go.importObject
); );
go.run(result.instance); go.run(result.instance);