From 4bc9a0667fc0fa5265b495d80f879c912f4878ff Mon Sep 17 00:00:00 2001 From: KenanZhu <3471685733@qq.com> Date: Thu, 4 Jun 2026 15:35:35 +0800 Subject: [PATCH] change(*): update preview index.html and relevant docs files --- CONTRIBUTING.md | 2 +- docs/CONTRIBUTING.ja.md | 2 +- docs/CONTRIBUTING.ko.md | 2 +- docs/CONTRIBUTING.ru.md | 2 +- docs/CONTRIBUTING.zh-CN.md | 2 +- docs/CONTRIBUTING.zh-TW.md | 2 +- docs/images/README.md | 6 +++ preview/index.html | 82 +++++++++++++++++++++++++++----------- 8 files changed, 71 insertions(+), 29 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 09a5fd9..778d7ee 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,7 +11,7 @@ Thanks for your interest in contributing! This project aims to provide a diverse 1. Scaffold the new style: `cd tools && go run . create ` — this creates the directory structure with placeholder `.tmpl` files for all 11 email types 2. Edit each `.tmpl` file in `themes//` with your unique visual design 3. Regenerate the preview: `cd tools && go run . preview all` — the build script auto-discovers all theme directories under `themes/` and generates the theme selector dynamically -4. Submit a PR with screenshots of rendered emails +4. Submit a PR with screenshots of rendered emails (≤ 50 KiB each, 10–20 KiB recommended) ### Style Guidelines diff --git a/docs/CONTRIBUTING.ja.md b/docs/CONTRIBUTING.ja.md index c9da712..4127f12 100644 --- a/docs/CONTRIBUTING.ja.md +++ b/docs/CONTRIBUTING.ja.md @@ -7,7 +7,7 @@ 1. ツールでスキャフォールド: `cd tools && go run . create ` — 全11種類のメールタイプ用のプレースホルダ `.tmpl` ファイルを含む完全なディレクトリ構造を作成します 2. `themes//` 内の各 `.tmpl` ファイルを独自デザインで編集 3. プレビューを再生成: `cd tools && go run . preview all`（ビルドスクリプトが `themes/` 以下の全テーマを自動検出し、テーマセレクターも自動生成されます） -4. スクリーンショット付きで PR を提出 +4. スクリーンショット付きで PR を提出（1枚あたり 50 KiB 以下、10–20 KiB 推奨） ### スタイルガイドライン diff --git a/docs/CONTRIBUTING.ko.md b/docs/CONTRIBUTING.ko.md index 941829a..64206c1 100644 --- a/docs/CONTRIBUTING.ko.md +++ b/docs/CONTRIBUTING.ko.md @@ -7,7 +7,7 @@ 1. 도구로 스캐폴드: `cd tools && go run . create ` — 11개 이메일 유형 모두에 대한 플레이스홀더 `.tmpl` 파일이 포함된 완전한 디렉토리 구조를 생성합니다 2. `themes//`에서 각 `.tmpl` 파일을 고유한 디자인으로 편집 3. 프리뷰 재생성: `cd tools && go run . preview all` (빌드 스크립트가 `themes/` 아래의 모든 테마 디렉토리를 자동으로 찾고 테마 선택기도 자동 생성합니다) -4. 스크린샷과 함께 PR 제출 +4. 스크린샷과 함께 PR 제출 (이미지당 50 KiB 이하, 10–20 KiB 권장) ### 스타일 가이드라인 diff --git a/docs/CONTRIBUTING.ru.md b/docs/CONTRIBUTING.ru.md index 2d5330d..6d0b26b 100644 --- a/docs/CONTRIBUTING.ru.md +++ b/docs/CONTRIBUTING.ru.md @@ -7,7 +7,7 @@ 1. Создайте каркас через инструмент: `cd tools && go run . create <имя-стиля>` — создаёт полную структуру директорий с файлами-заготовками `.tmpl` для всех 11 типов писем 2. Отредактируйте каждый `.tmpl` файл в `themes/<имя-стиля>/` с вашим уникальным дизайном 3. Перегенерируйте превью: `cd tools && go run . preview all` (скрипт автоматически находит все темы в `themes/` и динамически генерирует селектор тем) -4. Отправьте PR со скриншотами +4. Отправьте PR со скриншотами (≤ 50 КиБ каждый, рекомендуется 10–20 КиБ) ### Рекомендации по стилю diff --git a/docs/CONTRIBUTING.zh-CN.md b/docs/CONTRIBUTING.zh-CN.md index 7965cc2..ecb0e42 100644 --- a/docs/CONTRIBUTING.zh-CN.md +++ b/docs/CONTRIBUTING.zh-CN.md @@ -7,7 +7,7 @@ 1. 使用工具脚手架：`cd tools && go run . create <风格名称>` — 这会创建完整的目录结构和全部 11 种邮件类型的占位 `.tmpl` 文件 2. 在 `themes/<风格名称>/` 中编写每个 `.tmpl` 文件，应用独特的视觉设计 3. 重新生成预览：`cd tools && go run . preview all`（构建脚本会自动发现 `themes/` 下的所有主题目录并动态生成主题选择器） -4. 提交包含截图渲染效果的 PR +4. 提交包含截图渲染效果的 PR（单张图片 ≤ 50 KiB，建议 10–20 KiB） ### 风格指南 diff --git a/docs/CONTRIBUTING.zh-TW.md b/docs/CONTRIBUTING.zh-TW.md index 960d01d..acf9c95 100644 --- a/docs/CONTRIBUTING.zh-TW.md +++ b/docs/CONTRIBUTING.zh-TW.md @@ -7,7 +7,7 @@ 1. 使用工具腳手架：`cd tools && go run . create <風格名稱>` — 這會建立完整的目錄結構和全部 11 種郵件類型的佔位 `.tmpl` 檔案 2. 在 `themes/<風格名稱>/` 中編寫每個 `.tmpl` 檔案，套用獨特的視覺設計 3. 重新產生預覽：`cd tools && go run . preview all`（建置腳本會自動發現 `themes/` 下的所有主題目錄並動態生成主題選擇器） -4. 提交包含螢幕截圖的 PR +4. 提交包含螢幕截圖的 PR（單張圖片 ≤ 50 KiB，建議 10–20 KiB） ### 風格指南 diff --git a/docs/images/README.md b/docs/images/README.md index 849296a..2039eca 100644 --- a/docs/images/README.md +++ b/docs/images/README.md @@ -9,6 +9,12 @@ horizon.png terminal.png ember.png bloom.png heritage.png neon.png mono.png terra.png ink.png aurora.png ``` +## Image Size Requirements + +- **Maximum:** 50 KiB per image +- **Recommended:** 10–20 KiB +- **Format:** PNG, optimised — run through `pngquant` or `optipng` before committing + ## How to Capture 1. Start the dev server: `cd tools && go run . dev` (opens http://localhost:3456) diff --git a/preview/index.html b/preview/index.html index f40070f..f5ec7c3 100644 --- a/preview/index.html +++ b/preview/index.html @@ -74,25 +74,42 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v .message-error{background:rgba(248,113,113,0.08);color:rgba(248,113,113,0.75);border-color:rgba(248,113,113,0.15)} .message code{background:rgba(0,0,0,0.12);padding:1px 6px;border-radius:3px} -/* ── Scrollbar — neutral gray, consistent across browsers ── */ -/* Chrome 121+ / Edge 121+ (standards-track) */ -:root{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin} -/* WebKit (Chrome, Safari, Edge) */ -::-webkit-scrollbar{width:6px;height:6px} -::-webkit-scrollbar-track{background:transparent!important} -::-webkit-scrollbar-thumb{ - background-color:rgba(107,125,153,.25)!important; +/* ── Scrollbar — neutral gray, consistent across all browsers ── */ +/* Standards-track: Firefox 64+ / Chrome 121+ / Edge 121+ */ +html,body,#preview-area,#panel{ + scrollbar-width:thin; + scrollbar-color:rgba(107,125,153,.25) transparent; +} +/* IE / Legacy Edge */ +#preview-area,#panel{ + -ms-overflow-style:-ms-autohiding-scrollbar; +} +/* WebKit scrollbars — scoped to actual scrollable regions only */ +#preview-area::-webkit-scrollbar, +#panel::-webkit-scrollbar { width:6px; height:6px } +#preview-area::-webkit-scrollbar-track, +#panel::-webkit-scrollbar-track { background:transparent } +#preview-area::-webkit-scrollbar-thumb, +#panel::-webkit-scrollbar-thumb { + background-color:rgba(107,125,153,.25); border-radius:3px; border:1px solid rgba(255,255,255,.06); } -::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)!important} -::-webkit-scrollbar-corner{background:transparent!important} -/* Firefox */ -#preview-area,#panel{scrollbar-width:thin;scrollbar-color:rgba(107,125,153,.25) transparent} -/* Legacy Edge / IE */ -#preview-area,#panel{-ms-overflow-style:-ms-autohiding-scrollbar} -/* Chrome 108+ overlay */ -@supports(overflow:overlay){#preview-area,#panel{overflow:overlay}} +#preview-area::-webkit-scrollbar-thumb:hover, +#panel::-webkit-scrollbar-thumb:hover { background-color:rgba(107,125,153,.45) } +#preview-area::-webkit-scrollbar-corner, +#panel::-webkit-scrollbar-corner { background:transparent } +/* The panel's inner parameter section (flex:1;overflow-y:auto) */ +#panel section::-webkit-scrollbar { width:6px; height:6px } +#panel section::-webkit-scrollbar-track { background:transparent } +#panel section::-webkit-scrollbar-thumb { + background-color:rgba(107,125,153,.25); + border-radius:3px; + border:1px solid rgba(255,255,255,.06); +} +#panel section::-webkit-scrollbar-thumb:hover { background-color:rgba(107,125,153,.45) } +#panel section::-webkit-scrollbar-corner { background:transparent } +#panel section{scrollbar-width:thin;scrollbar-color:rgba(107,125,153,.25) transparent} @media(max-width:850px){#panel{display:none}#topbar .hint{display:none}} @@ -118,7 +135,7 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v - keys: d/m   ←→ + keys: d/m   ←→ tab   ↑↓ select
@@ -202,7 +219,7 @@ function render() { const raw = rendered[state.theme]?.[state.template]; let content = raw ? transform(raw, state.client) : '

Not found: '+state.theme+'/'+state.template+'

'; // Inject invisible scrollbar into iframe content for immersive preview - content = content.replace('', ''); + content = content.replace('', ''); frame.onload = function() { loading.style.display = 'none'; @@ -274,11 +291,30 @@ function setViewport(v) { // Keyboard // document.addEventListener('keydown',e=>{ - if(e.key==='d') setViewport('desktop'); - if(e.key==='m') setViewport('mobile'); - const keys=Object.keys(REGISTRY), idx=keys.indexOf(state.template); - if(e.key==='ArrowRight'&&idx0){switchTemplate(keys[idx-1]);document.getElementById('sel-template').value=keys[idx-1];} + // Viewport shortcuts (no modifiers) + if(e.key==='d'&&!e.ctrlKey&&!e.metaKey&&!e.altKey){ setViewport('desktop'); return; } + if(e.key==='m'&&!e.ctrlKey&&!e.metaKey&&!e.altKey){ setViewport('mobile'); return; } + + // ← → cycle focus between Theme / Template / Client selects + // When a select dropdown is open the browser captures keys, so this only runs when closed + const selects=['sel-theme','sel-template','sel-client']; + const activeId=document.activeElement?.id; + const cur=selects.indexOf(activeId); + + if(e.key==='ArrowRight'||e.key==='ArrowLeft'){ + e.preventDefault(); + if(cur>=0){ + // Cycle to next/previous select + const dir=e.key==='ArrowRight'?1:-1; + const next=(cur+dir+selects.length)%selects.length; + document.getElementById(selects[next])?.focus(); + } else { + // First press — jump to template (middle) + document.getElementById('sel-template')?.focus(); + } + } + + // ↑ ↓ are handled natively by the focused