Merge pull request #978 from wwWallet/fix/metadata-image-font-environment-missing

fix: create font environment to use in metadata image and use Inter SemiBold

Author: gkatrakazas

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:22-bullseye-slim AS builder-base
 
-RUN apt-get update -y && apt-get install -y git && rm -rf /var/lib/apt/lists/*
+RUN apt-get update -y && apt-get install -y git fontconfig && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /home/node/app
 

package.json

@@ -70,6 +70,7 @@
     "depcheck": "^1.4.7",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
+    "fonteditor-core": "^2.6.3",
     "jsdom": "^26.0.0",
     "sharp": "^0.34.5",
     "vite": "^6.1.0",

vite-plugins/metadata-image.ts

@@ -1,12 +1,64 @@
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { Plugin } from "vite";
 import sharp from "sharp";
 import convert, { RGB } from "color-convert"
+import { createFont, woff2 } from "fonteditor-core";
 import { findBrandingFile, findLogoFile } from "./brandingManifest";
 import { getThemeFile } from "./theme";
 
 type Env = Record<string, string|null|undefined>;
 
+const fontsConfTemplate = `<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+	<dir prefix="relative">./</dir>
+	<config></config>
+</fontconfig>
+`;
+
+/**
+ * Sets up a self-contained font environment:
+ * 1. Converts a WOFF2 font to TTF for Node rendering.
+ * 2. Writes the font and a minimal Fontconfig XML to a project directory.
+ * 3. Sets FONTCONFIG_PATH so rendering libraries can find the font.
+ *
+ * The reason for converting from WOFF2 to TTF is so we can keep using the
+ * `@fontsource/inter` package and not need to bundle font files.
+ */
+async function setupFontsEnvironment(baseDir: string) {
+	const fontsConfDir = path.resolve(baseDir, "fonts");
+	const inputFontFiles = [
+		import.meta.resolve("@fontsource/inter/files/inter-latin-600-normal.woff2"),
+	];
+
+	await woff2.init();
+	await mkdir(fontsConfDir, { recursive: true });
+
+	for (const input of inputFontFiles) {
+		const inputBuffer = await readFile(fileURLToPath(input));
+
+		const font = createFont(inputBuffer, {
+			type: "woff2",
+			hinting: true,
+			kerning: true,
+		});
+
+		const outputBuffer = font.write({
+			type: "ttf",
+			hinting: true,
+			kerning: true,
+		});
+
+		await writeFile(path.join(fontsConfDir, path.basename(input)), outputBuffer as Buffer);
+	}
+
+	await writeFile(path.join(fontsConfDir, "fonts.conf"), fontsConfTemplate),
+
+	process.env.FONTCONFIG_PATH = fontsConfDir;
+}
+
 function splitTitle(title: string, maxLength: number): string[] {
 	const lines: string[] = [];
 	let remainingTitle = title;
@@ -69,20 +121,11 @@ type ImageTemplateProps = {
 		text: string;
 	}
 }
-
 const imageTemplate = ({ title, logoB64, colors }: ImageTemplateProps) => `
 <svg width="1200" height="628" viewBox="0 0 1200 628" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<style>
-		.header {
-			dominant-baseline: hanging;
-		}
-		.footer {
-			dominant-baseline: alphabetic;
-		}
-	</style>
 	<rect x="0" y="0" width="1200" height="628" fill="${colors.background}" />
 	${logoTemplate(logoB64, 250)}
-	<g fill="${colors.text}" font-family="Arial" font-weight="bold">
+	<g fill="${colors.text}" font-family="Inter SemiBold">
 		${titleTemplate(title)}
 	</g>
 </svg>
@@ -202,6 +245,9 @@ export function MetadataImagePlugin(env: Env): Plugin {
 	return {
 		name: "metadata-image-plugin",
 
+		async configResolved(config) {
+			await setupFontsEnvironment(config.cacheDir);
+		},
 		async configureServer(server) {
 			let image = await generateMetadataImage(env);
 

yarn.lock

@@ -2787,6 +2787,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
   integrity sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==
 
+"@xmldom/xmldom@^0.8.3":
+  version "0.8.11"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.11.tgz#b79de2d67389734c57c52595f7a7305e30c2d608"
+  integrity sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==
+
 "@zxing/text-encoding@0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
@@ -4367,6 +4372,13 @@ follow-redirects@^1.15.6:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
   integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
+fonteditor-core@^2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/fonteditor-core/-/fonteditor-core-2.6.3.tgz#0a1c5abcc75a6de8348f67b9cb886a88adde18ca"
+  integrity sha512-YUryIKjkenjZ41E7JvM3V+02Ak4mTHDDTwBWgs9KBzypzHqLZHuua1UDRevZNTKawmnq1dbBAa70Jddl2+F4FQ==
+  dependencies:
+    "@xmldom/xmldom" "^0.8.3"
+
 for-each@^0.3.3:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"