diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
index 0c99cdb9d..c70ab5895 100644
--- a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
@@ -426,10 +426,11 @@ type DownloadAsZip =
```
-##### `meta`
+### `meta`
Configures `` tags for Open Graph protocole and Twitter.
TutorialKit will use your logo as the default image.
+Relative paths are resolved to `public` directory.
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
@@ -456,7 +464,7 @@ 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.
:::
-##### `custom`
+### `custom`
Assign custom fields to a chapter/part/lesson.
diff --git a/packages/astro/src/default/components/MetaTags.astro b/packages/astro/src/default/components/MetaTags.astro
index d91c4f2a0..3782c82a6 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/astro/src/default/pages/index.astro b/packages/astro/src/default/pages/index.astro
index f832ed325..5dd584a20 100644
--- a/packages/astro/src/default/pages/index.astro
+++ b/packages/astro/src/default/pages/index.astro
@@ -1,4 +1,5 @@
---
+import MetaTags from '../components/MetaTags.astro';
import { getTutorial } from '../utils/content';
import { joinPaths } from '../utils/url';
@@ -9,6 +10,10 @@ const part = lesson.part && tutorial.parts[lesson.part.id];
const chapter = lesson.chapter && part?.chapters[lesson.chapter.id];
const slug = [part?.slug, chapter?.slug, lesson.slug].filter(Boolean).join('/');
+const meta = lesson.data?.meta ?? {};
+
+meta.title ??= [lesson.part?.title, lesson.chapter?.title, lesson.data.title].filter(Boolean).join(' / ');
+meta.description ??= 'A TutorialKit interactive lesson';
const redirect = joinPaths(import.meta.env.BASE_URL, `/${slug}`);
---
@@ -16,4 +21,5 @@ const redirect = joinPaths(import.meta.env.BASE_URL, `/${slug}`);
Redirecting to {redirect}
+
diff --git a/packages/types/src/schemas/metatags.ts b/packages/types/src/schemas/metatags.ts
index 3a3e3b9d7..5a730b09b 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'),
});