Skip to content

Commit

Permalink
fix(astro): URLs in meta.image
Browse files Browse the repository at this point in the history
  • Loading branch information
AriPerkkio committed Nov 20, 2024
1 parent 2740bc9 commit 084ffa9
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 6 deletions.
12 changes: 10 additions & 2 deletions docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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>" />
Expand Down
9 changes: 6 additions & 3 deletions packages/astro/src/default/components/MetaTags.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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);
---

Expand Down
2 changes: 1 addition & 1 deletion packages/types/src/schemas/metatags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
});
Expand Down

0 comments on commit 084ffa9

Please sign in to comment.