Building a site with JSX and MDX plugins

[ootoovak]

Hello,

First of all thanks all who helped build Lume, I'm enjoying getting to try out Deno b\y building a static site using Lume. Coming from Next.js I was trying to set up my Lume site using the JSX and MDX plugins but I'm currently stuck in rendering a collection of posts in JSX.

I've tried to look though the docs, examples, and framework code, but I haven't come a cross a way to do { content | safe } in JSX loading MDX (or Markdown) content. I can render a home page. I can render post pages. But I'm struggling to put a list of posts on a home page with the posts content (or summary of the content).

I can get the posts content to render with:

export default ({ title, children, search }, { date }) => (
  {search.pages("post").map((post, index) => (
    <div>
      {post.data.content}
    </div>
  )}
))

But it renders the raw MDX content, not HTML. Can anyone help or have any ideas? I've also tried to use dangerouslySetInnerHTML with now luck. Does anyone have any ideas or working examples in Lume?

Thanks!

[oscarotero]

Hi.
Indeed, post.data.content contains the raw file content of the page. The rendered content is stored in post.content.

But post.content not only contains the MDX code rendered but also the layout used to wrap this code. There's similar issue at #357 regarding to how to access to the rendered content before being merged with the layout, and the only current way is by creating a "proxy" layout to store the content.

Due this is a recurrent issue, I will find a way to integrate this behavior natively on Lume.

[ootoovak]

Thank you very much for the quick reply @oscarotero! I look forward to the change, and again, thanks for creating and sharing Lume. 🙂

[oscarotero]

I just released Lume v1.16.0. Now you can use the children property to get the rendered content excluding the layouts.

export const renderOrder = 1; // To make sure the posts are rendered before this

export default ({ search }) => (
  {search.pages("post").map((post) => (
    <div>
      {post.data.children}
    </div>
  )}
))

[ootoovak]

Thank you so much for following up on this @oscarotero! Great work, I'll try it out this week. 🙏

[ootoovak]

@oscarotero I just wanted to report back that this worked great!

At first I thought it wasn't working until I came back here and noticed this line in your example above:

export const renderOrder = 1; // To make sure the posts are rendered before this

That sorted it out and now it works great, thanks!