How do I render a Table of Contents separately from the rest of the content?

[ajaypillay]

Hi, I'm trying to use remark-toc or rehype-toc to render a table of contents. However, the problem is that it's renderred as such:

<nav /> (TOC)
<h1 />
...
<p />
... (rest of the content)

This is an issue because I wish to display the TOC on the right of the screen, and ideally I want to render it as such:

<nav /> (TOC)
<div> (markdown goes here)
  <h1 />
  ...
  <p />
</div>

Then it's very easy for me to style this because all of this is in a parent div with display: flex and it's straightforward from there. Right now what I need to do is apply position: absolute to the TOC and perform a lot of manual styling which isn't the best semantic approach to this.

Is this possible at all?

Thanks!

[wooorm]

https://github.com/stefanprobst/rehype-extract-toc#how-to-use-with-mdx

[ajaypillay]

Hi, I'm using an older version of MDX and am using mdx.sync. I've tried doing this but I can't seem to get the TOC out.

const jsx = mdx.sync(content, {
  remarkPlugins: [[remarkFrontmatter, { type: "yaml", marker: "+" }], remarkMath, [remarkPrism, { autolinker: true }]],
  rehypePlugins: [rehypeKatex, rehypeSlug, rehypeAutolinkHeadings, rehypeExtractToc, rehypeExtractTocExport]
})
console.log(jsx)

The TOC isn't rendered as part of the jsx string. I'm using @mdx-js/mdx: 1.6.22 and @stefanprobst/rehype-extract-toc: 2.2.0.

Thanks.

[wooorm]

Use a new version of mdx. It contains tons of amazing features that enable things like this.

[ajaypillay]

Use a new version of mdx. It contains tons of amazing features that enable things like this.

I would love to, but as per #2088, I might be stuck with this for now in my current Meteor environment. Are there any workarounds that could work?

[ChristianMurphy]

Taking a step back, the bugs and lack of standard JavaScript support in Meteor (ES Modules, part of the standard since 2015), really isn't something which you or other projects should work around, Meteor itself should support standard JavaScript.

That said, there are some workarounds like bundling the latest version of MDX and its plugins with ESBuild (or another ESM compatible tool) to generate a legacy bundle to import while Meteor fixes ESM support, and potentially transpiling JavaScript with babel or swc.
And https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c while not specifically for Meteor, may offer some additional ideas on how to workaround Meteor's issue.