Experiment with configuring gatsby-plugin-mdx

gatsby-config.ts

@@ -2,6 +2,8 @@ import type { GatsbyConfig, PluginRef } from "gatsby";
 
 import childProcess from "child_process";
 
+import remarkToc from "remark-toc";
+
 import ResolvePagesParams from "./src/types/gatsby-config/resolvePagesParams";
 import Page from "./src/types/gatsby-config/page";
 
@@ -209,7 +211,14 @@ const config: GatsbyConfig = {
 		`gatsby-plugin-sharp`,
 		`gatsby-transformer-sharp`, // Needed for dynamic images
 		`gatsby-plugin-no-sourcemaps`,
-		`gatsby-plugin-mdx`,
+		{
+			resolve: `gatsby-plugin-mdx`,
+			options: {
+				mdxOptions: {
+					remarkPlugins: [[remarkToc, { heading: "contents", maxDepth: 1 }]],
+				},
+			},
+		},
 		`gatsby-transformer-genetic-sequences`, // Custom plugin to parse gb, fasta files.
 		`gatsby-plugin-pnpm`, // configure webpack for pnpm dependency resolution
 		`gatsby-plugin-postcss`, // for TailwindCSS for nested menu on src/pages/visualiser.tsx

package.json

@@ -43,8 +43,8 @@
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-mdx": "^5.12.0",
     "gatsby-plugin-no-sourcemaps": "^5.12.0",
-    "gatsby-plugin-postcss": "^6.12.0",
     "gatsby-plugin-pnpm": "^1.2.10",
+    "gatsby-plugin-postcss": "^6.12.0",
     "gatsby-plugin-preact": "^7.12.0",
     "gatsby-plugin-remote-images": "^3.6.6",
     "gatsby-plugin-sharp": "^5.12.0",
@@ -58,6 +58,7 @@
     "gatsby-yaml-full-markdown": "^5.0.1",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
+    "remark-toc": "^9.0.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "webpack-stats-plugin": "^1.1.3"