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

Cleaning and doc fix

Browse Source
This commit is contained in:
Shivam Meena
2022-10-30 23:52:21 +05:30
parent a99a17f4c2
commit c7f2309d00
4 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,6 +10,7 @@ Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (
```typescript
// /routes/og/+server.ts
import {ImageResponse} from '@ethercorps/sveltekit-og';
import {RequestHandler} from "./$types";
const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
@@ -32,7 +33,7 @@ const template = `
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: () => Promise<ImageResponse> = async () => {
export const GET: RequestHandler = async () => {
return new ImageResponse(template, {
height: 250,
width: 500,

6
src/lib/index.ts
View File

@@ -8,7 +8,7 @@ const resSvgWasm = initWasm(fetch('https://sveltekit-og.ethercorps.io/resvg.wasm
const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export class ImageResponse {
class ImageResponse {
constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions) {
const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
const png = new ReadableStream({
@@ -47,7 +47,7 @@ export class ImageResponse {
}
}
export class componentToImageResponse {
class componentToImageResponse {
constructor(component: typeof SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) {
const htmlTemplate = componentToMarkup(component, props)
return new ImageResponse(htmlTemplate, optionsByUser);
@@ -73,3 +73,5 @@ type ImageOptions = {
graphemeImages?: Record<string, string>;
loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
};
export {componentToImageResponse, ImageResponse}

3
src/routes/+server.ts
View File

@@ -1,4 +1,5 @@
import { ImageResponse } from '$lib';
import type {RequestHandler} from "@sveltejs/kit";
const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center">
@@ -23,7 +24,7 @@ const fontFile700 = await fetch('https://og-playground.vercel.app/inter-latin-ex
const fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
export const GET: () => Promise<ImageResponse> = async () => {
export const GET: RequestHandler = async () => {
return new ImageResponse(template, {
height: 250,
width: 500,

3
src/routes/component-og/+server.ts
View File

@@ -1,11 +1,12 @@
import OG from "./OG.svelte";
import {componentToImageResponse} from "$lib";
import type {RequestHandler} from "@sveltejs/kit";
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-700-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET:() => Promise<componentToImageResponse>= async () => {
export const GET: RequestHandler = async () => {
return new componentToImageResponse(OG, {text: 'Ready to dive in?', spanText: 'Start your free trial today.'}, {
height: 250,
width: 500,