From 9174bd46f4a2e561b9a06e8d5e280bb8d504f131 Mon Sep 17 00:00:00 2001
From: eric-burel <eb@lbke.fr>
Date: Wed, 16 Oct 2024 18:42:22 +0200
Subject: [PATCH 1/2] warning when using SVG open graph image

---
 .../content/docs/reference/configuration.mdx  | 19 +++++++++++++++++++
 .../src/default/components/MetaTags.astro     |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
index 619a4b4ca..e0a1742b9 100644
--- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -404,6 +404,25 @@ type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "java
 
 ```
 
+### `meta`
+
+**type**: `MetaTagsSchema`
+
+Configures `<meta>` tags for Open Graph protocole and Twitter.
+<PropertyTable inherited type="MetaTagsSchema" />
+
+Example value:
+```yaml
+meta:
+  image: /cover.png
+  title: Title shown on social media and search engines
+  description: Description shown on social media and search engines
+```
+
+TutorialKit will use your logo as the default image.
+If your logo uses the SVG format, it may not display on most social platforms.
+Use a raster format instead, such as WEBP or PNG.
+
 ## Configure the Tutorialkit Astro integration
 
 `@tutorialkit/astro` is an integration for Astro. You can configure the integration in your `astro.config.ts` file.
diff --git a/packages/astro/src/default/components/MetaTags.astro b/packages/astro/src/default/components/MetaTags.astro
index d91c4f2a0..26506b544 100644
--- a/packages/astro/src/default/components/MetaTags.astro
+++ b/packages/astro/src/default/components/MetaTags.astro
@@ -15,6 +15,10 @@ if (meta.image) {
   }
 }
 imageUrl ??= readLogoFile('logo', true);
+if (imageUrl?.endsWith('.svg')) {
+  console.warn(`Using a SVG open graph image "${imageUrl}". This is not supported by most social platforms. 
+  You should rather set "meta.image" to a raster image (PNG, WEBP).`);
+}
 ---
 
 <meta charset="UTF-8" />

From 4e793980eadbccb60a269adf5b95d0f3834d0120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Fri, 18 Oct 2024 15:47:47 +0300
Subject: [PATCH 2/2] chore: update docs

---
 .../content/docs/reference/configuration.mdx  | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
index e0a1742b9..619a4b4ca 100644
--- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -404,25 +404,6 @@ type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "java
 
 ```
 
-### `meta`
-
-**type**: `MetaTagsSchema`
-
-Configures `<meta>` tags for Open Graph protocole and Twitter.
-<PropertyTable inherited type="MetaTagsSchema" />
-
-Example value:
-```yaml
-meta:
-  image: /cover.png
-  title: Title shown on social media and search engines
-  description: Description shown on social media and search engines
-```
-
-TutorialKit will use your logo as the default image.
-If your logo uses the SVG format, it may not display on most social platforms.
-Use a raster format instead, such as WEBP or PNG.
-
 ## Configure the Tutorialkit Astro integration
 
 `@tutorialkit/astro` is an integration for Astro. You can configure the integration in your `astro.config.ts` file.