diff --git a/src/app.html b/src/app.html index 2760a94..adb9ef3 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,7 @@ - + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5fe07c3..8e8c6fe 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -59,11 +59,61 @@ export const GET: RequestHandler = async () => { }; `; + + const apiReference = ` +import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og' +import {SvelteComponent} from "svelte"; + +// ... +ImageResponse( + element : string, + options : { + width ? : number = 1200 + height ? : number = 630, + backgroundColor ? : string = "#fff" + fonts ? : { + name: string, + data: ArrayBuffer, + weight: number, + style: 'normal' | 'italic' + }[] + debug ? : boolean = false + graphemeImages ? : Record; + loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise; + // Options that will be passed to the HTTP response + status ? : number = 200 + statusText ? : string + headers ? : Record + }) + +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; + loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise; + // Options that will be passed to the HTTP response + status ? : number = 200 + statusText ? : string + headers ? : Record + }) + + `; const highlightedQuickEg = Prism.highlight(source, Prism.languages.svelte, 'svelte'); + const highlightedApiReference = Prism.highlight(apiReference, Prism.languages.svelte, 'svelte'); -
+

Introduction

@@ -123,7 +173,68 @@ export const GET: RequestHandler = async () => {

- Image Output: Live + Image Output: Live Version + @ethercorps/sveltekit-og Demo OG Generated PNG

+ +
+

Headers

+

+ 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. +
+
+ Satori supports only a subset of HTML and CSS. For full details, see Satori’s documentation. Notably, Satori only supports flex-based layouts. +

+
+ +
+

Fonts

+

+ 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. +

+
+ +
+

Examples

+ +
  • ImageResponse - Source - Demo
    • +
  • componentToImageResponse - Source - Demo
    • +
    + +
    +

    Api Reference

    + +

    + The package exposes an ImageResponse and componentToImageResponse constructors, with the following options available. +

    + 
    {@html highlightedApiReference}
    +
    + +
    +
    +

    Acknowledgements

    +

    This project will not be possible without the following projects:

    + +
  • Satori & Vercel-OG
    • +
  • Noto by Google Fonts
    • +
  • svg2png-wasm
    • +
    +
    +

    Author

    +

    I would like to thank myself:

    + +
  • @ethercorps
    • +
  • @theetherGit
    • +
    +
    +

    Contributors

    +

    Without your commits, support, ideas and works every library is incomplete. So, special thanks to:

    + +
  • @jasongitmail
    • +
    +
    diff --git a/src/routes/+page.ts b/src/routes/+page.ts index 98b6da1..76f5bdc 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -1,13 +1 @@ -export const ssr = false; - -const quickUseFile = import.meta.glob(['./new/+server.ts'], {as: 'raw'}); - -export const load = async () => { - const module = Object.entries(quickUseFile).map(([k, v]) => - v().then((result) => { - const segments = k.split('/'); - return { filename: segments.slice(2).join('/'), source: result }; - })); - const code = Promise.all(module); - return {code} -}; +export let prerender = true diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..5837e1f Binary files /dev/null and b/static/logo.png differ