"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", li: "li", p: "p", pre: "pre", ul: "ul", ...props.components }, {Iframe} = _components; if (!Iframe) _missingMdxReference("Iframe", true); return _jsxs(_Fragment, { children: [_jsx(Iframe, { src: "https://egghead.io/lessons/react-create-a-table-of-contents-component-for-mdx-documents-in-gatsby/embed" }), "\n", _jsxs(_components.p, { children: ["With MDX it's preferable to use composition over plugins whenever possible. When you're using MDX with a Gatsby site it's pretty straightforward to use a component. ", _jsx(_components.code, { children: "gatsby-plugin-mdx" }), " will automatically add a headings field when it processes a document so you can query it and pass that along to a component."] }), "\n", _jsx(_components.h2, { id: "fetching-the-headings-data", children: _jsx(_components.a, { href: "#fetching-the-headings-data", children: "Fetching the headings data" }) }), "\n", _jsx(_components.p, { children: "You can open up GraphiQL when Gatsby is in development mode to try out a query that fetches the headings values. You'll be able to pass this as a prop to a TableOfContents component." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-gql", children: "query {\n allMdx {\n nodes {\n headings {\n depth\n value\n }\n }\n }\n}\n" }) }), "\n", _jsx(_components.h2, { id: "modifying-the-page-query", children: _jsx(_components.a, { href: "#modifying-the-page-query", children: "Modifying the page query" }) }), "\n", _jsx(_components.p, { children: "In this example we have an existing page that we want to add the table of contents to. It fetches an MDX document and passes the body to MDXRenderer." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport { graphql } from 'gatsby'\nimport { MDXRenderer } from 'gatsby-plugin-mdx'\n\nexport default ({\n data: {\n file: { childMdx }\n }\n}) => (\n <>\n {childMdx.body}\n \n)\n\nexport const pageQuery = graphql`\n {\n file(sourceInstanceName: { eq: \"content\" }, name: { eq: \"index\" }) {\n childMdx {\n body\n }\n }\n }\n`\n" }) }), "\n", _jsx(_components.p, { children: "We'll need to modify the page query to also fetch the headings:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "export const pageQuery = graphql`\n {\n file(sourceInstanceName: { eq: \"content\" }, name: { eq: \"index\" }) {\n childMdx {\n body\n }\n }\n }\n`\n" }) }), "\n", _jsx(_components.p, { children: "And then update the component to pass along the headings to MDXRenderer." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "export default ({\n data: {\n file: { childMdx }\n }\n}) => (\n <>\n {childMdx.body}\n \n)\n" }) }), "\n", _jsx(_components.p, { children: "With the headings passed as a prop, they'll be available to access in the document." }), "\n", _jsx(_components.h2, { id: "creating-the-table-of-contents-component", children: _jsx(_components.a, { href: "#creating-the-table-of-contents-component", children: "Creating the table of contents component" }) }), "\n", _jsxs(_components.p, { children: ["First, we can scaffold out a TableOfContents component that logs the props passed to it at ", _jsx(_components.code, { children: "src/components/table-of-contents.js" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\n\nexport default props =>

{JSON.stringify(props, null, 2)}

\n" }) }), "\n", _jsx(_components.p, { children: "Then we can import the component and use it in our document." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "import TableOfContents from '../src/components/table-of-contents'\n\n# Hello, world!\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Note that we're passing ", _jsx(_components.code, { children: "props.headings" }), ". This is automatically in scope because we've passed it to MDXRenderer. When the document is rendered you should now see the raw data that we saw in GraphiQL."] }), "\n", _jsxs(_components.p, { children: ["Now, we can use Gatsby's Link component and ", _jsx(_components.code, { children: "github-slugger" }), " to create our table of contents:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport Slugger from 'github-slugger'\nimport { Link } from 'gatsby'\n\nconst slugger = new Slugger()\n\nexport default ({ headings }) => (\n

\n {heading.value}\n

\n)\n" }) }), "\n", _jsx(_components.h2, { id: "adding-slugs-to-markdown-heading", children: _jsx(_components.a, { href: "#adding-slugs-to-markdown-heading", children: "Adding slugs to markdown heading" }) }), "\n", _jsxs(_components.p, { children: ["We now have the links being displayed, but you might notice that they don't work. This is because slugs aren't being added to our markdown headings. We can achieve this by installing ", _jsx(_components.code, { children: "remark-slug" }), " and passing it to ", _jsx(_components.code, { children: "gatsby-plugin-mdx" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n plugins: [\n {\n resolve: 'gatsby-plugin-mdx',\n options: {\n remarkPlugins: [require('remark-slug')]\n }\n },\n {\n resolve: 'gatsby-source-filesystem',\n options: {\n path: 'content',\n name: 'content'\n }\n }\n ]\n}\n" }) }), "\n", _jsx(_components.p, { children: "After restarting Gatsby's development server the links should now work!" }), "\n", _jsx(_components.h2, { id: "composition", children: _jsx(_components.a, { href: "#composition", children: "Composition" }) }), "\n", _jsx(_components.p, { children: "This approach is powerful because it allows you to use composition. Imagine if you wanted to wrap a specific page's table of contents in another component, you can do so on the fly." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "import TableOfContents from '../src/components/table-of-contents'\nimport TomatoBox from '../src/components/tomat-box'\n\n# Hello, world!\n\n\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["You can also add props in order to customize the rendering or change the location of where you're rendering the table of contents in your document. If you wanted, you can render the table of contents ", _jsx(_components.em, { children: "outside" }), " of your document as well. This is something you might want if you wanted the table of contents to be along the right hand side."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport { graphql } from 'gatsby'\nimport { MDXRenderer } from 'gatsby-plugin-mdx'\nimport { Flex, Box } from '../components/ui'\nimport TableOfContents from '../components/table-of-contents'\n\nexport default ({\n data: {\n file: { childMdx }\n }\n}) => (\n \n {childMdx.body}\n \n \n \n \n)\n\nexport const pageQuery = graphql`\n {\n file(sourceInstanceName: { eq: \"content\" }, name: { eq: \"index\" }) {\n childMdx {\n body\n headings {\n depth\n value\n }\n }\n }\n }\n`\n" }) }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { href: "#conclusion", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "By combining MDX, components, and the Gatsby GraphQL data layer you can create a flexible table of contents that can be used in a multitude of ways." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/johno/egghead-lessons/tree/master/gatsby-toc", children: "See the source code →" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://egghead.io/lessons/react-create-a-table-of-contents-component-for-mdx-documents-in-gatsby", children: "Watch the egghead lesson →" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Create a table of contents component for MDX in Gatsby