var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),D=(n,l)=>{for(var c in l)r(n,c,{get:l[c],enumerable:!0})},t=(n,l,c,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of y(l))!m.call(n,s)&&s!==c&&r(n,s,{get:()=>l[s],enumerable:!(o=E(l,s))||o.enumerable});return n};var g=(n,l,c)=>(c=n!=null?p(C(n)):{},t(l||!n||!n.__esModule?r(c,"default",{value:n,enumerable:!0}):c,n)),N=n=>t(r({},"__esModule",{value:!0}),n);var d=u((F,i)=>{i.exports=_jsx_runtime});var x={};D(x,{default:()=>w,frontmatter:()=>f});var e=g(d()),f={title:"How to make a Table of Contents using Tocbot with Contentlayer",excerpt:"Tocbot is a library that builds an automatic table of contents in your pages. I'll show you how to set up with Contentlayer.",publishedAt:new Date(16755408e5),category:"Next.js",tags:["Table of Contents","Tocbot","Contentlayer","MDX"],image:"/images/posts/tocbot-contentlayer/thumb.png",isPublished:!0,isFeatured:!1};function h(n){let l=Object.assign({p:"p",a:"a",h2:"h2",code:"code",div:"div",pre:"pre",span:"span",h3:"h3"},n.components),{Box:c,UnorderedList:o,CodeHead:s}=l;return c||a("Box",!0),s||a("CodeHead",!0),o||a("UnorderedList",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.p,{children:"Table of contents helps the visitors quickly get the summary of the article, and navigate to the sections that they are interested in."}),` `,(0,e.jsxs)(l.p,{children:["In this article, I'll show you how to create a table of contents using ",(0,e.jsx)(l.a,{href:"https://tscanlin.github.io/tocbot/",children:"Tocbot"})," with Contentlayer and Next.js."]}),` `,(0,e.jsx)(c,{children:(0,e.jsxs)(l.p,{children:["This tutorial is designed for people who use ",(0,e.jsx)(l.a,{href:"https://nextjs.org/",children:"Next.js"}),`, `,(0,e.jsx)(l.a,{href:"https://www.contentlayer.dev/",children:"Contentlayer"}),`, and markdown or MDX in their website.`]})}),` `,(0,e.jsx)(l.h2,{id:"what-we-build",children:"What we build"}),` `,(0,e.jsx)(l.p,{children:"Before we start, I'll show you what kind of a table of contents we are gonna create in this article."}),` `,(0,e.jsx)(c,{type:"success_l",children:(0,e.jsxs)(o,{children:[(0,e.jsx)("li",{children:"You can place it anywhere (in the blog contents, or a sidebar, etc)"}),(0,e.jsx)("li",{children:"Smooth scrolling to the anchor point when clicked"}),(0,e.jsx)("li",{children:"Offset value is available if you have a sticky header"}),(0,e.jsx)("li",{children:"Choose the levels of heading tags you want to show"}),(0,e.jsxs)("li",{children:["Set an ",(0,e.jsx)(l.code,{children:"active"})," class to highlight the current section on scroll"]})]})}),` `,(0,e.jsx)(l.p,{children:"Basically, we are gonna create the same table of contents you see on the sidebar in this page. (If you don't see it, increase your browser width to 1280px or up)"}),` `,(0,e.jsx)(l.p,{children:"If this is what you wanna build, then let's get started!"}),` `,(0,e.jsx)(l.h2,{id:"step-1-install-packages",children:"Step 1. Install packages"}),` `,(0,e.jsx)(l.p,{children:"First, we need to install the following packages."}),` `,(0,e.jsx)(s,{lang:"console"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"console","data-theme":"default",children:(0,e.jsx)(l.code,{"data-language":"console","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"rehype-slug"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"tocbot"})]})})})}),` `,(0,e.jsx)(l.p,{children:"These are all we need. I'll explain what these packages will do later on."}),` `,(0,e.jsx)(l.h2,{id:"step-2-add-ids-to-heading-tags-using-rehype-slug",children:"Step 2. Add ids to heading tags using rehype-slug"}),` `,(0,e.jsxs)(l.p,{children:["In order to set anchor links to heading tags, each one must have an ",(0,e.jsx)(l.code,{children:"id"})," attribute with a unique value."]}),` `,(0,e.jsxs)(l.p,{children:["To achieve this, we are gonna use ",(0,e.jsx)(l.code,{children:"rehype-slug"}),"."]}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"rehype-slug"})," does the following work automatically."]}),` `,(0,e.jsx)(c,{type:"success_l",children:(0,e.jsxs)(o,{children:[(0,e.jsxs)("li",{children:["Add ",(0,e.jsx)(l.code,{children:"id"}),"s to ",(0,e.jsx)(l.code,{children:"h1"})," - ",(0,e.jsx)(l.code,{children:"h6"})," tags using the inner text as a value"]}),(0,e.jsxs)("li",{children:["Make sure each ",(0,e.jsx)(l.code,{children:"id"})," value will be unique"]})]})}),` `,(0,e.jsx)(l.h3,{id:"how-rehype-slug-works",children:"How rehype-slug works"}),` `,(0,e.jsx)(l.p,{children:"Let me show you how this plugin works. Let's say your mdx file has a content below."}),` `,(0,e.jsx)(s,{lang:"mdx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"mdx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"mdx","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#569CD6",fontWeight:"bold"},children:"## This is heading 2"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#569CD6",fontWeight:"bold"},children:"### This is heading 3"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#569CD6",fontWeight:"bold"},children:"#### Sample heading"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#569CD6",fontWeight:"bold"},children:"##### Sample heading"})})]})})}),` `,(0,e.jsx)(l.p,{children:"When this is rendered in the browser, it looks like this."}),` `,(0,e.jsx)(s,{lang:"html"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"html","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"h2"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"this-is-heading-2"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"This is heading 2"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"h3"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"this-is-heading-3"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"This is heading 3"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"sample-heading"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Sample heading"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"h5"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"sample-heading-1"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Sample heading"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]})]})})}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"rehype"})," looks for heading tags, and adds the ",(0,e.jsx)(l.code,{children:"id"})," attributes with the value of the text content inside."]}),` `,(0,e.jsxs)(l.p,{children:["Also, it generates unique ",(0,e.jsx)(l.code,{children:"id"})," values even when the heading tags have the same text strings. You can see it by looking at two headings with ",(0,e.jsx)(l.code,{children:"Sample heading"})," strings inside. When ",(0,e.jsx)(l.code,{children:"rehype-slug"})," detects the same strings, it adds an additional value to make them unique."]}),` `,(0,e.jsx)(l.h3,{id:"set-up-rehype-slug-in-contentlayerconfigjs",children:"Set up rehype-slug in contentlayer.config.js"}),` `,(0,e.jsxs)(l.p,{children:["To use the rehype plugin, you need to import it in ",(0,e.jsx)(l.code,{children:"contentlayer.config.js"}),"."]}),` `,(0,e.jsx)(s,{name:"contentlayer.config.js",lang:"js"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"js","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"rehypeSlug"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"rehype-slug"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"makeSource"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"contentDirPath:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"posts"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// your own setting"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"documentTypes:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"Post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"], "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// your own setting"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdx:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"rehypePlugins:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"rehypeSlug"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"],"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"});"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["This is all you need. You simply include ",(0,e.jsx)(l.code,{children:"rephype-slug"})," in the ",(0,e.jsx)(l.code,{children:"rehypePlugins"})," array. If you navigate to your blog page, you will see the headings with ",(0,e.jsx)(l.code,{children:"id"})," attributes."]}),` `,(0,e.jsx)(l.h2,{id:"step-3-create-a-toc-component",children:"Step 3. Create a toc component"}),` `,(0,e.jsxs)(l.p,{children:["Now, let's start building the table of contents using Tocbot. First we create a new file ",(0,e.jsx)(l.code,{children:"toc.jsx"}),", and copy & paste the code below."]}),` `,(0,e.jsx)(s,{name:"/components/toc.jsx",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"tocbot"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"init"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Select the wrapper of toc"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"contentSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc-content"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Select the warpper of contents"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"headingSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"h2, h3"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Choose the heading tags"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Optional 1."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" Enable these if you have a sticky header and adjust the offset value"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// headingsOffset: 100,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// scrollSmoothOffset: -100,"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Optional 2. "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" Enable this if 'active' class on scroll won't work properly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// hasInnerContainers: true,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"destroy"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Table of Contents"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"js-toc"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"This is the basic setup with minimum options."}),` `,(0,e.jsx)(l.p,{children:"I'm gonna break these down and explain individually in the next section."}),` `,(0,e.jsx)(l.h3,{id:"3-1-initialize-tocbot",children:"3-1. Initialize tocbot"}),` `,(0,e.jsxs)(l.p,{children:["We initialize tocbot using React ",(0,e.jsx)(l.code,{children:"useEffect"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["After the component is rendered, it creates the table of contents. Once it's done, call ",(0,e.jsx)(l.code,{children:"destroy"})," method to remove event listeners."]}),` `,(0,e.jsx)(s,{name:"/components/toc.jsx",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"init"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Select the wrapper of toc"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"contentSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc-content"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Select the warpper of contents"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"headingSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"h2, h3"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// Choose the heading tags"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Optional 1."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" Enable these if you have a sticky header and adjust the offset value"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// headingsOffset: 100,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// scrollSmoothOffset: -100,"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Optional 2. "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" Enable this if 'active' class on scroll won't work properly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:" */"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// hasInnerContainers: true,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"destroy"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}, []);"})})]})})}),` `,(0,e.jsx)(l.p,{children:"You can pass some options when initializing the tocbot. These 3 options are essential in order to create a ToC."}),` `,(0,e.jsx)(c,{type:"success_l",children:(0,e.jsxs)(o,{children:[(0,e.jsxs)("li",{children:[(0,e.jsx)(l.code,{children:"tocSelector"})," - Where to render the table of contents."]}),(0,e.jsx)("li",{children:(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"contentSelector"}),` - Where to grab the headings to build the table of contents.`]})}),(0,e.jsx)("li",{children:(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"headingSelector"}),` - Which headings to grab inside of the contentSelector element.`]})})]})}),` `,(0,e.jsxs)(l.p,{children:["About the optional settings and other options, check out ",(0,e.jsx)(l.a,{href:"https://tscanlin.github.io/tocbot/",children:"the official Tocbot page"}),"."]}),` `,(0,e.jsx)(l.h3,{id:"3-2-create-the-table-of-contents-template",children:"3-2. Create the Table of Contents template"}),` `,(0,e.jsx)(l.p,{children:"We need to create a template to show the table of contents."}),` `,(0,e.jsx)(s,{name:"/components/toc.jsx",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"tocbot"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"init"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"contentSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'".js-toc-content"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"headingSelector:"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"h2, h3"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" });"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"tocbot"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"destroy"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Table of Contents"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"js-toc"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["First, you need to have the container of the generated table of contents. In this code, the ",(0,e.jsx)(l.code,{children:"div"})," tag with the className of ",(0,e.jsx)(l.code,{children:"js-toc"})," will be the container because we set ",(0,e.jsx)(l.code,{children:"tocSelector"})," value to ",(0,e.jsx)(l.code,{children:"js-toc"}),"."]}),` `,(0,e.jsx)(l.p,{children:"The rest is totally up to you. You can add more tags or some icons if you want."}),` `,(0,e.jsx)(l.h2,{id:"step-4-add-a-class-to-the-wrapper-of-blog-content-in-a-single-page",children:"Step 4. Add a class to the wrapper of blog content in a single page"}),` `,(0,e.jsxs)(l.p,{children:["We need to tell Tocbot where to grab all headings to make the table of contents. In order to do this, we need to add a few lines to a single page (in my case ",(0,e.jsx)(l.code,{children:"/pages/posts/[slug].js"}),")."]}),` `,(0,e.jsxs)(l.p,{children:["If you have a MDX blog with Contentlayer, your ",(0,e.jsx)(l.code,{children:"[slug].js"})," file should look something like this:"]}),` `,(0,e.jsx)(s,{name:"pages/posts/[slug].js",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"next-contentlayer/hooks"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"allPosts"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"contentlayer/generated"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Other contents... */"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"components"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticProps"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"params"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticPaths"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:""})," is where the MDX content will be rendered. So, we add a ",(0,e.jsx)(l.code,{children:"div"})," tag with ",(0,e.jsx)(l.code,{children:"js-toc-content"})," class and wrap up ",(0,e.jsx)(l.code,{children:""})," like this:"]}),` `,(0,e.jsx)(s,{name:"pages/posts/[slug].js",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"js-toc-content"'}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"components"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["By doing this, Tocbot will look for heading tags inside of ",(0,e.jsx)(l.code,{children:"js-toc-content"})," and generate the table."]}),` `,(0,e.jsx)(l.h2,{id:"step-5-import-the-toc-component-into-your-page",children:"Step 5. Import the toc component into your page"}),` `,(0,e.jsx)(l.p,{children:"Finally, we are gonna import the toc in your page. There are two ways to do this, depending on where you want to show the table of contents."}),` `,(0,e.jsx)(l.h3,{id:"1-use-the-table-of-contents-inside-of-mdx-files",children:"1. Use the table of contents inside of .mdx files"}),` `,(0,e.jsxs)(l.p,{children:["If you wanna embed the table of contents inside of your ",(0,e.jsx)(l.code,{children:".mdx"})," files, first you need to add it to ",(0,e.jsx)(l.code,{children:"mdxComponents"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["Go to your single page (",(0,e.jsx)(l.code,{children:"[slug].js"}),"), and add the highlighted lines:"]}),` `,(0,e.jsx)(s,{name:"pages/posts/[slug].js",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"next-contentlayer/hooks"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"allPosts"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"contentlayer/generated"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"@/components/toc"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Other contents... */"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"components"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticProps"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"params"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticPaths"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["Now that the ",(0,e.jsx)(l.code,{children:""})," component is ready to be used in ",(0,e.jsx)(l.code,{children:".mdx"})," files, you can call it like this:"]}),` `,(0,e.jsx)(s,{name:"/posts/sample.mdx",lang:"mdx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"mdx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"",style:{counterSet:"line 7"},"data-language":"mdx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"---"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"Sample mdx file"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"publishedAt"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:": 2023-02-04T20:00:00"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"---"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"This is a sample content."})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"This is a sample content..."})})]})})}),` `,(0,e.jsx)(l.p,{children:"The cool thing about this method is that you have a control over where to show and whether to show the table of contents on each page."}),` `,(0,e.jsx)(l.h3,{id:"2-use-the-table-of-contents-outside-of-mdx-files",children:"2. Use the table of contents outside of .mdx files"}),` `,(0,e.jsx)(l.p,{children:"The common case for this is when you want to show the table of contents in a sidebar. In this case, you can simply import and use it in the file that you actually wanna show it just like other components."}),` `,(0,e.jsxs)(l.p,{children:["In my blog, I show it in the sidebar which is located in ",(0,e.jsx)(l.code,{children:"[slug].js"})," file."]}),` `,(0,e.jsx)(s,{name:"/pages/posts/[slug].js",lang:"mdx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"next-contentlayer/hooks"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"allPosts"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"contentlayer/generated"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"@/components/toc"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useMDXComponent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"post"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"main"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"MDXContent"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"components"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mdxComponents"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"aside"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"Toc"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"PostLayout"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticProps"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"params"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"async"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"getStaticPaths"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// ..."})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"This is it! Now you have successfully implemented the table of contents in your website."}),` `,(0,e.jsx)(l.h2,{id:"final-thoughts",children:"Final thoughts"}),` `,(0,e.jsx)(l.p,{children:"I originally tried to create the table of contents on my own, but then I realized it would save a lot of time if I used a package. Luckily Tocbot has everything I wanted for my table of contents, so I'm satisfied with this for now."}),` `,(0,e.jsx)(l.p,{children:"If you have any questions about this, feel free to send me a message! I'll do my best to help you."})]})}function b(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(h,n)})):h(n)}var w=b;function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(x);})(); ;return Component;

- TAG -Table of Contents

How to make a Table of Contents using Tocbot with Contentlayer