Embed Image Support

[libreom]

Is your feature request related to a problem?

Porting from docusaurus to starlight(-blog) There is no embed image support. For eg- https://socialsharepreview.com/?url=https://wiki.x266.mov/blog/svt-av1-deep-dive and https://socialsharepreview.com/?url=https://codec-wiki.pages.dev/blog/svt-av1-deep-dive/

Describe the solution you'd like

In frontmatter using image:

---
title: "Encoding Animation with SVT-AV1: A Deep Dive"
description: "With the recent release of SVT-AV1 1.8.0, how does it stack up for encoding animation?"
slug: svt-av1-deep-dive
authors:
- name: Trix
  title: Encoder
  url: https://github.com/trixoniisama/
  image_url: https://avatars.githubusercontent.com/u/93526043
tags: [video, compression, benchmarks]
image: /img/svt-1.8.0-testing-blog-image.webp
hide_table_of_contents: false
---

### Describe alternatives you've considered

A auto generated embed image(if not specified in frontmatter) is also desirable but not necessary

### Additional Context

_No response_

[Faf4a]

If you need a workaround you could override the Head component (that's what I do).

astro.config.js:

      components: {
        Head: "./src/components/Head.astro",
      }, // Overriding the Head component to use our version

src/components/Head.astro:

---
import type { Props } from "@astrojs/starlight/props";
import Default from "@astrojs/starlight/components/Head.astro";
---

<meta property="og:image" content={Astro.props.entry.data?.image ?? "some default image if applicable"} />
<Default {...Astro.props}><slot /></Default>

src/content/config.ts:

import { defineCollection, z } from 'astro:content';
import { docsSchema } from "@astrojs/starlight/schema";

export const collections = {
  docs: defineCollection({
    schema: docsSchema({
      extend: z.object({ 
        image: z.string().url().optional(),
      }),
    }),
  }),
} 

Initital message from Chris on discord

This solution probably won't work with image paths, you'd need to use image urls if I'm not wrong.

[HiDeoo]

Thanks for your report :raised_hands:

This is indeed something that should be addressed at a higher level like Starlight itself. On top of what Fafa explained in details (thanks a lot for this), I can also suggest this note about adding Open Graph images to Starlight which can also help on this topic.