Add TOC to GraphQL Schema (gatsbyjs#48)

Added
------

* `table-of-contents` to graphql schema
* example using `toc` to kitchen-sink

packages/gatsby-plugin-mdx/extend-node-type.js

@@ -12,11 +12,13 @@ const retext = require("retext");
 const visit = require("unist-util-visit");
 const remove = require("unist-util-remove");
 const toString = require("mdast-util-to-string");
+const generateTOC = require("mdast-util-toc");
 const stripMarkdown = require("strip-markdown");
 const grayMatter = require("gray-matter");
 const { createMdxAstCompiler } = require("@mdx-js/mdx");
 const prune = require("underscore.string/prune");
 const mdx = require("./utils/mdx");
+const getTableOfContents = require("./utils/get-table-of-content");
 const defaultOptions = require("./utils/default-options");
 
 const stripFrontmatter = source => grayMatter(source).content;
@@ -146,6 +148,21 @@ ${code}`;
           return headings;
         }
       },
+      tableOfContents: {
+        type: GraphQLJSON,
+        args: {
+          maxDepth: {
+            type: GraphQLInt,
+            default: 6
+          }
+        },
+        async resolve(mdxNode, { maxDepth }) {
+          const ast = await getAST(mdxNode);
+          const toc = generateTOC(ast, maxDepth);
+
+          return getTableOfContents(toc.map, {});
+        }
+      },
       timeToRead: {
         type: GraphQLInt,
         async resolve(mdxNode) {

packages/gatsby-plugin-mdx/package.json

@@ -17,6 +17,7 @@
     "json5": "^1.0.1",
     "lodash": "^4.17.10",
     "mdast-util-to-string": "^1.0.4",
+    "mdast-util-toc": "^2.0.1",
     "remark": "^9.0.0",
     "retext": "^5.0.0",
     "strip-markdown": "^3.0.1",

packages/gatsby-plugin-mdx/utils/get-table-of-content.js

@@ -0,0 +1,50 @@
+const visit = require("unist-util-visit");
+
+// parse mdast-utils-toc object to JSON object:
+//
+// {"items": [{
+//   "url": "#something-if",
+//   "title": "Something if",
+//   "items": [
+//     {
+//       "url": "#something-else",
+//       "title": "Something else"
+//     },
+//     {
+//       "url": "#something-elsefi",
+//       "title": "Something elsefi"
+//     }
+//   ]},
+//   {
+//     "url": "#something-iffi",
+//     "title": "Something iffi"
+//   }]}
+//
+// TODO: fully test it with different options, tight=True
+//
+function getItems(node, current) {
+  if (node.type === "paragraph") {
+    visit(node, item => {
+      if (item.type === "link") {
+        current.url = item.url;
+      }
+      if (item.type === "text") {
+        current.title = item.value;
+      }
+    });
+    return current;
+  } else {
+    if (node.type === "list") {
+      current.items = node.children.map(i => getItems(i, {}));
+      return current;
+    } else if (node.type === "listItem") {
+      const heading = getItems(node.children[0], {});
+      if (node.children.length > 1) {
+        getItems(node.children[1], heading);
+      }
+      return heading;
+    }
+  }
+  return {};
+}
+module.exports = getItems;