@ethercorps/sveltekit-og
Dynamic Open Graph images
`;
return new ImageResponse(html, { width: 1200, height: 630 });
};
```
```
--------------------------------
### Install SvelteKit Vercel Adapter with pnpm
Source: https://github.com/ethercorps/sveltekit-og/blob/main/docs/src/lib/components/add-ons/packages/sveltekit-adapter/vercel.md
Use this command to install the Vercel adapter for SvelteKit when using pnpm as your package manager.
```shell
pnpm i -D @sveltejs/adapter-vercel
```
--------------------------------
### Install SvelteKit Vercel Adapter with npm
Source: https://github.com/ethercorps/sveltekit-og/blob/main/docs/src/lib/components/add-ons/packages/sveltekit-adapter/vercel.md
Use this command to install the Vercel adapter for SvelteKit when using npm as your package manager.
```shell
npm i -D @sveltejs/adapter-vercel
```
--------------------------------
### Install SvelteKit Vercel Adapter with Yarn
Source: https://github.com/ethercorps/sveltekit-og/blob/main/docs/src/lib/components/add-ons/packages/sveltekit-adapter/vercel.md
Use this command to install the Vercel adapter for SvelteKit when using Yarn as your package manager.
```shell
yarn add -D @sveltejs/adapter-vercel
```
--------------------------------
### OG Image Configuration File Example
Source: https://github.com/ethercorps/sveltekit-og/blob/main/docs/src/content/examples/auto-generate-routes.md
Create a `sveltekit.og.ts` file in your route directory to define the props for your OG image Svelte component. This file acts as the configuration layer.
```typescript
// This file acts as the configuration layer, defining the image's props.
/**
* The 'ogMetadata' object is exported and its properties are used directly
* as props for the ShadcnOG Svelte component.
*/
export const ogMetadata = {
title: 'About SvelteKit OG and Our Team',
description: 'Learn about the mission, the architecture, and the contributors to this project.'
// You could add other custom props here if your Svelte component accepts them:
// icon: 'gear',
};
```
--------------------------------
### Example: Svelte Component Input with Props
Source: https://context7.com/ethercorps/sveltekit-og/llms.txt
Illustrates using a Svelte component as the element for ImageResponse, passing dynamic props to it.
```APIDOC
## Example: Svelte Component Input with Props
### Description
This example demonstrates using a Svelte component (`BlogCard`) with `ImageResponse`, passing data as props to the component.
### Method
`GET`
### Endpoint
`/blog/[slug]/og.png`
### Parameters
#### Path Parameters
- **slug** (`string`) - Required - The unique identifier for the blog post.
### Request Body
N/A
### Response
#### Success Response (200)
- **Content-Type**: `image/png` (or `image/svg+xml` if specified)
- **Cache-Control**: `public, immutable, no-transform, max-age=31536000` (automatic cache)
### Request Example
```typescript
// src/routes/blog/[slug]/og.png/+server.ts
import { ImageResponse } from '@ethercorps/sveltekit-og';
import { GoogleFont, resolveFonts } from '@ethercorps/sveltekit-og/fonts';
import type { RequestHandler } from '@sveltejs/kit';
import BlogCard from '$lib/og/BlogCard.svelte';
const fonts = [
new GoogleFont('Inter', { weight: 400 }),
new GoogleFont('Inter', { weight: 700 })
];
export const GET: RequestHandler = async ({ params }) => {
const post = await getPostBySlug(params.slug); // your data fetching
return new ImageResponse(
BlogCard,
{
width: 1200,
height: 630,
fonts: await resolveFonts(fonts),
debug: false
},
{
title: post.title,
author: post.author,
category: post.category
}
);
};
```
```
--------------------------------
### OG Image Component Example
Source: https://github.com/ethercorps/sveltekit-og/blob/main/docs/src/content/examples/pre-render.md
A simple Svelte component template for generating OG images with inline styles and dynamic property logic.
```svelte