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>
`;
const fontFile400 = 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 fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: RequestHandler = async () => {
return new ImageResponse(template, {
@@ -42,13 +40,8 @@ export const GET: RequestHandler = async () => {
fonts: [
{
name: 'Inter Latin',
data: fontData400,
data: fontData,
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.
## 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
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.
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
@@ -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:
- [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)

1
src/app.html
View File

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

7
src/lib/index.ts
View File

@@ -1,14 +1,12 @@
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';
import type { SvelteComponent } from 'svelte';
import type { SatoriOptions } from 'satori';
const __filename = fileURLToPath(import.meta.url);
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();
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 } });
a.enqueue(await pngData.render().asPng());
a.close();
@@ -52,7 +49,7 @@ export const ImageResponse = class {
};
export const componentToImageResponse = class {
constructor(component: SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) {
constructor(component, props = {}, optionsByUser: ImageResponseOptions) {
const SvelteRenderedMarkup = component.render(props);
let htmlTemplate = `${SvelteRenderedMarkup.html}`;
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>