From c4f5ba35bdb3b719bbff1f42ce3d872f2b82e5ce Mon Sep 17 00:00:00 2001
From: Phillip Jensen <phillip@golemgrid.com>
Date: Thu, 26 Oct 2023 12:32:17 +0200
Subject: [PATCH] Fixes to ids

---
 .../partials/customPages/default-values.md        |  2 +-
 src/markdoc/tags.js                               |  8 ++++++++
 src/pages/_app.jsx                                | 15 ++++++++++++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/markdoc/partials/customPages/default-values.md b/src/markdoc/partials/customPages/default-values.md
index 72a9b1dd7..4e9dcad9c 100644
--- a/src/markdoc/partials/customPages/default-values.md
+++ b/src/markdoc/partials/customPages/default-values.md
@@ -4,7 +4,7 @@ The JS SDK is designed to streamline the experience for developers by providing
 
 Below is a summary of the default values, their significance, and the associated parameters that can be adjusted as per your requirements:
 
-{% defaultvalue title="executorOptions" description="Timeout for executing one task in ms." defaultValue="5 * 60 * 1000 = 5 min." /%}
+## executorOptions
 
 {% defaultvalue title="taskTimeout" description="Timeout for executing one task in ms." defaultValue="5 * 60 * 1000 = 5 min." /%}
 
diff --git a/src/markdoc/tags.js b/src/markdoc/tags.js
index efc212135..713664b37 100644
--- a/src/markdoc/tags.js
+++ b/src/markdoc/tags.js
@@ -22,6 +22,8 @@ import { Solution } from '@/components/Solution'
 import { Problem } from '../components/Problem'
 import { FeedbackButtons } from '@/components/Feedback'
 import DefaultValue from '../components/DefaultValue'
+import { slugifyWithCounter } from '@sindresorhus/slugify'
+const slugify = slugifyWithCounter()
 const tags = {
   tabs: {
     render: Tabs,
@@ -42,6 +44,12 @@ const tags = {
       description: { type: String },
       defaultValue: { type: String },
     },
+    transform(node, config) {
+      const attributes = node.transformAttributes(config)
+      attributes.id = slugify(attributes.title)
+      const children = node.transformChildren(config)
+      return new Tag(this.render, attributes, children)
+    }
   },
   padding: {
     render: Padding,
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 68ee975bf..feee72cd6 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -29,11 +29,18 @@ function collectHeadings(
   let sections = []
 
   for (let node of nodes) {
-    if (node.name === 'Heading' || (node.name === 'Defaultvalue' && node.attributes && node.attributes.title)) {
+    if (
+      node.name === 'Heading' ||
+      (node.name === 'Defaultvalue' && node.attributes && node.attributes.title)
+    ) {
       let level = node.name === 'Defaultvalue' ? 3 : node.attributes.level
-      let title = node.name === 'Defaultvalue' ? node.attributes.title : getNodeText(node)
+      let title =
+        node.name === 'Defaultvalue' ? node.attributes.title : getNodeText(node)
 
       if (title) {
+        if (node.name === 'Defaultvalue') {
+          console.log(node)
+        }
         let id = node.attributes?.id ?? slugify(title)
         let newNode = { ...node.attributes, id, title, children: [], level }
         if (lastNodes[level - 2]) {
@@ -46,7 +53,9 @@ function collectHeadings(
       }
     }
 
-    sections.push(...collectHeadings(node.children ?? [], slugify, lastNodes, idMap))
+    sections.push(
+      ...collectHeadings(node.children ?? [], slugify, lastNodes, idMap)
+    )
   }
   return sections
 }