🐛 BUG: Markdown Component does not create content prop in surrounding Layout

schlichtanders commented 2 years ago

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

In the documentation about Markdown Components it says

Everything supported in a .md file is also supported here!

This would include the Astro.props.content, however it is undefined.

Using most recent astro (installed today) on nodejs v14.18.1.

Steps to Reproduce

Minimal astro setup, plus the following two files

---
// src/layouts/baselayout.astro
const { content } = Astro.props;
---
<html>
  <head>
    <title>{content.astro.url}</title>
  </head>

  <body>
    <p>content.astro.source = {content.astro.source}</p>
    <p>content.url = {content.url}</p>
    <slot />
  </body>
</html>

---
// src/pages/test.astro
import { Markdown } from 'astro/components';
import BaseLayout from '../layouts/baselayout.astro';
---

<BaseLayout>
    <Markdown>
    # Hello

    World

    ```julia
    h(a) = 2a
    function f(a, b)
        a + b
    end

</Markdown>


When running `npm run dev` and trying to access `localhost:3000/test` I get the following error

[access] /test [executing astro] TypeError: Cannot read property 'astro' of undefined at Object.render (/_astro/src/layouts/baselayout.astro.js:79:364) at __astro_component_internal (/_snowpack/pkg/astro.dist.internal.astro_component.v0.20.12.js:182:24) at Object.h (/_snowpack/pkg/astro.dist.internal.h.v0.20.12.js:47:12) at async Promise.all (index 0) at async Object.h (/_snowpack/pkg/astro.dist.internal.h.v0.20.12.js:45:20) at async Promise.all (index 0) at async Object.h (/_snowpack/pkg/astro.dist.internal.h.v0.20.12.js:45:20) at async Object.__renderPage (/_astro/src/pages/test.astro.js:120:27) at async load (file:///home/myhome/Projects/MyProject/node_modules/astro/dist/runtime.js:115:16) at async Server. (file:///home/myhome/Projects/MyProject/node_modules/astro/dist/dev.js:21:20)



### Link to Minimal Reproducible Example (Optional)

_No response_

natemoo-re commented 2 years ago

Good callout that the docs are unclear on this! I don't think it's possible for us to support this, or at least I can't think of a straightforward way to do it.

In astro@next, .md files will support Components, which will hopefully negate this issue for you?

schlichtanders commented 2 years ago

Thank you for the future view.

Good question whether full support for md files would make this obsolete... (you would also need astro header support and jsx support for feature parity)

I can see that it is not crystal clear how to implement the content property for markdown component within astro component, as there might be several markdown components. Should you use always the first one? or throw a warning if there are multiple?

On the other hand, it would be really nice to have astro files as the files which have all features, and md files as something especially supported. I don't like the idea to be forced to use md files, just because astro files are not powerful enough.

So in total I would vote for adding special markdown support to astro as well.

Here a new suggestion: What about having special property for the Markdown component which mimic the layout and other markdown properties?

---
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.

natemoo-re commented 2 years ago

That's actually a really elegant solution! I'd be +1 on adding support for that!

Would you mind starting a discussion on https://github.com/withastro/rfcs/discussions and sharing this issue? That would really help us prioritize the development of this feature.

schlichtanders commented 2 years ago

Thank you for your support. I created this discussion: https://github.com/withastro/rfcs/discussions/34 👍

FredKSchott commented 2 years ago

Thanks for starting the discussion! The docs have also been updated to no longer be vague about this.

withastro / astro