@ethercorps/sveltekit-og 1.2.2 → 2.0.0

package/README.md

@@ -1,74 +1,24 @@
-# Open Graph Image Generation
+# SvelteKit Open Graph Image Generation
 
-About
-Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit.
+Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
 
-## v1.0.0 Update (Breaking Changes)
+## Installation
 
-Finally, We have added html to react like element like object converter out of the box and with svelte compiler.
-Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
-
-```typescript
-// +page.server.js
-
-import { toReactElement, satori } from '@ethercorps/sveltekit-og';
-
-const htmlString = `
-        <div tw="bg-gray-50 flex w-full">
-        <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
-          <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
-            <span>Ready to dive in?</span>
-            <span tw="text-indigo-600">Start your free trial today.</span>
-          </h2>
-          <div tw="mt-8 flex md:mt-0">
-            <div tw="flex rounded-md shadow">
-              <a tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
-            </div>
-            <div tw="ml-3 flex rounded-md shadow">
-              <a tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
-            </div>
-          </div>
-        </div>
-        </div>
-        `;
-const newNode = toReactElement(htmlString);
-
-/** @type {import('./$types').PageServerLoad} */
-export async function load() {
-	const fontFile400 = await fetch(
-		'https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'
-	);
-	const fontData400 = await fontFile400.arrayBuffer();
-	const svg = await satori(newNode, {
-		height: 350,
-		width: 500,
-		fonts: [
-			{
-				name: 'sans serif',
-				data: fontData400,
-				style: 'normal',
-				weight: 700
-			}
-		]
-	});
-
-	return { svg };
-}
+```bash
+pnpm install -D @ethercorps/sveltekit-og
+```
+> Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
+> 
+```bash
+pnpm i -D url
 ```
 
-- We have changed to function based instead of class based ImageResponse and componentToImageResponse.
-- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
-- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
-  > If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
-
-> If you find any issue and have suggestion for this project please open a ticket and if you want to contribute please create a new discussion.
-
-## Quick Start
+## Usage
 
-Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (+server.ts or +server.js):
+Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
 
 ```typescript
-// /routes/og/+server.ts
+// src/routes/og/+server.ts
 import { ImageResponse } from '@ethercorps/sveltekit-og';
 import { RequestHandler } from './$types';
 
@@ -90,31 +40,49 @@ const template = `
     </div>
   </div>
 `;
+
 const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
 export const GET: RequestHandler = async () => {
-	return await ImageResponse(template, {
-		height: 250,
-		width: 500,
-		fonts: [
-			{
-				name: 'Inter Latin',
-				data: fontData,
-				weight: 400
-			}
-		]
-	});
+  return await ImageResponse(template, {
+    height: 630,
+    width: 1200,
+    fonts: [
+      {
+        name: 'Inter Latin',
+        data: fontData,
+        weight: 400
+      }
+    ]
+  });
 };
 ```
 
-Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rendered and responded as a PNG from that api/endpoint:
+Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. 
+
+## Example Output
 
 ![Rendered OG image](static/demo.png)
 
-Read more about the API, supported features and check out the examples on Satori Playground.
+## Headers
+
+When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used.
+
+
+## Styling
+
+Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css). 
+
+Satori supports only a subset of HTML and CSS. For full details, see [Satori’s documentation](https://github.com/vercel/satori#documentation). Notably, Satori only supports flex-based layouts.
 
-## Examples:
+## Fonts
+
+Satori supports `ttf`, `otf`, and `woff` font formats. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`.
+
+By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch. 
+
+## Examples
 
 - `ImageResponse` · [_source_](/src/routes/new/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/new)
 - `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
@@ -131,59 +99,76 @@ import {SvelteComponent} from "svelte";
 ImageResponse(
     element : string,
     options : {
-    width ? : number = 1200
-    height ? : number = 630
-    fonts ? : {
-        name: string,
-        data: ArrayBuffer,
-        weight: number,
-        style: 'normal' | 'italic'
-    }[]
-    debug ? : boolean = false
-    graphemeImages ? : Record<string, string>;
-    loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
-    // Options that will be passed to the HTTP response
-    status ? : number = 200
-    statusText ? : string
-    headers ? : Record<string, string>
+      width ? : number = 1200
+      height ? : number = 630,
+      backgroundColor ? : string = "#fff"       
+      fonts ? : {
+          name: string,
+          data: ArrayBuffer,
+          weight: number,
+          style: 'normal' | 'italic'
+      }[]
+      debug ? : boolean = false
+      graphemeImages ? : Record<string, string>;
+      loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+      // Options that will be passed to the HTTP response
+      status ? : number = 200
+      statusText ? : string
+      headers ? : Record<string, string>
     })
 
 componentToImageResponse(
     component : typeof SvelteComponent,
     props : {}, // All export let example inside prop dictionary
     options : {
-    width ? : number = 1200
-    height ? : number = 630
-    fonts ? : {
-        name: string,
-        data: ArrayBuffer,
-        weight: number,
-        style: 'normal' | 'italic'
-    }[]
-    debug ? : boolean = false
-    graphemeImages ? : Record<string, string>;
-    loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
-    // Options that will be passed to the HTTP response
-    status ? : number = 200
-    statusText ? : string
-    headers ? : Record<string, string>
+      width ? : number = 1200
+      height ? : number = 630
+      fonts ? : {
+          name: string,
+          data: ArrayBuffer,
+          weight: number,
+          style: 'normal' | 'italic'
+      }[]
+      debug ? : boolean = false
+      graphemeImages ? : Record<string, string>;
+      loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+      // Options that will be passed to the HTTP response
+      status ? : number = 200
+      statusText ? : string
+      headers ? : Record<string, string>
     })
 ```
 
-When running in production, these headers will be included by `@ethercorps/sveltekit-og`:
+## Changelog
 
-```typescript
-'content-type': 'image/png',
-'cache-control': 'public, immutable, no-transform, max-age=31536000',
+### v1.2.3 Update (Breaking Changes)
+> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
+
+```
+npm i @resvg/resvg-js
 ```
 
-During development, the `cache-control: no-cache, no-store` header is used instead.
+```
+npm i satori
+```
+
+> From now on their will be no issues related to build, and soon this library going to have its own documentation.
 
-### Supported HTML and CSS Features
+### v1.2.2 Update (Breaking Change)
 
-Please refer to [Satori’s documentation](https://github.com/vercel/satori#documentation) for a list of supported HTML and CSS features.
+- We don't provide access to satori from `@ethercorps/sveltekit-og`.
 
-By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. If you need to use other fonts, you can pass them in the `fonts` option.
+### v1.0.0 Update (Breaking Changes)
+
+Finally, We have added html to react like element like object converter out of the box and with svelte compiler.
+Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
+
+- We have changed to function based instead of class based ImageResponse and componentToImageResponse.
+- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
+- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
+  > If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
+
+> If you find any issue and have suggestion for this project please open a ticket and if you want to contribute please create a new discussion.
 
 ## Acknowledgements
 
@@ -191,9 +176,13 @@ This project will not be possible without the following projects:
 
 - [Satori & @vercel/og](https://github.com/vercel/satori)
 - [Noto by Google Fonts](https://fonts.google.com/noto)
-- [Resvg.js](https://github.com/yisibl/resvg-js)
+- [svg2png-wasm](https://github.com/ssssota/svg2png-wasm)
 
 ## Authors
 
 - [@theetherGit](https://www.github.com/theetherGit)
 - [@etherCorps](https://www.github.com/etherCorps)
+
+## Contributors
+
+- [@jasongitmail](https://github.com/jasongitmail)

package/index.d.ts

@@ -9,8 +9,9 @@ type ImageOptions = {
     height?: number;
     debug?: boolean;
     fonts?: SatoriOptions['fonts'];
+    backgroundColor?: string;
     graphemeImages?: Record<string, string>;
     loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions['fonts'] | string | undefined>;
 };
-type ImageResponseType = typeof ImageResponse;
-export { componentToImageResponse, ImageResponse, toReactElement, type ImageResponseType };
+export type ImageResponseType = typeof ImageResponse;
+export { componentToImageResponse, ImageResponse, toReactElement };

package/index.js

@@ -1,8 +1,15 @@
 import satori, {} from 'satori';
-import { Resvg } from '@resvg/resvg-js';
 import toReactElement from './toReactElement';
+import { svg2png, initialize } from 'svg2png-wasm';
+let initialized = false;
 const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
 const fontData = await fontFile.arrayBuffer();
+const indexWasmRes = await fetch('https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm');
+const svg2PngWasmBuffer = await indexWasmRes.arrayBuffer();
+const initSvgToPng = async () => {
+    await initialize(svg2PngWasmBuffer).catch((e) => console.log(e));
+    initialized = true;
+};
 const ImageResponse = async (htmlTemplate, optionsByUser) => {
     const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
     const svg = await satori(toReactElement(htmlTemplate), {
@@ -18,15 +25,19 @@ const ImageResponse = async (htmlTemplate, optionsByUser) => {
             }
         ]
     });
-    const reSvgOptions = {
-        fitTo: {
-            mode: 'width',
-            value: options.width
-        }
+    if (!initialized) {
+        await initSvgToPng();
+        initialized = true;
+    }
+    const defaultConfig = {
+        width: options.width,
+        height: options.height, // optional
     };
-    const reSvgObject = new Resvg(svg, reSvgOptions);
-    const pngData = await reSvgObject.render().asPng();
-    return new Response(pngData, {
+    if (Object.hasOwn(options, 'backgroundColor')) {
+        defaultConfig.backgroundColor = options.backgroundColor;
+    }
+    const png = await svg2png(svg, defaultConfig);
+    return new Response(png, {
         headers: {
             'Content-Type': 'image/png',
             'cache-control': 'public, immutable, no-transform, max-age=31536000',

package/package.json

@@ -1,39 +1,36 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "private": false,
   "devDependencies": {
-    "@playwright/test": "^1.31.2",
-    "@resvg/resvg-js": "^2.4.1",
+    "@playwright/test": "^1.34.3",
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/adapter-vercel": "^2.3.2",
+    "@sveltejs/adapter-vercel": "^2.4.3",
     "@sveltejs/kit": "1.10.0",
     "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "autoprefixer": "^10.4.14",
     "brace": "^0.11.1",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
-    "prettier-plugin-svelte": "^2.9.0",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
     "prismjs": "^1.29.0",
-    "satori": "^0.4.3",
-    "svelte": "^3.57.0",
+    "svelte": "^3.59.1",
     "svelte-check": "^2.10.3",
     "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.2.7",
-    "tslib": "^2.5.0",
+    "tailwindcss": "^3.3.2",
+    "tslib": "^2.5.3",
     "typescript": "^4.9.5",
-    "vite": "^4.2.0"
+    "vite": "^4.3.9"
   },
   "type": "module",
-  "peerDependencies": {
-    "@resvg/resvg-js": "^2.4.1",
-    "satori": "^0.4.1",
-    "svelte": "^3.54.0"
+  "dependencies": {
+    "satori": "^0.10.1",
+    "svg2png-wasm": "^1.4.0"
   },
   "keywords": [
     "open graph image",

package/toReactElement.d.ts

@@ -6,5 +6,5 @@ interface VNode {
         [prop: string]: any;
     };
 }
-declare const toReactElement: (htmlString: string) => VNode;
+export declare const toReactElement: (htmlString: string) => VNode;
 export default toReactElement;

package/toReactElement.js

@@ -50,7 +50,7 @@ const root = {
     }
 };
 /* End of satori-html */
-const toReactElement = (htmlString) => {
+export const toReactElement = (htmlString) => {
     const svelteAST = parse(htmlString);
     walk(svelteAST, {
         enter(node, parent, prop, index) {