mirror of
https://github.com/LukeHagar/sveltekit-og.git
synced 2025-12-09 04:21:44 +00:00
netlify test
This commit is contained in:
12
examples/netlify-build/src/app.html
Normal file
12
examples/netlify-build/src/app.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
37
examples/netlify-build/src/routes/+server.ts
Normal file
37
examples/netlify-build/src/routes/+server.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { ImageResponse } from '@ethercorps/sveltekit-og';
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
|
||||
const template = `
|
||||
<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>Ready to dive in?</span>
|
||||
<span tw="text-indigo-600">Start your free trial today.</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>
|
||||
`;
|
||||
const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
|
||||
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
|
||||
|
||||
export const GET: RequestHandler = async () => {
|
||||
return ImageResponse(template, {
|
||||
height: 400,
|
||||
width: 800,
|
||||
fonts: [
|
||||
{
|
||||
name: 'Inter',
|
||||
data: fontData,
|
||||
weight: 400
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
24
examples/netlify-build/src/routes/cog/+server.ts
Normal file
24
examples/netlify-build/src/routes/cog/+server.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import OG from './OG.svelte';
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
import { componentToImageResponse } from '@ethercorps/sveltekit-og';
|
||||
|
||||
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 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
|
||||
}
|
||||
]
|
||||
}
|
||||
);
|
||||
};
|
||||
29
examples/netlify-build/src/routes/cog/OG.svelte
Normal file
29
examples/netlify-build/src/routes/cog/OG.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
export let text;
|
||||
export let spanText;
|
||||
</script>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user