LukeParke/sveltekit-og
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltekit-og.git synced 2025-12-06 12:47:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vercel Setup

Browse Source
This commit is contained in:
Shivam Meena
2022-10-21 08:58:44 +05:30
parent e074fb3b88
commit 58b0051e5e
5 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@@ -30,10 +30,8 @@ const template = `
</div> </div>
</div> </div>
`; `;
const fontFile400 = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'); const fontFile = 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 fontData: ArrayBuffer = await fontFile.arrayBuffer();
const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
export const GET: RequestHandler = async () => { export const GET: RequestHandler = async () => {
return new ImageResponse(template, { return new ImageResponse(template, {
@@ -42,13 +40,8 @@ export const GET: RequestHandler = async () => {
fonts: [ fonts: [
{ {
name: 'Inter Latin', name: 'Inter Latin',
data: fontData400, data: fontData,
weight: 400 weight: 400
},
{
name: 'Inter Latin',
data: fontData700,
weight: 700
} }
] ]
}); });
@@ -62,6 +55,11 @@ Then run `pnpm dev` and access localhost:5173/og, the React element will be rend
Read more about the API, supported features and check out the examples on Satori Playground. 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 ## API Reference
The package exposes an `ImageResponse` constructor, with the following options available: The package exposes an `ImageResponse` constructor, with the following options available:
@@ -105,7 +103,7 @@ 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. 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 ## Acknowledgements
@@ -113,5 +111,5 @@ By default, `@ethercorps/sveltekit-og` only has the 'Inter Latin' font included.
This project will not be possible without the following projects: This project will not be possible without the following projects:
- [Satori & @vercel/og](https://github.com/vercel/satori) - [Satori & @vercel/og](https://github.com/vercel/satori)
- [Google Fonts](https://fonts.google.com) - [Noto by Google Fonts](https://fonts.google.com/noto)
- [Resvg.js](https://github.com/yisibl/resvg-js) - [Resvg.js](https://github.com/yisibl/resvg-js)

1
src/app.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:image" content="https://sveltekit-og-five.vercel.app">
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body>

7
src/lib/index.ts
View File

@@ -1,14 +1,12 @@
import { html as toReactNode } from 'satori-html'; import { html as toReactNode } from 'satori-html';
import satori from 'satori'; import satori from 'satori';
import { Resvg, initWasm } from '@resvg/resvg-wasm'; import { Resvg, initWasm } from '@resvg/resvg-wasm';
import { join } from 'path';
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import type { SvelteComponent } from 'svelte'; import type { SvelteComponent } from 'svelte';
import type { SatoriOptions } from 'satori'; import type { SatoriOptions } from 'satori';
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const resSvgWasm = initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm')); const resSvgWasm = initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));
const fontFile = await fetch('https://github.com/etherCorps/sveltekit-og/blob/main/static/noto-sans.ttf'); const fontFile = await fetch('https://sveltekit-og-five.vercel.app/noto-sans.ttf');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const ImageResponse = class { export const ImageResponse = class {
@@ -30,7 +28,6 @@ export const ImageResponse = class {
} }
] ]
}); });
console.log(svg)
const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } }); const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
a.enqueue(await pngData.render().asPng()); a.enqueue(await pngData.render().asPng());
a.close(); a.close();
@@ -52,7 +49,7 @@ export const ImageResponse = class {
}; };
export const componentToImageResponse = class { export const componentToImageResponse = class {
constructor(component: SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) { constructor(component, props = {}, optionsByUser: ImageResponseOptions) {
const SvelteRenderedMarkup = component.render(props); const SvelteRenderedMarkup = component.render(props);
let htmlTemplate = `${SvelteRenderedMarkup.html}`; let htmlTemplate = `${SvelteRenderedMarkup.html}`;
if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) { if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {

21
src/routes/component-og/+server.ts Normal file
View File

@@ -0,0 +1,21 @@
import OG from "./OG.svelte";
import {componentToImageResponse} from "$lib";
import type {RequestHandler} from "./$types";
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => {
return new componentToImageResponse(OG, {text: 'Ready to dive in?', spanText: 'Start your free trial today.'}, {
height: 250,
width: 500,
fonts: [
{
name: 'Inter Latin',
data: fontData,
weight: 700
}
]
});
};

21
src/routes/component-og/OG.svelte Normal file
View File

@@ -0,0 +1,21 @@
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>{text}</span>
<span tw="text-indigo-600">{spanText}</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
</div>
<div tw="ml-3 flex rounded-md shadow">
<a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
</div>
</div>
</div>
</div>
<script>
export let text;
export let spanText;
</script>