From d8a714b2b5efd677eb19db42f962536f18688a90 Mon Sep 17 00:00:00 2001 From: KenanZhu <3471685733@qq.com> Date: Thu, 4 Jun 2026 16:01:42 +0800 Subject: [PATCH] feat(preview): cross-browser scrollbar, keyboard nav, dev-mode client simulation, docs overhaul MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit preview/index.html: - Fix scrollbar CSS: scoped webkit pseudo-elements + standards-track fallback, removed deprecated overflow:overlay - Keyboard navigation: arrows cycle focus between Theme/Template/Client selects, up/down select within focused dropdown, d/m toggle viewport - Dev/static mode detection: delayed static warning only when WebSocket absent, WebSocket errors only on disconnect (not on initial fail) - iframe sandbox: removed static sandbox attr, applied dynamically only in dev mode (file: protocol rejects sandboxed srcdoc) - Loading fix: removed double-toggle between init and render(); added 5s safety timeout - Transform clean: returns HTML as-is; CSS stripping moved to server-side - Dev disclaimer: blue info banner shown on WebSocket connect tools/server/inliner.mjs: - Added stripGmail() / stripOutlook() — server-side CSS property stripping for email client simulation tools/server/server.mjs: - Fixed WebSocket upgrade: use app.listen() instead of createServer(app).listen() - Juice post-processing now generates three rendered.js variants (modern/gmail/outlook) - Initial startup runs juice-only pass (avoids duplicate Go compilation) docs/ (all 6 languages — en, zh-CN, zh-TW, ja, ko, ru): - Image size limits: max 50KiB, recommended 10-20KiB - Dev disclaimer: simulation cannot 100% reproduce every client - Changed 'accurate' to 'relatively accurate' across all static-mode warnings - Converted all plain blockquotes to GitHub admonitions ([!WARNING] / [!NOTE]) --- AGENTS.md | 6 +- CONTRIBUTING.md | 10 ++- README.md | 12 ++- docs/CONTRIBUTING.ja.md | 8 +- docs/CONTRIBUTING.ko.md | 8 +- docs/CONTRIBUTING.ru.md | 8 +- docs/CONTRIBUTING.zh-CN.md | 8 +- docs/CONTRIBUTING.zh-TW.md | 8 +- docs/README.ja.md | 5 +- docs/README.ko.md | 5 +- docs/README.ru.md | 5 +- docs/README.zh-CN.md | 17 +++- docs/README.zh-TW.md | 5 +- preview/index.html | 102 +++++++++++++++++----- preview/rendered.js | 172 ++++++++++--------------------------- tools/server/inliner.mjs | 64 ++++++++++++++ tools/server/server.mjs | 68 ++++++++++----- 17 files changed, 315 insertions(+), 196 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 84ac64e..5dd2530 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -49,9 +49,11 @@ docs/ # Multi-language documentation ### Preview System - `preview/index.html` loads `preview/rendered.js` (pre-rendered by Go) and displays in iframes - Supports theme/template switching, client simulation (Modern/Gmail/Outlook/Raw), and viewport toggle (Desktop 1386x780 / Mobile 390x780) +- Keyboard navigation: `←→` cycles focus between Theme/Template/Client selects, `↑↓` selects within the focused dropdown, `d`/`m` toggles viewport - `REGISTRY` and `PARAMS` are auto-generated from `templates_config.json` — no manual syncing needed -- Static preview (open `index.html` directly) provides approximate client simulation -- Dev server (`go run . dev`) provides accurate rendering via Juice CSS inlining + live reload +- Static preview (open `index.html` directly) — all client modes show the same HTML; simulation warning is displayed +- Dev server (`go run . dev`) — applies Juice CSS inlining server-side, generates three `rendered.js` variants (modern/gmail/outlook) with client-specific CSS stripping; includes live reload via WebSocket +- Dev mode shows an info notice: simulation cannot 100% reproduce every email client — always verify against real clients ### Build Tool - `tools/tools.go` is the main entry point for the modular CLI diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 778d7ee..1883b66 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -49,9 +49,10 @@ Documentation updates, preview screenshots, installation guides, and translation 2. Open `preview/index.html` directly in a browser — no server needed 3. Use the theme switcher, template selector, and client mode toggles -> Static Gmail/Outlook simulation is approximate. Use dev mode for accurate rendering. +> [!WARNING] +> Static Gmail/Outlook simulation is approximate. Use dev mode for relatively accurate rendering. -### Dev Server (Live Reload + CSS Inlining) +### Dev Server (Live Reload + CSS Inlining + Client Simulation) ```bash cd tools && go run . dev @@ -60,10 +61,13 @@ cd tools && go run . dev - Watches `themes/**/*.tmpl` — auto-rebuilds on save - Runs [Juice](https://github.com/Automattic/juice) to inline `
'+e+'