-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New placeholder feature & hast refactoring #3
base: master
Are you sure you want to change the base?
Conversation
Well good news! For what I have tested it could really fix #2! 😃 This kind of stuff is working: Hello
Some stuff here...
![Some image](https://www.example.com/img.png)
<div className="my-super-sticky-class" style={{textAlign: "center"}}>
{{TOC}}
</div>
Other stuff here...
## Title 1
...
## Title 2
... Here you go! |
Well I changed my mind on the fallback behaviour: I feel like it is useful to have generic processing of mdx files and optional TOCs thus if a |
Ok last update had broken the generation, v3.1.2 is working correctly now. For the ones who wants to try it out until @JamesMessinger comes back: |
I can confirm this work in my project, but I did have to edit the optional chaining to work with node 12 |
@hipstersmoothie ho yeah right... My bad, I will patch it asap! 😉 |
@JamesMessinger, aside from the optional chaining, what do you think about this PR? @Jule- what's your plan for the optional chaining? Just reverting it to something like boolean operators? |
@karlhorky ho yeah thank you for the ping, I have totally forgotten about this. Yup I will revert to something more vanilla! 😉 I think I will have some time to publish in few hours. |
@hipstersmoothie, @karlhorky Here it is: v3.1.3! Please check it out and tell me if I missed some optional chaining stuff! 😉 |
Any progress on this? Would be handy! |
Hmm, it would be great to merge it. Having said that, i cant make it work yet :)
Im using rehypeRaw to preserve html used in there. Ideally i would like to define |
@pavelloz I do not know your env but for markdown to be parsed correctly normally you have to let 1 blank line before and after in order to not being processed as "text in HTML", so try it like that: <aside class="TABLE-OF-CONTENTS">
TABLE_OF_CONTENTS
</aside>
# Hello
|
^ I tried that already before i created issue. If i do that no TOC is rendered at all - it is ignored by the plugin.
Is the plugins order important in rehype chain? let runner = unified()
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeSlug)
.use(rehypeAutolinkHeadings)
.use(rehypeRaw)
.use(rehypeFormat)
.use(rehypeHighlight)
.use(rehypeToc, {
headings: ["h1", "h2", "h3"],
placeholder: "TABLE_OF_CONTENTS"
})
.use(rehypeStringify); |
I am not really familiar with all these plugins, but order is definitely important! My guess is to try to put Maybe |
Gotcha. I will disable everything and try adding one by one from the most important to the least and shuffling order. |
I was able to get this to work with my Next.js + mdx setup here: https://github.com/joe307bad/rehype-toc The main things I had to do to get it to work for me:
@Jule- I am curious if you have feedback or can clarify why these changes may have been necessary for my instance? Could it be because I am using Next.js? Thanks for all the work! It really helped me. |
@joe307bad you're welcome! 🙂
Then for the fact that you didn't succeed in using Next.js + mdx first, I cannot say without knowing which versions you use for you project and how you use them. From my side, I actually succeed to use this plugin with |
Is there a plan to eventually merge this change? From the discussion, I'm unsure what's left for it to be ready, and whether there's anything that can be done to help get it there. |
It has been really long, And I really could use this feature, I really want to get me TOC in an aside and not on the top |
@Jule- The issue stated over here persists with me
This one on the other hand seems like I should try because they faced the same problem as me.
I know it's an old thread but I wanted to use this feature |
@JagritGumber Hi, without more information, it is pretty hard to help you. Did you use the version I published? npm i @atomictech/rehype-toc Did you add extra blank lines like in this example? <aside> // JSX node
// <-- here, to reset parser and allow new node definition
TABLE_OF_CONTENTS // Markdown Text node
// <-- and here, to reset parser and allow new node definition
</aside> // JSX node (because if not, then the node could rightly be considered as `mdxJsxFlowElement`)
<aside> // JSX node start
TABLE_OF_CONTENTS // JSX Child Text node => Not a markdown text node
</aside> // JSX node end What is your plugins setup? To clarify, I am not the maintainer of this plugin. I just made a fork and a PR to try to have something working merged. The only thing I can tell is that this is working on my setup with these plugins declared in this order: import { GetStaticProps } from 'next';
import { serialize } from 'next-mdx-remote/serialize';
import autolinkHeadings from 'rehype-autolink-headings';
import slug from 'rehype-slug';
import toc from '@atomictech/rehype-toc';
// ...
export const getStaticProps: GetStaticProps = async (context) => {
const content = /* get your content */;
const mdxSource = await serialize(content, {
mdxOptions: {
rehypePlugins: [slug, autolinkHeadings, [toc, { placeholder: 'TABLE_OF_CONTENTS' }]],
},
});
return { props: { mdxSource } };
}; Hope this can help. |
@Jule- <aside> // JSX node
// here, to reset parser and allow new node definition
TABLE_OF_CONTENTS // Markdown Text node
// and here, to reset parser and allow new node definition
</aside> // JSX node I get this in my hierarch <aside></aside>
<p>TABLE_OF_CONTENTS</p>
<aside></aside> I am using AstrojsMDX btw and I found out it is due to how it handles mdx files and just had to switch up with some other way thanks for help btw |
Hi,
This pull request will add the ability to put the table of content in place of a string placeholder.
For that I have refactored a little bit your plugin with
hast
types instead ofunist
sincerehype
is based on it.Concretely in your
.mdx
file you can put something like that:Declare this plugin with
placeholder
option, but not necessarily since{{TOC}}
is the default one (if the placeholder node is not found, it fallbacks to the previous default behaviour).I don't know if this PR can fits the need of #2 but maybe it is, at least partially... I have not tested with
jsx
type element but the function that is seeking for the placeholder could evolve in order to find it inside them and maybe render the toc inside it... I am laking of knowledge or time to investigate more, sorry. 😉Hope you will enjoy the feature.
Cheers!