@ethercorps/sveltekit-og 2.0.2 → 3.0.0

package/README.md

@@ -1,58 +1,171 @@
-# create-svelte
+# SvelteKit Open Graph Image Generation
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+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.
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+## Disclaimer
+This project doesn't support edge services like vercel edge and cloudflare workers.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Installation
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+pnpm install @ethercorps/sveltekit-og
+```
 
-# create a new project in my-app
-npm create svelte@latest my-app
+## Usage
+
+Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
+
+```typescript
+// src/routes/og/+server.ts
+import { ImageResponse } from '@ethercorps/sveltekit-og';
+import { RequestHandler } from './$types';
+
+const template = `
+ <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
+    <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 href="#" 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 href="#" 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 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: 630,
+    width: 1200,
+    fonts: [
+      {
+        name: 'Inter Latin',
+        data: fontData,
+        weight: 400
+      }
+    ]
+  });
+};
 ```
 
-## Developing
+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.
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Example Output
 
-```bash
-npm run dev
+![Rendered OG image](static/demo.png)
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+## Headers
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+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.
 
-## Building
+## Styling
 
-To build your library:
+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).
 
-```bash
-npm run package
-```
+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.
 
-To create a production version of your showcase app:
+## Fonts
 
-```bash
-npm run build
+Satori supports `ttf`, `otf`, and `woff` font formats; `woff2` is not supported. 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/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
+- `Component Rendering` · [_source_](/src/routes/sc/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/sc)
+
+## API Reference
+
+The package exposes an `ImageResponse` constructors, with the following options available:
+
+```typescript
+import {ImageResponse} from '@ethercorps/sveltekit-og'
+import {SvelteComponent} from "svelte";
+
+// ...
+ImageResponse(
+    element : string,
+    options : {
+      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>
+    } {props})
 ```
 
-You can preview the production build with `npm run preview`.
+## Changelog
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+### v3.0.0 (Breaking Changes)
 
-## Publishing
+> Just install @ethercorps/sveltekit-og
+> No wasm as of now, only support for nodejs based runtime.
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+### v1.2.3 Update (Breaking Changes)
 
-To publish your library to [npm](https://www.npmjs.com):
+> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
 
-```bash
-npm publish
 ```
+npm i @resvg/resvg-js
+```
+
+```
+npm i satori
+```
+
+> From now on their will be no issues related to build, and soon this library going to have its own documentation.
+
+### v1.2.2 Update (Breaking Change)
+
+- We don't provide access to satori from `@ethercorps/sveltekit-og`.
+
+### 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
+
+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)
+
+[//]: # (- [svg2png-wasm]&#40;https://github.com/ssssota/svg2png-wasm&#41;)
+
+## Authors
+
+- [@theetherGit](https://www.github.com/theetherGit)
+- [@etherCorps](https://www.github.com/etherCorps)
+
+## Contributors
+
+- [@jasongitmail](https://github.com/jasongitmail)

package/dist/api.d.ts

@@ -1,63 +1,7 @@
 /// <reference types="node" />
-import { ImageResponse as IR } from "@vercel/og";
+import type { ImageResponseOptions } from './types.js';
 import type { SvelteComponent } from "svelte";
-export declare const ImageResponse: (htmlTemplate: string, options?: ImageResponseOptions) => Promise<IR>;
-export declare const componentToImageResponse: (component: SvelteComponent, props: Record<string, any>, options?: ImageResponseOptions) => Promise<IR>;
-declare const apis: {
-    twemoji: (code: any) => string;
-    openmoji: string;
-    blobmoji: string;
-    noto: string;
-    fluent: (code: any) => string;
-    fluentFlat: (code: any) => string;
-};
-declare type EmojiType = keyof typeof apis;
-type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type Style$1 = 'normal' | 'italic';
-interface FontOptions {
-    data: Buffer | ArrayBuffer;
-    name: string;
-    weight?: Weight;
-    style?: Style$1;
-    lang?: string;
+export declare const og: (element: string | SvelteComponent, options: ImageResponseOptions, props?: {}) => Promise<string | Buffer>;
+export declare class ImageResponse extends Response {
+    constructor(element: string | SvelteComponent, options?: ImageResponseOptions, props?: {});
 }
-export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
-declare type ImageOptions = {
-    /**
-     * The width of the image.
-     *
-     * @type {number}
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the image.
-     *
-     * @type {number}
-     * @default 630
-     */
-    height?: number;
-    /**
-     * Display debug information on the image.
-     *
-     * @type {boolean}
-     * @default false
-     */
-    debug?: boolean;
-    /**
-     * A list of fonts to use.
-     *
-     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
-     * @default Noto Sans Latin Regular.
-     */
-    fonts?: FontOptions[];
-    /**
-     * Using a specific Emoji style. Defaults to `twemoji`.
-     *
-     * @link https://github.com/vercel/og#emoji
-     * @type {EmojiType}
-     * @default 'twemoji'
-     */
-    emoji?: EmojiType;
-};
-export {};

package/dist/api.js

@@ -1,12 +1,64 @@
-import { html } from "satori-html";
-import { ImageResponse as IR } from "@vercel/og";
-export const ImageResponse = async (htmlTemplate, options) => {
-    const reactVNode = html(`${htmlTemplate}`);
-    console.log(reactVNode);
-    return new IR(reactVNode, options);
-};
-export const componentToImageResponse = async (component, props, options) => {
-    const ssrSvelte = component.render(props);
-    console.log(ssrSvelte);
-    return ImageResponse(`${ssrSvelte.html}<style>${ssrSvelte.css.code}</style>`, options);
+import satori from 'satori';
+import { Resvg } from '@resvg/resvg-js';
+import { loadGoogleFont } from './font.js';
+import { toReactElement, svelteComponentToJsx } from "@ethercorps/svelte-h2j";
+export const og = async (element, options, props = {}) => {
+    const reactElement = typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, props);
+    // render the React element-like object into an SVG
+    const svg = await satori(reactElement, {
+        width: options.width || 1200,
+        height: options.height || 630,
+        fonts: options.fonts?.length
+            ? options.fonts
+            : [
+                {
+                    name: 'Bitter',
+                    data: await loadGoogleFont({ family: 'Bitter', weight: 600 }),
+                    weight: 500,
+                    style: 'normal'
+                }
+            ]
+    });
+    const requestedFormat = options.format || 'png';
+    if (requestedFormat === 'svg') {
+        return svg;
+    }
+    // convert the SVG into a PNG
+    const opts = {
+        // background: "rgba(238, 235, 230, .9)",
+        fitTo: {
+            mode: 'width',
+            value: options.width || 1200
+        },
+        font: {
+            loadSystemFonts: false // It will be faster to disable loading system fonts.
+        }
+    };
+    const resvg = new Resvg(svg, opts);
+    const pngData = resvg.render();
+    const pngBuffer = pngData.asPng();
+    return pngBuffer;
 };
+export class ImageResponse extends Response {
+    constructor(element, options = {}, props = {}) {
+        super();
+        const body = new ReadableStream({
+            async start(controller) {
+                const buffer = await og(element, options, props);
+                controller.enqueue(buffer);
+                controller.close();
+            }
+        });
+        return new Response(body, {
+            headers: {
+                'Content-Type': 'image/png',
+                'Cache-Control': options.debug
+                    ? 'no-cache, no-store'
+                    : 'public, immutable, no-transform, max-age=31536000',
+                ...options.headers
+            },
+            status: options.status || 200,
+            statusText: options.statusText
+        });
+    }
+}

package/dist/font.d.ts

@@ -0,0 +1,5 @@
+export declare function loadGoogleFont({ family, weight, text }: {
+    family: string;
+    weight?: number;
+    text?: string;
+}): Promise<ArrayBuffer>;

package/dist/font.js

@@ -0,0 +1,27 @@
+export async function loadGoogleFont({ family, weight, text }) {
+    const params = {
+        family: `${encodeURIComponent(family)}${weight ? `:wght@${weight}` : ''}`
+    };
+    if (text) {
+        params.text = text;
+    }
+    else {
+        params.subset = 'latin';
+    }
+    const url = `https://fonts.googleapis.com/css2?${Object.keys(params)
+        .map((key) => `${key}=${params[key]}`)
+        .join('&')}`;
+    const res = await fetch(`${url}`, {
+        headers: {
+            // construct user agent to get TTF font
+            'User-Agent': 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1'
+        }
+    });
+    const body = await res.text();
+    // Get the font URL from the CSS text
+    const fontUrl = body.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)?.[1];
+    if (!fontUrl) {
+        throw new Error('Could not find font URL');
+    }
+    return fetch(fontUrl).then((res) => res.arrayBuffer());
+}

package/dist/index.d.ts

@@ -1 +1,2 @@
-export { componentToImageResponse, ImageResponse, type ImageResponseOptions } from "./api.js";
+export { ImageResponse } from "./api.js";
+export type { ImageResponseOptions } from "./types.js";

package/dist/index.js

@@ -1 +1 @@
-export { componentToImageResponse, ImageResponse } from "./api.js";
+export { ImageResponse } from "./api.js";

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { SatoriOptions } from 'satori/wasm';
+export interface ImageResponseOptions {
+    width?: number;
+    height?: number;
+    fonts?: SatoriOptions['fonts'];
+    debug?: boolean;
+    status?: number;
+    statusText?: string;
+    headers?: Record<string, string>;
+    format?: 'svg' | 'png';
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,55 +1,59 @@
 {
-  "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.2",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^4.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.30.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.10.1",
-    "publint": "^0.1.9",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.4.2",
-    "vitest": "^0.34.0"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "@vercel/og": "^0.5.17",
-    "satori-html": "^0.3.2"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
-  }
-}
+	"name": "@ethercorps/sveltekit-og",
+	"version": "3.0.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"import": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.1.1",
+		"@sveltejs/kit": "^1.30.3",
+		"@sveltejs/package": "^2.2.5",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"css-tree": "^2.3.1",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"prettier": "^2.8.8",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.16",
+		"svelte": "^4.2.8",
+		"svelte-check": "^3.6.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
+		"vite": "^4.5.1",
+		"vitest": "^0.34.6"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@ethercorps/svelte-h2j": "^0.1.0",
+		"@resvg/resvg-js": "^2.6.0",
+		"satori": "^0.10.11"
+	}
+}