@ethercorps/sveltekit-og 3.0.0-alpha.1 → 3.0.0-next.10

package/README.md

@@ -0,0 +1,171 @@
+# SvelteKit Open Graph Image Generation
+
+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.
+
+## Disclaimer
+This project doesn't support edge services like vercel edge and cloudflare workers.
+
+## Installation
+
+```bash
+pnpm install @ethercorps/sveltekit-og
+```
+
+## 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
+      }
+    ]
+  });
+};
+```
+
+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)
+
+## 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.
+
+## Fonts
+
+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})
+```
+
+## Changelog
+
+### v3.0.0 (Breaking Changes)
+
+> Just install @ethercorps/sveltekit-og
+> No wasm as of now, only support for nodejs based runtime.
+
+### 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
+```
+
+```
+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/helpers/create.d.ts

@@ -0,0 +1,5 @@
+import type { SvelteComponent } from "svelte";
+import type { ComponentOptions, ImageOptions, VNode } from '../types.js';
+export declare function createVNode(element: string | SvelteComponent, componentOptions?: ComponentOptions): VNode;
+export declare function createSvg(element: string | SvelteComponent, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
+export declare function createPng(element: string | SvelteComponent, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array>;

package/dist/helpers/create.js

@@ -0,0 +1,45 @@
+import { svelteComponentToJsx, toReactElement } from '@ethercorps/svelte-h2j';
+import { loadDynamicAsset } from './emoji.js';
+import { default_fonts } from '../helpers/defaults.js';
+import { useResvg, useSatori } from '../providers/instances.js';
+// TODO: Export VNode Type from svelte-h2j
+// TODO: Make svelte-h2j functions async in new v5 support
+export async function createVNode(element, componentOptions) {
+    return typeof element === 'string' ? toReactElement(element) : svelteComponentToJsx(element, componentOptions?.props);
+}
+export async function createSvg(element, imageOptions, componentOptions) {
+    const [satori, vnodes] = await Promise.all([useSatori(), createVNode(element, componentOptions)]);
+    if (!Object.hasOwn(imageOptions, 'fonts')) {
+        imageOptions['fonts'] = await default_fonts();
+    }
+    // Add dynamic emoji loading handler
+    imageOptions['loadAdditionalAsset'] = loadDynamicAsset({
+        emoji: imageOptions.emoji
+    });
+    if (imageOptions.debug) {
+        console.info('VNode proivided to satori:', vnodes, '\n');
+        console.info('Options proivided to satori:', imageOptions, '\n');
+    }
+    return satori(vnodes, imageOptions);
+}
+export async function createPng(element, imageOptions, componentOptions) {
+    const svg = await createSvg(element, imageOptions, componentOptions);
+    if (imageOptions.debug) {
+        console.info('SVG generated by satori:', svg, '\n');
+    }
+    const resvg_instance = await useResvg();
+    console.log(resvg_instance, 'f');
+    const resvg_options = {
+        fitTo: {
+            mode: 'width',
+            value: imageOptions.width
+        },
+        logLevel: imageOptions.debug ? 'info' : 'error'
+    };
+    if (imageOptions.debug) {
+        console.info('Options provided to ReSVG:', resvg_options, '\n');
+    }
+    const resvg = new resvg_instance(svg, resvg_options);
+    const png_data = resvg.render();
+    return png_data.asPng();
+}

package/dist/helpers/defaults.d.ts

@@ -0,0 +1,10 @@
+import type { SatoriOptions } from 'satori';
+import type { ImageOptions } from '../types.js';
+export declare function default_fonts(): SatoriOptions['fonts'];
+export declare const DEFAULT_FORMAT = "png";
+export declare const DEFAULT_WIDTH = 1200;
+export declare const DEFAULT_HEIGHT = 630;
+export declare const DEFAULT_EMOJI_PROVIDER = "twemoji";
+export declare const DEFAULT_STATUS_CODE = 200;
+export declare const DEFAULT_STATUS_TEXT = "Success";
+export declare const DEFAULT_OPTIONS: ImageOptions;

package/dist/helpers/defaults.js

@@ -0,0 +1,37 @@
+export async function default_fonts() {
+    const [noto_sans_regular_font_resp, noto_sans_bold_font_reps] = await Promise.all([
+        fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Regular.ttf'), fetch('https://cdn-sveltekit-og.ethercorps.io/NotoSans-Bold.ttf')
+    ]);
+    if (!(noto_sans_bold_font_reps.ok || noto_sans_bold_font_reps.ok)) {
+        console.error('Not able to load default fonts');
+        throw new Error('Not able to load default fonts');
+    }
+    const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([noto_sans_regular_font_resp.arrayBuffer(), noto_sans_bold_font_reps.arrayBuffer()]);
+    return [
+        {
+            data: noto_sans_regular_font,
+            name: 'Inter',
+            weight: 400,
+            style: 'normal'
+        },
+        {
+            data: noto_sans_bold_font,
+            name: 'Inter',
+            weight: 700,
+            style: 'normal'
+        }
+    ];
+}
+export const DEFAULT_FORMAT = 'png';
+export const DEFAULT_WIDTH = 1200;
+export const DEFAULT_HEIGHT = 630;
+export const DEFAULT_EMOJI_PROVIDER = 'twemoji';
+export const DEFAULT_STATUS_CODE = 200;
+export const DEFAULT_STATUS_TEXT = 'Success';
+export const DEFAULT_OPTIONS = {
+    height: DEFAULT_HEIGHT,
+    width: DEFAULT_WIDTH,
+    debug: false,
+    format: 'png',
+    emoji: 'twemoji'
+};

package/dist/helpers/emoji.d.ts

@@ -0,0 +1,3 @@
+export declare const loadDynamicAsset: ({ emoji }: {
+    emoji: any;
+}) => (...args: any[]) => Promise<string | undefined>;

package/dist/helpers/emoji.js

@@ -0,0 +1,53 @@
+import { DEFAULT_EMOJI_PROVIDER } from '../helpers/defaults.js';
+// Code stolen from @vercel/og
+const U200D = String.fromCharCode(8205);
+const UFE0Fg = /\uFE0F/g;
+function getIconCode(char) {
+    return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
+}
+function toCodePoint(unicodeSurrogates) {
+    const r = [];
+    let c = 0, p = 0, i = 0;
+    while (i < unicodeSurrogates.length) {
+        c = unicodeSurrogates.charCodeAt(i++);
+        if (p) {
+            r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
+            p = 0;
+        }
+        else if (55296 <= c && c <= 56319) {
+            p = c;
+        }
+        else {
+            r.push(c.toString(16));
+        }
+    }
+    return r.join("-");
+}
+const emoji_apis = {
+    twemoji: (code) => "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/" + code.toLowerCase() + ".svg",
+    openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
+    blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
+    noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
+    fluent: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_color.svg",
+    fluentFlat: (code) => "https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/" + code.toLowerCase() + "_flat.svg"
+};
+function loadEmoji(code, type) {
+    if (!type || !apis[type]) {
+        type = DEFAULT_EMOJI_PROVIDER;
+    }
+    const api = apis[type];
+    if (typeof api === "function") {
+        return fetch(api(code));
+    }
+    return fetch(`${api}${code.toUpperCase()}.svg`);
+}
+export const loadDynamicAsset = ({ emoji }) => {
+    const fn = async (code, text) => {
+        if (code === "emoji") {
+            return `data:image/svg+xml;base64,` + btoa(await (await loadEmoji(getIconCode(text), emoji)).text());
+        }
+    };
+    return async (...args) => {
+        return await fn(...args);
+    };
+};

package/dist/image-response.d.ts

@@ -0,0 +1,5 @@
+import type { SvelteComponent } from 'svelte';
+import type { ImageResponseOptions } from './types.js';
+export declare class ImageResponse extends Response {
+    constructor(element: string | SvelteComponent, options?: ImageResponseOptions, props?: Record<string, any>);
+}

package/dist/image-response.js

@@ -0,0 +1,27 @@
+import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from './helpers/defaults.js';
+import { createPng, createSvg } from './helpers/create.js';
+import { isDevelopment } from 'std-env';
+export class ImageResponse extends Response {
+    constructor(element, options, props) {
+        const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
+        const create_image_funtion = extended_options.format === 'png' ? createPng : createSvg;
+        const body = new ReadableStream({
+            async start(controller) {
+                const buffer = await create_image_funtion(element, extended_options, { props });
+                controller.enqueue(buffer);
+                controller.close();
+            }
+        });
+        super(body, {
+            headers: {
+                'Content-Type': `image/${extended_options.format}`,
+                'Cache-Control': (extended_options.debug || isDevelopment)
+                    ? 'no-cache, no-store'
+                    : 'public, immutable, no-transform, max-age=31536000',
+                ...extended_options.headers
+            },
+            status: extended_options.status || DEFAULT_STATUS_CODE,
+            statusText: extended_options.statusText || DEFAULT_STATUS_TEXT
+        });
+    }
+}

package/dist/index.d.ts

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