working og images fonts

.vscode/settings.json

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

Dockerfile

@@ -1,4 +1,5 @@
-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"
@@ -6,15 +7,18 @@ 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 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"]

package.json

@@ -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"
             ]
         }
     }

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   '@appwrite.io/repo':
     specifier: github:appwrite/appwrite#main
     version: github.com/appwrite/appwrite/5a715ff68cba4171bf3473eabc83b84a4ae5876c
+  '@resvg/resvg-js':
+    specifier: ^2.6.0
+    version: 2.6.0
   '@splinetool/viewer':
     specifier: 0.9.455
     version: 0.9.455
@@ -1066,7 +1069,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-android-arm64@2.6.0:
@@ -1075,7 +1077,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-darwin-arm64@2.6.0:
@@ -1084,7 +1085,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-darwin-x64@2.6.0:
@@ -1093,7 +1093,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-linux-arm-gnueabihf@2.6.0:
@@ -1102,7 +1101,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-linux-arm64-gnu@2.6.0:
@@ -1111,7 +1109,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-linux-arm64-musl@2.6.0:
@@ -1120,7 +1117,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-linux-x64-gnu@2.6.0:
@@ -1129,7 +1125,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-linux-x64-musl@2.6.0:
@@ -1138,7 +1133,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-win32-arm64-msvc@2.6.0:
@@ -1147,7 +1141,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-win32-ia32-msvc@2.6.0:
@@ -1156,7 +1149,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js-win32-x64-msvc@2.6.0:
@@ -1165,7 +1157,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /@resvg/resvg-js@2.6.0:
@@ -1184,7 +1175,6 @@ packages:
       '@resvg/resvg-js-win32-arm64-msvc': 2.6.0
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
       '@resvg/resvg-js-win32-x64-msvc': 2.6.0
-    dev: true
 
   /@rollup/plugin-commonjs@25.0.7(rollup@3.29.4):
     resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}

src/routes/init/ticket/+layout.ts

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

src/routes/init/ticket/[id]/og/+server.ts

@@ -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 = (
+const getSvg = (ticket: Ticket) => `
-    ticket: Ticket
+<svg width="876" height="498" viewBox="0 0 438 249" fill="none" xmlns="http://www.w3.org/2000/svg">
-) => `<svg width="438" height="249" 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
         })