From b01981565171fd7b02e0ddbfd78362d0b62b66ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 20 Nov 2024 08:05:16 +0200
Subject: [PATCH] fix(astro): URLs in `meta.image`

---
 .../src/content/docs/reference/configuration.mdx         | 8 ++++++++
 packages/astro/src/default/components/MetaTags.astro     | 9 ++++++---
 packages/types/src/schemas/metatags.ts                   | 2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
index 021adb72..c70ab589 100644
--- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -430,6 +430,7 @@ type DownloadAsZip =
 
 Configures `<meta>` tags for Open Graph protocole and Twitter.
 TutorialKit will use your logo as the default image.
+Relative paths are resolved to `public` directory.
 <PropertyTable inherited type="MetaTagsSchema" />
 
 The `MetaTagsSchema` type has the following shape:
@@ -449,6 +450,13 @@ meta:
   image: /cover.png
   title: Title shown on social media and search engines
   description: Description shown on social media and search engines
+
+meta:
+  image: /cover.png # Resolves to public/cover.png
+
+meta:
+  image: 'https://tutorialkit.dev/tutorialkit-opengraph.png' # URL is used as is
+
 ```
 
 :::tip
diff --git a/packages/astro/src/default/components/MetaTags.astro b/packages/astro/src/default/components/MetaTags.astro
index d91c4f2a..3782c82a 100644
--- a/packages/astro/src/default/components/MetaTags.astro
+++ b/packages/astro/src/default/components/MetaTags.astro
@@ -7,13 +7,16 @@ interface Props {
   meta?: MetaTagsConfig;
 }
 const { meta = {} } = Astro.props;
-let imageUrl;
-if (meta.image) {
-  imageUrl = readPublicAsset(meta.image, true);
+let imageUrl = meta.image;
+
+if (imageUrl?.startsWith('/') || imageUrl?.startsWith('.')) {
+  imageUrl = readPublicAsset(imageUrl, true);
+
   if (!imageUrl) {
     console.warn(`Image ${meta.image} not found in "/public" folder`);
   }
 }
+
 imageUrl ??= readLogoFile('logo', true);
 ---
 
diff --git a/packages/types/src/schemas/metatags.ts b/packages/types/src/schemas/metatags.ts
index 3a3e3b9d..5a730b09 100644
--- a/packages/types/src/schemas/metatags.ts
+++ b/packages/types/src/schemas/metatags.ts
@@ -8,7 +8,7 @@ export const metaTagsSchema = z.object({
      * Ideally we would want to use `image` from:
      * https://docs.astro.build/en/guides/images/#images-in-content-collections .
      */
-    .describe('A relative path to an image that lives in the public folder to show on social previews.'),
+    .describe('Image to show on social previews. A relative path is resolved to the public folder.'),
   description: z.string().optional().describe('A description for metadata'),
   title: z.string().optional().describe('A title to use specifically for metadata'),
 });