|
| 1 | +# App Store Screenshot Capture — HOWTO |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +Screenshots for the NostrKey Safari extension across macOS, iPhone, and iPad. All screenshots show the extension running in Safari on the test page at **nostrkey.com/test**. |
| 6 | + |
| 7 | +## Accepted Dimensions |
| 8 | + |
| 9 | +### Mac App Store |
| 10 | +| Size | Method | |
| 11 | +|------|--------| |
| 12 | +| **2560 x 1600** | Safari window at 1280x800 on Retina display | |
| 13 | +| 2880 x 1800 | Safari window at 1440x900 on Retina display | |
| 14 | +| 1280 x 800 | Non-Retina (not recommended) | |
| 15 | +| 1440 x 900 | Non-Retina (not recommended) | |
| 16 | + |
| 17 | +### iPhone (6.7" display) |
| 18 | +| Size | Simulator | |
| 19 | +|------|-----------| |
| 20 | +| **1284 x 2778** | **iPhone 13 Pro Max** | |
| 21 | +| 1242 x 2688 | iPhone 11 Pro Max (6.5") | |
| 22 | + |
| 23 | +### iPad (12.9" / 13" display) |
| 24 | +| Size | Simulator | |
| 25 | +|------|-----------| |
| 26 | +| **2048 x 2732** | **iPad Pro 12.9-inch (6th generation)** | |
| 27 | +| 2064 x 2752 | iPad Pro 13-inch (M4) | |
| 28 | + |
| 29 | +### WRONG Simulators (rejected by App Store Connect) |
| 30 | +- **iPhone 17 Pro Max** → 1320 x 2868 (not accepted) |
| 31 | +- **iPhone 14 Pro Max** → 1290 x 2796 (not accepted) |
| 32 | + |
| 33 | +## Screenshot Set (8 per platform) |
| 34 | + |
| 35 | +| File | Screen | Notes | |
| 36 | +|------|--------|-------| |
| 37 | +| `locked-vault.png` | Extension locked, password prompt | Extension popup open | |
| 38 | +| `unlocked-vault.png` | Profile view with QR code | Shows npub + QR | |
| 39 | +| `vault.png` | Encrypted Vault / API Keys / Nostr Keys | Vault tab | |
| 40 | +| `apps.png` | App permissions | Apps tab, "No permissions granted yet" | |
| 41 | +| `relays.png` | Relay connections list | Relays tab | |
| 42 | +| `settings.png` | Security, Sync, Advanced | Settings tab | |
| 43 | +| `signing-prompt.png` | Permission Request dialog | "nostrkey.com wants to: Sign an event" | |
| 44 | +| `signed-event.png` | Signed event JSON result | Shows OK badge + full JSON | |
| 45 | + |
| 46 | +## Directory Structure |
| 47 | + |
| 48 | +``` |
| 49 | +dev/qa/screenshots/ |
| 50 | +├── HOWTO.md ← this file |
| 51 | +├── macos/ ← 2560x1600 (8 screenshots) |
| 52 | +├── iphone/ ← 1284x2778 (8 screenshots) |
| 53 | +└── ipad/ ← 2048x2732 (8 screenshots) |
| 54 | +``` |
| 55 | + |
| 56 | +## Prerequisites |
| 57 | + |
| 58 | +- Xcode with iOS simulators installed |
| 59 | +- NostrKey Xcode project at `dev/apple/NostrKey.xcodeproj` |
| 60 | +- Test page deployed to nostrkey.com/test (GitHub Pages) |
| 61 | +- Safari extension enabled on each device/simulator |
| 62 | + |
| 63 | +## Procedure — macOS |
| 64 | + |
| 65 | +### 1. Build and launch the macOS Safari extension |
| 66 | +```bash |
| 67 | +xcodebuild -project dev/apple/NostrKey.xcodeproj \ |
| 68 | + -scheme "NostrKey (macOS)" -configuration Debug build |
| 69 | + |
| 70 | +open ~/Library/Developer/Xcode/DerivedData/NostrKey-*/Build/Products/Debug/NostrKey.app |
| 71 | +``` |
| 72 | + |
| 73 | +### 2. Enable in Safari |
| 74 | +- Safari → Settings → Extensions → enable NostrKey |
| 75 | +- Set permissions to allow on nostrkey.com |
| 76 | + |
| 77 | +### 3. Resize Safari window |
| 78 | +```bash |
| 79 | +osascript -e 'tell application "Safari" to set bounds of front window to {0, 0, 1280, 800}' |
| 80 | +``` |
| 81 | +Note: `window.resizeTo()` is blocked by Safari. Must use AppleScript. |
| 82 | + |
| 83 | +### 4. Navigate to test page |
| 84 | +```bash |
| 85 | +osascript -e 'tell application "Safari" to set URL of current tab of front window to "https://nostrkey.com/test"' |
| 86 | +``` |
| 87 | + |
| 88 | +### 5. Capture each screen |
| 89 | +Open the extension popup, set up the desired view, then: |
| 90 | +```bash |
| 91 | +# Full-screen capture (popup stays open since no interaction needed) |
| 92 | +screencapture dev/qa/screenshots/macos/locked-vault.png |
| 93 | + |
| 94 | +# Crop to Safari window (50px offset = menu bar on Retina) |
| 95 | +sips --cropOffset 50 0 --cropToHeightWidth 1600 2560 dev/qa/screenshots/macos/locked-vault.png |
| 96 | +``` |
| 97 | + |
| 98 | +To find exact Safari window position: |
| 99 | +```bash |
| 100 | +osascript -e 'tell application "Safari" to get bounds of front window' |
| 101 | +# Returns: {left, top, right, bottom} — multiply by 2 for Retina pixels |
| 102 | +``` |
| 103 | + |
| 104 | +## Procedure — iPhone |
| 105 | + |
| 106 | +### 1. Create the correct simulator (one-time) |
| 107 | +```bash |
| 108 | +# iPhone 13 Pro Max → 1284x2778 (ACCEPTED) |
| 109 | +xcrun simctl create "iPhone 13 Pro Max" \ |
| 110 | + com.apple.CoreSimulator.SimDeviceType.iPhone-13-Pro-Max \ |
| 111 | + com.apple.CoreSimulator.SimRuntime.iOS-26-2 |
| 112 | +``` |
| 113 | + |
| 114 | +### 2. Boot, build, install |
| 115 | +```bash |
| 116 | +xcrun simctl boot <DEVICE_ID> |
| 117 | + |
| 118 | +xcodebuild -project dev/apple/NostrKey.xcodeproj \ |
| 119 | + -scheme "NostrKey (iOS)" -configuration Debug \ |
| 120 | + -destination "id=<DEVICE_ID>" build |
| 121 | + |
| 122 | +xcrun simctl install <DEVICE_ID> \ |
| 123 | + ~/Library/Developer/Xcode/DerivedData/NostrKey-*/Build/Products/Debug-iphonesimulator/NostrKey.app |
| 124 | +``` |
| 125 | + |
| 126 | +### 3. Launch the app manually |
| 127 | +`xcrun simctl launch` often fails on fresh simulators. Tap the NostrKey icon on the home screen instead. This registers the extension with Safari. |
| 128 | + |
| 129 | +### 4. Enable in Safari |
| 130 | +In the simulator's Safari: |
| 131 | +- Tap the extensions icon (puzzle piece) or `AA` button |
| 132 | +- Manage Extensions → enable NostrKey |
| 133 | +- Navigate to nostrkey.com/test |
| 134 | + |
| 135 | +### 5. Capture |
| 136 | +```bash |
| 137 | +xcrun simctl io <DEVICE_ID> screenshot dev/qa/screenshots/iphone/locked-vault.png |
| 138 | +``` |
| 139 | +No cropping needed — simulator screenshots are exact device resolution. |
| 140 | + |
| 141 | +## Procedure — iPad |
| 142 | + |
| 143 | +Same as iPhone but with iPad simulator: |
| 144 | + |
| 145 | +### 1. Create simulator (one-time) |
| 146 | +```bash |
| 147 | +# iPad Pro 12.9" (6th gen) → 2048x2732 (ACCEPTED) |
| 148 | +xcrun simctl create "iPad Pro 12.9 6th" \ |
| 149 | + com.apple.CoreSimulator.SimDeviceType.iPad-Pro-12-9-inch-6th-generation-8GB \ |
| 150 | + com.apple.CoreSimulator.SimRuntime.iOS-26-2 |
| 151 | +``` |
| 152 | + |
| 153 | +### 2-5. Same as iPhone |
| 154 | +Build, install, launch manually, enable extension, capture: |
| 155 | +```bash |
| 156 | +xcrun simctl io <DEVICE_ID> screenshot dev/qa/screenshots/ipad/locked-vault.png |
| 157 | +``` |
| 158 | + |
| 159 | +## Current Simulator IDs (created 2026-03-03) |
| 160 | + |
| 161 | +| Simulator | ID | |
| 162 | +|-----------|-----| |
| 163 | +| iPhone 13 Pro Max | `1C222EE7-DC03-486E-8608-5B16310259E5` | |
| 164 | +| iPad Pro 12.9" 6th | `D80D7F11-B50B-4169-81C4-3026C8538765` | |
| 165 | + |
| 166 | +To list all simulators: |
| 167 | +```bash |
| 168 | +xcrun simctl list devices available | grep -i "iphone\|ipad" |
| 169 | +``` |
| 170 | + |
| 171 | +## Tips |
| 172 | + |
| 173 | +- **Extension not detected?** Refresh the page. Safari sometimes delays extension injection. |
| 174 | +- **`file://` URLs don't work** — Safari extensions won't inject on local files. Use nostrkey.com/test or a local HTTP server (`python3 -m http.server 8080` from `docs/`). |
| 175 | +- **Signing prompt is time-sensitive** — tap "Sign Test Event" on the test page and capture quickly before the prompt auto-dismisses. |
| 176 | +- **Clean up simulators** when done: `xcrun simctl delete <DEVICE_ID>` |
| 177 | +- **Simulator master password:** `123456789` |
0 commit comments