From 70f08db2a6cedffd340216dc18629b541baadb94 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 31 Jul 2026 15:26:34 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20more=20=F0=9F=AA=BF=F0=9F=AA=BF?=
 =?UTF-8?q?=F0=9F=AA=BF=20(#1925)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/admin/AmaImageGenerator.vue    |  43 ++++-
 app/components/admin/AmaVideoGenerator.vue    |   9 +-
 .../admin/ama/[rkey]/publish/bluesky.post.ts  |   3 +-
 .../admin/ama/[rkey]/publish/linkedin.post.ts |   3 +-
 .../admin/ama/[rkey]/publish/mastodon.post.ts |   3 +-
 shared/cms/backgrounds.ts                     | 159 ++++++++++++++++++
 test/unit/bundle.spec.ts                      |   2 +-
 7 files changed, 209 insertions(+), 13 deletions(-)

diff --git a/app/components/admin/AmaImageGenerator.vue b/app/components/admin/AmaImageGenerator.vue
index 7c435df1..39f05a6b 100644
--- a/app/components/admin/AmaImageGenerator.vue
+++ b/app/components/admin/AmaImageGenerator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { domToBlob } from 'modern-screenshot'
-import { BACKGROUND_STYLES, DEFAULT_BACKGROUND_STYLE_ID, getBackgroundStyle } from '#shared/cms/backgrounds'
+import { BACKGROUND_STYLES, CUSTOM_EMOJI_PREFIX, DEFAULT_BACKGROUND_STYLE_ID, customEmojiBackgroundId, getBackgroundStyle, getForegroundStyle, getImageAltText, parseEmojiList } from '#shared/cms/backgrounds'
 import { getHumanRelativeDate } from '#shared/cms/date-formatting'
 import { ref } from 'vue'
 
@@ -58,6 +58,26 @@ async function compressUnderLimit (source: Blob, width: number, height: number,
 const backgroundStyleId = ref(props.initialBackgroundStyleId ?? DEFAULT_BACKGROUND_STYLE_ID)
 const backgroundStyle = computed(() => getBackgroundStyle(backgroundStyleId.value))
 
+const isCustomEmoji = ref(backgroundStyleId.value.startsWith(CUSTOM_EMOJI_PREFIX))
+const customEmoji = ref(isCustomEmoji.value ? backgroundStyleId.value.slice(CUSTOM_EMOJI_PREFIX.length) : '🪿🦢🥚')
+
+// The select and the emoji input feed a single stored id: presets keep their
+// own id, custom emoji serialise into `emoji:…` so no extra field is needed.
+const backgroundSelection = computed({
+  get: () => isCustomEmoji.value ? CUSTOM_EMOJI_PREFIX : backgroundStyleId.value,
+  set: (value: string) => {
+    isCustomEmoji.value = value === CUSTOM_EMOJI_PREFIX
+    backgroundStyleId.value = isCustomEmoji.value ? customEmojiBackgroundId(customEmoji.value) : value
+  },
+})
+
+watch(customEmoji, value => {
+  if (!isCustomEmoji.value) return
+  if (parseEmojiList(value).length) backgroundStyleId.value = customEmojiBackgroundId(value)
+})
+const previewAltText = computed(() => getImageAltText(props.question, backgroundStyleId.value))
+const foregroundStyle = computed(() => getForegroundStyle(backgroundStyle.value))
+
 const relativeDate = computed(() => getHumanRelativeDate(props.createdAt))
 const formattedText = computed(() => props.question.trim())
 const hasContent = computed(() => Boolean(formattedText.value))
@@ -213,7 +233,7 @@ function clear () {
       <label class="text-xs text-muted flex items-center gap-2">
         Background
         <select
-          v-model="backgroundStyleId"
+          v-model="backgroundSelection"
           class="bg-accent px-2 py-1"
         >
           <option
@@ -223,8 +243,23 @@ function clear () {
           >
             {{ bg.title }}
           </option>
+          <option :value="CUSTOM_EMOJI_PREFIX">
+            Custom emoji…
+          </option>
         </select>
       </label>
+      <label
+        v-if="isCustomEmoji"
+        class="text-xs text-muted flex items-center gap-2"
+      >
+        Emoji
+        <input
+          v-model="customEmoji"
+          type="text"
+          class="bg-accent px-2 py-1 w-32"
+          placeholder="🪿🦢🥚"
+        >
+      </label>
       <div class="ml-auto flex gap-2">
         <button
           type="button"
@@ -394,7 +429,7 @@ function clear () {
 
             <div
               :style="{
-                color: '#ffffff',
+                ...foregroundStyle,
                 fontFamily: '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
                 fontSize: '24px',
                 marginRight: '1rem',
@@ -440,7 +475,7 @@ function clear () {
         </figcaption>
         <img
           :src="generatedUrl"
-          alt="Generated AMA image preview"
+          :alt="previewAltText"
           class="block w-full h-auto"
         >
       </figure>
diff --git a/app/components/admin/AmaVideoGenerator.vue b/app/components/admin/AmaVideoGenerator.vue
index 29486588..c13593d9 100644
--- a/app/components/admin/AmaVideoGenerator.vue
+++ b/app/components/admin/AmaVideoGenerator.vue
@@ -7,7 +7,7 @@ import {
   stopAnimations,
   type GSAPTimeline,
 } from '#shared/cms/video-gsap-animations'
-import { getBackgroundStyle } from '#shared/cms/backgrounds'
+import { getBackgroundStyle, getForegroundStyle } from '#shared/cms/backgrounds'
 
 interface PendingVideo {
   blob: Blob
@@ -28,6 +28,7 @@ const emit = defineEmits<{
 }>()
 
 const backgroundStyle = computed(() => getBackgroundStyle(props.backgroundStyleId))
+const foregroundStyle = computed(() => getForegroundStyle(backgroundStyle.value, 'lg'))
 
 const generating = ref(false)
 const progress = ref(0)
@@ -470,11 +471,10 @@ onMounted(() => {
         >
           <div
             :style="{
-              color: '#ffffff',
+              ...foregroundStyle,
               fontFamily: '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
               fontSize: '48px',
               fontWeight: 'bold',
-              textShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
               marginBottom: '24px',
             }"
           >
@@ -482,11 +482,10 @@ onMounted(() => {
           </div>
           <div
             :style="{
-              color: '#ffffff',
+              ...foregroundStyle,
               fontFamily: '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
               fontSize: '64px',
               fontWeight: 'bold',
-              textShadow: '0 4px 8px rgba(0, 0, 0, 0.5)',
               textDecoration: 'underline',
             }"
           >
diff --git a/server/api/admin/ama/[rkey]/publish/bluesky.post.ts b/server/api/admin/ama/[rkey]/publish/bluesky.post.ts
index 9e74de83..675ff82d 100644
--- a/server/api/admin/ama/[rkey]/publish/bluesky.post.ts
+++ b/server/api/admin/ama/[rkey]/publish/bluesky.post.ts
@@ -1,6 +1,7 @@
 import { ensureNotAlreadyPublished, mergePublishedLink, prepareAmaImage } from '../../../../../utils/admin/ama-record'
 import { blueskyThread, buildEntityLookup } from '../../../../../utils/admin/ama-resolve'
 import { publishBlueskyThread } from '../../../../../utils/admin/ama-publish'
+import { getImageAltText } from '#shared/cms/backgrounds'
 import type { AmaUpdate } from '../../../../../utils/admin/ama-record'
 import type { AmaPostInput } from '../../../../../utils/admin/ama-resolve'
 
@@ -22,7 +23,7 @@ export default defineEventHandler(async event => {
 
   const entities = await buildEntityLookup(event)
   const image = await prepareAmaImage(event, rkey, body)
-  const { url } = await publishBlueskyThread(event, blueskyThread(body.posts, entities), image, body.question)
+  const { url } = await publishBlueskyThread(event, blueskyThread(body.posts, entities), image, getImageAltText(body.question, body.backgroundStyle ?? undefined))
 
   await mergePublishedLink(event, rkey, 'bluesky', url, body)
   return { success: true, url }
diff --git a/server/api/admin/ama/[rkey]/publish/linkedin.post.ts b/server/api/admin/ama/[rkey]/publish/linkedin.post.ts
index c9c66744..9cfe2c48 100644
--- a/server/api/admin/ama/[rkey]/publish/linkedin.post.ts
+++ b/server/api/admin/ama/[rkey]/publish/linkedin.post.ts
@@ -1,6 +1,7 @@
 import { ensureNotAlreadyPublished, mergePublishedLink, prepareAmaImage } from '../../../../../utils/admin/ama-record'
 import { buildEntityLookup, platformText } from '../../../../../utils/admin/ama-resolve'
 import { publishLinkedIn } from '../../../../../utils/admin/ama-publish'
+import { getImageAltText } from '#shared/cms/backgrounds'
 import type { AmaUpdate } from '../../../../../utils/admin/ama-record'
 import type { AmaPostInput } from '../../../../../utils/admin/ama-resolve'
 
@@ -24,7 +25,7 @@ export default defineEventHandler(async event => {
     event,
     platformText(body.posts, 'linkedin', entities),
     await prepareAmaImage(event, rkey, body),
-    body.question,
+    getImageAltText(body.question, body.backgroundStyle ?? undefined),
   )
   await mergePublishedLink(event, rkey, 'linkedin', url, body)
   return { success: true, url }
diff --git a/server/api/admin/ama/[rkey]/publish/mastodon.post.ts b/server/api/admin/ama/[rkey]/publish/mastodon.post.ts
index 0d7d9013..dc4f3ddf 100644
--- a/server/api/admin/ama/[rkey]/publish/mastodon.post.ts
+++ b/server/api/admin/ama/[rkey]/publish/mastodon.post.ts
@@ -1,6 +1,7 @@
 import { ensureNotAlreadyPublished, mergePublishedLink, prepareAmaImage } from '../../../../../utils/admin/ama-record'
 import { buildEntityLookup, platformText } from '../../../../../utils/admin/ama-resolve'
 import { publishMastodon } from '../../../../../utils/admin/ama-publish'
+import { getImageAltText } from '#shared/cms/backgrounds'
 import type { AmaUpdate } from '../../../../../utils/admin/ama-record'
 import type { AmaPostInput } from '../../../../../utils/admin/ama-resolve'
 
@@ -24,7 +25,7 @@ export default defineEventHandler(async event => {
     event,
     platformText(body.posts, 'mastodon', entities),
     await prepareAmaImage(event, rkey, body),
-    body.question,
+    getImageAltText(body.question, body.backgroundStyle ?? undefined),
   )
   await mergePublishedLink(event, rkey, 'mastodon', url, body)
   return { success: true, url }
diff --git a/shared/cms/backgrounds.ts b/shared/cms/backgrounds.ts
index 39746354..984007c0 100644
--- a/shared/cms/backgrounds.ts
+++ b/shared/cms/backgrounds.ts
@@ -6,15 +6,98 @@
 export interface BackgroundStyle {
   id: string
   title: string
+  /** Noun phrase describing the background, used to build image alt text. */
+  description: string
+  /** Tone of the background, which decides whether overlaid text is light or dark. */
+  tone?: 'light' | 'dark'
   style: Record<string, string | number>
 }
 
+/** Colour and shadow for text drawn directly on the background (footer, CTA). */
+export function getForegroundStyle (background: BackgroundStyle, size: 'sm' | 'lg' = 'sm'): { color: string, textShadow: string } {
+  const offset = size === 'lg' ? '0 4px 8px' : '0 2px 4px'
+  return background.tone === 'light'
+    ? { color: '#0f172a', textShadow: `${offset} rgba(255, 255, 255, 0.85)` }
+    : { color: '#ffffff', textShadow: `${offset} rgba(0, 0, 0, 0.5)` }
+}
+
 const NOISE_FILTER = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMCI+IDxmaWx0ZXIgaWQ9Im15RmlsdGVyIj4gPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii4wMDUgLjAwMSIgbnVtT2N0YXZlcz0iMiIgLz4gPGZlRGlzcGxhY2VtZW50TWFwIHhDaGFubmVsU2VsZWN0b3I9IlIiIHNjYWxlPSI1MDAiIGluPSJTb3VyY2VHcmFwaGljIiByZXN1bHQ9ImJhbmRzIiAvPiA8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMy43MSIgLz4gPGZlRGlzcGxhY2VtZW50TWFwIGluPSJiYW5kcyIgc2NhbGU9IjMyIiB4Q2hhbm5lbFNlbGVjdG9yPSJSIiAvPiA8L2ZpbHRlcj4gPC9zdmc+#myFilter")'
 
+export interface EmojiBackgroundOptions {
+  /** Emoji to scatter. Each tile picks from these at random. */
+  emojis: string[]
+  /** CSS background painted beneath the emoji layer. */
+  base: string
+  /** Size of the repeating tile, in px. */
+  tile?: number
+  /** How many emoji to place per tile. */
+  count?: number
+  /** Seed for the deterministic scatter, so a given id always renders identically. */
+  seed?: number
+  /** Min/max emoji size as a fraction of the tile. */
+  scale?: [number, number]
+  opacity?: number
+}
+
+function seededRandom (seed: number) {
+  let state = seed % 233280
+  return () => {
+    state = (state * 9301 + 49297) % 233280
+    return state / 233280
+  }
+}
+
+/**
+ * Builds a repeating SVG tile of randomly placed, sized and tilted emoji as a
+ * CSS property bag. The data URI is percent-encoded rather than base64 because
+ * `btoa` cannot handle the astral-plane codepoints emoji live in.
+ */
+export function createEmojiBackground (options: EmojiBackgroundOptions): Record<string, string> {
+  const {
+    emojis,
+    base,
+    tile = 320,
+    count = 10,
+    seed = 1,
+    scale = [0.12, 0.22],
+    opacity = 1,
+  } = options
+
+  const next = seededRandom(seed || 1)
+  const nodes: string[] = []
+
+  for (let i = 0; i < count; i++) {
+    const emoji = emojis[Math.floor(next() * emojis.length)] ?? emojis[0]!
+    const size = Math.round((scale[0] + next() * (scale[1] - scale[0])) * tile)
+    const x = Math.round(next() * tile)
+    const y = Math.round(next() * tile)
+    const rotation = Math.round((next() * 60) - 30)
+    // Draw each emoji four times, offset by ±tile, so glyphs that overhang an
+    // edge reappear on the opposite side and the tile stays seamless.
+    for (const dx of [0, x > tile / 2 ? -tile : tile]) {
+      for (const dy of [0, y > tile / 2 ? -tile : tile]) {
+        nodes.push(
+          `<text x="${x + dx}" y="${y + dy}" font-size="${size}" text-anchor="middle" dominant-baseline="central" transform="rotate(${rotation} ${x + dx} ${y + dy})">${emoji}</text>`,
+        )
+      }
+    }
+  }
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}"><g opacity="${opacity}">${nodes.join('')}</g></svg>`
+
+  return {
+    background: base,
+    backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(svg)}"), ${base}`,
+    backgroundSize: `${tile}px ${tile}px, cover`,
+    backgroundRepeat: 'repeat, no-repeat',
+  }
+}
+
 export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
   {
     id: 'noise-gradient',
     title: 'Noise gradient (default)',
+    description: 'a grainy yellow-to-fuchsia-to-blue gradient',
     style: {
       background: 'linear-gradient(yellow 5%, fuchsia, royalblue 95%)',
       filter: NOISE_FILTER,
@@ -23,6 +106,7 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
   {
     id: 'aurora',
     title: 'Aurora',
+    description: 'a teal-to-lime aurora gradient',
     style: {
       background: 'linear-gradient(135deg, #0f4c5c 0%, #14b8a6 40%, #84cc16 100%)',
     },
@@ -30,6 +114,7 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
   {
     id: 'sunset',
     title: 'Sunset',
+    description: 'an amber-to-pink sunset gradient',
     style: {
       background: 'linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #be185d 100%)',
     },
@@ -37,6 +122,7 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
   {
     id: 'mesh',
     title: 'Mesh',
+    description: 'a dark mesh gradient of indigo, pink and teal blooms',
     style: {
       background: [
         'radial-gradient(at 20% 20%, #6366f1 0px, transparent 50%)',
@@ -47,9 +133,22 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
       ].join(', '),
     },
   },
+  {
+    id: 'geese',
+    title: 'Cute geese',
+    description: 'a pastel background scattered with goose, swan and egg emoji',
+    tone: 'light',
+    style: createEmojiBackground({
+      emojis: ['🪿', '🦢', '🥚'],
+      base: 'linear-gradient(135deg, #fef3c7 0%, #bae6fd 55%, #c7d2fe 100%)',
+      seed: 42,
+      count: 12,
+    }),
+  },
   {
     id: 'solid-dark',
     title: 'Solid dark',
+    description: 'a solid dark navy background',
     style: {
       background: '#0f172a',
     },
@@ -57,6 +156,8 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
   {
     id: 'solid-light',
     title: 'Solid light',
+    description: 'a solid off-white background',
+    tone: 'light',
     style: {
       background: '#f8fafc',
     },
@@ -65,10 +166,68 @@ export const BACKGROUND_STYLES: readonly BackgroundStyle[] = [
 
 export const DEFAULT_BACKGROUND_STYLE_ID = 'noise-gradient'
 
+/** Ids of the form `emoji:🪿🦢` scatter arbitrary emoji instead of naming a preset. */
+export const CUSTOM_EMOJI_PREFIX = 'emoji:'
+
+const CUSTOM_EMOJI_BASE = 'linear-gradient(135deg, #fef3c7 0%, #bae6fd 55%, #c7d2fe 100%)'
+
+/** Splits a string into grapheme clusters, so multi-codepoint emoji survive intact. */
+export function parseEmojiList (input: string): string[] {
+  const trimmed = input.trim()
+  if (!trimmed) return []
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  return [...segmenter.segment(trimmed)].map(s => s.segment).filter(s => s.trim())
+}
+
+/**
+ * Serialises emoji into a background id. Capped at 8 emoji because the
+ * `backgroundStyle` lexicon field allows 64 bytes and emoji cost up to 4 each.
+ */
+export function customEmojiBackgroundId (emojis: string): string {
+  return `${CUSTOM_EMOJI_PREFIX}${parseEmojiList(emojis).slice(0, 8).join('')}`
+}
+
+function listToProse (items: string[]): string {
+  if (items.length <= 1) return items[0] ?? ''
+  return `${items.slice(0, -1).join(', ')} and ${items.at(-1)}`
+}
+
+function customEmojiBackground (id: string): BackgroundStyle | undefined {
+  const emojis = parseEmojiList(id.slice(CUSTOM_EMOJI_PREFIX.length))
+  if (!emojis.length) return undefined
+
+  return {
+    id,
+    title: `Custom emoji (${emojis.join('')})`,
+    description: `a pastel background scattered with ${listToProse(emojis)} emoji`,
+    tone: 'light',
+    style: createEmojiBackground({
+      emojis,
+      base: CUSTOM_EMOJI_BASE,
+      // Seeding from the emoji themselves keeps a given id rendering identically
+      // between the editor preview and any later regeneration.
+      seed: [...id].reduce((acc, ch) => acc + ch.charCodeAt(0), 0) || 1,
+      count: 12,
+    }),
+  }
+}
+
 export function getBackgroundStyle (id: string | undefined): BackgroundStyle {
+  if (id?.startsWith(CUSTOM_EMOJI_PREFIX)) {
+    const custom = customEmojiBackground(id)
+    if (custom) return custom
+  }
+
   return (
     BACKGROUND_STYLES.find(s => s.id === id)
     ?? BACKGROUND_STYLES.find(s => s.id === DEFAULT_BACKGROUND_STYLE_ID)
     ?? BACKGROUND_STYLES[0]!
   )
 }
+
+/** Alt text for a generated AMA image: the question plus a note on the background. */
+export function getImageAltText (question: string, backgroundStyleId?: string): string {
+  const trimmed = question.trim()
+  const { description } = getBackgroundStyle(backgroundStyleId)
+  return `${trimmed}${/[.!?]$/.test(trimmed) ? '' : '.'} Text on ${description}.`
+}
diff --git a/test/unit/bundle.spec.ts b/test/unit/bundle.spec.ts
index e7e89798..dc4f5990 100644
--- a/test/unit/bundle.spec.ts
+++ b/test/unit/bundle.spec.ts
@@ -76,7 +76,7 @@ describe('project sizes', () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
     expect
       .soft(roundToKilobytes(stats.server.totalBytes, 10))
-      .toMatchInlineSnapshot(`"1870k"`)
+      .toMatchInlineSnapshot(`"1880k"`)
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     const portableModules = await analyzeSizes(
-- 
2.51.2