Publish store screenshots from the repo on each stable release (#8186)

* feat(release): publish store screenshots from the repo

Stable releases now upload the committed store renders: the App Store
review lane attaches the iPhone and iPad sets to the version it submits,
and a new Play lane replaces the phone and tablet screenshots after the
Android submit. F-Droid reads the same Android files, which now link to
the store renders instead of the website images.

The Play lane needs its own copy of the submit service-account key
(GOOGLE_PLAY_JSON_KEY in the EAS production environment) because the key
Expo stores for eas submit is not available to custom jobs, and EAS
Metadata does not handle screenshots for either store.

* fix(release): rewrite the Android screenshot links on every render

Google Play and F-Droid read numbered links to the Google renders. The
renderer now rewrites them from the panels it exported, so adding or
renaming a panel reaches all three stores.

(cherry picked from commit 7c88a48be4)

assets/store-screenshots/README.md

@@ -95,4 +95,8 @@ Callout crops are in native capture pixels. To find them, overlay a 100 px grid
 
 6. Copy the captures into `raw/iphone/` or `raw/ipad/` under the names `render.mjs` uses, render, and check the preview.
 
+## Publish
+
+The stable release uploads these exports to the App Store and Google Play, and F-Droid reads the Google ones from the repo. See [Store screenshots](../../docs/release.md#store-screenshots). The Android metadata holds links to the Google exports, and every render rewrites them, so commit the links with the exports.
+
 Dimensions are checked against [Apple's screenshot specifications](https://developer.apple.com/help/app-store-connect/reference/app-information/screenshot-specifications/) and [Google Play's preview asset requirements](https://support.google.com/googleplay/android-developer/answer/9866151?hl=en).

assets/store-screenshots/render.mjs

@@ -9,7 +9,7 @@
 // elsewhere point SF_FONT_DIR at a folder holding SFNS.ttf copied from a Mac.
 
 import { existsSync } from "node:fs";
-import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { mkdir, mkdtemp, rm, symlink, writeFile } from "node:fs/promises";
 import os from "node:os";
 import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
@@ -23,6 +23,7 @@ const root = path.dirname(fileURLToPath(import.meta.url));
 const repo = path.resolve(root, "../..");
 const raw = (device, name) => path.join(root, "raw", device, `${name}.png`);
 const output = path.join(root, "output");
+const androidImages = path.join(repo, "fastlane/metadata/android/en-US/images");
 
 // Native captures per device: iPhone 16 Pro Max at 3x and iPad Pro 13-inch at
 // 2x. The frame's screen radius and Dynamic Island are in capture pixels.
@@ -116,6 +117,7 @@ const STORES = {
   },
   google: {
     device: "iphone",
+    androidScreenshots: "phoneScreenshots",
     width: 1440,
     height: 2560,
     textTop: 150,
@@ -134,6 +136,7 @@ const STORES = {
   },
   "google-tablet": {
     device: "ipad",
+    androidScreenshots: "tenInchScreenshots",
     width: 1800,
     height: 3200,
     textTop: 200,
@@ -352,6 +355,18 @@ async function expectLines(view, selector, expected, label) {
   if (lines !== expected) throw new Error(`${label} wraps to ${lines} lines, expected ${expected}`);
 }
 
+// Google Play and F-Droid read their screenshots from the Android metadata,
+// which holds links to these renders. Rewriting the links on every render keeps
+// added, removed and renamed panels in step with the App Store.
+async function linkAndroidScreenshots(folder, files) {
+  const dir = path.join(androidImages, folder);
+  await rm(dir, { recursive: true, force: true });
+  await mkdir(dir, { recursive: true });
+  for (const [index, file] of files.entries()) {
+    await symlink(path.relative(dir, file), path.join(dir, `${index + 1}.png`));
+  }
+}
+
 async function renderPreview(rows) {
   const tile = 440;
   const gap = 40;
@@ -387,7 +402,9 @@ try {
   const marks = await loadAgentMarks(work);
   const rows = [];
   for (const [name, store] of Object.entries(STORES)) {
-    rows.push(await renderStore(browser, name, store, font, marks, work));
+    const files = await renderStore(browser, name, store, font, marks, work);
+    if (store.androidScreenshots) await linkAndroidScreenshots(store.androidScreenshots, files);
+    rows.push(files);
   }
   await renderPreview(rows);
 } finally {