Just one of the bumps-in-the-foamy-dev-trail, this has proven quite difficult. After two half days spent investigating, I've started to go in circles. Let's retrace our steps.
I have more than a thousand markdown files, many of which begin with front matter. I want to be able to parse this front matter and populated an aside in the note template. The contents of the front matter differs from note to note, but generally there is:
Ideally I will be able to capture created and modified timestamps.
foamy-nextjs is built with @next/mdx and @mdx-js/react.
As far as I can tell, any file in the pages dir can become a page when the proper URL is requested. The file contents are then piped through the MDX engine which can apply remark plugins. The MDX Provider swaps in links and images and code block components for their corresponding markup from the markdown. What I don't understand is why the remark-frontmatter plugin isn't having an effect.
First I read the docs and tried everything in them about remark plugins. Namely:
Those didn't work.
I reached out to @yenly by filing an issue on the repo, and then continued investigating.
pages/_app.jsThose didn't work. Then I found next-mdx-enhanced which seemed promising, but its developers recommend we use next-mdx-remote instead. So I started figuring out how to swap it in.
That's when I got a response from @yenly. There was an open PR that, if settled, could handle frontmatter as well. This involved moving from @next/mdx to next-mdx-remote (surprise surprise ‼️), which requires refactoring the mdx handling entirely.
Much of @zomars PR was useful, so I started patching pieces into my app. The next day once I had gotten it working, @zomars had pushed another batch of commits to his PR, which I'm now combing through.
I also had to support Date objects in the frontmatter, which Next blows away by serializing all data to strings with JSON.stringify. Turns out a lot of people have this issue and there's already a lib for that: SuperJSON. And this babel plugin makes it jive with Next.
The next day (2021-03-21) I found myself refactoring and redoing just about everything I pulled from @zomars PR. Maybe it works for him, but I couldn't get past a wicked promise.them is not a function bug which seemed to stem from a fundamental misunderstanding about how async and promises work. By following the paradigms in the example apps Next provides, I was able to get the nested notes loading properly with the front matter.