Adding layout and content attributes to astro Markdown component

[schlichtanders]

As astro Markdown components would ideally be at least as well supported as markdown files,
it would be nice to have layout and the content prop also for Markdown astro component within an astro file.

Here my suggestion: Add them as properties to the Markdown tag

---
import { BaseLayout } from '../layouts/BaseLayout.astro;
import { Markdown } from 'astro/components';
---
<Markdown layout={BaseLayout} title="MyTitle">
</Markdown>

such that BaseLayout is called with Astro.props.content == {title: "MyTitle}, i.e. following the current markdown convention.

[innermatrix]

How is this different from

---
import { BaseLayout } from '../layouts/BaseLayout.astro;
import { Markdown } from 'astro/components';
---
<BaseLayout>
  <Markdown title="MyTitle">
  </Markdown>
</BaseLayout>

?

[schlichtanders]

<BaseLayout>
  <Markdown title="MyTitle">
  </Markdown>
</BaseLayout>

This is 1 Layout to Many Markdown

<Markdown layout={BaseLayout} title="MyTitle">
</Markdown>

This is 1 Layout to 1 Markdown

---

The reason why 1-to-1 is beneficial is that markdown provides automatic attributes on the content attribute like source and headers.
With 1-to-many it is not clear how to combine the information from all the markdowns in order to make sense.

[FredKSchott]

Can you give an example of something that you can't do with @innermatrix's example, but that you could do with your proposal? I'm not sure I follow the 1:1 vs. 1:Many distinction, and would love an example to better understand.

[innermatrix]

I believe the issue here is that markdown rendering APIs produce an object that has the rendered HTML as well as some additional metadata (including the original markdown source, as well as the document outline derived from # headers), and I believe that @schlichtanders is hoping to have a way to access that metadata outside of the Markdown component.

If you assume that a markdown document has a structured outline (as well as an HTML rendering), then I believe one use case would be a Layout component that contains a Markdown component and wants to access the outline of the markdown component. In other words, if I have

<Layout>
<Markdown>
# heading
## subheading
</Markdown>
</Layout>

how can I implement Layout so that it has access to the heading outline of the descendant Markdown?

The 1:1 vs 1:N point arises because if you allow a layout to see metadata from the descendant markdown, it's not clear how that would work if the layout contained multiple markdown descendants.

However, now that I have (I think) come to understand the problem, I think the solution here would be to make the Markdown component into something that the user can customize, so that the solution becomes roughly

<MyMarkdown>
# heading
## subheading
</MyMarkdown>

and the implementation of MyMarkdown looks something like

<BaseLayout>
<Outline {outline}/>
{content}
</BaseLayout>

The main challenge of this is that a. the documentation makes an oblique statement that the Markdown component is special and cannot be wrapped in other components and b. The prettier plugin would also probably break unless the user is given some way to specify which additional components are Markdown-like.

[jasikpark]

More context for this RFC can be found in withastro/astro#1792 - the usecase seems to be supporting all of the content variables generated by astro when consuming markdown files, so that you can treat markdown passed into a layout via the markdown component like regular markdown

I would argue that the best way to support this would be something like

---
// '/src/pages/hello-world.astro'
import renderMarkdown from "astro/markdown";
import BaseLayout from "../components/BaseLayout.astro";
const title = "Hello World";
---

<BaseLayout content={renderMarkdown({ source: `
# Hello World

```js
console.log('hello world');

this is how you program :)
`, frontmatter: { title } })}/>

So that `renderMarkdown` could return the data in a shape that is similar to a normal markdown file (also similar to the returned shaped of `fetchContent`: https://docs.astro.build/reference/api-reference/#astrofetchcontent) (maybe this would work to separate `Astro.fetchContent` into `renderMarkdown` + `import.meta.globEager("query/*.md")`)