switch to puppeteer

2023-12-21 08:21:41 -06:00 · 2023-12-21 08:21:41 -06:00 · 6e3bad10f8
commit 6e3bad10f8
parent 92b6846bbb
6 changed files with 611 additions and 667 deletions
--- a/lib/render.js
+++ b/lib/render.js
@ -1,35 +1,72 @@
-import html2png, { renderHTML as inline } from '@besties/html2png'
+import puppeteer from 'puppeteer'
 import fs from 'node:fs'

 const style = fs.readFileSync('./assets/style.css', 'utf8')

+const browser = await puppeteer.launch({
+	defaultViewport: {
+		width: 1200,
+		height: 600
+	},
+	headless: 'new',
+	// slowMo: 250,
+	args: [
+		// TODO: fix this
+		'--disable-gpu',
+		'--disable-dev-shm-usage',
+		'--disable-setuid-sandbox',
+		'--no-sandbox'
+	]
+})
+
+async function wait() {
+	const selectors = [...document.querySelectorAll('img')]
+	await Promise.all([
+		document.fonts.ready,
+		...selectors.map(img => {
+			// Image has already finished loading, let’s see if it worked
+			if (img.complete) {
+				// Image loaded and has presence
+				if (img.naturalHeight !== 0) return
+				// Image failed, so it has no height
+				throw new Error('Image failed to load')
+			}
+			// Image hasn’t loaded yet, added an event listener to know when it does
+			return new Promise((resolve, reject) => {
+				img.addEventListener('load', resolve)
+				img.addEventListener('error', reject)
+			})
+		})
+	])
+}
+
+export async function renderPage(html) {
+	const page = await browser.newPage()
+	try {
+		await page.setContent(html, {
+			waitUntil: 'domcontentloaded'
+		})
+		await page.evaluate(wait)
+		const buffer = await page.screenshot({
+			type: 'png',
+			encoding: 'binary'
+		})
+		await page.close()
+		return buffer
+	} catch {
+		await page.close()
+		throw new Error('Failed to render page')
+	}
+}
+
 export default async function (html, options = {}) {
-	return html2png(`<style>${style}</style>${html}`, options)
+	if (options.format == 'html') {
+		return await renderHtml(html)
+	}
+	return renderPage(`<style>${style}</style>${html}`)
 }

 export async function renderHtml(html) {
 	const styleNow = await fs.promises.readFile('./assets/style.css', 'utf8')
-	return (
-		`<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<style>
-	:root {
-		height: 100%;
-		font-family: 'DM Sans', Arial, Helvetica, sans-serif;
-	}
-	* {
-		font-family: inherit;
-	}
-	body {
-		margin: 0;
-		background-color: black;
-		display: grid;
-		place-items: center;
-		height: 100%;
-	}
-	</style>
-	<title>OpenGraph Debug Preview</title>
-</head>` + (await inline(`<style>${styleNow}</style>${html}`))
-	)
+	return `<style>${styleNow}</style>${html}`
 }