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

Type Issue for Response

Browse Source
This commit is contained in:
Shivam Meena
2022-10-30 01:23:14 +05:30
parent 92a2a663dd
commit a99a17f4c2
5 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,7 +10,6 @@ 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 type { 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">
@@ -33,7 +32,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: RequestHandler = async () => { export const GET: () => Promise<ImageResponse> = async () => {
return new ImageResponse(template, { return new ImageResponse(template, {
height: 250, height: 250,
width: 500, width: 500,

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@ethercorps/sveltekit-og", "name": "@ethercorps/sveltekit-og",
"version": "0.1.3", "version": "0.1.4",
"private": false, "private": false,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",

8
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 const ImageResponse = class { export 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({
@@ -45,14 +45,14 @@ export const ImageResponse = class {
statusText: options.statusText statusText: options.statusText
}); });
} }
}; }
export const componentToImageResponse = class { export 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);
} }
}; }
const componentToMarkup = (component: typeof SvelteComponent, props={}) => { const componentToMarkup = (component: typeof SvelteComponent, props={}) => {
const SvelteRenderedMarkup = (component as any).render(props); const SvelteRenderedMarkup = (component as any).render(props);

3
src/routes/+server.ts
View File

@@ -1,5 +1,4 @@
import { ImageResponse } from '$lib'; import { ImageResponse } from '$lib';
import type { 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">
@@ -24,7 +23,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: RequestHandler = async () => { export const GET: () => Promise<ImageResponse> = 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,12 +1,11 @@
import OG from "./OG.svelte"; import OG from "./OG.svelte";
import {componentToImageResponse} from "$lib"; 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 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: RequestHandler = async () => { export const GET:() => Promise<componentToImageResponse>= 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,