| ... | ... | @@ -1,12 +1,17 @@ |
| 1 | 1 | #!/usr/bin/env node |
| 2 | 2 | |
| 3 | | // Renders the Android adaptive-icon layers from the Icon Composer SVG sources. |
| 3 | // Renders the Android launcher and splash artwork from the Icon Composer SVG sources. |
| 4 | 4 | // |
| 5 | 5 | // Icon Composer exports already contain a rounded-square silhouette, and Android masks |
| 6 | 6 | // the central 72dp of a 108dp adaptive canvas, so exporting them as a foreground produces |
| 7 | 7 | // a double-framed icon with the letters cropped by the mask. Instead, each variant gets a |
| 8 | 8 | // full-bleed background layer (the artwork behind the wordmark) and a shared transparent |
| 9 | 9 | // foreground that keeps the wordmark inside the safe zone. |
| 10 | // |
| 11 | // The Android 12+ splash screen masks its icon to a circle covering the central two thirds |
| 12 | // of a 288dp canvas, which is the same proportion the launcher crops. Composing the two |
| 13 | // adaptive layers into one 288dp image therefore makes the splash frame the wordmark |
| 14 | // exactly like the launcher icon does. |
| 10 | 15 | |
| 11 | 16 | import * as NodeRuntime from "@effect/platform-node/NodeRuntime"; |
| 12 | 17 | import * as NodeServices from "@effect/platform-node/NodeServices"; |
| ... | ... | @@ -19,8 +24,10 @@ import sharp from "sharp"; |
| 19 | 24 | |
| 20 | 25 | type IconVariant = "dev" | "nightly" | "prod"; |
| 21 | 26 | |
| 22 | | // 108dp at xxxhdpi. Expo's prebuild derives every density bucket from this. |
| 23 | | const CANVAS = 432; |
| 27 | // 108dp at xxxhdpi. Expo's prebuild derives every launcher density bucket from this. |
| 28 | const ADAPTIVE_CANVAS = 432; |
| 29 | // 288dp at xxxhdpi: the full Android 12+ splash canvas, so the icon needs no upscaling. |
| 30 | const SPLASH_CANVAS = 1152; |
| 24 | 31 | // Icon Composer's layer sources use a 128pt viewBox; the wordmark path spans this box. |
| 25 | 32 | const TEXT = { x: 15.53, y: 37, width: 94.5, height: 57 }; |
| 26 | 33 | // Wordmark width as a fraction of the 108dp canvas. The visible area is 72dp (66dp |
| ... | ... | @@ -31,21 +38,23 @@ const WORDMARK_FRACTION = 0.48; |
| 31 | 38 | const COMPOSER_CANVAS_PT = 1024; |
| 32 | 39 | const SVG_DENSITY = 300; |
| 33 | 40 | const OUTPUT_DIRECTORY = "apps/mobile/assets"; |
| 41 | // Production has no background artwork, so its splash composes onto the adaptive color. |
| 42 | const PRODUCTION_BACKGROUND_COLOR = "#000000"; |
| 34 | 43 | |
| 35 | 44 | export class AndroidIconRenderError extends Schema.TaggedErrorClass<AndroidIconRenderError>()( |
| 36 | 45 | "AndroidIconRenderError", |
| 37 | 46 | { layer: Schema.String, cause: Schema.Defect() }, |
| 38 | 47 | ) {} |
| 39 | 48 | |
| 40 | | const wordmarkTransform = () => { |
| 41 | | const scale = (CANVAS * WORDMARK_FRACTION) / TEXT.width; |
| 42 | | const tx = (CANVAS - TEXT.width * scale) / 2 - TEXT.x * scale; |
| 43 | | const ty = (CANVAS - TEXT.height * scale) / 2 - TEXT.y * scale; |
| 49 | const wordmarkTransform = (size: number) => { |
| 50 | const scale = (size * WORDMARK_FRACTION) / TEXT.width; |
| 51 | const tx = (size - TEXT.width * scale) / 2 - TEXT.x * scale; |
| 52 | const ty = (size - TEXT.height * scale) / 2 - TEXT.y * scale; |
| 44 | 53 | return `translate(${tx.toFixed(3)} ${ty.toFixed(3)}) scale(${scale.toFixed(4)})`; |
| 45 | 54 | }; |
| 46 | 55 | |
| 47 | | const canvasSvg = (inner: string) => |
| 48 | | `<svg xmlns="http://www.w3.org/2000/svg" width="${CANVAS}" height="${CANVAS}" viewBox="0 0 ${CANVAS} ${CANVAS}" fill="none">${inner}</svg>`; |
| 56 | const canvasSvg = (size: number, inner: string) => |
| 57 | `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" fill="none">${inner}</svg>`; |
| 49 | 58 | |
| 50 | 59 | // The layer sources clip to a 10pt rounded rectangle for the iOS silhouette. Android |
| 51 | 60 | // applies its own mask, so the layer must bleed to the canvas edge. |
| ... | ... | @@ -73,6 +82,15 @@ const composite = ( |
| 73 | 82 | catch: (cause) => new AndroidIconRenderError({ layer, cause }), |
| 74 | 83 | }); |
| 75 | 84 | |
| 85 | const solidCanvas = (layer: string, size: number, background: string) => |
| 86 | Effect.tryPromise({ |
| 87 | try: () => |
| 88 | sharp({ create: { width: size, height: size, channels: 4, background } }) |
| 89 | .png() |
| 90 | .toBuffer(), |
| 91 | catch: (cause) => new AndroidIconRenderError({ layer, cause }), |
| 92 | }); |
| 93 | |
| 76 | 94 | const readLayerSource = Effect.fn("androidIcons.readLayerSource")(function* ( |
| 77 | 95 | repositoryRoot: string, |
| 78 | 96 | variant: IconVariant, |
| ... | ... | @@ -87,29 +105,30 @@ const readLayerSource = Effect.fn("androidIcons.readLayerSource")(function* ( |
| 87 | 105 | |
| 88 | 106 | const renderForeground = Effect.fn("androidIcons.renderForeground")(function* ( |
| 89 | 107 | repositoryRoot: string, |
| 108 | size: number, |
| 90 | 109 | ) { |
| 91 | 110 | const text = yield* readLayerSource(repositoryRoot, "prod", "text.svg"); |
| 92 | 111 | const paths = text.match(/<path[^>]*\/>/g) ?? []; |
| 93 | 112 | return yield* rasterize( |
| 94 | 113 | "foreground", |
| 95 | | canvasSvg(`<g transform="${wordmarkTransform()}">${paths.join("")}</g>`), |
| 96 | | CANVAS, |
| 114 | canvasSvg(size, `<g transform="${wordmarkTransform(size)}">${paths.join("")}</g>`), |
| 115 | size, |
| 97 | 116 | ); |
| 98 | 117 | }); |
| 99 | 118 | |
| 100 | 119 | const renderDevelopmentBackground = Effect.fn("androidIcons.renderDevelopmentBackground")( |
| 101 | | function* (repositoryRoot: string) { |
| 120 | function* (repositoryRoot: string, size: number) { |
| 102 | 121 | // The annotation layer shares the wordmark's coordinate space, so it is scaled and |
| 103 | 122 | // centered the same way to keep the dimension lines around the letters. |
| 104 | 123 | const annotations = yield* readLayerSource(repositoryRoot, "dev", "annotations.svg"); |
| 105 | 124 | const defs = annotations.match(/<defs>[\s\S]*?<\/defs>/)?.[0] ?? ""; |
| 106 | 125 | const body = annotations.replace(/^[\s\S]*?<\/defs>/, "").replace(/<\/svg>\s*$/, ""); |
| 107 | 126 | const paper = yield* readLayerSource(repositoryRoot, "dev", "background.svg"); |
| 108 | | const background = yield* rasterize("dev-background", fullBleed(paper), CANVAS); |
| 127 | const background = yield* rasterize("dev-background", fullBleed(paper), size); |
| 109 | 128 | const overlay = yield* rasterize( |
| 110 | 129 | "dev-annotations", |
| 111 | | canvasSvg(`${defs}<g transform="${wordmarkTransform()}">${body}</g>`), |
| 112 | | CANVAS, |
| 130 | canvasSvg(size, `${defs}<g transform="${wordmarkTransform(size)}">${body}</g>`), |
| 131 | size, |
| 113 | 132 | ); |
| 114 | 133 | return yield* composite("dev-background", background, [{ input: overlay }]); |
| 115 | 134 | }, |
| ... | ... | @@ -117,6 +136,7 @@ const renderDevelopmentBackground = Effect.fn("androidIcons.renderDevelopmentBac |
| 117 | 136 | |
| 118 | 137 | const renderNightlyBackground = Effect.fn("androidIcons.renderNightlyBackground")(function* ( |
| 119 | 138 | repositoryRoot: string, |
| 139 | size: number, |
| 120 | 140 | ) { |
| 121 | 141 | // Positions mirror assets/nightly/app-icon.icon/icon.json. The SVG blur filter is |
| 122 | 142 | // dropped because Icon Composer ignores it and it smears at this raster size. |
| ... | ... | @@ -128,7 +148,7 @@ const renderNightlyBackground = Effect.fn("androidIcons.renderNightlyBackground" |
| 128 | 148 | translation: [387.9605131881942, -134.30064713259117], |
| 129 | 149 | }, |
| 130 | 150 | ] as const; |
| 131 | | const k = CANVAS / COMPOSER_CANVAS_PT; |
| 151 | const k = size / COMPOSER_CANVAS_PT; |
| 132 | 152 | const overlays = yield* Effect.forEach(clouds, (cloud) => |
| 133 | 153 | Effect.gen(function* () { |
| 134 | 154 | const width = Math.round(64 * cloud.scale * k); |
| ... | ... | @@ -144,8 +164,8 @@ const renderNightlyBackground = Effect.fn("androidIcons.renderNightlyBackground" |
| 144 | 164 | ); |
| 145 | 165 | const x0 = Math.max(0, left); |
| 146 | 166 | const y0 = Math.max(0, top); |
| 147 | | const x1 = Math.min(CANVAS, left + width); |
| 148 | | const y1 = Math.min(CANVAS, top + height); |
| 167 | const x1 = Math.min(size, left + width); |
| 168 | const y1 = Math.min(size, top + height); |
| 149 | 169 | const clipped = yield* Effect.tryPromise({ |
| 150 | 170 | try: () => |
| 151 | 171 | sharp(png) |
| ... | ... | @@ -158,18 +178,51 @@ const renderNightlyBackground = Effect.fn("androidIcons.renderNightlyBackground" |
| 158 | 178 | }), |
| 159 | 179 | ); |
| 160 | 180 | const sky = yield* readLayerSource(repositoryRoot, "nightly", "background.svg"); |
| 161 | | const background = yield* rasterize("nightly-background", fullBleed(sky), CANVAS); |
| 181 | const background = yield* rasterize("nightly-background", fullBleed(sky), size); |
| 162 | 182 | return yield* composite("nightly-background", background, overlays); |
| 163 | 183 | }); |
| 164 | 184 | |
| 185 | const renderBackground = Effect.fn("androidIcons.renderBackground")(function* ( |
| 186 | repositoryRoot: string, |
| 187 | variant: IconVariant, |
| 188 | size: number, |
| 189 | ) { |
| 190 | switch (variant) { |
| 191 | case "dev": |
| 192 | return yield* renderDevelopmentBackground(repositoryRoot, size); |
| 193 | case "nightly": |
| 194 | return yield* renderNightlyBackground(repositoryRoot, size); |
| 195 | case "prod": |
| 196 | return yield* solidCanvas("prod-background", size, PRODUCTION_BACKGROUND_COLOR); |
| 197 | } |
| 198 | }); |
| 199 | |
| 200 | const renderSplashIcon = Effect.fn("androidIcons.renderSplashIcon")(function* ( |
| 201 | repositoryRoot: string, |
| 202 | variant: IconVariant, |
| 203 | ) { |
| 204 | const background = yield* renderBackground(repositoryRoot, variant, SPLASH_CANVAS); |
| 205 | const foreground = yield* renderForeground(repositoryRoot, SPLASH_CANVAS); |
| 206 | return yield* composite(`${variant}-splash`, background, [{ input: foreground }]); |
| 207 | }); |
| 208 | |
| 165 | 209 | const exportAndroidIcons = Effect.gen(function* () { |
| 166 | 210 | const fs = yield* FileSystem.FileSystem; |
| 167 | 211 | const path = yield* Path.Path; |
| 168 | 212 | const repositoryRoot = path.resolve(import.meta.dirname, ".."); |
| 169 | 213 | const outputs = [ |
| 170 | | ["android-icon-foreground.png", yield* renderForeground(repositoryRoot)], |
| 171 | | ["android-icon-background-dev.png", yield* renderDevelopmentBackground(repositoryRoot)], |
| 172 | | ["android-icon-background-nightly.png", yield* renderNightlyBackground(repositoryRoot)], |
| 214 | ["android-icon-foreground.png", yield* renderForeground(repositoryRoot, ADAPTIVE_CANVAS)], |
| 215 | [ |
| 216 | "android-icon-background-dev.png", |
| 217 | yield* renderDevelopmentBackground(repositoryRoot, ADAPTIVE_CANVAS), |
| 218 | ], |
| 219 | [ |
| 220 | "android-icon-background-nightly.png", |
| 221 | yield* renderNightlyBackground(repositoryRoot, ADAPTIVE_CANVAS), |
| 222 | ], |
| 223 | ["android-splash-icon-dev.png", yield* renderSplashIcon(repositoryRoot, "dev")], |
| 224 | ["android-splash-icon-nightly.png", yield* renderSplashIcon(repositoryRoot, "nightly")], |
| 225 | ["android-splash-icon-prod.png", yield* renderSplashIcon(repositoryRoot, "prod")], |
| 173 | 226 | ] as const; |
| 174 | 227 | for (const [name, contents] of outputs) { |
| 175 | 228 | yield* fs.writeFile(path.join(repositoryRoot, OUTPUT_DIRECTORY, name), contents); |
Julius Marminge <julius0216@outlook.com> 2026-09-07 18:20:46-07:00
GitHub <noreply@github.com> 2026-09-07 18:20:46-07:00