iPhone Duo: fit the Mac list on the outer display, add Duo App Store screenshots

Author: danielehrhardt

design/appstore/duo/de-1-stream.png

@@ -10,7 +10,7 @@
 <script>
 const q=new URLSearchParams(location.search);const W=innerWidth,H=innerHeight;const ipad=q.get('kind')==='ipad';
 const t=document.getElementById('t');t.innerHTML=q.get('title');
-const head=ipad?H*.17:H*.22;t.style.fontSize=(ipad?H*.052:H*.075)+'px';t.style.marginTop=(ipad?H*.055:H*.06)+'px';
+const head=ipad?H*.17:H*.22;t.style.fontSize=(ipad?H*.052:q.get('kind')==='duo'?H*.062:H*.075)+'px';t.style.marginTop=(ipad?H*.055:H*.06)+'px';
 const sw=+q.get('sw'),sh=+q.get('sh');const availH=H-head-(ipad?H*.06:H*.07),availW=W*(ipad?.86:.84);
 let s=Math.min(availW/sw,availH/sh);const w=sw*s,h=sh*s;const bez=ipad?H*.018:H*.022;
 const d=document.getElementById('d');d.style.width=(w+bez*2)+'px';d.style.height=(h+bez*2)+'px';d.style.padding=bez+'px';d.style.marginTop=(ipad?H*.035:H*.04)+'px';

design/appstore/duo/de-2-panel.png

@@ -4,14 +4,16 @@ const titles = {
   'en-US': ['Your iPhone, now a <span>second Mac display</span>', 'Extend or mirror. <span>Wi-Fi or USB.</span>', 'Connects in <span>seconds</span>', 'Only the Macs <span>you allow</span>'],
   'de-DE': ['Dein iPhone als <span>zweiter Mac-Bildschirm</span>', 'Erweitern oder spiegeln. <span>WLAN oder USB.</span>', 'In Sekunden <span>verbunden</span>', 'Nur Macs, die <span>du erlaubst</span>'],
 };
-const sets = { pm: { w: 2868, h: 1320, files: ['pm-1-stream', 'pm-2-panel', 'pm-3-home', 'pm-4-approval'] }, ipad: { w: 2752, h: 2064, files: ['ipad-1-stream', 'ipad-2-panel', 'ipad-3-home', 'ipad-4-approval'] } };
+const sets = { pm: { w: 2868, h: 1320, files: ['pm-1-stream', 'pm-2-panel', 'pm-3-home', 'pm-4-approval'] }, ipad: { w: 2752, h: 2064, files: ['ipad-1-stream', 'ipad-2-panel', 'ipad-3-home', 'ipad-4-approval'] }, duo: { w: 2034, h: 1398, files: ['1-stream', '2-panel', '3-home', '4-approval'], localized: true } };
+const only = process.argv[2];
 const b = await chromium.launch({ executablePath: exe });
 for (const [kind, set] of Object.entries(sets)) {
+  if (only && kind !== only) continue;
   const p = await b.newPage({ viewport: { width: set.w / 2, height: set.h / 2 }, deviceScaleFactor: 2 });
   for (const [locale, list] of Object.entries(titles)) {
     for (let i = 0; i < set.files.length; i++) {
-      const src = `file://${process.cwd()}/${set.files[i]}.png`;
-      const title = kind === 'ipad' ? list[i].replace('iPhone', 'iPad') : list[i];
+      const src = `file://${process.cwd()}/${set.localized ? `${kind}/${locale.slice(0, 2)}-` : ''}${set.files[i]}.png`;
+      const title = kind === 'ipad' ? list[i].replace('iPhone', 'iPad') : kind === 'duo' ? list[i].replace('iPhone', 'iPhone Duo') : list[i];
       const url = `file://${process.cwd()}/frame.html?kind=${kind}&sw=${set.w}&sh=${set.h}&src=${encodeURIComponent(src)}&title=${encodeURIComponent(title)}`;
       await p.goto(url); await p.waitForTimeout(250);
       await p.screenshot({ path: `framed/${locale}-${kind}-${i + 1}.png` });