Remix MDX Docs Demo

Table of Contents 101

Table of Contents

The above Table of Contents was generated by using MDX to parse headings using the below custom Remark plugin

A table of contents on a website is helpful for many of the same reasons that it is helpful in a document or book. Here are a few reasons why a table of contents on a website can be particularly useful:

Accessibility

A table of contents can improve website accessibility by providing an overview of the content that is organized in a clear and logical way. This can make the site more accessible to visitors with visual or cognitive impairments who may have difficulty navigating the site.

A table of contents can help website visitors to navigate the site quickly and easily. It provides an overview of the content and enables visitors to find the information they need without having to scroll through the entire page or site.

User Experience

User experience: A table of contents can enhance the user experience by making it easier for visitors to find what they are looking for. This can increase visitor satisfaction and improve the chances that visitors will return to the site in the future.

SEO

A table of contents can help to improve search engine optimization (SEO) by providing an organized and structured overview of the content on the site. This can make it easier for search engines to index the site and improve its ranking in search results.

Summary

In summary, a table of contents on a website is helpful because it provides navigation, enhances the user experience, improves SEO, and enhances accessibility. It is a valuable tool for both website visitors and site owners and can greatly enhance the overall quality and usability of the site.

export default function rehypeHeadings(options) {
    return async function transform(tree: M.Root) {
        /* import package to traverse @unifiedjs Universal Syntax Tree */ 
        const { visit } = await import('unist-util-visit');

        visit(
            tree, { type: 'element', tagName: "h2" },
            function visitor(node) {
                const { properties, children } = node;
                const anchor = children.find((child) => child.tagName === "a")
                const anchorText = anchor.children.find((child) => child.type === 'text').value
                if (anchorText && properties?.id)
                    options.exportRef.push({
                        id: properties?.id,
                        text: anchorText
                    })
            },
        )
    }