og/server.js

import html2png from '@besties/html2png'
import express from 'express'
import fs from 'node:fs'

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')
})

app.get('/:owner/:repo', async function (req, res) {
	let repo = await (
		await fetch(
			`https://git.gay/api/v1/repos/${req.params.owner}/${req.params.repo}`
		)
	).json()
	let infoHtml = `
    <p style="font-size: 36px; color: #9A8FA7;">${escape(
			repo.owner.full_name
		)} ${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>`

	let 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)