app-icon-badge-next 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +264 -0
- package/app.plugin.js +1 -0
- package/dist/app.plugin.js +268 -0
- package/dist/assets/banner-overlay-adaptive.png +0 -0
- package/dist/assets/banner-overlay.png +0 -0
- package/dist/assets/fonts/open-sans-128-black.fnt +297 -0
- package/dist/assets/fonts/open-sans-128-black.png +0 -0
- package/dist/assets/fonts/open-sans-128-white.fnt +297 -0
- package/dist/assets/fonts/open-sans-128-white.png +0 -0
- package/dist/assets/fonts/open-sans-64-black.fnt +297 -0
- package/dist/assets/fonts/open-sans-64-black.png +0 -0
- package/dist/assets/fonts/open-sans-64-white.fnt +297 -0
- package/dist/assets/fonts/open-sans-64-white.png +0 -0
- package/dist/assets/ribbon-overlay-adaptive.png +0 -0
- package/dist/assets/ribbon-overlay.png +0 -0
- package/dist/cli.js +292 -0
- package/dist/generate.js +298 -0
- package/dist/index.d.mts +53 -0
- package/dist/index.d.ts +53 -0
- package/dist/index.js +252 -0
- package/dist/index.mjs +217 -0
- package/package.json +82 -0
- package/types.ts +55 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
addBadge: () => addBadge
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(index_exports);
|
|
36
|
+
var import_node_fs3 = __toESM(require("fs"));
|
|
37
|
+
var import_node_path4 = __toESM(require("path"));
|
|
38
|
+
var import_jimp2 = __toESM(require("jimp"));
|
|
39
|
+
|
|
40
|
+
// src/core/validation.ts
|
|
41
|
+
var import_zod = require("zod");
|
|
42
|
+
var hexColor = import_zod.z.string().regex(/^#[0-9a-fA-F]{6}$/);
|
|
43
|
+
var baseBadge = {
|
|
44
|
+
text: import_zod.z.string().min(1),
|
|
45
|
+
color: import_zod.z.enum(["white", "black"]).default("white"),
|
|
46
|
+
background: hexColor.optional(),
|
|
47
|
+
fontScale: import_zod.z.number().min(0.5).max(2).default(1),
|
|
48
|
+
letterSpacing: import_zod.z.number().min(0).max(10).default(0),
|
|
49
|
+
padding: import_zod.z.number().min(0).max(120).default(0),
|
|
50
|
+
opacity: import_zod.z.number().min(0).max(1).default(1)
|
|
51
|
+
};
|
|
52
|
+
var banner = import_zod.z.object({
|
|
53
|
+
type: import_zod.z.literal("banner"),
|
|
54
|
+
position: import_zod.z.enum(["top", "bottom"]).default("bottom"),
|
|
55
|
+
...baseBadge
|
|
56
|
+
});
|
|
57
|
+
var ribbon = import_zod.z.object({
|
|
58
|
+
type: import_zod.z.literal("ribbon"),
|
|
59
|
+
position: import_zod.z.enum(["left", "right"]).default("right"),
|
|
60
|
+
...baseBadge
|
|
61
|
+
});
|
|
62
|
+
var badgeSchema = import_zod.z.discriminatedUnion("type", [banner, ribbon]);
|
|
63
|
+
var addBadgeParamsSchema = import_zod.z.object({
|
|
64
|
+
icon: import_zod.z.string().min(1),
|
|
65
|
+
dstPath: import_zod.z.string().optional(),
|
|
66
|
+
badges: import_zod.z.array(badgeSchema).min(1),
|
|
67
|
+
isAdaptiveIcon: import_zod.z.boolean().default(false),
|
|
68
|
+
adaptiveSafeMode: import_zod.z.boolean().default(true),
|
|
69
|
+
safeZoneScale: import_zod.z.number().min(0.4).max(1).default(0.72),
|
|
70
|
+
debug: import_zod.z.boolean().default(false),
|
|
71
|
+
dryRun: import_zod.z.boolean().default(false)
|
|
72
|
+
});
|
|
73
|
+
var pluginOptionsSchema = import_zod.z.object({
|
|
74
|
+
enabled: import_zod.z.boolean().default(true),
|
|
75
|
+
badges: import_zod.z.array(badgeSchema).optional(),
|
|
76
|
+
ios: import_zod.z.object({ badges: import_zod.z.array(badgeSchema).optional() }).default({}),
|
|
77
|
+
android: import_zod.z.object({
|
|
78
|
+
badges: import_zod.z.array(badgeSchema).optional(),
|
|
79
|
+
safeZoneScale: import_zod.z.number().min(0.4).max(1).default(0.72)
|
|
80
|
+
}).default({}),
|
|
81
|
+
adaptiveSafeMode: import_zod.z.boolean().default(true),
|
|
82
|
+
cache: import_zod.z.boolean().default(true),
|
|
83
|
+
debug: import_zod.z.boolean().default(false),
|
|
84
|
+
dryRun: import_zod.z.boolean().default(false)
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
// src/core/render.ts
|
|
88
|
+
var import_node_fs2 = __toESM(require("fs"));
|
|
89
|
+
var import_node_path3 = __toESM(require("path"));
|
|
90
|
+
var import_color_convert = __toESM(require("color-convert"));
|
|
91
|
+
var import_delta_e = __toESM(require("delta-e"));
|
|
92
|
+
var import_jimp = __toESM(require("jimp"));
|
|
93
|
+
|
|
94
|
+
// src/core/fonts.ts
|
|
95
|
+
var import_node_path = __toESM(require("path"));
|
|
96
|
+
function getFontPath(isAdaptiveIcon, isBlack, scale = 1) {
|
|
97
|
+
const useLarge = scale >= 1 && !isAdaptiveIcon;
|
|
98
|
+
const fontPrefix = useLarge ? "128" : "64";
|
|
99
|
+
const color = isBlack ? "black" : "white";
|
|
100
|
+
return import_node_path.default.resolve(__dirname, `./assets/fonts/open-sans-${fontPrefix}-${color}.fnt`);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// src/core/utils.ts
|
|
104
|
+
var import_node_crypto = __toESM(require("crypto"));
|
|
105
|
+
var import_node_fs = __toESM(require("fs"));
|
|
106
|
+
var import_node_path2 = __toESM(require("path"));
|
|
107
|
+
function withLetterSpacing(input, spacing = 0) {
|
|
108
|
+
if (spacing <= 0) return input;
|
|
109
|
+
const gap = " ".repeat(Math.max(1, Math.round(spacing)));
|
|
110
|
+
return input.split("").join(gap);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/core/render.ts
|
|
114
|
+
function replaceColor(image, from, to) {
|
|
115
|
+
const fromColor = import_color_convert.default.hex.lab(from);
|
|
116
|
+
const toColor = import_color_convert.default.hex.rgb(to);
|
|
117
|
+
image.scan(0, 0, image.bitmap.width, image.bitmap.height, (_x, _y, idx) => {
|
|
118
|
+
if (image.bitmap.data[idx + 3] === 0) return;
|
|
119
|
+
const currentLABColor = import_color_convert.default.rgb.lab([
|
|
120
|
+
image.bitmap.data[idx],
|
|
121
|
+
image.bitmap.data[idx + 1],
|
|
122
|
+
image.bitmap.data[idx + 2]
|
|
123
|
+
]);
|
|
124
|
+
const delta = import_delta_e.default.getDeltaE00(
|
|
125
|
+
{ L: currentLABColor[0], A: currentLABColor[1], B: currentLABColor[2] },
|
|
126
|
+
{ L: fromColor[0], A: fromColor[1], B: fromColor[2] }
|
|
127
|
+
);
|
|
128
|
+
if (delta <= 2.3) {
|
|
129
|
+
image.bitmap.data[idx] = toColor[0];
|
|
130
|
+
image.bitmap.data[idx + 1] = toColor[1];
|
|
131
|
+
image.bitmap.data[idx + 2] = toColor[2];
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
async function loadOverlay(overlayPath, background) {
|
|
136
|
+
const overlay = await import_jimp.default.read(overlayPath);
|
|
137
|
+
if (background) {
|
|
138
|
+
replaceColor(overlay, "#000000", background);
|
|
139
|
+
}
|
|
140
|
+
return overlay;
|
|
141
|
+
}
|
|
142
|
+
async function createBadgeImage(badge, isAdaptiveIcon) {
|
|
143
|
+
const variant = isAdaptiveIcon ? "-adaptive" : "";
|
|
144
|
+
const overlayPath = import_node_path3.default.resolve(__dirname, `./assets/${badge.type}-overlay${variant}.png`);
|
|
145
|
+
if (!import_node_fs2.default.existsSync(overlayPath)) {
|
|
146
|
+
throw new Error(`Overlay not found: ${overlayPath}`);
|
|
147
|
+
}
|
|
148
|
+
const overlay = await loadOverlay(overlayPath, badge.background);
|
|
149
|
+
const font = await import_jimp.default.loadFont(
|
|
150
|
+
getFontPath(isAdaptiveIcon, badge.color === "black", badge.fontScale)
|
|
151
|
+
);
|
|
152
|
+
const text = withLetterSpacing(
|
|
153
|
+
badge.type === "banner" ? badge.text.toUpperCase() : badge.text,
|
|
154
|
+
badge.letterSpacing
|
|
155
|
+
);
|
|
156
|
+
const padding = badge.padding;
|
|
157
|
+
const base = overlay.clone();
|
|
158
|
+
if (badge.opacity < 1) {
|
|
159
|
+
base.opacity(badge.opacity);
|
|
160
|
+
}
|
|
161
|
+
if (badge.type === "banner") {
|
|
162
|
+
const bannerHeight = isAdaptiveIcon ? 310 : 180;
|
|
163
|
+
const textContainer2 = new import_jimp.default(overlay.bitmap.width, bannerHeight, "transparent");
|
|
164
|
+
const alignY = isAdaptiveIcon ? badge.position === "top" ? import_jimp.default.VERTICAL_ALIGN_BOTTOM : import_jimp.default.VERTICAL_ALIGN_TOP : import_jimp.default.VERTICAL_ALIGN_MIDDLE;
|
|
165
|
+
textContainer2.print(
|
|
166
|
+
font,
|
|
167
|
+
padding,
|
|
168
|
+
0,
|
|
169
|
+
{ text, alignmentX: import_jimp.default.HORIZONTAL_ALIGN_CENTER, alignmentY: alignY },
|
|
170
|
+
overlay.bitmap.width - padding * 2,
|
|
171
|
+
bannerHeight
|
|
172
|
+
);
|
|
173
|
+
const top = badge.position === "top";
|
|
174
|
+
base.flip(false, top);
|
|
175
|
+
base.composite(textContainer2, 0, top ? 0 : base.bitmap.height - bannerHeight);
|
|
176
|
+
return base;
|
|
177
|
+
}
|
|
178
|
+
const ribbonHeight = isAdaptiveIcon ? 100 : 180;
|
|
179
|
+
const translateBy = (isAdaptiveIcon ? 80 : 270) - padding;
|
|
180
|
+
const textContainer = new import_jimp.default(overlay.bitmap.width, ribbonHeight, "transparent");
|
|
181
|
+
textContainer.print(
|
|
182
|
+
font,
|
|
183
|
+
0,
|
|
184
|
+
0,
|
|
185
|
+
{ text, alignmentX: import_jimp.default.HORIZONTAL_ALIGN_CENTER, alignmentY: import_jimp.default.VERTICAL_ALIGN_MIDDLE },
|
|
186
|
+
overlay.bitmap.width,
|
|
187
|
+
ribbonHeight
|
|
188
|
+
);
|
|
189
|
+
const left = badge.position === "left";
|
|
190
|
+
textContainer.rotate(left ? 45 : -45);
|
|
191
|
+
const translateX = left ? -translateBy : translateBy;
|
|
192
|
+
const textX = left ? translateX : overlay.bitmap.width - textContainer.bitmap.width + translateX;
|
|
193
|
+
const textY = left ? translateX : -translateX;
|
|
194
|
+
base.flip(left, false);
|
|
195
|
+
base.composite(textContainer, textX, textY);
|
|
196
|
+
return base;
|
|
197
|
+
}
|
|
198
|
+
function applyAdaptiveSafeZone(badge, safeZoneScale) {
|
|
199
|
+
const canvas = new import_jimp.default(badge.bitmap.width, badge.bitmap.height, "transparent");
|
|
200
|
+
const scaled = badge.resize(
|
|
201
|
+
Math.round(badge.bitmap.width * safeZoneScale),
|
|
202
|
+
Math.round(badge.bitmap.height * safeZoneScale)
|
|
203
|
+
);
|
|
204
|
+
const x = Math.round((canvas.bitmap.width - scaled.bitmap.width) / 2);
|
|
205
|
+
const y = Math.round((canvas.bitmap.height - scaled.bitmap.height) / 2);
|
|
206
|
+
canvas.composite(scaled, x, y);
|
|
207
|
+
return canvas;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// src/index.ts
|
|
211
|
+
function getResultPath(icon) {
|
|
212
|
+
const parts = icon.split(".");
|
|
213
|
+
parts.splice(parts.length - 1, 0, "result");
|
|
214
|
+
return parts.join(".");
|
|
215
|
+
}
|
|
216
|
+
function logDebug(debug, payload) {
|
|
217
|
+
if (!debug) return;
|
|
218
|
+
process.stdout.write(`[app-icon-badge-next] ${JSON.stringify(payload)}
|
|
219
|
+
`);
|
|
220
|
+
}
|
|
221
|
+
async function addBadge(input) {
|
|
222
|
+
const parsed = addBadgeParamsSchema.parse(input);
|
|
223
|
+
const sourcePath = import_node_path4.default.resolve(parsed.icon);
|
|
224
|
+
if (!import_node_fs3.default.existsSync(sourcePath)) {
|
|
225
|
+
throw new Error(`Icon does not exist: ${sourcePath}`);
|
|
226
|
+
}
|
|
227
|
+
const destination = import_node_path4.default.resolve(parsed.dstPath ?? getResultPath(parsed.icon));
|
|
228
|
+
logDebug(parsed.debug, {
|
|
229
|
+
icon: sourcePath,
|
|
230
|
+
dstPath: destination,
|
|
231
|
+
isAdaptiveIcon: parsed.isAdaptiveIcon,
|
|
232
|
+
adaptiveSafeMode: parsed.adaptiveSafeMode,
|
|
233
|
+
safeZoneScale: parsed.safeZoneScale,
|
|
234
|
+
badgeCount: parsed.badges.length
|
|
235
|
+
});
|
|
236
|
+
if (parsed.dryRun) {
|
|
237
|
+
return destination;
|
|
238
|
+
}
|
|
239
|
+
const image = await import_jimp2.default.read(sourcePath);
|
|
240
|
+
for (const badge of parsed.badges) {
|
|
241
|
+
const badgeImage = await createBadgeImage(badge, parsed.isAdaptiveIcon);
|
|
242
|
+
const finalBadge = parsed.isAdaptiveIcon && parsed.adaptiveSafeMode ? applyAdaptiveSafeZone(badgeImage, parsed.safeZoneScale) : badgeImage;
|
|
243
|
+
image.composite(finalBadge, 0, 0);
|
|
244
|
+
}
|
|
245
|
+
import_node_fs3.default.mkdirSync(import_node_path4.default.dirname(destination), { recursive: true });
|
|
246
|
+
await image.writeAsync(destination);
|
|
247
|
+
return destination;
|
|
248
|
+
}
|
|
249
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
250
|
+
0 && (module.exports = {
|
|
251
|
+
addBadge
|
|
252
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
import fs3 from "fs";
|
|
3
|
+
import path4 from "path";
|
|
4
|
+
import Jimp2 from "jimp";
|
|
5
|
+
|
|
6
|
+
// src/core/validation.ts
|
|
7
|
+
import { z } from "zod";
|
|
8
|
+
var hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/);
|
|
9
|
+
var baseBadge = {
|
|
10
|
+
text: z.string().min(1),
|
|
11
|
+
color: z.enum(["white", "black"]).default("white"),
|
|
12
|
+
background: hexColor.optional(),
|
|
13
|
+
fontScale: z.number().min(0.5).max(2).default(1),
|
|
14
|
+
letterSpacing: z.number().min(0).max(10).default(0),
|
|
15
|
+
padding: z.number().min(0).max(120).default(0),
|
|
16
|
+
opacity: z.number().min(0).max(1).default(1)
|
|
17
|
+
};
|
|
18
|
+
var banner = z.object({
|
|
19
|
+
type: z.literal("banner"),
|
|
20
|
+
position: z.enum(["top", "bottom"]).default("bottom"),
|
|
21
|
+
...baseBadge
|
|
22
|
+
});
|
|
23
|
+
var ribbon = z.object({
|
|
24
|
+
type: z.literal("ribbon"),
|
|
25
|
+
position: z.enum(["left", "right"]).default("right"),
|
|
26
|
+
...baseBadge
|
|
27
|
+
});
|
|
28
|
+
var badgeSchema = z.discriminatedUnion("type", [banner, ribbon]);
|
|
29
|
+
var addBadgeParamsSchema = z.object({
|
|
30
|
+
icon: z.string().min(1),
|
|
31
|
+
dstPath: z.string().optional(),
|
|
32
|
+
badges: z.array(badgeSchema).min(1),
|
|
33
|
+
isAdaptiveIcon: z.boolean().default(false),
|
|
34
|
+
adaptiveSafeMode: z.boolean().default(true),
|
|
35
|
+
safeZoneScale: z.number().min(0.4).max(1).default(0.72),
|
|
36
|
+
debug: z.boolean().default(false),
|
|
37
|
+
dryRun: z.boolean().default(false)
|
|
38
|
+
});
|
|
39
|
+
var pluginOptionsSchema = z.object({
|
|
40
|
+
enabled: z.boolean().default(true),
|
|
41
|
+
badges: z.array(badgeSchema).optional(),
|
|
42
|
+
ios: z.object({ badges: z.array(badgeSchema).optional() }).default({}),
|
|
43
|
+
android: z.object({
|
|
44
|
+
badges: z.array(badgeSchema).optional(),
|
|
45
|
+
safeZoneScale: z.number().min(0.4).max(1).default(0.72)
|
|
46
|
+
}).default({}),
|
|
47
|
+
adaptiveSafeMode: z.boolean().default(true),
|
|
48
|
+
cache: z.boolean().default(true),
|
|
49
|
+
debug: z.boolean().default(false),
|
|
50
|
+
dryRun: z.boolean().default(false)
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// src/core/render.ts
|
|
54
|
+
import fs2 from "fs";
|
|
55
|
+
import path3 from "path";
|
|
56
|
+
import colorConvert from "color-convert";
|
|
57
|
+
import DeltaE from "delta-e";
|
|
58
|
+
import Jimp from "jimp";
|
|
59
|
+
|
|
60
|
+
// src/core/fonts.ts
|
|
61
|
+
import path from "path";
|
|
62
|
+
function getFontPath(isAdaptiveIcon, isBlack, scale = 1) {
|
|
63
|
+
const useLarge = scale >= 1 && !isAdaptiveIcon;
|
|
64
|
+
const fontPrefix = useLarge ? "128" : "64";
|
|
65
|
+
const color = isBlack ? "black" : "white";
|
|
66
|
+
return path.resolve(__dirname, `./assets/fonts/open-sans-${fontPrefix}-${color}.fnt`);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// src/core/utils.ts
|
|
70
|
+
import crypto from "crypto";
|
|
71
|
+
import fs from "fs";
|
|
72
|
+
import path2 from "path";
|
|
73
|
+
function withLetterSpacing(input, spacing = 0) {
|
|
74
|
+
if (spacing <= 0) return input;
|
|
75
|
+
const gap = " ".repeat(Math.max(1, Math.round(spacing)));
|
|
76
|
+
return input.split("").join(gap);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// src/core/render.ts
|
|
80
|
+
function replaceColor(image, from, to) {
|
|
81
|
+
const fromColor = colorConvert.hex.lab(from);
|
|
82
|
+
const toColor = colorConvert.hex.rgb(to);
|
|
83
|
+
image.scan(0, 0, image.bitmap.width, image.bitmap.height, (_x, _y, idx) => {
|
|
84
|
+
if (image.bitmap.data[idx + 3] === 0) return;
|
|
85
|
+
const currentLABColor = colorConvert.rgb.lab([
|
|
86
|
+
image.bitmap.data[idx],
|
|
87
|
+
image.bitmap.data[idx + 1],
|
|
88
|
+
image.bitmap.data[idx + 2]
|
|
89
|
+
]);
|
|
90
|
+
const delta = DeltaE.getDeltaE00(
|
|
91
|
+
{ L: currentLABColor[0], A: currentLABColor[1], B: currentLABColor[2] },
|
|
92
|
+
{ L: fromColor[0], A: fromColor[1], B: fromColor[2] }
|
|
93
|
+
);
|
|
94
|
+
if (delta <= 2.3) {
|
|
95
|
+
image.bitmap.data[idx] = toColor[0];
|
|
96
|
+
image.bitmap.data[idx + 1] = toColor[1];
|
|
97
|
+
image.bitmap.data[idx + 2] = toColor[2];
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
async function loadOverlay(overlayPath, background) {
|
|
102
|
+
const overlay = await Jimp.read(overlayPath);
|
|
103
|
+
if (background) {
|
|
104
|
+
replaceColor(overlay, "#000000", background);
|
|
105
|
+
}
|
|
106
|
+
return overlay;
|
|
107
|
+
}
|
|
108
|
+
async function createBadgeImage(badge, isAdaptiveIcon) {
|
|
109
|
+
const variant = isAdaptiveIcon ? "-adaptive" : "";
|
|
110
|
+
const overlayPath = path3.resolve(__dirname, `./assets/${badge.type}-overlay${variant}.png`);
|
|
111
|
+
if (!fs2.existsSync(overlayPath)) {
|
|
112
|
+
throw new Error(`Overlay not found: ${overlayPath}`);
|
|
113
|
+
}
|
|
114
|
+
const overlay = await loadOverlay(overlayPath, badge.background);
|
|
115
|
+
const font = await Jimp.loadFont(
|
|
116
|
+
getFontPath(isAdaptiveIcon, badge.color === "black", badge.fontScale)
|
|
117
|
+
);
|
|
118
|
+
const text = withLetterSpacing(
|
|
119
|
+
badge.type === "banner" ? badge.text.toUpperCase() : badge.text,
|
|
120
|
+
badge.letterSpacing
|
|
121
|
+
);
|
|
122
|
+
const padding = badge.padding;
|
|
123
|
+
const base = overlay.clone();
|
|
124
|
+
if (badge.opacity < 1) {
|
|
125
|
+
base.opacity(badge.opacity);
|
|
126
|
+
}
|
|
127
|
+
if (badge.type === "banner") {
|
|
128
|
+
const bannerHeight = isAdaptiveIcon ? 310 : 180;
|
|
129
|
+
const textContainer2 = new Jimp(overlay.bitmap.width, bannerHeight, "transparent");
|
|
130
|
+
const alignY = isAdaptiveIcon ? badge.position === "top" ? Jimp.VERTICAL_ALIGN_BOTTOM : Jimp.VERTICAL_ALIGN_TOP : Jimp.VERTICAL_ALIGN_MIDDLE;
|
|
131
|
+
textContainer2.print(
|
|
132
|
+
font,
|
|
133
|
+
padding,
|
|
134
|
+
0,
|
|
135
|
+
{ text, alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER, alignmentY: alignY },
|
|
136
|
+
overlay.bitmap.width - padding * 2,
|
|
137
|
+
bannerHeight
|
|
138
|
+
);
|
|
139
|
+
const top = badge.position === "top";
|
|
140
|
+
base.flip(false, top);
|
|
141
|
+
base.composite(textContainer2, 0, top ? 0 : base.bitmap.height - bannerHeight);
|
|
142
|
+
return base;
|
|
143
|
+
}
|
|
144
|
+
const ribbonHeight = isAdaptiveIcon ? 100 : 180;
|
|
145
|
+
const translateBy = (isAdaptiveIcon ? 80 : 270) - padding;
|
|
146
|
+
const textContainer = new Jimp(overlay.bitmap.width, ribbonHeight, "transparent");
|
|
147
|
+
textContainer.print(
|
|
148
|
+
font,
|
|
149
|
+
0,
|
|
150
|
+
0,
|
|
151
|
+
{ text, alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER, alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE },
|
|
152
|
+
overlay.bitmap.width,
|
|
153
|
+
ribbonHeight
|
|
154
|
+
);
|
|
155
|
+
const left = badge.position === "left";
|
|
156
|
+
textContainer.rotate(left ? 45 : -45);
|
|
157
|
+
const translateX = left ? -translateBy : translateBy;
|
|
158
|
+
const textX = left ? translateX : overlay.bitmap.width - textContainer.bitmap.width + translateX;
|
|
159
|
+
const textY = left ? translateX : -translateX;
|
|
160
|
+
base.flip(left, false);
|
|
161
|
+
base.composite(textContainer, textX, textY);
|
|
162
|
+
return base;
|
|
163
|
+
}
|
|
164
|
+
function applyAdaptiveSafeZone(badge, safeZoneScale) {
|
|
165
|
+
const canvas = new Jimp(badge.bitmap.width, badge.bitmap.height, "transparent");
|
|
166
|
+
const scaled = badge.resize(
|
|
167
|
+
Math.round(badge.bitmap.width * safeZoneScale),
|
|
168
|
+
Math.round(badge.bitmap.height * safeZoneScale)
|
|
169
|
+
);
|
|
170
|
+
const x = Math.round((canvas.bitmap.width - scaled.bitmap.width) / 2);
|
|
171
|
+
const y = Math.round((canvas.bitmap.height - scaled.bitmap.height) / 2);
|
|
172
|
+
canvas.composite(scaled, x, y);
|
|
173
|
+
return canvas;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// src/index.ts
|
|
177
|
+
function getResultPath(icon) {
|
|
178
|
+
const parts = icon.split(".");
|
|
179
|
+
parts.splice(parts.length - 1, 0, "result");
|
|
180
|
+
return parts.join(".");
|
|
181
|
+
}
|
|
182
|
+
function logDebug(debug, payload) {
|
|
183
|
+
if (!debug) return;
|
|
184
|
+
process.stdout.write(`[app-icon-badge-next] ${JSON.stringify(payload)}
|
|
185
|
+
`);
|
|
186
|
+
}
|
|
187
|
+
async function addBadge(input) {
|
|
188
|
+
const parsed = addBadgeParamsSchema.parse(input);
|
|
189
|
+
const sourcePath = path4.resolve(parsed.icon);
|
|
190
|
+
if (!fs3.existsSync(sourcePath)) {
|
|
191
|
+
throw new Error(`Icon does not exist: ${sourcePath}`);
|
|
192
|
+
}
|
|
193
|
+
const destination = path4.resolve(parsed.dstPath ?? getResultPath(parsed.icon));
|
|
194
|
+
logDebug(parsed.debug, {
|
|
195
|
+
icon: sourcePath,
|
|
196
|
+
dstPath: destination,
|
|
197
|
+
isAdaptiveIcon: parsed.isAdaptiveIcon,
|
|
198
|
+
adaptiveSafeMode: parsed.adaptiveSafeMode,
|
|
199
|
+
safeZoneScale: parsed.safeZoneScale,
|
|
200
|
+
badgeCount: parsed.badges.length
|
|
201
|
+
});
|
|
202
|
+
if (parsed.dryRun) {
|
|
203
|
+
return destination;
|
|
204
|
+
}
|
|
205
|
+
const image = await Jimp2.read(sourcePath);
|
|
206
|
+
for (const badge of parsed.badges) {
|
|
207
|
+
const badgeImage = await createBadgeImage(badge, parsed.isAdaptiveIcon);
|
|
208
|
+
const finalBadge = parsed.isAdaptiveIcon && parsed.adaptiveSafeMode ? applyAdaptiveSafeZone(badgeImage, parsed.safeZoneScale) : badgeImage;
|
|
209
|
+
image.composite(finalBadge, 0, 0);
|
|
210
|
+
}
|
|
211
|
+
fs3.mkdirSync(path4.dirname(destination), { recursive: true });
|
|
212
|
+
await image.writeAsync(destination);
|
|
213
|
+
return destination;
|
|
214
|
+
}
|
|
215
|
+
export {
|
|
216
|
+
addBadge
|
|
217
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "app-icon-badge-next",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Production-ready app icon badging for Expo and React Native: overlay environment and version badges on iOS and Android app icons via an Expo config plugin, library API, or CLI.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"expo",
|
|
7
|
+
"expo-config-plugin",
|
|
8
|
+
"react-native",
|
|
9
|
+
"app-icon",
|
|
10
|
+
"icon",
|
|
11
|
+
"badge",
|
|
12
|
+
"adaptive-icon",
|
|
13
|
+
"ios",
|
|
14
|
+
"android",
|
|
15
|
+
"eas"
|
|
16
|
+
],
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"author": "AdzeB",
|
|
19
|
+
"homepage": "https://github.com/AdzeB/app-icon-badge-next#readme",
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/AdzeB/app-icon-badge-next.git"
|
|
23
|
+
},
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/AdzeB/app-icon-badge-next/issues"
|
|
26
|
+
},
|
|
27
|
+
"main": "dist/index.js",
|
|
28
|
+
"module": "dist/index.mjs",
|
|
29
|
+
"types": "dist/index.d.ts",
|
|
30
|
+
"exports": {
|
|
31
|
+
".": {
|
|
32
|
+
"types": "./dist/index.d.ts",
|
|
33
|
+
"import": "./dist/index.mjs",
|
|
34
|
+
"require": "./dist/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./types": {
|
|
37
|
+
"types": "./types.ts"
|
|
38
|
+
},
|
|
39
|
+
"./app.plugin.js": "./app.plugin.js",
|
|
40
|
+
"./package.json": "./package.json"
|
|
41
|
+
},
|
|
42
|
+
"bin": {
|
|
43
|
+
"app-icon-badge-next": "dist/cli.js"
|
|
44
|
+
},
|
|
45
|
+
"files": [
|
|
46
|
+
"dist",
|
|
47
|
+
"app.plugin.js",
|
|
48
|
+
"types.ts"
|
|
49
|
+
],
|
|
50
|
+
"engines": {
|
|
51
|
+
"node": ">=18.17"
|
|
52
|
+
},
|
|
53
|
+
"packageManager": "pnpm@11.1.0",
|
|
54
|
+
"publishConfig": {
|
|
55
|
+
"access": "public",
|
|
56
|
+
"provenance": true
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"build": "tsup src/index.ts --format cjs,esm --dts && cp -R src/assets dist && tsup src/plugin/app.plugin.ts src/plugin/generate.ts --format cjs --out-dir dist && tsup src/cli.ts --format cjs --out-dir dist",
|
|
60
|
+
"type-check": "tsc --noEmit",
|
|
61
|
+
"lint": "tsc --noEmit",
|
|
62
|
+
"test": "node --test test/*.test.js",
|
|
63
|
+
"test:update-snapshots": "node test/icon-snapshots.test.js --update",
|
|
64
|
+
"changeset": "changeset",
|
|
65
|
+
"release": "pnpm build && changeset publish",
|
|
66
|
+
"prepublishOnly": "pnpm build"
|
|
67
|
+
},
|
|
68
|
+
"dependencies": {
|
|
69
|
+
"color-convert": "^2.0.1",
|
|
70
|
+
"commander": "^11.0.0",
|
|
71
|
+
"delta-e": "^0.0.8",
|
|
72
|
+
"jimp": "^0.22.7",
|
|
73
|
+
"zod": "^3.24.2"
|
|
74
|
+
},
|
|
75
|
+
"devDependencies": {
|
|
76
|
+
"@changesets/cli": "^2.27.10",
|
|
77
|
+
"@expo/config-plugins": "^57.0.2",
|
|
78
|
+
"@types/node": "^22.7.8",
|
|
79
|
+
"tsup": "^8.3.0",
|
|
80
|
+
"typescript": "^5.6.3"
|
|
81
|
+
}
|
|
82
|
+
}
|
package/types.ts
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
export type BadgeTextColor = 'white' | 'black';
|
|
2
|
+
|
|
3
|
+
export type BannerBadge = {
|
|
4
|
+
type: 'banner';
|
|
5
|
+
text: string;
|
|
6
|
+
position?: 'top' | 'bottom';
|
|
7
|
+
color?: BadgeTextColor;
|
|
8
|
+
background?: string;
|
|
9
|
+
fontScale?: number;
|
|
10
|
+
letterSpacing?: number;
|
|
11
|
+
padding?: number;
|
|
12
|
+
opacity?: number;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export type RibbonBadge = {
|
|
16
|
+
type: 'ribbon';
|
|
17
|
+
text: string;
|
|
18
|
+
position?: 'left' | 'right';
|
|
19
|
+
color?: BadgeTextColor;
|
|
20
|
+
background?: string;
|
|
21
|
+
fontScale?: number;
|
|
22
|
+
letterSpacing?: number;
|
|
23
|
+
padding?: number;
|
|
24
|
+
opacity?: number;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export type Badge = BannerBadge | RibbonBadge;
|
|
28
|
+
|
|
29
|
+
export type PlatformBadgeConfig = {
|
|
30
|
+
badges?: Badge[];
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export type AppIconBadgeConfig = {
|
|
34
|
+
enabled?: boolean;
|
|
35
|
+
badges?: Badge[];
|
|
36
|
+
ios?: PlatformBadgeConfig;
|
|
37
|
+
android?: PlatformBadgeConfig & {
|
|
38
|
+
safeZoneScale?: number;
|
|
39
|
+
};
|
|
40
|
+
adaptiveSafeMode?: boolean;
|
|
41
|
+
cache?: boolean;
|
|
42
|
+
debug?: boolean;
|
|
43
|
+
dryRun?: boolean;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export type AddBadgeParams = {
|
|
47
|
+
icon: string;
|
|
48
|
+
dstPath?: string;
|
|
49
|
+
badges: Badge[];
|
|
50
|
+
isAdaptiveIcon?: boolean;
|
|
51
|
+
adaptiveSafeMode?: boolean;
|
|
52
|
+
safeZoneScale?: number;
|
|
53
|
+
debug?: boolean;
|
|
54
|
+
dryRun?: boolean;
|
|
55
|
+
};
|