Use resvg instead of sharp

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>

lib/server/imageGenerator.d.ts

@@ -9,7 +9,6 @@ export type ImageGeneratorResult = {
 export declare class ImageGenerator {
     private args;
     private satori;
-    private sharp;
     private cache;
     private outDir;
     constructor(args: {

lib/server/imageGenerator.js

@@ -6,10 +6,10 @@ const fs = tslib_1.__importStar(require("fs"));
 const fsp = tslib_1.__importStar(require("fs/promises"));
 const object_hash_1 = tslib_1.__importDefault(require("object-hash"));
 const path_1 = tslib_1.__importDefault(require("path"));
+const resvg_js_1 = require("@resvg/resvg-js");
 class ImageGenerator {
     args;
     satori;
-    sharp;
     cache = {};
     outDir = '';
     constructor(args) {
@@ -18,7 +18,6 @@ class ImageGenerator {
     }
     init = async () => {
         this.satori = await import('satori').then((mod) => mod.default);
-        this.sharp = await import('sharp').then((mod) => mod.default);
         if (!fs.existsSync(this.outDir))
             await fsp.mkdir(this.outDir, { recursive: true });
     };
@@ -30,7 +29,8 @@ class ImageGenerator {
         const absolutePath = path_1.default.join(this.outDir, imageName);
         const relativePath = path_1.default.join('/', this.args.dir, absolutePath.slice(this.outDir.length));
         const svg = await this.satori(element, options);
-        await this.sharp(Buffer.from(svg)).png().toFile(absolutePath);
+        const pngBuffer = new resvg_js_1.Resvg(svg).render().asPng();
+        fs.writeFileSync(absolutePath, pngBuffer);
         const url = new URL(this.args.websiteUrl);
         url.pathname = relativePath;
         this.cache[hash] = {

package.json

@@ -21,11 +21,11 @@
     "@docusaurus/utils": "^2.4.1",
     "@docusaurus/utils-common": "^2.4.1",
     "@docusaurus/utils-validation": "^2.4.1",
+    "@resvg/resvg-js": "^2.6.0",
     "lodash": "^4.17.21",
     "node-html-parser": "^6.1.5",
     "object-hash": "^3.0.0",
-    "satori": "^0.10.13",
-    "sharp": "^0.32.1"
+    "satori": "^0.10.13"
   },
   "engines": {
     "node": ">=16.14"

src/server/imageGenerator.ts

@@ -6,7 +6,7 @@ import React from 'react'
 
 import type Satori from 'satori'
 import { type SatoriOptions } from 'satori'
-import type Sharp from 'sharp'
+import { Resvg } from "@resvg/resvg-js";
 
 export type ImageGeneratorOptions = SatoriOptions
 export type ImageGeneratorResult = {
@@ -17,7 +17,6 @@ export type ImageGeneratorResult = {
 
 export class ImageGenerator {
   private satori: typeof Satori
-  private sharp: typeof Sharp
   private cache: Record<string, ImageGeneratorResult> = {}
 
   private outDir: string = ''
@@ -34,7 +33,6 @@ export class ImageGenerator {
 
   public init = async () => {
     this.satori = await import('satori').then((mod) => mod.default)
-    this.sharp = await import('sharp').then((mod) => mod.default)
 
     if (!fs.existsSync(this.outDir))
       await fsp.mkdir(this.outDir, { recursive: true })
@@ -56,7 +54,8 @@ export class ImageGenerator {
     )
 
     const svg = await this.satori(element, options)
-    await this.sharp(Buffer.from(svg)).png().toFile(absolutePath)
+    const pngBuffer = new Resvg(svg).render().asPng();
+    fs.writeFileSync(absolutePath, pngBuffer);
 
     const url = new URL(this.args.websiteUrl)
     url.pathname = relativePath