Back

@johnny_reilly This is cool! I would suggest writing a Remark plugin that visits all headings/paragraphs on the page and then dynamically generating & inserting the MDX component source, because authoring in Markdown is so much nicer.

@joshcena I'm not sure I understand how that would work. Is the idea that the plugin would look out for a "FAQs" heading and translate child headings and their content into a Q&A section? Would the API of the Remark plugins support that? You'd have to maintain state of all the things you'd visited (which is fine I think) but you'd also have to have some kind of post processing hook where you generate the structured data. Does that exist? I've never used it if so!

@johnny_reilly Basically, for Remark plugins, you don't register visitors; you are given the AST and you do whatever you want. It's just a function (opts) => (ast) => void (roughly). So the impl is really simple: find the first H2 heading called "FAQ", get all H3 descendants and their content, serialize them, then create an extra JSX node in the same format as what you have written at the moment, and just insert it in ast.children. The TS-ESLint website already has several similar Remark plugins

@johnny_reilly This is really similar to how Docusaurus extracts and exports the TOC: https://github.com/facebook/docusaurus/blob/docusaurus-v2/packages/docusaurus-mdx-loader/src/remark/toc/index.ts

I think I've worked it out...