switch to eta

assets/style.css

@@ -0,0 +1,38 @@
+p {
+	margin: 0;
+}
+
+.main {
+	color: #ffffff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #1b171f;
+	width: 1200px;
+	height: 600px;
+}
+
+.contents {
+	display: flex;
+}
+
+.info {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 800px;
+	gap: 10px;
+}
+
+.graphics {
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-start;
+	width: 240px;
+}
+
+.graphics > img {
+	border-radius: 100%;
+	width: 120px;
+	height: 120px;
+}

lib/render.js

@@ -0,0 +1,35 @@
+import html2png from '@besties/html2png'
+import fs from 'node:fs'
+
+const figtreeRegular = fs.readFileSync('./assets/Figtree-Regular.woff')
+const figtreeMedium = fs.readFileSync('./assets/Figtree-Medium.woff')
+const figtreeExtraBold = fs.readFileSync('./assets/Figtree-ExtraBold.woff')
+
+const css = fs.readFileSync('./assets/style.css', 'utf8')
+
+const renderOptions = {
+	fonts: [
+		{
+			name: 'Figtree',
+			data: figtreeRegular,
+			weight: 400,
+			style: 'normal'
+		},
+		{
+			name: 'Figtree',
+			data: figtreeMedium,
+			weight: 500,
+			style: 'normal'
+		},
+		{
+			name: 'Figtree',
+			data: figtreeExtraBold,
+			weight: 800,
+			style: 'normal'
+		}
+	]
+}
+
+export default function (html) {
+	return html2png(html, css, renderOptions)
+}

package.json

@@ -15,6 +15,7 @@
 	"license": "ISC",
 	"dependencies": {
 		"@besties/html2png": "^0.1.2",
+		"eta": "^3.1.0",
 		"express": "^4.18.2"
 	},
 	"type": "module",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@besties/html2png':
     specifier: ^0.1.2
     version: 0.1.2
+  eta:
+    specifier: ^3.1.0
+    version: 3.1.0
   express:
     specifier: ^4.18.2
     version: 4.18.2
@@ -635,6 +638,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /eta@3.1.0:
+    resolution: {integrity: sha512-my4rbVATtKt9P7oNH6NkynI2bMY081ak9mZfX5Hh2tZ0HHCMhhFKYh6KH9NyUTRMTgohYd2Pd8lA2b9IbR0WrA==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}

server.js

@@ -1,33 +1,13 @@
-import html2png from '@besties/html2png'
 import express from 'express'
-import fs from 'node:fs'
+import { Eta } from 'eta'
+import render from './lib/render.js'
+const eta = new Eta({
+	views: 'views',
+	cache: false
+})
 
 const app = express()
 
-const figtreeRegular = fs.readFileSync('./assets/Figtree-Regular.woff')
-const figtreeMedium = fs.readFileSync('./assets/Figtree-Medium.woff')
-const figtreeExtraBold = fs.readFileSync('./assets/Figtree-ExtraBold.woff')
-const ATTR_REGEX = /["&]/g
-const CONTENT_REGEX = /[&<]/g
-
-function escape(value, is_attr = false) {
-	const str = String(value)
-	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX
-	pattern.lastIndex = 0
-	let escaped = ''
-	let last = 0
-	while (pattern.test(str)) {
-		const i = pattern.lastIndex - 1
-		const ch = str[i]
-		escaped +=
-			// eslint-disable-next-line unicorn/prefer-string-slice
-			str.substring(last, i) +
-			(ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;')
-		last = i + 1
-	}
-	return escaped + str.slice(Math.max(0, last))
-}
-
 app.get('/', function (req, res) {
 	res.redirect('https://git.gay/gitgay/og.git')
 })
@@ -37,97 +17,9 @@ app.get('/:owner/:repo', async function (req, res) {
 		`https://git.gay/api/v1/repos/${req.params.owner}/${req.params.repo}`
 	)
 	const repo = await repoResp.json()
-	let infoHtml = `
+	res.type('png')
-    <p style="font-size: 36px; color: #9A8FA7;">${escape(
+	res.set('Content-Disposition', 'inline')
-			repo.owner.full_name
+	res.send(await render(await eta.renderAsync('repo', { repo })))
-		)} ${escape(`@${repo.owner.login}`)}</p>
-    <p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;">${escape(
-			repo.name
-		)}</p>
-  `
-
-	if (repo.description)
-		infoHtml = `${infoHtml}<p style="font-size: 42px; font-weight: 500; color: #9A8FA7;">${escape(
-			repo.description
-		)}</p>`
-
-	const img = await html2png(
-		`<div class="main">
-			<div class="contents">
-				<div class="info">
-					${infoHtml}
-				</div>
-				<div class="graphics">
-					<img width="120" height="120" src="${escape(
-						repo.avatar_url || repo.owner.avatar_url,
-						true
-					)}"></img>
-				</div>
-			</div>
-		</div>`,
-		`p {
-			margin: 0;
-		}
-
-		.main {
-			color: #ffffff;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background-color: #1B171F;
-			width: 1200px;
-			height: 600px;
-		}
-
-		.contents {
-			display: flex;
-		}
-
-		.info {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			width: 800px;
-			gap: 10px;
-		}
-
-		.graphics {
-			display: flex;
-			justify-content: flex-end;
-			align-items: flex-start;
-			width: 240px;
-		}
-
-		.graphics > img {
-			border-radius: 100%;
-			width: 120px;
-			height: 120px;
-		}`,
-		{
-			fonts: [
-				{
-					name: 'Figtree',
-					data: figtreeRegular,
-					weight: 400,
-					style: 'normal'
-				},
-				{
-					name: 'Figtree',
-					data: figtreeMedium,
-					weight: 500,
-					style: 'normal'
-				},
-				{
-					name: 'Figtree',
-					data: figtreeExtraBold,
-					weight: 800,
-					style: 'normal'
-				}
-			]
-		}
-	)
-
-	res.send(img)
 })
 
 app.listen(8085)

views/repo.eta

@@ -0,0 +1,14 @@
+<div class="main">
+	<div class="contents">
+		<div class="info">
+			<p style="font-size: 36px; color: #9A8FA7;"><%= it.repo.owner.full_name %> @<%= it.repo.owner.login %></p>
+			<p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;"><%= it.repo.name %></p>
+			<% if (it.repo.description) { %>
+				<p style="font-size: 42px; font-weight: 500; color: #9A8FA7;"><%= it.repo.description %></p>
+			<% } %>
+		</div>
+		<div class="graphics">
+			<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
+		</div>
+	</div>
+</div>