bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-29 07:49:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement dynamic og images using @ethercorps/sveltekit-og

Browse source
This commit is contained in:
Bart van der Braak 2024-01-17 23:58:30 +01:00
parent 1e1c25549d
commit 1be9ad4668
6 changed files with 375 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/site/index.ts
View file

@ -4,6 +4,7 @@ export { default as SiteHeader } from './site-header.svelte';
export { default as TailwindIndicator } from './tailwind-indicator.svelte';
export { default as ModeToggle } from './mode-toggle.svelte';
export { default as ImageFade } from './image-fade.svelte';
export { default as OgImage } from './opengraph-image.svelte';
export * from './icons';
export * from './nav';

19
src/lib/components/site/opengraph-image.svelte Normal file
View file

@ -0,0 +1,19 @@
<script lang="ts">
import { Icons } from '$lib/components/site';
export let title: string = 'I made this for you';
export let subTitle: string =
'Featuring current work and studies in a SvelteKit-based portfolio.';
</script>
<div class="flex h-full w-full items-center justify-center bg-black">
<div class="flex w-full flex-col justify-between p-8 px-4 py-12 md:flex-row md:items-center">
<h2 class="flex flex-col text-left text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="text-6xl text-white">{title}</span>
<span class="text-3xl text-gray-600">{subTitle}</span>
</h2>
<div class="mt-8 flex md:mt-0">
<Icons.logo></Icons.logo>
</div>
</div>
</div>