@ethercorps/sveltekit-og 2.0.0 → 2.0.1

package/README.md

@@ -7,8 +7,9 @@ Dynamically generate Open Graph images from an HTML+CSS template or Svelte compo
 ```bash
 pnpm install -D @ethercorps/sveltekit-og
 ```
+
 > Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
-> 
+
 ```bash
 pnpm i -D url
 ```
@@ -45,21 +46,21 @@ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-4
 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
-      }
-    ]
-  });
+	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. 
+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
 
@@ -69,18 +70,17 @@ Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Rem
 
 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). 
+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. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`.
+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. 
+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
 
@@ -101,7 +101,7 @@ ImageResponse(
     options : {
       width ? : number = 1200
       height ? : number = 630,
-      backgroundColor ? : string = "#fff"       
+      backgroundColor ? : string = "#fff"
       fonts ? : {
           name: string,
           data: ArrayBuffer,
@@ -142,6 +142,7 @@ componentToImageResponse(
 ## Changelog
 
 ### v1.2.3 Update (Breaking Changes)
+
 > Now you have to install dependency by yourself which will make it easier to build for all plateforms.
 
 ```

package/index.d.ts

@@ -1,6 +1,6 @@
 import { type SatoriOptions } from 'satori';
 import type { SvelteComponent } from 'svelte';
-import toReactElement from './toReactElement';
+import toReactElement from './toReactElement.js';
 declare const ImageResponse: (htmlTemplate: string, optionsByUser: ImageResponseOptions) => Promise<Response>;
 declare const componentToImageResponse: (component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions) => Promise<Response>;
 type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;

package/index.js

@@ -1,5 +1,5 @@
 import satori, {} from 'satori';
-import toReactElement from './toReactElement';
+import toReactElement from './toReactElement.js';
 import { svg2png, initialize } from 'svg2png-wasm';
 let initialized = false;
 const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
@@ -31,7 +31,7 @@ const ImageResponse = async (htmlTemplate, optionsByUser) => {
     }
     const defaultConfig = {
         width: options.width,
-        height: options.height, // optional
+        height: options.height // optional
     };
     if (Object.hasOwn(options, 'backgroundColor')) {
         defaultConfig.backgroundColor = options.backgroundColor;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "devDependencies": {
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.35.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-vercel": "^2.4.3",
     "@sveltejs/kit": "1.10.0",
@@ -18,6 +18,7 @@
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
+    "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
     "svelte": "^3.59.1",
     "svelte-check": "^2.10.3",