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

5
README.md
View File

@@ -9,7 +9,8 @@ Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (
```typescript ```typescript
// /routes/og/+server.ts // /routes/og/+server.ts
import { ImageResponse } from '@ethercorps/sveltekit-og'; import {ImageResponse} from '@ethercorps/sveltekit-og';
import {RequestHandler} from "./$types";
const template = ` const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center"> <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 fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export const GET: () => Promise<ImageResponse> = async () => { export const GET: RequestHandler = async () => {
return new ImageResponse(template, { return new ImageResponse(template, {
height: 250, height: 250,
width: 500, 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 fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
const fontData: ArrayBuffer = await fontFile.arrayBuffer(); const fontData: ArrayBuffer = await fontFile.arrayBuffer();
export class ImageResponse { class ImageResponse {
constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions) { constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions) {
const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser); const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
const png = new ReadableStream({ const png = new ReadableStream({
@@ -47,7 +47,7 @@ export class ImageResponse {
} }
} }
export class componentToImageResponse { class componentToImageResponse {
constructor(component: typeof SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) { constructor(component: typeof SvelteComponent, props = {}, optionsByUser: ImageResponseOptions) {
const htmlTemplate = componentToMarkup(component, props) const htmlTemplate = componentToMarkup(component, props)
return new ImageResponse(htmlTemplate, optionsByUser); return new ImageResponse(htmlTemplate, optionsByUser);
@@ -73,3 +73,5 @@ type ImageOptions = {
graphemeImages?: Record<string, string>; graphemeImages?: Record<string, string>;
loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>; 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 { ImageResponse } from '$lib';
import type {RequestHandler} from "@sveltejs/kit";
const template = ` const template = `
<div tw="bg-gray-50 flex w-full h-full items-center justify-center"> <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 fontData400: ArrayBuffer = await fontFile400.arrayBuffer();
const fontData700: ArrayBuffer = await fontFile700.arrayBuffer(); const fontData700: ArrayBuffer = await fontFile700.arrayBuffer();
export const GET: () => Promise<ImageResponse> = async () => { export const GET: RequestHandler = async () => {
return new ImageResponse(template, { return new ImageResponse(template, {
height: 250, height: 250,
width: 500, width: 500,

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

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