Set default OG image

Author: maiertech

src/app.d.ts

@@ -12,6 +12,7 @@ declare global {
 			seo?: {
 				title: string;
 				description: string;
+				ogImageUrl?: string;
 			};
 		}
 		// interface PageState {}

src/routes/+layout.server.ts

@@ -4,5 +4,9 @@ import type { LayoutServerLoad } from './$types';
 export const load: LayoutServerLoad = ({ url }) => {
 	// Make `urlOrigin` for `ResponsiveImage` component available to support prerendering.
 	const urlOrigin = PUBLIC_URL_ORIGIN || url.origin;
-	return { urlOrigin };
+	return {
+		urlOrigin,
+		defaultOgImageUrl:
+			'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'
+	};
 };

src/routes/+layout.svelte

@@ -7,14 +7,16 @@
 	import '@maiertech/sveltekit-helpers/themes/default.css'; // First import the theme, then the styles.
 	import '../app.css';
 
-	let { children }: LayoutProps = $props();
+	let { data, 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 page.data.seo.ogImageUrl}
+		<SeoOgImage ogImageUrl={page.data.seo.ogImageUrl} />
+	{:else}
+		<SeoOgImage ogImageUrl={data.defaultOgImageUrl} />
+	{/if}
 {/if}
 
 <Favicon />