feat: add more options to toc component and docs

data/blog/new-features-in-v1.mdx

@@ -1,28 +1,19 @@
 ---
 title: 'New features in v1'
-date: '2021-07-28'
+date: '2021-08-07'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
 layout: PostSimple
 ---
 
-<TOCInline toc={props.toc} />
-
 ## Overview
 
 A post on the new features introduced in v1.0. New features:
 
-- [Theme colors](#theme-colors)
-- [Xdm MDX compiler](#xdm-mdx-compiler)
-- [Layouts](#layouts)
-- [Multiple authors](#multiple-authors)
-- [Analytics](#analytics)
-- [Blog comments system](#blog-comments-system)
-- [Copy button for code blocks](#copy-button-for-code-blocks)
-- [Line highlighting and line numbers](#line-highlighting-and-line-numbers)
+<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
 
-First load JS decreased from 43kB to 38kB despite all the new features added!
+First load JS decreased from 43kB to 39kB despite all the new features added!
 
 See [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.
 
@@ -77,6 +68,30 @@ Components which require external image loaders would require additional esbuild
 Components which are dependent on global application state on lifecycle like the Nextjs `Link` component would also not work with this setup as each mdx file is built indepedently.
 For such cases, it is better to use component substitution.
 
+## Table of contents component
+
+Inspired by [Docusaurus](https://docusaurus.io/docs/next/markdown-features/inline-toc) and Gatsby's [gatsby-remark-table-of-contents](https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/),
+the `toc` variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly.
+To make generating a TOC simple, you can use the existing `TOCInline` component.
+
+For example, the TOC in this post was generated with the following code:
+
+```js
+<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
+```
+
+You can customise the headings to be generated by configuring the `fromHeading` and `toHeading` props as well as exclude particular headings
+by passing a string or a string array. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the `indentDepth` property.
+A `asDisclosure` prop can be used to render the TOC within an expandable disclosure element.
+
+Here's the full TOC rendered in a disclosure element.
+
+```js
+<TOCInline toc={props.toc} asDisclosure />
+```
+
+<TOCInline toc={props.toc} asDisclosure />
+
 ## Layouts
 
 You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new `PostSimple` layout!