diff --git a/CHANGELOG.md b/CHANGELOG.md index afcaabf..ec665de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,20 @@ All notable changes to Wallpect are recorded in this file. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## Unreleased +## [Unreleased] + +## [0.2.0] - 2026-07-19 + +### Added + +- Added Workers Builds production deployment from `main` and preview versions for non-production branches. +- Added local Workers validation, preview, deployment, and deployed-environment E2E commands. +- Added a repeatable release, production verification, and rollback guide. ### Changed -- Migrated the deployment configuration from Cloudflare Pages to assets-only Workers Static Assets with explicit SPA fallback and preview deployments. -- Pinned Wrangler and added local validation, preview, and deployment commands. +- Migrated production from Cloudflare Pages to an assets-only Worker with Static Assets, explicit SPA fallback, and the existing Pages project retained as a rollback path. +- Pinned Wrangler and aligned the bilingual project, contribution, deployment, implementation, and product documentation with the current architecture. - Added immutable caching for fingerprinted JavaScript and CSS while keeping the service worker revalidated. ## 0.1.0 - 2026-07-16 @@ -32,3 +40,6 @@ All notable changes to Wallpect are recorded in this file. The format follows [K - Uploaded images remain in browser memory and are not sent to an upload API or analytics service. - Local secrets, credentials, build output, browser reports, and editor/OS metadata are excluded from version control. + +[Unreleased]: https://github.com/kyeunga25/wallpect/compare/v0.2.0...HEAD +[0.2.0]: https://github.com/kyeunga25/wallpect/releases/tag/v0.2.0 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2c2baf4..041c584 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -24,9 +24,9 @@ 5. 執行以下檢查: ```bash -npm run lint -npm test -npm run build +npm run check +npm run format:check +npm run worker:check ``` 涉及完整編輯流程、響應式版面或瀏覽器行為時,亦應執行: @@ -35,6 +35,8 @@ npm run build npm run test:e2e ``` +部署或發布變更亦應按照[發布指南](docs/RELEASING.md),先驗證非 production branch 的 Workers 預覽版本,再合併至 `main`。 + ### Pull request 清單 - 清楚說明問題、處理方式及用戶影響。 @@ -67,9 +69,9 @@ Thank you for helping improve Wallpect. Keep each issue or pull request focused 5. Run the core checks: ```bash -npm run lint -npm test -npm run build +npm run check +npm run format:check +npm run worker:check ``` Also run the end-to-end suite when changing the complete editor flow, responsive layout, or browser behavior: @@ -78,6 +80,8 @@ Also run the end-to-end suite when changing the complete editor flow, responsive npm run test:e2e ``` +For deployment or release changes, also follow the [release guide](docs/RELEASING.md) and validate the non-production Workers preview before merging to `main`. + ### Pull request checklist - Explain the problem, approach, and user impact. diff --git a/README.md b/README.md index 4456dc1..cf7c509 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ [Open Wallpect](https://wallpect.k-y.cc) · [繁體中文](README.zh-Hant.md) · [Documentation](#documentation) [![CI](https://github.com/kyeunga25/wallpect/actions/workflows/ci.yml/badge.svg)](https://github.com/kyeunga25/wallpect/actions/workflows/ci.yml) +[![Latest release](https://img.shields.io/github/v/release/kyeunga25/wallpect?display_name=tag&sort=semver)](https://github.com/kyeunga25/wallpect/releases/latest) [![License: MIT](https://img.shields.io/badge/License-MIT-2563eb.svg)](LICENSE) [![Live app](https://img.shields.io/badge/Live-wallpect.k--y.cc-16a34a.svg)](https://wallpect.k-y.cc) @@ -25,7 +26,7 @@ Wallpect helps you compose an image for a selected Apple device, inspect likely ### Highlights - 74 profiles: 27 iPhone, 20 iPad, and 27 Mac/display profiles, covering every requested display family introduced from 2021 through July 2026 -- Local PNG, JPEG, and WebP decoding with file, dimension, and pixel-count limits +- Local PNG, JPEG, and WebP decoding, limited to 30 MB, 12,000 px on the longest edge, and 72 megapixels - Portrait and landscape compositions stored independently for each device - Solid, transparent, or blurred-extension backgrounds - Shared transform and Canvas rendering calculations for preview and export @@ -73,9 +74,9 @@ npm run dev Run the core quality checks: ```bash -npm run lint -npm test -npm run build +npm run check +npm run format:check +npm run worker:check ``` The Playwright suite additionally covers Chromium, WebKit, Microsoft Edge, and Firefox: @@ -84,6 +85,14 @@ The Playwright suite additionally covers Chromium, WebKit, Microsoft Edge, and F npm run test:e2e ``` +Set `PLAYWRIGHT_BASE_URL` to run the same browser matrix against a deployed Workers preview or the production app. + +## Deployment and releases + +Wallpect is deployed as an assets-only Cloudflare Worker with Static Assets. A push to `main` triggers a production Workers Build; non-production branches create preview versions without changing production traffic. The previous Pages project is retained only as a documented rollback path. + +See the [deployment guide](docs/DEPLOYMENT.md) for platform settings and the [release guide](docs/RELEASING.md) for the version, validation, preview, production, and rollback checklist. + ## Architecture | Path | Responsibility | @@ -102,6 +111,7 @@ Preview and export both call `renderWallpaper`. Pan offsets use the target canva - [Accuracy policy](docs/ACCURACY_POLICY.md) - [Device profile guide](docs/DEVICE_PROFILE_GUIDE.md) - [Deployment guide](docs/DEPLOYMENT.md) +- [Release guide](docs/RELEASING.md) - [Product requirements and implementation plan](docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md) - [Implementation checklist](TODO.md) - [Changelog](CHANGELOG.md) diff --git a/README.zh-Hant.md b/README.zh-Hant.md index 2952101..b6d6c07 100644 --- a/README.zh-Hant.md +++ b/README.zh-Hant.md @@ -7,6 +7,7 @@ [立即使用](https://wallpect.k-y.cc) · [English](README.md) · [技術文件](#技術文件) [![CI](https://github.com/kyeunga25/wallpect/actions/workflows/ci.yml/badge.svg)](https://github.com/kyeunga25/wallpect/actions/workflows/ci.yml) +[![最新版本](https://img.shields.io/github/v/release/kyeunga25/wallpect?display_name=tag&sort=semver)](https://github.com/kyeunga25/wallpect/releases/latest) [![License: MIT](https://img.shields.io/badge/License-MIT-2563eb.svg)](LICENSE) [![正式網站](https://img.shields.io/badge/正式網站-wallpect.k--y.cc-16a34a.svg)](https://wallpect.k-y.cc) @@ -25,7 +26,7 @@ Wallpect 讓你按所選 Apple 裝置調整圖片構圖、檢查可能遮擋內 ### 主要功能 - 74 個設定檔:27 個 iPhone、20 個 iPad,以及 27 個 Mac/顯示器,涵蓋 2021 年至 2026 年 7 月要求支援的所有顯示系列 -- 在本機解碼 PNG、JPEG 與 WebP,並限制檔案大小、圖像尺寸及總像素數 +- 在本機解碼 PNG、JPEG 與 WebP,限制為 30 MB、最長邊 12,000 px 及 7,200 萬像素 - 每部裝置分別保存直向及橫向構圖 - 純色、透明或模糊延伸背景 - 預覽與匯出共用相同的變換及 Canvas 渲染計算 @@ -73,9 +74,9 @@ npm run dev 執行主要品質檢查: ```bash -npm run lint -npm test -npm run build +npm run check +npm run format:check +npm run worker:check ``` Playwright 測試另外涵蓋 Chromium、WebKit、Microsoft Edge 及 Firefox: @@ -84,6 +85,14 @@ Playwright 測試另外涵蓋 Chromium、WebKit、Microsoft Edge 及 Firefox: npm run test:e2e ``` +設定 `PLAYWRIGHT_BASE_URL` 後,可對已部署的 Workers 預覽版本或正式網站執行相同的瀏覽器矩陣。 + +## 部署與版本發布 + +Wallpect 以不含 Worker script 的 Cloudflare Workers Static Assets 模式部署。推送至 `main` 會觸發正式 Workers Build;其他分支只會建立預覽版本,不會改變正式流量。原有 Pages 專案只保留作已記錄的回退路徑。 + +平台設定請參閱[部署指南](docs/DEPLOYMENT.md);版本、驗證、預覽、正式部署及回退程序請參閱[發布指南](docs/RELEASING.md)。 + ## 架構 | 路徑 | 職責 | @@ -102,6 +111,7 @@ npm run test:e2e - [準確度政策](docs/ACCURACY_POLICY.md) - [裝置設定檔指南](docs/DEVICE_PROFILE_GUIDE.md) - [部署指南](docs/DEPLOYMENT.md) +- [發布指南](docs/RELEASING.md) - [產品需求與實作計劃](docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md) - [實作清單](TODO.md) - [版本記錄](CHANGELOG.md) diff --git a/TODO.md b/TODO.md index 6adec1c..4cb8ab5 100644 --- a/TODO.md +++ b/TODO.md @@ -11,12 +11,14 @@ - [x] 加入預覽模式、覆疊、裝置資訊與準確度說明 - [x] 加入精確解析度的 PNG、JPEG、WebP 下載 - [x] 加入桌面/流動版版面及無障礙控制 -- [x] 加入 Cloudflare Pages headers、設定、離線應用程式外殼、CI 與文檔 +- [x] 加入 Workers Static Assets headers、設定、離線應用程式外殼、CI 與文檔 - [x] 加入單元、整合、端對端與瀏覽器視覺檢查 - [x] 在 Chromium、WebKit、Microsoft Edge 與 Firefox 執行自動相容性檢查 - [x] 加入預設繁體中文,並支援簡體中文與英文切換 - [x] 完成提交前的依賴、機密、瀏覽器介面與安全 header 審查 -- [x] 建立 Cloudflare Pages 專案並綁定 `wallpect.k-y.cc` +- [x] 以 Workers Builds 自動建立分支預覽,並從 `main` 部署 `wallpect.k-y.cc` +- [x] 保留原有 Cloudflare Pages 專案作回退路徑 +- [x] 建立可重複的版本發布、正式驗證及 Workers 回退清單 - [ ] 完成實體裝置 Safari、低記憶體流動裝置、CMYK JPEG 與 EXIF 手動 QA ## English @@ -30,10 +32,12 @@ - [x] Add preview modes, overlays, device information, and accuracy notes - [x] Add PNG, JPEG, WebP exact-resolution download - [x] Add desktop/mobile layout and accessible controls -- [x] Add Cloudflare Pages headers, configuration, offline shell, CI, and documentation +- [x] Add Workers Static Assets headers, configuration, offline shell, CI, and documentation - [x] Add unit, integration, E2E, and visual browser checks - [x] Run automated compatibility checks in Chromium, WebKit, Microsoft Edge, and Firefox - [x] Default to Traditional Chinese and support Simplified Chinese and English switching - [x] Complete pre-commit dependency, secret, browser-surface, and security-header review -- [x] Create the Cloudflare Pages project and bind `wallpect.k-y.cc` +- [x] Build branch previews automatically and deploy `main` to `wallpect.k-y.cc` with Workers Builds +- [x] Retain the existing Cloudflare Pages project as a rollback path +- [x] Document repeatable release, production verification, and Workers rollback procedures - [ ] Complete physical-device Safari, low-memory mobile, CMYK JPEG, and EXIF manual QA diff --git a/docs/DEPLOYMENT.md b/docs/DEPLOYMENT.md index 0153f5a..6c2a8f4 100644 --- a/docs/DEPLOYMENT.md +++ b/docs/DEPLOYMENT.md @@ -53,6 +53,13 @@ Workers Builds 設定: Cloudflare 會使用 `package.json` 鎖定的 Wrangler 版本;本機仍可使用 `npm run worker:deploy` 與 `npm run worker:preview` 作為相同命令的簡寫。 +相關官方文件: + +- [Workers Builds 設定](https://developers.cloudflare.com/workers/ci-cd/builds/configuration/) +- [Build branch 控制](https://developers.cloudflare.com/workers/ci-cd/builds/build-branches/) +- [Static Assets SPA 導覽](https://developers.cloudflare.com/workers/static-assets/routing/single-page-application/) +- [版本回退](https://developers.cloudflare.com/workers/versions-and-deployments/rollbacks/) + ### 安全 header Workers Static Assets 會直接讀取 `public/_headers` 建置後的 `dist/_headers`。它會設定 CSP、`nosniff`、referrer policy、permissions policy、same-origin opener policy 與快取規則。CSP 刻意只允許同源 scripts/styles,以及本機圖片處理與下載所需的 `blob:` 圖片/worker。收緊設定後,必須重新測試 Canvas 匯出與 service worker。 @@ -137,6 +144,13 @@ Workers Builds settings: Cloudflare uses the Wrangler version pinned in `package.json`; `npm run worker:deploy` and `npm run worker:preview` remain available as equivalent local aliases. +Related official documentation: + +- [Workers Builds configuration](https://developers.cloudflare.com/workers/ci-cd/builds/configuration/) +- [Build branch control](https://developers.cloudflare.com/workers/ci-cd/builds/build-branches/) +- [Static Assets SPA routing](https://developers.cloudflare.com/workers/static-assets/routing/single-page-application/) +- [Version rollbacks](https://developers.cloudflare.com/workers/versions-and-deployments/rollbacks/) + ### Security headers Workers Static Assets reads `public/_headers` from the built `dist/_headers`. It sets CSP, `nosniff`, referrer policy, permissions policy, same-origin opener policy, and cache rules. The CSP intentionally allows same-origin scripts/styles plus `blob:` images/workers for local image handling and download. Re-test Canvas export and the service worker after tightening it. diff --git a/docs/RELEASING.md b/docs/RELEASING.md new file mode 100644 index 0000000..e52110c --- /dev/null +++ b/docs/RELEASING.md @@ -0,0 +1,111 @@ +# Wallpect 版本發布指南 / Release Guide + +## 中文 + +Wallpect 使用 Semantic Versioning,版本資料以 `package.json`、`package-lock.json`、`CHANGELOG.md` 及 Git tag 為準。GitHub Release 只應在對應的 `main` 提交已成功部署及驗證後建立。 + +### 1. 準備發布 + +1. 從最新 `main` 建立範圍清晰的分支。 +2. 按變更影響更新版本: + - patch:相容的修正或文檔更正; + - minor:向後相容的新功能、裝置資料或部署能力; + - major:不相容的公開行為或資料格式。 +3. 同步更新 `package.json` 與 `package-lock.json`。 +4. 將 `CHANGELOG.md` 的 `Unreleased` 內容移至帶日期的版本標題。 +5. 更新受影響的 README、部署、準確度、裝置資料或產品文件。 + +### 2. 本機驗證 + +```bash +npm ci +npm run check +npm run format:check +npm run worker:check +npm run test:e2e +``` + +`npm run check` 會依次執行 lint、單元/整合測試及 production build。`worker:check` 會以鎖定版本的 Wrangler 檢查 Static Assets 部署包,但不會部署。 + +### 3. Pull request 預覽 + +1. 推送非 production branch 並建立 pull request。 +2. 確認 GitHub CI 通過。 +3. 確認 Workers Builds 的 non-production branch build 成功,並取得 preview URL。 +4. 對 preview 執行: + +```bash +PLAYWRIGHT_BASE_URL=https:// npm run test:e2e +``` + +5. 手動檢查私隱邊界、精確匯出、桌面/流動版版面、SPA 導覽及安全/快取 headers。 + +### 4. 正式部署與 GitHub Release + +1. 審閱並合併 pull request 至 `main`。 +2. 等待 Workers Builds 完成正式 build 及 deploy。 +3. 對 `https://wallpect.k-y.cc` 執行相同的 E2E 及部署檢查。 +4. 確認目前 Workers deployment 對應已合併的 `main` 提交。 +5. 建立 `v` tag 及 GitHub Release,並將該版本標示為 latest。 +6. Release notes 應概述用戶可見變更、部署變更、私隱邊界及已知限制,不應包含憑證、內部原因或私人資料。 + +### 5. 回退 + +若新版本有問題,優先以 Cloudflare Dashboard 的 Worker → Deployments 選擇上一個穩定版本,或使用 `wrangler rollback `。回退會建立一個新的 deployment,並把所選版本設為 100% 正式流量。 + +若 Workers route 本身有問題,可在 Cloudflare Dashboard 移除 `wallpect.k-y.cc/*` Worker route,讓保留的 Pages custom domain 回復接收流量。完成事故記錄及修正前,不要刪除可用的舊 Worker version 或 Pages project。 + +## English + +Wallpect follows Semantic Versioning. `package.json`, `package-lock.json`, `CHANGELOG.md`, and the Git tag are the release sources of truth. Create a GitHub Release only after the matching `main` commit has been deployed and verified. + +### 1. Prepare the release + +1. Create a focused branch from the latest `main`. +2. Select the version by impact: + - patch: compatible fixes or documentation corrections; + - minor: backward-compatible features, device data, or deployment capabilities; + - major: incompatible public behavior or data formats. +3. Keep `package.json` and `package-lock.json` in sync. +4. Move `CHANGELOG.md` entries from `Unreleased` into a dated version section. +5. Update affected README, deployment, accuracy, device-data, or product documentation. + +### 2. Validate locally + +```bash +npm ci +npm run check +npm run format:check +npm run worker:check +npm run test:e2e +``` + +`npm run check` runs lint, unit/integration tests, and the production build. `worker:check` uses the pinned Wrangler version to validate the Static Assets package without deploying it. + +### 3. Validate the pull request preview + +1. Push a non-production branch and open a pull request. +2. Confirm GitHub CI passes. +3. Confirm the Workers Builds non-production branch build succeeds and obtain its preview URL. +4. Run: + +```bash +PLAYWRIGHT_BASE_URL=https:// npm run test:e2e +``` + +5. Manually check the privacy boundary, exact exports, desktop/mobile layouts, SPA navigation, and security/cache headers. + +### 4. Deploy production and publish the GitHub Release + +1. Review and merge the pull request into `main`. +2. Wait for the production Workers Build and deployment. +3. Run the same E2E and deployment checks against `https://wallpect.k-y.cc`. +4. Confirm that the active Workers deployment corresponds to the merged `main` commit. +5. Create the `v` tag and GitHub Release, and mark that release as latest. +6. Release notes should cover user-visible changes, deployment changes, the privacy boundary, and known limitations without exposing credentials, private motives, or personal data. + +### 5. Roll back + +If the release is unhealthy, select the previous stable version under Worker → Deployments in the Cloudflare dashboard, or run `wrangler rollback `. A rollback creates a new deployment and sends 100% of production traffic to the selected version. + +If the Worker route itself is unhealthy, remove the `wallpect.k-y.cc/*` Worker route in the Cloudflare dashboard so the retained Pages custom domain receives traffic again. Do not delete usable Worker versions or the Pages project until the incident is recorded and fixed. diff --git a/docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md b/docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md index fdbdc78..bec760e 100644 --- a/docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md +++ b/docs/WALLPECT_PRODUCT_REQUIREMENTS_AND_IMPLEMENTATION_PLAN.md @@ -1,12 +1,12 @@ # Wallpect — 產品需求與實作計劃 -> 可直接交給 Codex 執行的 Product Requirements Document(PRD)與 Implementation Plan +> Product Requirements Document(PRD)、現行實作基準與後續計劃 > 工作名稱:**Wallpect** > Repository:`wallpect` -> 公開測試網址:`wallpect.k-y.cc` -> 部署平台:Cloudflare Pages -> 文件狀態:Draft v0.1 -> 目標:先完成可公開使用的 Apple-first MVP,同時保留擴展至 Android 及其他裝置的架構 +> 正式網址:`wallpect.k-y.cc` +> 部署平台:Cloudflare Workers Static Assets +> 文件狀態:Implemented v0.2.0(2026-07-19) +> 目標:維護可公開使用的 Apple-first 工具,同時保留擴展至 Android 及其他裝置的架構 --- @@ -30,6 +30,18 @@ Wallpect 是一個以 Apple 裝置壁紙為核心的瀏覽器工具,MVP 優先 MVP 應優先採用本地瀏覽器處理圖片,避免將用戶圖片上傳到伺服器,降低基礎設施成本、私隱風險和日常維護工作。 +### 1.1 現行實作快照 + +- 74 個資料驅動的 Apple 顯示設定檔:27 個 iPhone、20 個 iPad、27 個 Mac/顯示器; +- PNG、JPEG、WebP 本機解碼及精確像素匯出; +- 預覽與匯出共用 `renderWallpaper`、變換及適配計算; +- React Context 管理編輯狀態,CSS 建立響應式介面,Canvas 2D 負責圖片渲染; +- Vitest、React Testing Library 及 Playwright 涵蓋核心計算、整合流程與瀏覽器矩陣; +- 使用 Workers Builds 將非 production branch 建成預覽版本,並從 `main` 自動部署 assets-only Worker; +- 沒有後端圖片 API、帳戶系統、圖片分析或遠端錯誤記錄。 + +本文後續的 MVP 要求除非標示為 Post-MVP,均視為現行實作基準;仍未完成的手動 QA 項目記錄於 `TODO.md`。 + --- ## 2. 名稱與識別 @@ -48,9 +60,9 @@ MVP 應優先採用本地瀏覽器處理圖片,避免將用戶圖片上傳到 ```text GitHub repository: wallpect -Cloudflare Pages project: wallpect -Production/public beta: wallpect.k-y.cc -Development preview: dev.wallpect.k-y.cc +Cloudflare Worker: wallpect +Production: wallpect.k-y.cc +Development preview: Workers non-production branch preview URL ``` ### 2.3 品牌使用原則 @@ -525,7 +537,7 @@ Accuracy Level 建議: - 初次載入 JavaScript 經壓縮後盡量低於 500 KB; - Lighthouse Performance 桌面版目標 ≥ 90; - 10 MB 圖片載入後,基本拖曳和縮放保持流暢; -- 大圖處理應使用 Web Worker/OffscreenCanvas(在支援時); +- 現行預覽在主執行緒使用縮小 Canvas;如實測出現長任務,再評估 Web Worker/OffscreenCanvas; - 避免每次拖曳都重新生成完整輸出 Canvas。 ### 7.2 私隱 @@ -533,8 +545,8 @@ Accuracy Level 建議: - 圖片預設只在本地處理; - 不保存圖片; - 不使用需要讀取圖片內容的第三方分析; -- 可使用 Cloudflare Web Analytics,但應確認不收集圖片; -- 頁面提供簡短 Privacy 說明。 +- 現行版本不載入 Web Analytics 或第三方遙測; +- 頁面內置 Privacy 說明。 ### 7.3 安全 @@ -566,21 +578,21 @@ MVP 支援最近兩個主要版本: ## 8. 技術架構 -### 8.1 建議技術棧 +### 8.1 現行技術棧 ```text Framework: React Build tool: Vite Language: TypeScript -Styling: Tailwind CSS or CSS Modules -State: Zustand or React state +Styling: CSS +State: React Context and reducer state Canvas: Canvas 2D API -Heavy processing: Web Worker + OffscreenCanvas where supported +Image lifecycle: browser memory + object URLs Testing: Vitest + React Testing Library + Playwright Linting: ESLint Formatting: Prettier -Deployment: Cloudflare Pages -Package manager: npm or pnpm +Deployment: Cloudflare Workers Static Assets +Package manager: npm ``` 優先原則: @@ -623,17 +635,17 @@ Infrastructure Layer └── Device Profile Loader ``` -### 8.3 建議 Repository 結構 +### 8.3 現行 Repository 結構 ```text wallpect/ ├── public/ -│ ├── icons/ -│ └── device-assets/ +│ ├── _headers +│ ├── assets/ +│ └── sw.js ├── src/ │ ├── app/ -│ │ ├── App.tsx -│ │ └── routes.tsx +│ │ └── App.tsx │ ├── components/ │ │ ├── upload/ │ │ ├── device-selector/ @@ -644,22 +656,19 @@ wallpect/ │ ├── core/ │ │ ├── fit.ts │ │ ├── transforms.ts -│ │ ├── device-renderer.ts │ │ ├── renderer.ts │ │ ├── export.ts │ │ └── validation.ts │ ├── data/ │ │ ├── devices/ -│ │ │ ├── apple/ -│ │ │ └── index.ts +│ │ │ └── apple/ │ │ └── schemas/ │ ├── hooks/ +│ ├── i18n/ │ ├── state/ │ ├── styles/ │ ├── types/ -│ ├── utils/ -│ └── workers/ -│ └── image.worker.ts +│ └── utils/ ├── tests/ │ ├── unit/ │ ├── integration/ @@ -667,7 +676,8 @@ wallpect/ ├── docs/ │ ├── DEVICE_PROFILE_GUIDE.md │ ├── ACCURACY_POLICY.md -│ └── DEPLOYMENT.md +│ ├── DEPLOYMENT.md +│ └── RELEASING.md ├── .github/ │ └── workflows/ ├── AGENTS.md @@ -1024,16 +1034,15 @@ Try exporting or resizing it below 12,000 pixels on the longest side. --- -## 13. 分析與監察 +## 13. 監察與私隱邊界 -MVP 可使用: +現行版本只使用: -- Cloudflare Web Analytics; -- Cloudflare Pages deployment logs; -- 前端 Error Boundary; -- 可選的匿名錯誤記錄。 +- GitHub Actions 檢查記錄; +- Workers Builds 及 deployment 記錄; +- 前端 Error Boundary 及瀏覽器本機 console。 -不能收集: +現行版本沒有 Web Analytics、圖片分析、遠端錯誤記錄或產品事件遙測。不得收集: - 用戶圖片; - 圖片內容; @@ -1041,15 +1050,7 @@ MVP 可使用: - Canvas pixel data; - 裝置本地檔案路徑。 -可收集: - -- 頁面瀏覽; -- 裝置 Profile 選擇次數; -- Export format; -- 是否匯出成功; -- 匿名瀏覽器錯誤類型。 - -所有分析事件應集中封裝,方便完全關閉。 +日後如建議加入分析,必須先有清楚的資料清單、保留期限及私隱審閱;任何分析不得接觸圖片 bytes、檔名、Canvas 像素或本機路徑。 --- @@ -1091,9 +1092,9 @@ MVP 可使用: 7. 驗證下載檔案尺寸; 8. 驗證重新整理後圖片不被保存。 -### 14.4 視覺回歸 +### 14.4 視覺檢查 -對以下內容保存 Screenshot baseline: +Repository 保存桌面及流動版參考截圖;以下狀態目前以 Playwright 版面斷言及人工檢查為主,尚未建立自動 screenshot baseline: - Desktop workspace; - Mobile workspace; @@ -1120,31 +1121,29 @@ MVP 可使用: --- -## 15. Cloudflare 部署 +## 15. Cloudflare Workers 部署 ### 15.1 MVP -使用 Cloudflare Pages: +使用 Workers Static Assets 及 Workers Builds: ```text Repository: wallpect Build command: npm run build -Output directory: dist +Deploy command: npx wrangler deploy +Non-production deploy command: npx wrangler versions upload +Assets directory: dist Production branch: main ``` -Custom domains: +流量與預覽: ```text -wallpect.k-y.cc -dev.wallpect.k-y.cc +main → wallpect.k-y.cc/* Workers route +non-production branch → Workers version preview URL ``` -建議: - -- `main` → `wallpect.k-y.cc` -- Pull Request/Preview deployment → Cloudflare Pages preview URL -- `develop` 分支如需要 → `dev.wallpect.k-y.cc` +原有 Pages project 只保留為回退路徑;日常正式部署、分支預覽及版本回退均以 Workers 為準。完整設定及驗證程序見 `docs/DEPLOYMENT.md` 與 `docs/RELEASING.md`。 ### 15.2 Headers @@ -1158,12 +1157,11 @@ Permissions-Policy Cross-Origin-Opener-Policy where compatible ``` -需要確認 Canvas、Web Worker、Blob URL 和下載功能不被 CSP 阻擋。 +需要確認 Canvas、Blob URL、service worker 和下載功能不被 CSP 阻擋。 ### 15.3 快取 - 靜態 JS/CSS 使用 fingerprint 長期快取; -- `device-profiles.json` 使用版本號或 Hash; - HTML 使用較短快取; - 不快取任何用戶圖片,因為圖片不離開瀏覽器。 @@ -1180,18 +1178,17 @@ Cross-Origin-Opener-Policy where compatible - Prettier; - Vitest; - Playwright; -- Cloudflare Pages build; +- Workers Static Assets build; - README; - AGENTS.md; - 基本 CI。 驗收: -- `npm install` +- `npm ci` - `npm run dev` -- `npm run build` -- `npm test` -- `npm run lint` +- `npm run check` +- `npm run worker:check` 全部正常。 @@ -1279,10 +1276,10 @@ Cross-Origin-Opener-Policy where compatible - Keyboard; - Focus states; - Error handling; -- Cloudflare deployment; +- Workers Builds deployment; - `wallpect.k-y.cc`; -- Privacy page; -- Accuracy page。 +- 內置 Privacy 說明; +- Accuracy policy 及內置準確度說明。 驗收: @@ -1300,7 +1297,7 @@ Cross-Origin-Opener-Policy where compatible - Home Screen overlay; - 自訂裝置; - Preset; -- PWA; +- 可安裝 PWA; - Smart focal point; - AI background extension; - Developer API。 @@ -1324,7 +1321,7 @@ Cross-Origin-Opener-Policy where compatible - Cutout; - 單一裝置精確尺寸輸出; - 下載後直接使用提示; -- Cloudflare Pages; +- Cloudflare Workers Static Assets; - 私隱說明; - Accuracy 說明。 @@ -1423,7 +1420,7 @@ Codex 必須: 11. Implement exact-resolution export 12. Add responsive UI 13. Add tests -14. Add Cloudflare deployment +14. Add Cloudflare Workers deployment 15. Update documentation 16. Run full validation ``` @@ -1472,7 +1469,7 @@ Codex 不應: 13. Implement exact-resolution image export without device frame 14. Add responsive layout and mobile controls 15. Add privacy and accuracy documentation -16. Configure Cloudflare Pages deployment +16. Configure Cloudflare Workers Builds deployment 17. Add end-to-end upload-to-export test ``` diff --git a/package-lock.json b/package-lock.json index 7f637c1..cfedacb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "wallpect", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "wallpect", - "version": "0.1.0", + "version": "0.2.0", "license": "MIT", "dependencies": { "lucide-react": "1.24.0", diff --git a/package.json b/package.json index 98b68e2..b81c67d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wallpect", "private": true, - "version": "0.1.0", + "version": "0.2.0", "description": "Privacy-first wallpaper preview and fitting tool for Apple devices.", "license": "MIT", "homepage": "https://wallpect.k-y.cc",