This commit is contained in:
Shivam Meena
2023-11-24 13:44:41 +05:30
parent 425cb5487e
commit a62b831fa6
3 changed files with 59 additions and 42 deletions

View File

@@ -5,13 +5,12 @@ import { loadGoogleFont } from './font.js';
import type { ImageResponseOptions } from './types.js'; import type { ImageResponseOptions } from './types.js';
import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j" import {toReactElement, svelteComponentToJsx} from "@ethercorps/svelte-h2j"
import { html } from "satori-html";
import {ImageResponse as IR} from "@vercel/og" import {ImageResponse as IR} from "@vercel/og"
import type {SvelteComponent} from "svelte"; import type {SvelteComponent} from "svelte";
export const ImageResponse = async (htmlTemplate: string, options?: ImageResponseOptions) => { export const ImageResponse = async (htmlTemplate: string, options?: ImageResponseOptions) => {
const reactVNode = toReactElement(`${htmlTemplate}`); const reactVNode = toReactElement(`${htmlTemplate}`);
console.log(reactVNode) console.log(reactVNode);
return new IR(reactVNode, options) return new IR(reactVNode, options)
}; };
@@ -43,43 +42,43 @@ interface FontOptions {
lang?: string; lang?: string;
} }
export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1]; // export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
declare type ImageOptions = { // declare type ImageOptions = {
/** // /**
* The width of the image. // * The width of the image.
* // *
* @type {number} // * @type {number}
* @default 1200 // * @default 1200
*/ // */
width?: number; // width?: number;
/** // /**
* The height of the image. // * The height of the image.
* // *
* @type {number} // * @type {number}
* @default 630 // * @default 630
*/ // */
height?: number; // height?: number;
/** // /**
* Display debug information on the image. // * Display debug information on the image.
* // *
* @type {boolean} // * @type {boolean}
* @default false // * @default false
*/ // */
debug?: boolean; // debug?: boolean;
/** // /**
* A list of fonts to use. // * A list of fonts to use.
* // *
* @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]} // * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
* @default Noto Sans Latin Regular. // * @default Noto Sans Latin Regular.
*/ // */
fonts?: FontOptions[]; // fonts?: FontOptions[];
/** // /**
* Using a specific Emoji style. Defaults to `twemoji`. // * Using a specific Emoji style. Defaults to `twemoji`.
* // *
* @link https://github.com/vercel/og#emoji // * @link https://github.com/vercel/og#emoji
* @type {EmojiType} // * @type {EmojiType}
* @default 'twemoji' // * @default 'twemoji'
*/ // */
emoji?: EmojiType; // emoji?: EmojiType;
}; // };

View File

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

17
src/lib/types.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { SatoriOptions } from 'satori/wasm';
export interface ImageResponseOptions {
width?: number;
height?: number;
// emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
fonts?: SatoriOptions['fonts'];
debug?: boolean;
// Options that will be passed to the HTTP response
status?: number;
statusText?: string;
headers?: Record<string, string>;
// Format
format?: 'svg' | 'png'; // Defaults to 'png'
}