feat(preview): cross-browser scrollbar, keyboard nav, dev-mode client simulation, docs overhaul

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])
This commit is contained in:
KenanZhu committed 2026-06-04 16:01:42 +08:00
1 parent 4bc9a0667f
commit d8a714b2b5
17 files changed
+315 -196

No files matched your search

+6 -2
View File
@@ -42,9 +42,10 @@
1. 先生成預覽資料:`cd tools && go run . preview all`
2. 在瀏覽器中開啟 `preview/index.html` — 無需伺服器
> 靜態 Gmail/Outlook 模擬僅供參考,使用 dev 模式可獲得準確的 CSS 內聯渲染。
> [!WARNING]
> 靜態 Gmail/Outlook 模擬僅供參考,使用 dev 模式可獲得相對準確的 CSS 內聯渲染。
### 開發伺服器(即時重載 + CSS 內聯)
### 開發伺服器(即時重載 + CSS 內聯 + 客戶端模擬)
```bash
cd tools && go run . dev
@@ -53,6 +54,9 @@ cd tools && go run . dev
修改 `.tmpl` 檔案後自動重建並推送至瀏覽器。
> [!NOTE]
> Dev 模擬無法 100% 還原各個郵件用戶端的渲染差異,僅供參考,請以實際效果為準。
### 整合測試
將模板部署至 Gitea 實例,使用管理後台的測試郵件功能: