Support for markdown featured images

[charlesvdv]

Problem

I am currently having lots of fun building a static blog using Astro. The blog is using markdown files as input. There are two parts where those markdown files are used:

1. /blog: list the blogpost using Astro.glob
2. /blog/xxx: render the actual blogpost using markdown layout

Typical stuffs for a blog except for the design, I would like to have an image as blog illustration. This image would be showed in the /blog/ alongside the blogpost title, etc and in /blog/xxx as the first image. If it's not clear, please check this ghost themes (https://ghost.org/themes/headline/). The mars picture is available on the home page and when you click the post.

See also an example of featured images support in gatsby.

For making things clean, I would like that the picture stays in the same directory as the markdown. It makes things clearer in term of project structure.

For case 1, this was easy. The MarkdownInstance returned by Astro.glob contains a file property. I just had to do:

const { post } = Astro.props as Props;
const imgPath = path.resolve(path.dirname(post.file), post.frontmatter.img)

For case 2, I don't have any clear solution. I don't have access to the file properties because it's not exposed (as explained in the doc.

Proposal

I think the simplest way for me would be to add a file properties along as the other properties. I already did a PR doing just that which is still open.

Would you have another idea how I could solve this problem differently?

As a quick side note, I don't really understand why a markdown layout does not get a MarkdownInstance-like input as props. This feels a bit inconsistent in how the API behaves and makes it hard to re-use logics.