Add custom heading ID support

CONTRIBUTING.md

@@ -143,6 +143,11 @@ While we have a lot of code that is not yet this way, we try our best to build o
 
 Keep in mind that we request developers reach out [via our Discord](https://discord.gg/FMcvc6T) or [via GitHub issue](https://github.com/unicorn-utterances/unicorn-utterances/issues/new) before extensive development is pursued. If you have a feature you'd like to add to the site, let us know! We'd love to do some brainstorming before coding begins!
 
+We're using a small set of internal forks of deps for the following reasons:
+
+- [rehype-slug](https://github.com/rehypejs/rehype-slug/issues/10)
+- [rehype-img-size](https://github.com/ksoichiro/rehype-img-size/issues/4)
+
 ## Develop Mode
 
 To start the development server, run `npm run develop`, it will then start the local instance at `http://localhost:8000`. You also can check out the GraphiQL tool at `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).

package-lock.json

@@ -5621,6 +5621,11 @@
         "p-locate": "^4.1.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7683,15 +7688,15 @@
       }
     },
     "rehype-slug": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-5.0.0.tgz",
-      "integrity": "sha512-jnYsFKxRh+/tQa1L+SU/ykAPGOSVCqd0BwaOBPUANcvCu8d0/SZB4IalJkdJ+n6d1eAAS2YkvjUPi+2EGYtfCQ==",
+      "version": "git+https://github.com/unicorn-utterances/rehype-slug.git#f1cb31f0293474d34cd49ef47cf801bb65ad362a",
+      "from": "git+https://github.com/unicorn-utterances/rehype-slug.git#built-custom-slug",
       "requires": {
         "@types/hast": "^2.0.0",
         "github-slugger": "^1.1.1",
         "hast-util-has-property": "^2.0.0",
         "hast-util-heading-rank": "^2.0.0",
         "hast-util-to-string": "^2.0.0",
+        "lodash": "^4.17.21",
         "unified": "^10.0.0",
         "unist-util-visit": "^4.0.0"
       },

package.json

@@ -29,7 +29,7 @@
     "rehype-img-size": "git+https://github.com/unicorn-utterances/rehype-img-size.git#relative-path-full",
     "rehype-parse": "^8.0.3",
     "rehype-react": "^7.0.3",
-    "rehype-slug": "^5.0.0",
+    "rehype-slug": "git+https://github.com/unicorn-utterances/rehype-slug.git#built-custom-slug",
     "rehype-stringify": "^9.0.2",
     "remark-behead": "^2.3.3",
     "remark-gfm": "^3.0.1",

src/utils/markdownToHtml.ts

@@ -55,7 +55,11 @@ export default async function markdownToHtml<
     .use(rehypeImageSize, {
       dir: imageDir,
     })
-    .use(rehypeSlug)
+    .use(rehypeSlug, {
+      maintainCase: true,
+      removeAccents: true,
+      enableCustomId: true,
+    })
     .use(rehypeHeaderText(renderedPost))
     /* end rehype plugins here */
     .use(rehypeStringify, { allowDangerousHtml: true })