feat: support for async template

Fixes #1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "og-images-generator",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Generate OG images from a static folder and / or a middleware.\nExtract metadata from HTML pages. No headless browser involved.\nComes as a CLI, API or plugins.",
   "keywords": [
     "og-images",

src/render.js

@@ -48,7 +48,7 @@ export async function renderOgImage(userConfig, page) {
 	const pageOrDefaults = page || { path: '', meta: { tags: {}, jsonLds: [] } };
 	const templateOptions = { page: pageOrDefaults };
 
-	const template = userConfig.template(templateOptions);
+	const template = await Promise.resolve(userConfig.template(templateOptions));
 
 	/**
 	 * `decodeHTML` is a hack because for now, we can't use `unsafeHTML` with

test/__fixtures__/og-images-async.config.fixture.js

@@ -0,0 +1,40 @@
+import { html, styled, OG_SIZE, FONTS } from 'og-images-generator';
+
+/** @type {import('og-images-generator').PathsOptions} (Optional) */
+export const paths = {
+	// DEFAULTS:
+	base: './dist',
+	out: './dist/og',
+	json: './dist/og/index.json',
+};
+
+const myInlineStyle1 = styled.div`
+	display: flex;
+`;
+
+const nestedTemplate1 = html`<span>My Website</span>`;
+
+async function iAmABlocker() {
+	const stuff = await new Promise((resolve) =>
+		setTimeout(() => resolve('ok then'), 10),
+	);
+
+	return stuff;
+}
+
+/** @type {import('og-images-generator').Template} */
+export const template = async ({ page }) =>
+	html` <!-- Contrived example -->
+		<div style=${myInlineStyle1}>
+			${page.meta?.tags?.['og:title'] ?? 'Untitled'} <br />
+			${page.meta?.tags?.['og:description'] ?? 'No description'}
+			<!-- -->
+			${nestedTemplate1}
+			<em>Nice</em>
+			<strong>Weather, ${await iAmABlocker()}</strong>
+		</div>`;
+
+/** @type {import('og-images-generator').RenderOptions} */
+export const renderOptions = {
+	satori: { fonts: [await FONTS.sourceSans()], ...OG_SIZE },
+};

test/index.test.js

@@ -3,6 +3,7 @@ import assert from 'node:assert';
 
 import * as api from '../src/api.js';
 import { hash } from './_utils.js';
+// import { writeFile } from 'node:fs/promises';
 
 const options = {
 	base: process.cwd() + '/test/__fixtures__/pages',
@@ -47,3 +48,25 @@ test('Generate single image', async (t) => {
 
 	assert.equal(hash(image), 'ad6a8e499e03a59a1c29e490e7d3f424');
 });
+
+test('Generate single image with async. template', async (t) => {
+	const config = await api.loadUserConfig(
+		process.cwd() + '/test/__fixtures__/og-images-async.config.fixture.js',
+	);
+
+	const image = await api.renderOgImage(config, {
+		path: '/nested/page',
+		meta: {
+			tags: { 'og:title': 'hello', 'og:description': 'there' },
+			jsonLds: [],
+		},
+	});
+
+	// NOTE: For quick visual tests
+	// await writeFile(
+	// 	process.cwd() + '/test/__fixtures__/.test-outputs/img-test.png',
+	// 	image,
+	// );
+
+	assert.equal(hash(image), '62b3609ee5fd7ed967ae24a6682ccdbe');
+});