working og images fonts

Author: TGlide

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "testing.automaticallyOpenPeekView": "never"
+}

Dockerfile

@@ -1,20 +1,24 @@
-FROM node:20-bullseye AS build
+# Use an official Node runtime as a parent image
+FROM node:latest
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
 WORKDIR /app
 COPY . .
 
+# Remove the node_modules folder to avoid wrong binaries
+RUN rm -rf node_modules
+
+# Install fontconfig
+COPY ./local-fonts /usr/share/fonts
+RUN apt-get update; apt-get install -y fontconfig
+RUN fc-cache -f -v
+
 RUN corepack enable
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install 
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install
 RUN NODE_OPTIONS=--max_old_space_size=4096 pnpm run build
 
-# Node alpine image to serve the generated static files
-FROM node:20-alpine AS serve
-
-WORKDIR /app
-COPY --from=build /app .
 
 EXPOSE 3000
 CMD [ "node", "server/main.js"]

local-fonts/AeonikFono-Regular.ttf

@@ -60,6 +60,7 @@
         "@appwrite.io/pink": "0.1.0-next.9",
         "@appwrite.io/pink-icons": "0.1.0-next.9",
         "@appwrite.io/repo": "github:appwrite/appwrite#main",
+        "@resvg/resvg-js": "^2.6.0",
         "@splinetool/viewer": "0.9.455",
         "appwrite": "^13.0.1",
         "compression": "^1.7.4",
@@ -75,11 +76,17 @@
             "os": [
                 "win32",
                 "darwin",
-                "current"
+                "current",
+                "linux",
+                "linuxmusl"
             ],
             "cpu": [
                 "x64",
                 "arm64"
+            ],
+            "libc": [
+                "musl",
+                "glibc"
             ]
         }
     }

local-fonts/AeonikPro-Regular.ttf

@@ -1 +1,2 @@
 export const ssr = false;
+export const prerender = false;

package.json

@@ -1,11 +1,11 @@
 import { PUBLIC_APPWRITE_COL_INIT_ID, PUBLIC_APPWRITE_DB_INIT_ID } from '$env/static/public';
 import { appwriteInit } from '$lib/appwrite/init.js';
 import sharp from 'sharp';
+
 import type { Ticket } from '../../constants.js';
 
-const getSvg = (
-    ticket: Ticket
-) => `<svg width="438" height="249" viewBox="0 0 438 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+const getSvg = (ticket: Ticket) => `
+<svg width="876" height="498" viewBox="0 0 438 249" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_b_327_1972)">
   <g clip-path="url(#clip0_327_1972)">
     <rect width="438" height="249" rx="18" fill="#19191C" />
@@ -820,6 +820,33 @@ const getSvg = (
 </svg>
 `;
 
+// export async function GET({ params, url }) {
+//     const ticket = (await appwriteInit.database.getDocument(
+//         PUBLIC_APPWRITE_DB_INIT_ID,
+//         PUBLIC_APPWRITE_COL_INIT_ID,
+//         params.id
+//     )) as unknown as Ticket;
+//     const svg = getSvg(ticket);
+
+//     const resvg = new Resvg(svg, {
+//         font: {
+//             fontFiles: [
+//                 `${url.origin}/static/fonts/AeonikPro-Regular.woff2`,
+//                 `${url.origin}/static/fonts/AeonikPro-Bold.woff2`,
+//                 `${url.origin}/static/fonts/AeonikFono-Regular.woff2`
+//             ]
+//         }
+//     });
+//     const pngData = resvg.render();
+//     const pngBuffer = pngData.asPng();
+
+//     return new Response(pngBuffer, {
+//         headers: {
+//             'Content-Type': 'image/png'
+//         }
+//     });
+// }
+
 export async function GET({ params }) {
     const ticket = (await appwriteInit.database.getDocument(
         PUBLIC_APPWRITE_DB_INIT_ID,
@@ -829,7 +856,7 @@ export async function GET({ params }) {
     const svg = getSvg(ticket);
 
     const svgBuffer = Buffer.from(svg);
-    const pngBuffer = await sharp(svgBuffer)
+    const pngBuffer = await sharp(svgBuffer, {})
         .resize({
             width: 1000
         })