@hellkite/pipkin 0.5.1 → 0.6.1

package/build/src/lib/utils/htmlToImage.js

@@ -18,7 +18,6 @@ const node_html_to_image_1 = __importDefault(require("node-html-to-image"));
 const jimp_1 = require("jimp");
 const htmlToImage = (document, backgroundSize) => __awaiter(void 0, void 0, void 0, function* () {
     const html = (0, virtual_dom_1.create)(document).toString();
-    // TODO: extract this in a dif function
     const image = yield (0, node_html_to_image_1.default)({
         html,
         transparent: true,
@@ -27,6 +26,7 @@ const htmlToImage = (document, backgroundSize) => __awaiter(void 0, void 0, void
             defaultViewport: {
                 width: backgroundSize.width,
                 height: backgroundSize.height,
+                deviceScaleFactor: 1,
             },
         },
     });

package/build/src/lib/utils/htmlToImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"htmlToImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/htmlToImage.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,4EAAiD;AACjD,+BAA4B;AAGrB,MAAM,WAAW,GAAG,CACvB,QAAe,EACf,cAAoB,EACF,EAAE;IACpB,MAAM,IAAI,GAAG,IAAA,oBAAa,EAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;IAChD,uCAAuC;IACvC,MAAM,KAAK,GAAG,MAAM,IAAA,4BAAe,EAAC;QAChC,IAAI;QACJ,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,KAAK;QACX,aAAa,EAAE;YACX,eAAe,EAAE;gBACb,KAAK,EAAE,cAAc,CAAC,KAAK;gBAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;aAChC;SACJ;KACJ,CAAC,CAAC;IACH,OAAO,WAAI,CAAC,IAAI,CAAC,KAAe,CAAuB,CAAC;AAC5D,CAAC,CAAA,CAAC;AAlBW,QAAA,WAAW,eAkBtB"}
+{"version":3,"file":"htmlToImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/htmlToImage.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,4EAAiD;AACjD,+BAA4B;AAGrB,MAAM,WAAW,GAAG,CACvB,QAAe,EACf,cAAoB,EACF,EAAE;IACpB,MAAM,IAAI,GAAG,IAAA,oBAAa,EAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;IAChD,MAAM,KAAK,GAAG,MAAM,IAAA,4BAAe,EAAC;QAChC,IAAI;QACJ,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,KAAK;QACX,aAAa,EAAE;YACX,eAAe,EAAE;gBACb,KAAK,EAAE,cAAc,CAAC,KAAK;gBAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;gBAC7B,iBAAiB,EAAE,CAAC;aACvB;SACJ;KACJ,CAAC,CAAC;IACH,OAAO,WAAI,CAAC,IAAI,CAAC,KAAe,CAAuB,CAAC;AAC5D,CAAC,CAAA,CAAC;AAlBW,QAAA,WAAW,eAkBtB"}

package/build/src/lib/utils/placeImage.d.ts

@@ -1,12 +1,13 @@
 import { ImageLayerOptions, ImageType, BoundingBox } from '../types';
-type PlaceImageProps = {
+import { RequiredDeep } from 'type-fest';
+type PlaceImageProps<EntryType extends Record<string, string>> = {
     image: ImageType;
     box: BoundingBox;
     backgroundSize: {
         width: number;
         height: number;
     };
-    options: ImageLayerOptions;
+    options: RequiredDeep<ImageLayerOptions<EntryType>>;
 };
-export declare function placeImage({ image, box, backgroundSize, options, }: PlaceImageProps): Promise<ImageType>;
+export declare const placeImage: <EntryType extends Record<string, string>>({ image, box, backgroundSize, options, }: PlaceImageProps<EntryType>) => Promise<ImageType>;
 export {};

package/build/src/lib/utils/placeImage.js

@@ -8,37 +8,31 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.placeImage = placeImage;
+exports.placeImage = void 0;
 const virtual_dom_1 = require("virtual-dom");
 const toPx_1 = require("./toPx");
 const types_1 = require("../types");
-const lodash_merge_1 = __importDefault(require("lodash.merge"));
 const htmlToImage_1 = require("./htmlToImage");
-function placeImage(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ image, box, backgroundSize, options, }) {
-        const imageBase64 = yield image.getBase64('image/png');
-        const mergedOptions = (0, lodash_merge_1.default)(types_1.DEFAULT_IMAGE_LAYER_OPTIONS, options);
-        const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[mergedOptions.scale];
-        const document = (0, virtual_dom_1.h)('div', {
-            style: Object.assign({ display: 'flex', position: 'absolute', scale: 1, justifyContent: mergedOptions.justifyContent, alignItems: mergedOptions.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
-        }, [
-            (0, virtual_dom_1.h)('img', {
-                style: {
-                    objectFit,
-                    flex: '1 1 auto',
-                    minWidth: 0,
-                    minHeight: 0,
-                    maxWidth: '100%',
-                    maxHeight: '100%',
-                },
-                src: imageBase64,
-            }, []),
-        ]);
-        return (0, htmlToImage_1.htmlToImage)(document, backgroundSize);
-    });
-}
+const placeImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ image, box, backgroundSize, options, }) {
+    const imageBase64 = yield image.getBase64('image/png');
+    const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[options.scale];
+    const document = (0, virtual_dom_1.h)('div', {
+        style: Object.assign({ display: 'flex', position: 'absolute', scale: 1, justifyContent: options.justifyContent, alignItems: options.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
+    }, [
+        (0, virtual_dom_1.h)('img', {
+            style: {
+                objectFit,
+                flex: '1 1 auto',
+                minWidth: 0,
+                minHeight: 0,
+                maxWidth: '100%',
+                maxHeight: '100%',
+            },
+            src: imageBase64,
+        }, []),
+    ]);
+    return (0, htmlToImage_1.htmlToImage)(document, backgroundSize);
+});
+exports.placeImage = placeImage;
 //# sourceMappingURL=placeImage.js.map

package/build/src/lib/utils/placeImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"placeImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/placeImage.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBA,gCA4CC;AA/DD,6CAAgC;AAChC,iCAAyC;AACzC,oCAMkB;AAClB,gEAAiC;AACjC,+CAA4C;AAS5C,SAAsB,UAAU;yDAAC,EAC7B,KAAK,EACL,GAAG,EACH,cAAc,EACd,OAAO,GACO;QACd,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACvD,MAAM,aAAa,GAAG,IAAA,sBAAK,EAAC,mCAA2B,EAAE,OAAO,CAAC,CAAC;QAClE,MAAM,SAAS,GAAG,gCAAwB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEhE,MAAM,QAAQ,GAAG,IAAA,eAAC,EACd,KAAK,EACL;YACI,KAAK,kBACD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,CAAC,EAER,cAAc,EAAE,aAAa,CAAC,cAAc,EAC5C,UAAU,EAAE,aAAa,CAAC,UAAU,IAEjC,IAAA,sBAAe,EAAC,GAAG,CAAC,CAC1B;SACJ,EACD;YACI,IAAA,eAAC,EACG,KAAK,EACL;gBACI,KAAK,EAAE;oBACH,SAAS;oBACT,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,CAAC;oBACX,SAAS,EAAE,CAAC;oBACZ,QAAQ,EAAE,MAAM;oBAChB,SAAS,EAAE,MAAM;iBACpB;gBACD,GAAG,EAAE,WAAW;aACnB,EACD,EAAE,CACL;SACJ,CACJ,CAAC;QAEF,OAAO,IAAA,yBAAW,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IACjD,CAAC;CAAA"}
+{"version":3,"file":"placeImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/placeImage.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAAgC;AAChC,iCAAyC;AACzC,oCAKkB;AAClB,+CAA4C;AAUrC,MAAM,UAAU,GAAG,KAKyB,EAAE,4CALsB,EACvE,KAAK,EACL,GAAG,EACH,cAAc,EACd,OAAO,GACkB;IACzB,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,gCAAwB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,IAAA,eAAC,EACd,KAAK,EACL;QACI,KAAK,kBACD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,CAAC,EAER,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,UAAU,EAAE,OAAO,CAAC,UAAU,IAE3B,IAAA,sBAAe,EAAC,GAAG,CAAC,CAC1B;KACJ,EACD;QACI,IAAA,eAAC,EACG,KAAK,EACL;YACI,KAAK,EAAE;gBACH,SAAS;gBACT,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,CAAC;gBACX,SAAS,EAAE,CAAC;gBACZ,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;aACpB;YACD,GAAG,EAAE,WAAW;SACnB,EACD,EAAE,CACL;KACJ,CACJ,CAAC;IAEF,OAAO,IAAA,yBAAW,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AACjD,CAAC,CAAA,CAAA;AA3CY,QAAA,UAAU,cA2CtB"}

package/build/src/lib/utils/renderText.d.ts

@@ -1,2 +1,3 @@
 import { ImageType, BoundingBox, Size, TextLayerOptions } from '../types';
-export declare const renderText: (text: string, box: BoundingBox, backgroundSize: Size, options?: TextLayerOptions) => Promise<ImageType>;
+import { RequiredDeep } from 'type-fest';
+export declare const renderText: <EntryType extends Record<string, string>>(text: string, box: BoundingBox, backgroundSize: Size, options: RequiredDeep<TextLayerOptions<EntryType>>, fonts: Record<string, string>) => Promise<ImageType>;

package/build/src/lib/utils/renderText.js

@@ -11,13 +11,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderText = void 0;
 const virtual_dom_1 = require("virtual-dom");
-const types_1 = require("../types");
 const toPx_1 = require("./toPx");
 const htmlToImage_1 = require("./htmlToImage");
-const renderText = (text, box, backgroundSize, options) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+const renderText = (text, box, backgroundSize, options, fonts) => __awaiter(void 0, void 0, void 0, function* () {
     let textChildren = [text];
-    for (const [word, image] of Object.entries((_a = options === null || options === void 0 ? void 0 : options.replacement) !== null && _a !== void 0 ? _a : {})) {
+    for (const [word, image] of Object.entries(options.replacement)) {
         const regex = new RegExp(word, 'gi');
         const imageBase64 = yield image.getBase64('image/png');
         let tmpChildren = [];
@@ -32,7 +30,7 @@ const renderText = (text, box, backgroundSize, options) => __awaiter(void 0, voi
                         style: {
                             display: 'inline',
                             verticalAlign: 'middle',
-                            height: (0, toPx_1.toPx)((_c = (_b = options === null || options === void 0 ? void 0 : options.font) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 28), // TODO: use constant
+                            height: (0, toPx_1.toPx)(options.font.size),
                             width: 'auto',
                         },
                         src: imageBase64,
@@ -43,22 +41,33 @@ const renderText = (text, box, backgroundSize, options) => __awaiter(void 0, voi
         }
         textChildren = tmpChildren;
     }
-    const document = (0, virtual_dom_1.h)('div', {
-        style: Object.assign({ display: 'flex', overflow: 'visible', position: 'absolute', justifyContent: (_d = options === null || options === void 0 ? void 0 : options.xAlign) !== null && _d !== void 0 ? _d : types_1.DEFAULT_TEXT_LAYER_OPTIONS.xAlign, alignItems: (_e = options === null || options === void 0 ? void 0 : options.yAlign) !== null && _e !== void 0 ? _e : types_1.DEFAULT_TEXT_LAYER_OPTIONS.yAlign }, (0, toPx_1.boundingBoxToPx)(box)),
+    const content = (0, virtual_dom_1.h)('div', {
+        style: Object.assign({ display: 'flex', overflow: 'visible', position: 'absolute', justifyContent: options.justifyContent, alignItems: options.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
     }, [
         (0, virtual_dom_1.h)('div', {
             style: {
                 overflow: 'visible',
                 overflowWrap: 'word-wrap',
                 whiteSpace: 'normal',
-                color: options === null || options === void 0 ? void 0 : options.color,
-                fontFamily: (_f = options === null || options === void 0 ? void 0 : options.font) === null || _f === void 0 ? void 0 : _f.family,
-                fontSize: (_g = options === null || options === void 0 ? void 0 : options.font) === null || _g === void 0 ? void 0 : _g.size,
-                fontStyle: ((_h = options === null || options === void 0 ? void 0 : options.font) === null || _h === void 0 ? void 0 : _h.italic) ? 'italic' : undefined,
-                fontWeight: ((_j = options === null || options === void 0 ? void 0 : options.font) === null || _j === void 0 ? void 0 : _j.bold) ? 'bold' : undefined,
+                color: options.color,
+                fontFamily: options.font.family,
+                fontSize: options.font.size,
+                fontStyle: options.font.italic ? 'italic' : undefined,
+                fontWeight: options.font.bold ? 'bold' : undefined,
             },
         }, textChildren),
     ]);
+    const document = (0, virtual_dom_1.h)('html', [
+        (0, virtual_dom_1.h)('head', [
+            (0, virtual_dom_1.h)('style', Object.entries(fonts)
+                .map(([name, data]) => `@font-face {
+                                font-family: '${name}';
+                                src: url(data:font/ttf;base64,${data}) format('truetype');
+                            }`)
+                .join('\n')),
+        ]),
+        (0, virtual_dom_1.h)('body', [content]),
+    ]);
     return (0, htmlToImage_1.htmlToImage)(document, backgroundSize);
 });
 exports.renderText = renderText;

package/build/src/lib/utils/renderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderText.js","sourceRoot":"","sources":["../../../../src/lib/utils/renderText.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderText.js","sourceRoot":"","sources":["../../../../src/lib/utils/renderText.ts"],"names":[],"mappings":"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"}

package/build/src/test.js

@@ -17,8 +17,9 @@ const lib_1 = require("./lib");
     const result = yield lib_1.Template.new({
         defaultFontFamily: 'branela',
         defaultAssetsPath: 'assets',
+        color: 0xC3C3C3FF,
     })
-        .text({ key: 'subtitle' }, {
+        .text({ key: 'title' }, {
         left: 25,
         top: 25,
         width: 700,
@@ -40,6 +41,7 @@ const lib_1 = require("./lib");
             size: 38,
         },
         color: 'purple',
+        skip: (entry) => entry.title.toLowerCase() === 'luigi'
     })
         .font('assets/branela.otf', 'branela')
         .image({ pathFn: entry => `${entry.title.toLowerCase()}.png` }, { left: 25, top: 225, width: 700, height: 700 }, {
@@ -76,14 +78,21 @@ const lib_1 = require("./lib");
         scale: 'stretch',
         gap: 50,
     })
-        .vbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
+        .grid(() => Promise.resolve([
+        luigi.clone(), luigi.clone(), luigi.clone(),
+        luigi.clone(), luigi.clone(), luigi.clone(),
+        luigi.clone(), luigi.clone(), luigi.clone(),
+    ]), {
         left: 300,
         top: 325,
-        width: 100,
+        width: 400,
         height: 600,
     }, {
-        scale: 'keep-ratio',
-        gap: 50,
+        scale: 'stretch',
+        gap: 10,
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        skip: true,
     })
         .debug()
         .fromCsv('assets/data.csv', {

package/build/src/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hellkite/pipkin",
-    "version": "0.5.1",
+    "version": "0.6.1",
     "description": "Library for board game card generation",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",
@@ -18,6 +18,7 @@
         "canvas": "^3.1.0",
         "jimp": "^1.6.0",
         "lodash.camelcase": "^4.3.0",
+        "lodash.chunk": "^4.2.0",
         "lodash.concat": "^4.5.0",
         "lodash.merge": "^4.6.2",
         "node-html-to-image": "^5.0.0",
@@ -27,12 +28,14 @@
     },
     "devDependencies": {
         "@types/lodash.camelcase": "^4.3.9",
+        "@types/lodash.chunk": "^4.2.9",
         "@types/lodash.concat": "^4.5.9",
         "@types/lodash.merge": "^4.6.9",
         "@types/node": "^22.7.5",
         "@types/papaparse": "^5.3.15",
         "@types/virtual-dom": "^2.1.4",
         "gts": "^6.0.2",
+        "type-fest": "^4.40.0",
         "typescript": "^5.6.3"
     }
 }

package/roadmap.md

@@ -2,19 +2,21 @@
 
 
 ### Features
-- [ ] Containers (row, column, grid)
-- [ ] Replace text rendering solution with `html2canvas`
 - [ ] Storage adaptors for fs, web, browser, s3, etc 
 - [ ] Draw geometry
-- [ ] Noise overlays
+- [ ] Noise/texture overlays
+- [ ] Text border
 
+### Bugfixes
+- [x] Broken custom fonts
 
 ### Optimizations
 - [ ] Optional image registry that reduce repeating loading of same images
 - [ ] Stream processing support
+- [ ] Overlay the entire card in HTML and render to image only once
 
 
 ### Quality of Life Improvements
 - [ ] Expose logging, warnings, stats and progress status data
 - [ ] Runtime resource configuration
-
+- [ ] Debugging layer

package/src/lib/template.ts

@@ -5,8 +5,35 @@ import camelCase from 'lodash.camelcase';
 import concat from 'lodash.concat';
 import { registerFont } from 'canvas';
 import path from 'path';
-import { drawBoundingBox, hboxPackingFn, placeImage, renderText, vboxPackingFn } from './utils';
-import { DirectionContainerOptions, ImageLayerOptions, ImageRef, ImageType, PackingFn, BoundingBox, RenderOptions, Size, TextLayerOptions, TextRef } from './types';
+import {
+    drawBoundingBox,
+    gridPackingFn,
+    hboxPackingFn,
+    placeImage,
+    renderText,
+    vboxPackingFn,
+} from './utils';
+import {
+    DirectionContainerOptions,
+    ImageLayerOptions,
+    ImageRef,
+    ImageType,
+    PackingFn,
+    BoundingBox,
+    RenderOptions,
+    Size,
+    TextLayerOptions,
+    TextRef,
+    GridContainerOptions,
+    DEFAULT_TEXT_LAYER_OPTIONS,
+    FontOptions,
+    DEFAULT_IMAGE_LAYER_OPTIONS,
+    LayerOptions,
+    ContainerOptions,
+    DEFAULT_CONTAINER_OPTIONS,
+} from './types';
+import merge from 'lodash.merge';
+import { RequiredDeep } from 'type-fest';
 
 type RequiredTemplateOptions = {
     height: number;
@@ -34,13 +61,14 @@ export type LayerFnContext = {
 export type LayerFn<EntryType> = (
     entry: EntryType,
     context: LayerFnContext,
-) => Promise<ImageType>;
+) => Promise<ImageType | undefined>;
 
 export type TemplateLayerFn<EntryType extends Record<string, string>> = (
     template: Template<EntryType>,
 ) => Template<EntryType>;
 
 export class Template<EntryType extends Record<string, string>> {
+    private readonly fonts: Record<string, string> = {};
     private readonly layers: LayerFn<EntryType>[] = [];
     private readonly background: ImageType;
     private debugMode: boolean = false;
@@ -99,40 +127,83 @@ export class Template<EntryType extends Record<string, string>> {
             return template.render(entry);
         });
 
-    // TODO: logic for rendering debug helpers
     container = (
         imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        box: BoundingBox,
         packingFn: PackingFn,
+        options?: ContainerOptions<EntryType>,
     ): this =>
-        this.layer(async (entry: EntryType) => {
+        this.layer(async (entry: EntryType, { debugMode }) => {
+            const mergedOptions: RequiredDeep<ContainerOptions<EntryType>> =
+                merge({}, DEFAULT_CONTAINER_OPTIONS, options);
+            if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
+                return undefined;
+            }
+
             const images = await imagesFn(entry);
-            return packingFn(this.shadowBackground(), images);
+            const result = await packingFn(
+                box,
+                this.shadowBackground(),
+                images,
+            );
+
+            // debug mode
+            if (debugMode) {
+                const debugImage = await drawBoundingBox(
+                    box,
+                    this.backgroundSize,
+                );
+                return debugImage.composite(result);
+            }
+
+            return result;
         });
 
     hbox = (
         imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
         box: BoundingBox,
-        options?: DirectionContainerOptions,
-    ): this => this.container(imagesFn, hboxPackingFn(box, options));
+        options?: DirectionContainerOptions<EntryType>,
+    ): this => this.container(imagesFn, box, hboxPackingFn(options), options);
 
     vbox = (
         imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
         box: BoundingBox,
-        options?: DirectionContainerOptions,
-    ): this => this.container(imagesFn, vboxPackingFn(box, options));
+        options?: DirectionContainerOptions<EntryType>,
+    ): this => this.container(imagesFn, box, vboxPackingFn(options), options);
+
+    grid = (
+        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        box: BoundingBox,
+        options?: GridContainerOptions<EntryType>,
+    ): this => this.container(imagesFn, box, gridPackingFn(options), options);
 
     image = (
         ref: ImageRef<EntryType>,
         box: BoundingBox,
-        options: ImageLayerOptions,
+        options: ImageLayerOptions<EntryType>,
     ): this =>
         this.layer(async (entry, { debugMode }) => {
-            const image = await this.pathFromImageRef(entry, ref, options);
+            const mergedOptions: RequiredDeep<ImageLayerOptions<EntryType>> =
+                merge(
+                    {},
+                    DEFAULT_IMAGE_LAYER_OPTIONS,
+                    { assetsPath: this.defaultAssetsPath },
+                    options,
+                );
+            if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
+                return undefined;
+            }
+
+            const image = await this.pathFromImageRef(
+                entry,
+                ref,
+                mergedOptions,
+            );
             const result = await placeImage({
                 image,
                 box,
                 backgroundSize: this.backgroundSize,
-                options,
+                options: mergedOptions,
             });
 
             // debug mode
@@ -146,6 +217,7 @@ export class Template<EntryType extends Record<string, string>> {
 
             return result;
         });
+
     loadImage = async (imagePath: string | Buffer): Promise<ImageType> => {
         const image = (await Jimp.read(imagePath)) as unknown as ImageType;
         return image;
@@ -154,22 +226,47 @@ export class Template<EntryType extends Record<string, string>> {
     text = (
         ref: TextRef<EntryType>,
         box: BoundingBox,
-        options?: TextLayerOptions,
+        options?: TextLayerOptions<EntryType>,
     ): this =>
         this.layer(async (entry, { debugMode }) => {
-            const text = this.textFromImageRef(entry, ref);
-            const fontFamily =
-                options?.font?.family ?? this.defaultFontFamily ?? 'Arial';
-            return renderText(text, box, this.backgroundSize, {
-                ...options,
-                font: { ...options?.font, family: fontFamily },
-            });
+            const mergedOptions = merge(
+                {},
+                DEFAULT_TEXT_LAYER_OPTIONS,
+                {
+                    font: {
+                        family: this.defaultFontFamily,
+                    },
+                } as FontOptions,
+                options,
+            );
+            if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
+                return undefined;
+            }
+
+            const text = this.textFromTextRef(entry, ref);
+            const result = await renderText(
+                text,
+                box,
+                this.backgroundSize,
+                mergedOptions,
+                this.fonts,
+            );
+
+            // debug mode
+            if (debugMode) {
+                const debugImage = await drawBoundingBox(
+                    box,
+                    this.backgroundSize,
+                );
+                return debugImage.composite(result);
+            }
+
+            return result;
         });
 
     font(path: fs.PathLike, name: string): this {
-        registerFont(path.toString(), {
-            family: name,
-        });
+        // TODO: pass font weight and font style as well
+        this.fonts[name] = fs.readFileSync(path.toString()).toString('base64');
         return this;
     }
 
@@ -179,13 +276,14 @@ export class Template<EntryType extends Record<string, string>> {
     }
 
     private async renderLayers(entry: EntryType): Promise<Array<ImageType>> {
-        return Promise.all(
+        const results = await Promise.all(
             this.layers.map(layerFn =>
                 layerFn(entry, {
                     debugMode: this.debugMode,
                 }),
             ),
         );
+        return results.filter(result => !!result);
     }
 
     async render(
@@ -258,12 +356,11 @@ export class Template<EntryType extends Record<string, string>> {
     private pathFromImageRef = async (
         entry: EntryType,
         ref: ImageRef<EntryType>,
-        options: ImageLayerOptions,
+        options: RequiredDeep<ImageLayerOptions<EntryType>>,
     ): Promise<ImageType> => {
-        const assetsPath = options?.assetsPath ?? this.defaultAssetsPath;
         const pathSegments = [];
-        if (assetsPath) {
-            pathSegments.push(assetsPath);
+        if (options.assetsPath) {
+            pathSegments.push(options.assetsPath);
         }
 
         if ('buffer' in ref) {
@@ -283,7 +380,7 @@ export class Template<EntryType extends Record<string, string>> {
         }
     };
 
-    private textFromImageRef = (
+    private textFromTextRef = (
         entry: EntryType,
         ref: TextRef<EntryType>,
     ): string => {
@@ -297,6 +394,14 @@ export class Template<EntryType extends Record<string, string>> {
             throw new Error('Unknown TextRef variant');
         }
     };
-}
 
-// TODO: Ledger of actions applied to the image like a logging feed
+    private shouldSkipLayerForEntry = (
+        entry: EntryType,
+        options: LayerOptions<EntryType>,
+    ): boolean => {
+        if (typeof options.skip === 'function') {
+            return options.skip(entry);
+        }
+        return options.skip ?? false;
+    };
+}