From 3d5ef91380185fb9e3b61f5b2065b6d2a6652007 Mon Sep 17 00:00:00 2001 From: Mihkel Martin Kasterpalu <43957228+MihkelMK@users.noreply.github.com> Date: Wed, 22 Nov 2023 16:53:59 +0200 Subject: [PATCH] restore README, add disclaimer about project focus --- README.md | 203 ++++++++++++++++++++++++++++++++++++++++-------- static/demo.png | Bin 0 -> 12657 bytes 2 files changed, 169 insertions(+), 34 deletions(-) create mode 100644 static/demo.png diff --git a/README.md b/README.md index 4fee31f..aaed041 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,193 @@ -# create-svelte +# SvelteKit Open Graph Image Generation -Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). +Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required. -Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). +## Disclaimer -## Creating a project +This documentation is currently unmaintained, as the development focus is compatibility with cloudflare, vercel and vercel edge. -If you're seeing this, you've probably already done this step. Congrats! +## Installation ```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 +pnpm install -D @ethercorps/sveltekit-og ``` -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +> Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`. ```bash -npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open +pnpm i -D url ``` -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. +## Usage -## Building +Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example. -To build your library: +```typescript +// src/routes/og/+server.ts +import { ImageResponse } from '@ethercorps/sveltekit-og'; +import { RequestHandler } from './$types'; -```bash -npm run package +const template = ` +