#is it possible to create a layout with a .MDX extension?

34 messages · Page 1 of 1 (latest)

cerulean torrent
#

I previously created this question in the AI support here, but despite its suggestions I think it's hallucinating: https://discord.com/channels/830184174198718474/1304973899850842112

I know it's odd, I'll miss out on some default functionality that's been streamlined through the astro syntax. But I'm more just curious for the sake of a proof of concept project, not a proper project.

I've been able to do an MDX component in an MDX page, but the thing about a layout is how to implement the <slot /> concept or inserting children inside the MDX layout.

loud python
#

Hi there! You can provide a layout from an Astro file that everything renders in, but you cannot use a .mdx file as a layout iirc

cerulean torrent
loud python
#

So I'm not a maintainer or anything but I imagine it's got something to do with mdx effectively being react

#

That might be causing some issues when trying to use it as a layout

#

Then again, you can use react components with Astro children if I'm not mistaken

#

Nope wait that's experimental, there's your explanation

#

It might work when you turn this option on

cerulean torrent
#

I was skeptical but I just gave it a shot and no go.

cerulean torrent
loud python
#

Well nevermind then, I was sure that was getting rendered to react

#

My bad

cerulean torrent
loud python
#

I'm out of ideas then tbh

#

Might just be a simple limitation but I sure don't have any explanation as to why it's happening (or rather, not happening)

cerulean torrent
#

Just gonna tag @odd crystal & @drifting osprey since you were the two I was talking to the other day about this.

No pressure, I know what I'm doing is unusual and not something that Astro was intended to do.

cerulean torrent
loud python
#

Would've loved to do a deep dive into this but I'm not home rn

drifting osprey
#

Good question, by making it a layout we are saying

Can mdx accept <slot/>s, and Louis is right it cannot as of now but its not impossible

cerulean torrent
# drifting osprey Good question, by making it a layout we are saying Can mdx accept <slot/>s, an...

In order to use <slot /> in an MDX file I assume it would require expanding the MDX integration package be using the rehype/remark plugins? This would be the longer road and involve contributing to the package with a pull request of some sort.

I'm not an expert in JSX by any stretch, but is do you think it might be possible in a hacky way by exporting something from the layout.mdx file to be imported in the page.mdx file without implementing <slot /> functionality?

drifting osprey
#

I don’t think so

#

But we will see if Luiz has any ideas

#

He’s usually the creative wizard

odd crystal
#

I think it might already be implemented, just not as <slot />

#

It is not a documented property but it should be there already

#

Let me check

#

Yeah, it's already there with the normal JSX syntax not the modified syntax from Astro

#

You can do this on your layout:

# Some title

{props.children}
#

Then

---
layout: ../path/to/layout.mdx
---

The content
#

You can do slots with {props.slotName}

#

Named slots just become properties with their names and the default slot become the children property

#

Which is how you do in plain JSX, everything is just a property, there is no special slot behavior

#

It might be worth documenting it, this behavior comes from @mdx-js/mdx we just don't change it. Since it is stable on MDX it is stable for us as well