Showing the changes to scripts (1 of 6 files). Show all
Unified · Split
| @@ -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"; · 6 unmodified lines | ||
| 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; · 4 unmodified lines | ||
| 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 = ( · 21 unmodified lines | ||
| 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* ( · 8 unmodified lines | ||
| 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 · 1 unmodified line | ||
| 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" · 5 unmodified lines | ||
| 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" · 9 unmodified lines | ||
| 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" · 6 unmodified lines | ||
| 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); |