From f47e3f33f2b022e0945b7ea2747d6c86b61e6275 Mon Sep 17 00:00:00 2001
From: GHOST <ghostdevbusiness@gmail.com>
Date: Sun, 15 Sep 2024 03:42:55 +0100
Subject: [PATCH] fix: use webp for twitter og image

Closes #127
---
 .../src/components/CldOgImage.svelte                | 13 +++++++++----
 .../src/helpers/getCldOgImageUrl.ts                 |  6 +++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/svelte-cloudinary/src/components/CldOgImage.svelte b/packages/svelte-cloudinary/src/components/CldOgImage.svelte
index ea4d5ba4..89d0fc40 100644
--- a/packages/svelte-cloudinary/src/components/CldOgImage.svelte
+++ b/packages/svelte-cloudinary/src/components/CldOgImage.svelte
@@ -79,12 +79,17 @@
 		...options
 	} = $$props as CldOgImageProps);
 
-	$: url = getCldOgImageUrl(options, config);
+	$: image = getCldOgImageUrl(options, config);
+
+	$: twitterImage = getCldOgImageUrl(
+		{ ...options, format: options.format ?? 'webp' },
+		config,
+	);
 </script>
 
 <svelte:head>
-	<meta property="og:image" content={url} />
-	<meta property="og:image:secure_url" content={url} />
+	<meta property="og:image" content={image} />
+	<meta property="og:image:secure_url" content={image} />
 	<meta property="og:image:width" content={width.toString()} />
 	<meta property="og:image:height" content={height.toString()} />
 	<meta property="og:image:alt" content={alt} />
@@ -92,5 +97,5 @@
 		<meta property="twitter:title" content={twitterTitle || ' '} />
 	{/if}
 	<meta property="twitter:card" content="summary_large_image" />
-	<meta property="twitter:image" content={url} />
+	<meta property="twitter:image" content={twitterImage} />
 </svelte:head>
diff --git a/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts b/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts
index 9008411f..4090de59 100644
--- a/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts
+++ b/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts
@@ -13,9 +13,9 @@ export function getCldOgImageUrl(
 	return getCldImageUrl(
 		{
 			...options,
-			format: options.format || 'jpg',
-			width: options.width || 1200,
-			height: options.height || 627,
+			format: options.format ?? 'jpg',
+			width: options.width ?? 1200,
+			height: options.height ?? 627,
 		},
 		configOverride,
 		analyticsOverride,