Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
16 changes: 10 additions & 6 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

涉及完整編輯流程、響應式版面或瀏覽器行為時,亦應執行:
Expand All @@ -35,6 +35,8 @@ npm run build
npm run test:e2e
```

部署或發布變更亦應按照[發布指南](docs/RELEASING.md),先驗證非 production branch 的 Workers 預覽版本,再合併至 `main`。

### Pull request 清單

- 清楚說明問題、處理方式及用戶影響。
Expand Down Expand Up @@ -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:
Expand All @@ -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.
Expand Down
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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
Expand Down Expand Up @@ -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:
Expand All @@ -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 |
Expand All @@ -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)
Expand Down
18 changes: 14 additions & 4 deletions README.zh-Hant.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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 渲染計算
Expand Down Expand Up @@ -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:
Expand All @@ -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)。

## 架構

| 路徑 | 職責 |
Expand All @@ -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)
Expand Down
12 changes: 8 additions & 4 deletions TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
14 changes: 14 additions & 0 deletions docs/DEPLOYMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -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。
Expand Down Expand Up @@ -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.
Expand Down
111 changes: 111 additions & 0 deletions docs/RELEASING.md
Original file line number Diff line number Diff line change
@@ -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://<preview-url> 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<version>` tag 及 GitHub Release,並將該版本標示為 latest。
6. Release notes 應概述用戶可見變更、部署變更、私隱邊界及已知限制,不應包含憑證、內部原因或私人資料。

### 5. 回退

若新版本有問題,優先以 Cloudflare Dashboard 的 Worker → Deployments 選擇上一個穩定版本,或使用 `wrangler rollback <version-id>`。回退會建立一個新的 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://<preview-url> 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<version>` 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 <version-id>`. 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.
Loading
Loading