tscanlin / tocbot

Build a table of contents from headings in an HTML document.
MIT License
1.37k stars 114 forks source link

Structural issue while using readme API #336

Closed kevalrathod closed 2 months ago

kevalrathod commented 3 months ago

Hey, i am trying to use tocbot for the new project. I am using Next 14 app router i am trying to render table of content it shows h2 tags but href of the list of href is setting "#".

tocbot version: 4.25.0

the config i use is

  const options = {
    tocSelector: '.table-of-contents',
    // Where to grab the headings to build the table of contents.
    contentSelector: '.doc-content',
    // Which headings to grab inside of the contentSelector element.
    headingSelector: 'h2',
    // For headings inside relative or absolute positioned containers within content.
    linkClass: 'toc-link',
    activeLinkClass: 'is-active-link',
    headingsOffset: 100,
    hasInnerContainers: true,
  }

which previews heading with href="#"

image

I am using readme api to fetch the doc content and which gives me html_bosy something like this

<h2 class="header-scroll"><div class="anchor waypoint" id="section-parameters"></div>Parameters<a class="fa fa-anchor" href="#section-parameters"></a></h2>

kevalrathod commented 3 months ago

Also when i try to fetch h3 heading it shows nothing

tscanlin commented 3 months ago

Hey, sorry to hear you are running into this issue. Do the headings in the document have id's? If not, you should be able to add them with this util: https://github.com/tscanlin/tocbot/blob/master/src/utils/make-ids.js

Also, if you are still having issues, could you share a full example url with this issue reproduced so that I can more easily troubleshoot and try to help?

Hopefully that helps. Have a good weekend!

tscanlin commented 2 months ago

Closing due to inactivity. Please reopen if this is still an issue for you.