chore: migrate mail themes to shared framework and locked upstream inputs

tools/qa/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "gitea-mail-preview-qa",
+  "private": true,
+  "scripts": { "test": "node preview.cjs" },
+  "devDependencies": { "playwright": "1.62.1", "sharp": "0.35.5" }
+}

tools/qa/preview.cjs

@@ -0,0 +1,98 @@
+// Optional browser QA: npm install in this directory, then npm test.
+const { chromium } = require('playwright');
+const sharp = require('sharp');
+const fs = require('node:fs/promises');
+const path = require('node:path');
+const { pathToFileURL } = require('node:url');
+const root = path.resolve(__dirname, '../..');
+
+async function ready(page) {
+  await page.waitForFunction(() => document.getElementById('preview-frame').style.display === 'block' && document.getElementById('loading').style.display === 'none');
+  const frame = page.frameLocator('#preview-frame');
+  await frame.locator('body').waitFor();
+  return frame;
+}
+
+(async () => {
+  const browser = await chromium.launch({headless:true, executablePath:process.env.BROWSER_EXECUTABLE_PATH || undefined});
+  try {
+    const page = await browser.newPage({viewport:{width:1650,height:1050}});
+    const errors = [];
+    page.on('pageerror', error => errors.push(error.message));
+    await page.goto(pathToFileURL(path.join(root,'preview/index.html')).href);
+    await page.addStyleTag({content:'*{transition:none!important;animation:none!important}'});
+    await ready(page);
+    // Floating inspector is preview chrome, not part of the rendered email.
+    if (await page.locator('#panel-close').isVisible()) await page.click('#panel-close');
+    const languages = await page.locator('#sel-locale option').evaluateAll(options => options.map(o=>o.value));
+    const themes = await page.locator('#sel-theme option').evaluateAll(options => options.map(o=>o.value));
+    const types = await page.locator('#sel-template option').evaluateAll(options => options.map(o=>o.value));
+    const buttonColors = {aurora:'rgb(224, 245, 243)',bloom:'rgb(255, 255, 255)',ember:'rgb(255, 255, 255)',heritage:'rgb(255, 255, 255)',horizon:'rgb(255, 255, 255)',ink:'rgb(254, 253, 251)',mono:'rgb(0, 0, 0)',neon:'rgb(10, 10, 15)',terminal:'rgb(13, 17, 23)',terra:'rgb(255, 255, 255)'};
+    if (!languages.includes('en-US') || !languages.includes('zh-CN')) throw new Error('official languages missing');
+    for (const lang of languages) {
+      await page.selectOption('#sel-locale',lang);
+      const frame = await ready(page);
+      if (!(await frame.locator('body').textContent()).trim()) throw new Error('empty '+lang+' preview');
+    }
+    await page.selectOption('#sel-locale','pl-PL');
+    await page.selectOption('#sel-template','team_invite');
+    await ready(page);
+    await page.waitForFunction(()=>document.getElementById('locale-message')?.textContent.includes('[UPSTREAM-WARN]'));
+    await page.selectOption('#sel-locale','zh-CN');
+    await page.selectOption('#sel-locale','en-US');
+    await ready(page);
+    const screenshotDir = path.join(root,'build','screenshots');
+    await fs.mkdir(screenshotDir,{recursive:true});
+    for (const theme of themes) {
+      await page.selectOption('#sel-theme',theme);
+      await page.selectOption('#sel-template','register_notify');
+      await page.click('#btn-desk');
+      const desktop = await ready(page);
+      const cta = desktop.locator('.card-body .email-btn').first();
+      const color = await cta.evaluate(el=>getComputedStyle(el).color);
+      if (buttonColors[theme] && color!==buttonColors[theme]) throw new Error('CTA styling overridden: '+theme+' '+color);
+      const label = (await cta.textContent()).trim();
+      if (!label || /^https?:/i.test(label)) throw new Error('button displays URL: '+theme);
+      const fallback = desktop.locator('.email-link-url a').first();
+      if (await cta.getAttribute('href') !== await fallback.getAttribute('href')) throw new Error('button/fallback target mismatch: '+theme);
+      const logo = desktop.locator('img.email-logo');
+      if (await logo.count()) {
+        if (!(await logo.getAttribute('src')).startsWith('data:image/png;base64,')) throw new Error('preview logo is not generated official asset: '+theme);
+        if (!(await logo.evaluate(img=>img.complete && img.naturalWidth>0))) throw new Error('logo failed to load: '+theme);
+      }
+      // Capture the actual 600px email, not the wide preview canvas/inspector.
+      await page.waitForFunction(()=>document.getAnimations().every(a=>a.playState!=='running'));
+      const box = await desktop.locator('.email-wrap').boundingBox();
+      if (!box) throw new Error('email frame missing: '+theme);
+      const png = await page.screenshot({clip:box,animations:'disabled'});
+      const background = await desktop.locator('body').evaluate(el=>getComputedStyle(el).backgroundColor);
+      const image = await sharp(png).extend({top:16,bottom:16,left:16,right:16,background}).resize({width:600}).png({compressionLevel:9}).toBuffer();
+      await fs.writeFile(path.join(screenshotDir,theme+'.png'),image);
+      for (const type of types) {
+        await page.selectOption('#sel-template',type);
+        await page.click('#btn-mob');
+        const frame = await ready(page);
+        const overflow = await frame.locator('html').evaluate(el=>el.scrollWidth > window.innerWidth + 1);
+        if (overflow) throw new Error('mobile overflow: '+theme+'/'+type);
+      }
+    }
+    if (errors.length) throw new Error(errors.join('\n'));
+    console.log('[PASS] file:// language bundles, warning, rapid switching, '+themes.length+' theme screenshots and mobile overflow');
+    // A running dev server can be included without making static QA depend on it.
+    if (process.env.PREVIEW_DEV_URL) {
+      await page.goto(process.env.PREVIEW_DEV_URL);
+      await ready(page);
+      await page.selectOption('#sel-locale','zh-CN');
+      await ready(page);
+      console.log('[PASS] HTTP preview and language switching');
+    }
+    if (process.argv.includes('--update-gallery')) {
+      for (const theme of themes) {
+        const image=await fs.readFile(path.join(screenshotDir,theme+'.png'));
+        if (image.length>50*1024) throw new Error('gallery image exceeds 50 KiB: '+theme);
+        await fs.writeFile(path.join(root,'docs','images',theme+'.png'),image);
+      }
+      console.log('[PASS] gallery screenshots updated');
+    }
+  } finally { await browser.close(); }
+})().catch(error=>{console.error(error);process.exitCode=1;});