fix(astro): allow URLs in meta.image (#422)

AriPerkkio · web-flow · commit 3125547c043f · 2024-11-25T15:09:35.000+02:00
diff --git 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 `<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,14 +450,21 @@ 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
 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.
 <PropertyTable inherited type="Record<string,any>" />
diff --git 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
@@ -1,4 +1,5 @@
 ---
+import MetaTags from '../components/MetaTags.astro';
 import { getTutorial } from '../utils/content';
 import { joinPaths } from '../utils/url';
 
@@ -9,11 +10,16 @@ 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}`);
 ---
 
 <!doctype html>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <title>Redirecting to {redirect}</title>
+<MetaTags slot="meta" meta={meta} />
 <meta http-equiv="refresh" content=`0;url=${redirect}` />
diff --git 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'),
 });

Original file line number	Diff line number	Diff line change
`@@ -7,13 +7,16 @@ interface Props {`
`7`	`7`	`meta?: MetaTagsConfig;`
`8`	`8`	`}`
`9`	`9`	`const { meta = {} } = Astro.props;`
`10`		`-let imageUrl;`
`11`		`-if (meta.image) {`
`12`		`- imageUrl = readPublicAsset(meta.image, true);`
	`10`	`+let imageUrl = meta.image;`
	`11`	`+`
	`12`	`+if (imageUrl?.startsWith('/') \|\| imageUrl?.startsWith('.')) {`
	`13`	`+ imageUrl = readPublicAsset(imageUrl, true);`
	`14`	`+`
`13`	`15`	`if (!imageUrl) {`
`14`	`16`	console.warn(`Image ${meta.image} not found in "/public" folder`);
`15`	`17`	`}`
`16`	`18`	`}`
	`19`	`+`
`17`	`20`	`imageUrl ??= readLogoFile('logo', true);`
`18`	`21`	`---`
`19`	`22`