diff --git a/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx b/docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx index 0c99cdb9..c70ab589 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 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'), });