@ethercorps/sveltekit-og 0.0.6 → 0.1.1

package/README.md

@@ -9,7 +9,7 @@ Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (
 
 ```typescript
 // /routes/og/+server.ts
-import { ImageResponse } from '$lib';
+import { ImageResponse } from '@ethercorps/sveltekit-og';
 import type { RequestHandler } from './$types';
 
 const template = `
@@ -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
             }
         ]
     });
@@ -60,7 +53,12 @@ Then run `pnpm dev` and access localhost:5173/og, the React element will be rend
 
 ![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
 
@@ -105,13 +103,13 @@ 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)
+- [Noto by Google Fonts](https://fonts.google.com/noto)
+- [Resvg.js](https://github.com/yisibl/resvg-js)

package/index.d.ts

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

package/index.js

@@ -1,12 +1,10 @@
 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://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));
+const fontFile = await fetch('https://sveltekit-og-five.vercel.app/noto-sans.ttf');
 const fontData = await fontFile.arrayBuffer();
 export const ImageResponse = class {
     constructor(htmlTemplate, optionsByUser) {
@@ -17,11 +15,13 @@ 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
                         }
                     ]
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "0.0.6",
+  "version": "0.1.1",
   "private": false,
   "devDependencies": {
     "@playwright/test": "^1.27.1",
@@ -27,9 +27,22 @@
     "satori": "^0.0.42",
     "satori-html": "^0.2.0"
   },
+  "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"
   }
 }