feat: svg responses

src/core/ui/jsxToSvg.ts

@@ -0,0 +1,42 @@
+import { readFile } from 'fs';
+import { join } from 'path';
+import satori from 'satori';
+import robotoBlackFile from '../../assets/fonts/Roboto-Black.ttf';
+import robotoBoldFile from '../../assets/fonts/Roboto-Bold.ttf';
+import robotoFile from '../../assets/fonts/Roboto.ttf';
+
+const FONT_NAME = 'Roboto';
+const FONT_FILES = [robotoFile, robotoBoldFile, robotoBlackFile];
+
+let roboto: Buffer;
+let robotoBold: Buffer;
+let robotoBlack: Buffer;
+
+console.log('Importing fonts...');
+Promise.all(
+  FONT_FILES.map(
+    (file) =>
+      new Promise<Buffer>((resolve, reject) => {
+        const path = join(__dirname, file);
+
+        readFile(path, (error, data) => {
+          if (error) reject(error);
+          resolve(data);
+        });
+      }),
+  ),
+).then((data) => {
+  [roboto, robotoBold, robotoBlack] = data;
+  console.log('Fonts imported');
+});
+
+export default async function jsxToSvg(jsx: JSX.Element) {
+  return await satori(jsx, {
+    width: 640,
+    fonts: [
+      { data: roboto, name: FONT_NAME, weight: 400 },
+      { data: robotoBold, name: FONT_NAME, weight: 700 },
+      { data: robotoBlack, name: FONT_NAME, weight: 900 },
+    ],
+  });
+}

src/core/ui/render.tsx

@@ -1,48 +1,9 @@
-import { Resvg } from '@resvg/resvg-js';
-import { readFile } from 'fs';
-import { join } from 'path';
-import { ReactNode } from 'react';
-import satori from 'satori';
-import robotoBlackFile from '../../assets/fonts/Roboto-Black.ttf';
-import robotoBoldFile from '../../assets/fonts/Roboto-Bold.ttf';
-import robotoFile from '../../assets/fonts/Roboto.ttf';
+import jsxToSvg from './jsxToSvg.js';
+import svgToPng from './svgToPng.js';
 
-const FONT_NAME = 'Roboto';
-const FONT_FILES = [robotoFile, robotoBoldFile, robotoBlackFile];
-
-let roboto: Buffer;
-let robotoBold: Buffer;
-let robotoBlack: Buffer;
-
-console.log('Importing fonts...');
-Promise.all(
-  FONT_FILES.map(
-    (file) =>
-      new Promise<Buffer>((resolve, reject) => {
-        const path = join(__dirname, file);
-
-        readFile(path, (error, data) => {
-          if (error) reject(error);
-          resolve(data);
-        });
-      }),
-  ),
-).then((data) => {
-  [roboto, robotoBold, robotoBlack] = data;
-  console.log('Fonts imported');
-});
-
-export default async function render(element: ReactNode) {
-  const svg = await satori(element, {
-    width: 640,
-    fonts: [
-      { data: roboto, name: FONT_NAME, weight: 400 },
-      { data: robotoBold, name: FONT_NAME, weight: 700 },
-      { data: robotoBlack, name: FONT_NAME, weight: 900 },
-    ],
-  });
-
-  const png = new Resvg(svg).render().asPng();
+export default async function render(jsx: JSX.Element) {
+  const svg = await jsxToSvg(jsx);
+  const png = svgToPng(svg);
 
   return png;
 }

src/core/ui/svgToPng.ts

@@ -0,0 +1,5 @@
+import { Resvg } from "@resvg/resvg-js";
+
+export default function svgToPng(svg: string) {
+  return new Resvg(svg).render().asPng()
+}

src/server.ts

@@ -1,7 +1,18 @@
 import express from 'express';
+import jsxToSvg from './core/ui/jsxToSvg.js';
+import today from './renderers/today.js';
 
 const app = express();
 
-app.get('/', (req, res) => {
-  res.send('Hello World!');
+app.get('/', async (req, res) => {
+  const jsx = await today({ server: 'com', id: 1028700193 });
+  const svg = await jsxToSvg(jsx);
+
+  res.writeHead(200, {
+    'Content-Type': 'image/svg+xml',
+    'Content-Length': svg.length,
+  });
+  res.end(svg);
 });
+
+app.listen(process.env.PORT || 3000);