LukeParke/sveltekit-og
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltekit-og.git synced 2025-12-10 12:47:50 +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

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>