Invalid Table of Contents links outside of "Usage" tab.

[TylerAPfledderer]

Description

When I am at any doc page covering a component which contains a table of contents - if I navigate to the Props or Theming tab I expect any link under the table of contents to navigate me back to the "Usage" tab and then to the related section. Instead, the relative links supplied only append to the current URL.

(i.e. In the FormControl Page: https://chakra-ui.com/docs/components/form-control/props#sample-usage-for-a-radio-or-checkbox-group)

Consideration(s);

• Supply the links under the table of contents relative links that begin with usage (a short-term solution)
• Provide a table of contents specific to the Props and Theming tabs (maybe preferred as this new navigation structure continues to be fleshed out)

[nikolovlazar]

Good point @TylerAPfledderer! Let's think about how we can attack this.

[TylerAPfledderer]

@nikolovlazar

Firstly, is it normal for the TableOfContent component to not render in localhost? (It looks like contentlayer does not generate frontmatter headings to supply)

It looks like the solution can be solved in the PageContainer. I am currently noticing though that the slug from frontmatter does not change when selecting any of the tabs; it always returns the url ending in usage.

[nikolovlazar]

@TylerAPfledderer something must be happening on your side. I just ran the docsite locally and I can see the TOC on the right.

But yeah, the TOC does not re-render when we're switching tabs. That's a bug 😁

[TylerAPfledderer]

@nikolovlazar just my luck with contentlayer and me using Windows! 😅

I think the issue is in contentlayer-utils.ts line 37

I propose the following should be added in the object inside this conditional:

doc.frontMatter = {
  ...doc.frontMatter,
  ...(getUsageDoc(doc.id)?.frontMatter ?? {}),
  slug: doc.frontMatter.slug.replace('/usage', `/${doc.scope}`), // <====
}

Else the path will always be appended with usage.

If this were to be added, I could only assume that in the short-term you could then use the slug to help render the table of contents in the appropriate tab.

Of course I can't confirm this without figuring out why contentlayer isn't working like its supposed to! 😆

[TylerAPfledderer]

@nikolovlazar to the issue with no headings to render TableOfContent: turns out the headings variable in the getTableOfContents script is not receiving any results from the regex check, because the regex is failing with the line break at the end. Removing \n or appending it with \n? passes the regex and the table appears!

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

[TylerAPfledderer]

Hey @nikolovlazar ! Following up on this.

In addition to the proposal I made above, would then alter the areas of PageContainer

const { title, description, editUrl, version, headings = [] } = frontmatter

The above destructuring would then also pull out the slug and then check if the end of the slug is props or theming (so not usage)

 const {
    slug,
    title,
    description,
    editUrl,
    version,
    headings = [],
  } = frontmatter

const isNotUsageTab = /(props|theming)$/.test(slug)

Then when rendering the table of contents...

{!hideToc && !isNotUsageTab && (
  <TableOfContent
    visibility={headings.length === 0 ? 'hidden' : 'initial'}
    headings={headings}
  />
)}

So only show the table if you are on the usage tab.

That's what I got at this point. 😄 Looks like the table of contents is not getting headings for the props and theming content that have been added anyway, so this would still be a temporary solution if the table needed to be rendered properly for the other tabs.

[noobinthisgame]

This issue will be resolved with the docs rework we are currently working on.

[aacevski]

Since we have changed plans regarding the rework, this issue is still valid and can be worked on.

[TylerAPfledderer]

@aacevski is what I proposed and observed above valid at this point? I know it's been a hot minute since addressing this initially 😅