@ethercorps/sveltekit-og 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ether Corps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/index.d.ts

@@ -0,0 +1 @@
+export { ImageResponse, componentToImageResponse, ImageResponseOptions } from "./svelte-satori";

package/index.js

@@ -0,0 +1 @@
+export { ImageResponse, componentToImageResponse, ImageResponseOptions } from './svelte-satori';

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ethercorps/sveltekit-og",
+  "version": "0.0.3",
+  "devDependencies": {
+    "@playwright/test": "^1.25.0",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/package": "next",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.0",
+    "sveltekit-og": "link:./package"
+  },
+  "type": "module",
+  "dependencies": {
+    "@resvg/resvg-wasm": "^2.1.0",
+    "satori": "^0.0.42",
+    "satori-html": "^0.2.0"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "next"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.js",
+    "./svelte-satori": "./svelte-satori.js",
+    "./vendors/resvg.wasm": "./vendors/resvg.wasm"
+  }
+}

package/svelte-satori.d.ts

@@ -0,0 +1,16 @@
+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): {};
+};
+export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
+declare type ImageOptions = {
+    width?: number;
+    height?: number;
+    debug?: boolean;
+    fonts?: SatoriOptions['fonts'];
+};
+export {};

package/svelte-satori.js

@@ -0,0 +1,54 @@
+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-400-normal.woff');
+const fontData = await fontFile.arrayBuffer();
+export const ImageResponse = class {
+    constructor(htmlTemplate, optionsByUser) {
+        const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
+        const png = new ReadableStream({
+            async start(a) {
+                await resSvgWasm;
+                const svg = await satori(toReactNode(htmlTemplate), {
+                    width: options.width,
+                    height: options.height,
+                    fonts: options.fonts || [
+                        {
+                            name: 'Inter Latin',
+                            data: fontData,
+                            weight: 400,
+                            style: 'normal'
+                        }
+                    ]
+                });
+                const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
+                a.enqueue(pngData.render().asPng());
+                a.close();
+            }
+        });
+        return new Response(png, {
+            headers: {
+                'Content-Type': 'image/png',
+                'cache-control': 'public, immutable, no-transform, max-age=31536000',
+                ...options.headers
+            },
+            status: options.status,
+            statusText: options.statusText
+        });
+    }
+};
+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>`;
+        }
+        return new ImageResponse(htmlTemplate, optionsByUser);
+    }
+};