fix: stabilize generated Open Graph images

Install system fonts in the Docker build and configure Resvg to load them so generated OG images render text reliably. Also emit absolute OG image URLs in route metadata.

Dockerfile

@@ -5,7 +5,8 @@ ARG VITE_ANALYTICS_DOMAIN=coolify.io/docs
 ARG VITE_SITE_URL=https://coolify.io/docs/
 ENV VITE_ANALYTICS_DOMAIN=${VITE_ANALYTICS_DOMAIN}
 ENV VITE_SITE_URL=${VITE_SITE_URL}
-RUN apk add --no-cache nodejs npm
+RUN apk add --no-cache nodejs npm fontconfig ttf-dejavu font-noto font-noto-emoji
+RUN fc-cache -f
 
 # Set working directory and copy necessary files
 WORKDIR /app

scripts/postbuild.ts

@@ -119,7 +119,12 @@ async function writeOgImages() {
       await mkdir(dirname(outputPath), { recursive: true });
 
       const svg = renderOgSvg(doc.title, doc.description, logoDataUri);
-      const png = new Resvg(svg).render().asPng();
+      const png = new Resvg(svg, {
+        font: {
+          loadSystemFonts: true,
+          defaultFontFamily: 'DejaVu Sans',
+        },
+      }).render().asPng();
 
       await writeFile(outputPath, png);
     }),

src/routes/$.tsx

@@ -63,7 +63,7 @@ export const Route = createFileRoute('/$')({
     const title = data.isIndex ? site.title : `${data.title} | ${site.title}`;
     const description = data.description || site.description;
     const canonicalUrl = absoluteUrl(data.url.endsWith('/') ? data.url : `${data.url}`);
-    const ogImageUrl = data.ogImagePath;
+    const ogImageUrl = absoluteUrl(data.ogImagePath);
     const structuredData = {
       '@context': 'https://schema.org',
       '@type': data.isIndex ? 'WebPage' : 'TechArticle',