Figured out how to export ToC via mdx-loader

packages/website/md/new-docs/usage.mdx

@@ -1,7 +1,3 @@
-export const meta = {
-    title: 'Sol-compiler Usage',
-};
-
 Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
 
 The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.

packages/website/package.json

@@ -135,8 +135,10 @@
         "css-loader": "0.23.x",
         "less-loader": "^4.1.0",
         "make-promises-safe": "^1.1.0",
+        "mdx-table-of-contents": "^0.1.0",
         "raw-loader": "^0.5.1",
         "react-svg-loader": "^2.1.0",
+        "remark-slug": "^5.1.2",
         "rollbar-sourcemap-webpack-plugin": "^2.4.0",
         "shx": "^0.2.2",
         "source-map-loader": "^0.2.4",

packages/website/ts/pages/docs/view.tsx

@@ -60,7 +60,10 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
 
     const loadPageAsync = async (fileName: string) => {
         const component = await import(`../../../md/new-docs/${fileName}.mdx`);
+
         if (component) {
+            console.log('component', component);
+            console.log('component.tableOfContents()', component.tableOfContents());
             setState({
                 // title: component.meta.title,
                 Component: component.default,

packages/website/webpack.config.js

@@ -1,11 +1,12 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');
 const childProcess = require('child_process');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const fs = require('fs');
-const homeDir = require('os').homedir();
+const mdxTableOfContents = require('mdx-table-of-contents');
+const remarkSlug = require('remark-slug');
 
 const GIT_SHA = childProcess
     .execSync('git rev-parse HEAD')
@@ -76,7 +77,13 @@ const config = {
                             presets: ['env', 'react'],
                         },
                     },
-                    '@mdx-js/loader',
+                    {
+                        loader: '@mdx-js/loader',
+                        options: {
+                            remarkPlugins: [remarkSlug],
+                            compilers: [mdxTableOfContents],
+                        },
+                    },
                 ],
             },
             {