@ethercorps/sveltekit-og 0.1.0 → 0.1.2

package/README.md

@@ -30,10 +30,8 @@ const template = `
     </div>
   </div>
 `;
-const fontFile400 = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
-const fontFile700 = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
-const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
-const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
+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 new ImageResponse(template, {
@@ -42,13 +40,8 @@ export const GET: RequestHandler = async () => {
         fonts: [
             {
                 name: 'Inter Latin',
-                data: fontData400,
+                data: fontData,
                 weight: 400
-            },
-            {
-                name: 'Inter Latin',
-                data: fontData700,
-                weight: 700
             }
         ]
     });
@@ -56,40 +49,66 @@ export const GET: RequestHandler = async () => {
 
 ```
 
-Then run `pnpm dev` and access localhost:5173/og, the React element will be rendered and responded as a PNG from that endpoint:
+Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rendered and responded as a PNG from that api/endpoint:
 
 ![Rendered OG image](static/demo.png)
 
-Read more about the API, supported features and check out the examples in the following sections.
+Read more about the API, supported features and check out the examples on Satori Playground.
+
+## Examples:
+- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
+- `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
+
 
 ## API Reference
 
-The package exposes an `ImageResponse` constructor, with the following options available:
+The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
 
 ```typescript
-import { ImageResponse } from '@ethercorps/sveltekit-og'
+import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
+import {SvelteComponent} from "svelte";
 
 // ...
 new ImageResponse(
-  element: string,
-  options: {
-    width?: number = 1200
-    height?: number = 630
-    fonts?: {
-      name: string,
-      data: ArrayBuffer,
-      weight: number,
-      style: 'normal' | 'italic'
+    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>;
+    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>
-  },
-)
+    status ? : number = 200
+    statusText ? : string
+    headers ? : Record<string, string>
+    })
+
+new 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>
+    })
 ```
 
 When running in production, these headers will be included by `@ethercorps/sveltekit-og`:
@@ -105,13 +124,20 @@ During development, the `cache-control: no-cache, no-store` header is used inste
 
 Please refer to [Satori’s documentation](https://github.com/vercel/satori#documentation) for a list of supported HTML and CSS features.
 
-By default, `@ethercorps/sveltekit-og` only has the 'Inter Latin' font included. If you need to use other fonts, you can pass them in the `fonts` option.
+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.
 
 
 ## Acknowledgements
 
 This project will not be possible without the following projects:
 
-- [Satori](https://github.com/vercel/satori)
-- [Google Fonts](https://fonts.google.com) and [Noto Sans](https://www.google.com/get/noto/)
-- [Resvg](https://github.com/RazrFalcon/resvg) and [Resvg.js](https://github.com/yisibl/resvg-js)
+- [Satori & @vercel/og](https://github.com/vercel/satori)
+- [Satori-Html](https://github.com/natemoo-re/satori-html)
+- [Noto by Google Fonts](https://fonts.google.com/noto)
+- [Resvg.js](https://github.com/yisibl/resvg-js)
+
+
+## Authors
+
+- [@theetherGit](https://www.github.com/theetherGit)
+- [@etherCorps](https://www.github.com/etherCorps)

package/index.d.ts

@@ -1,12 +1,12 @@
-import type { SvelteComponent } from 'svelte';
 import type { SatoriOptions } from 'satori';
+import type { SvelteComponent } from "svelte";
 export declare const ImageResponse: {
     new (htmlTemplate: string, optionsByUser: ImageResponseOptions): {};
 };
 export declare const componentToImageResponse: {
-    new (component: SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
+    new (component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
 };
-export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
+declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
 declare type ImageOptions = {
     width?: number;
     height?: number;

package/index.js

@@ -1,12 +1,8 @@
 import { html as toReactNode } from 'satori-html';
 import satori from 'satori';
 import { Resvg, initWasm } from '@resvg/resvg-wasm';
-import { join } from 'path';
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const resSvgWasm = initWasm(readFileSync(join(__filename, '../vendors/resvg.wasm')));
-const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
+const resSvgWasm = initWasm(fetch('https://sveltekit-og.ethercorps.io/resvg.wasm'));
+const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
 const fontData = await fontFile.arrayBuffer();
 export const ImageResponse = class {
     constructor(htmlTemplate, optionsByUser) {
@@ -17,16 +13,18 @@ export const ImageResponse = class {
                 const svg = await satori(toReactNode(htmlTemplate), {
                     width: options.width,
                     height: options.height,
+                    debug: options.debug,
                     fonts: options.fonts || [
                         {
-                            name: 'Noto Sans',
+                            name: 'sans serif',
                             data: fontData,
-                            style: 'normal'
+                            style: 'normal',
+                            weight: 700
                         }
                     ]
                 });
                 const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
-                a.enqueue(await pngData.render().asPng());
+                a.enqueue(pngData.render().asPng());
                 a.close();
             }
         });
@@ -45,11 +43,15 @@ export const ImageResponse = class {
 };
 export const componentToImageResponse = class {
     constructor(component, props = {}, optionsByUser) {
-        const SvelteRenderedMarkup = component.render(props);
-        let htmlTemplate = `${SvelteRenderedMarkup.html}`;
-        if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
-            htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
-        }
+        const htmlTemplate = componentToMarkup(component, props);
         return new ImageResponse(htmlTemplate, optionsByUser);
     }
 };
+const componentToMarkup = (component, props = {}) => {
+    const SvelteRenderedMarkup = component.render(props);
+    let htmlTemplate = `${SvelteRenderedMarkup.html}`;
+    if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
+        htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
+    }
+    return htmlTemplate;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "devDependencies": {
     "@playwright/test": "^1.27.1",
@@ -24,12 +24,26 @@
   "type": "module",
   "dependencies": {
     "@resvg/resvg-wasm": "^2.1.0",
-    "satori": "^0.0.42",
-    "satori-html": "^0.2.0"
+    "satori": "^0.0.43",
+    "satori-html": "^0.2.0",
+    "yoga-wasm-web": "0.1.2"
   },
+  "keywords": [
+    "open graph image",
+    "open graph",
+    "og image",
+    "og:image",
+    "social",
+    "card",
+    "sveltekit og",
+    "sveltekit-og",
+    "@ethercorps/sveltekit-og"
+  ],
+  "license": "MIT",
+  "repository": "https://github.com/etherCorps/sveltekit-og",
+  "homepage": "https://github.com/etherCorps/sveltekit-og#readme",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./index.js",
-    "./vendors/resvg.wasm": "./vendors/resvg.wasm"
+    ".": "./index.js"
   }
 }