Add OG image to root layout

Author: maiertech

.env.example

@@ -1,6 +1,3 @@
-# Run `npx vercel env pull .env` to pull env variables from Vercel.
-# The project needs to be linked with `npx vercel link`.
-
 # Bluesky DID.
 BLUESKY_DID=did
 
@@ -23,3 +20,6 @@ GITHUB_TOKEN=token
 # On Railway: `https://${{RAILWAY_PUBLIC_DOMAIN}}`.
 PUBLIC_URL_ORIGIN=origin
 
+# API key to generate OG image links.
+VIRALCARDS_API_KEY=key
+

src/lib/templates/index.ts

@@ -0,0 +1 @@
+export { default as ogImage } from './ogImage';

src/lib/templates/ogImage.ts

@@ -0,0 +1,46 @@
+export default {
+	template: 'maiertechPost',
+	title: 'Post title',
+	avatarName: 'Thilo Maier',
+	avatarImageUrl: 'https://www.maier.tech/assets/portrait-thilo-maier.jpg',
+	height: 630,
+	width: 1200,
+	colors: {
+		ink: '#020617',
+		surface: '#f8fafc',
+		primary: '#1e40af',
+		accent: '#f97316'
+	},
+	fonts: [
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 300
+		},
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 400
+		},
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 500
+		},
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 600
+		},
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 700
+		},
+		{
+			name: 'Roboto',
+			style: 'normal',
+			weight: 800
+		}
+	]
+};

src/routes/+layout.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { Favicon, Footer, Header } from '$lib/components';
-	import { Container, PageLayout, SeoBasic } from '@maiertech/sveltekit-helpers';
-	import type { Snippet } from 'svelte';
+	import { Container, PageLayout, SeoBasic, SeoOgImage } from '@maiertech/sveltekit-helpers';
+	import type { LayoutProps } from './$types';
 
 	import '@maiertech/sveltekit-helpers/themes/default.css'; // First import the theme, then the styles.
 	import '../app.css';
 
-	interface Props {
-		children: Snippet;
-	}
-
-	let { children }: Props = $props();
+	let { children }: LayoutProps = $props();
 </script>
 
 {#if page.data.seo}
 	<SeoBasic title={page.data.seo.title} description={page.data.seo.description} />
+	<SeoOgImage
+		ogImageUrl="https://create.viral.cards/api/v1/satori?meta=%7B%22template%22%3A%22maiertech%22%2C%22title%22%3A%22Notes+and+posts+about+web+development%22%2C%22avatarName%22%3A%22Thilo+Maier%22%2C%22avatarImageUrl%22%3A%22https%3A%2F%2Fwww.maier.tech%2Fassets%2Fportrait-thilo-maier.jpg%22%2C%22height%22%3A630%2C%22width%22%3A1200%2C%22colors%22%3A%7B%22ink%22%3A%22%23020617%22%2C%22surface%22%3A%22%23f8fafc%22%2C%22primary%22%3A%22%231e40af%22%2C%22accent%22%3A%22%23f97316%22%7D%2C%22fonts%22%3A%5B%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A300%7D%2C%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A400%7D%2C%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A500%7D%2C%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A600%7D%2C%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A700%7D%2C%7B%22name%22%3A%22Roboto%22%2C%22style%22%3A%22normal%22%2C%22weight%22%3A800%7D%5D%7D&sig=da35c48eae40b4c66c48694f82384ed834f45ff76216c941ea42f7a5f8e8e865"
+	/>
 {/if}
 
 <Favicon />