KenanZhu/GiteaMailTemplates
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/CONTRIBUTING.ja.md
+6 -2
View File
@@ -38,9 +38,10 @@
1. データを生成: `cd tools && go run . preview all`
2. `preview/index.html` をブラウザで開く
> 静的Gmail/Outlookシミュレーションは参考用です。正確なレンダリングにはdevモードを使用してください。
> [!WARNING]
> 静的Gmail/Outlookシミュレーションは参考用です。比較的正確なレンダリングにはdevモードを使用してください。
### 開発サーバー（ライブリロード + CSSインライン）
### 開発サーバー（ライブリロード + CSSインライン + クライアントシミュレーション）
```bash
cd tools && go run . dev
@@ -49,6 +50,9 @@ cd tools && go run . dev
`.tmpl` ファイルを編集すると自動的に再構築されブラウザに反映されます。
> [!NOTE]
> Dev シミュレーションは各メールクライアントのレンダリングを完全には再現できません — 参考用です。実際のクライアントで必ず確認してください。
### 結合テスト
Gitea にデプロイ: **Site Administration > Configuration > Mailer > Send Test Email**
docs/CONTRIBUTING.ko.md
+6 -2
View File
@@ -38,9 +38,10 @@
1. 데이터 생성: `cd tools && go run . preview all`
2. `preview/index.html`을 브라우저에서 열기
> 정적 Gmail/Outlook 시뮬레이션은 참고용입니다. 정확한 렌더링은 dev 모드를 사용하세요.
> [!WARNING]
> 정적 Gmail/Outlook 시뮬레이션은 참고용입니다. 비교적 정확한 렌더링은 dev 모드를 사용하세요.
### 개발 서버 (실시간 리로드 + CSS 인라인)
### 개발 서버 (실시간 리로드 + CSS 인라인 + 클라이언트 시뮬레이션)
```bash
cd tools && go run . dev
@@ -49,6 +50,9 @@ cd tools && go run . dev
`.tmpl` 파일 수정 시 자동 재빌드되어 브라우저에 반영됩니다.
> [!NOTE]
> Dev 시뮬레이션은 각 이메일 클라이언트의 렌더링을 완전히 재현할 수 없습니다 — 참고용입니다. 실제 클라이언트에서 반드시 확인하세요.
### 통합 테스트
Gitea에 배포: **Site Administration > Configuration > Mailer > Send Test Email**
docs/CONTRIBUTING.ru.md
+6 -2
View File
@@ -38,9 +38,10 @@
1. Сгенерируйте данные: `cd tools && go run . preview all`
2. Откройте `preview/index.html` в браузере — сервер не нужен
> Статическая симуляция Gmail/Outlook приблизительна. Используйте dev-режим для точного рендеринга.
> [!WARNING]
> Статическая симуляция Gmail/Outlook приблизительна. Используйте dev-режим для относительно точного рендеринга.
### Сервер разработки (live reload + CSS инлайн)
### Сервер разработки (live reload + CSS инлайн + симуляция клиентов)
```bash
cd tools && go run . dev
@@ -49,6 +50,9 @@ cd tools && go run . dev
При изменении `.tmpl` файлов автоматически пересобирает и обновляет браузер.
> [!NOTE]
> Dev-симуляция не может на 100% воспроизвести рендеринг каждого почтового клиента — только для справки. Всегда проверяйте на реальных клиентах.
### Интеграционное тестирование
Разверните на Gitea: **Site Administration > Configuration > Mailer > Send Test Email**
docs/CONTRIBUTING.zh-CN.md
+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 实例，使用管理后台的测试邮件功能：
docs/CONTRIBUTING.zh-TW.md
+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 實例，使用管理後台的測試郵件功能：
docs/README.ja.md
+4 -1
View File
@@ -42,12 +42,15 @@ cd tools && go run . preview all
```
その後 `preview/index.html` を開く。
**開発サーバー（ライブリロード + Juice CSSインライン）:**
**開発サーバー（ライブリロード + Juice CSSインライン + クライアントシミュレーション）:**
```bash
cd tools && go run . dev # Node.jsが必要です
# → http://localhost:3456
```
> [!NOTE]
> Dev シミュレーションは各メールクライアントのレンダリングを完全には再現できません — 参考用です。実際のクライアントで必ず確認してください。
## 互換性
- **Gitea 1.21+**, 100%互換, 組み込み関数のみ
docs/README.ko.md
+4 -1
View File
@@ -42,12 +42,15 @@ cd tools && go run . preview all
```
그런 다음 `preview/index.html` 열기.
**개발 서버 (실시간 리로드 + Juice CSS 인라인):**
**개발 서버 (실시간 리로드 + Juice CSS 인라인 + 클라이언트 시뮬레이션):**
```bash
cd tools && go run . dev # Node.js 필요
# → http://localhost:3456
```
> [!NOTE]
> Dev 시뮬레이션은 각 이메일 클라이언트의 렌더링을 완전히 재현할 수 없습니다 — 참고용입니다. 실제 클라이언트에서 반드시 확인하세요.
## 호환성
- **Gitea 1.21+**, 100% 호환, 내장 함수만 사용
docs/README.ru.md
+4 -1
View File
@@ -42,12 +42,15 @@ cd tools && go run . preview all
```
Затем откройте `preview/index.html`.
**Dev-сервер (live reload + Juice CSS inline):**
**Dev-сервер (live reload + Juice CSS inline + симуляция клиентов):**
```bash
cd tools && go run . dev # требуется Node.js
# → http://localhost:3456
```
> [!NOTE]
> Dev-симуляция не может на 100% воспроизвести рендеринг каждого почтового клиента — только для справки. Всегда проверяйте на реальных клиентах.
## Совместимость
- **Gitea 1.21+**, 100% совместимость, только встроенные функции
docs/README.zh-CN.md
+16 -1
View File
@@ -56,12 +56,27 @@ cd tools && go run . preview all
```
然后打开 `preview/index.html`。
**开发服务器（实时重载 + Juice CSS 内联）：**
> [!WARNING]
> 静态模式下 Gmail/Outlook 模拟仅供参考，使用 dev 模式可获得相对准确的 CSS 内联渲染。
**开发服务器（实时重载 + Juice CSS 内联 + Gmail/Outlook 模拟）：**
```bash
cd tools && go run . dev # 需要 Node.js
# → http://localhost:3456
```
> [!NOTE]
> Dev 模拟无法 100% 还原各个邮件客户端的渲染差异，仅供参考，请以实际效果为准。
| 功能 | 静态 | Dev |
|-----------|--------|-----|
| Go 模板渲染 | ✅ | ✅ |
| 主题/模板切换 | ✅ | ✅ |
| Juice CSS 内联 | — | ✅ |
| Gmail/Outlook CSS 剥离 | — | ✅ |
| 实时重载 | — | ✅ |
| 需要 Node.js | — | ✅ |
---
## 兼容性
docs/README.zh-TW.md
+4 -1
View File
@@ -56,12 +56,15 @@ cd tools && go run . preview all
```
然後開啟 `preview/index.html`。
**開發伺服器（即時重載 + Juice CSS 內聯）：**
**開發伺服器（即時重載 + Juice CSS 內聯 + 客戶端模擬）：**
```bash
cd tools && go run . dev # 需要 Node.js
# → http://localhost:3456
```
> [!NOTE]
> Dev 模擬無法 100% 還原各個郵件用戶端的渲染差異，僅供參考，請以實際效果為準。
---
## 相容性