Fix details triggers that contain markup

plugins/gatsby-remark-dvc-linker/simpleLinker.js

@@ -4,6 +4,8 @@ const { createLinkNode } = require('./helpers')
 
 const entries = require('../../content/linked-terms')
 
+const excludedParentTypes = ['link', 'heading']
+
 const useMatcher = (matcher, item) => {
   switch (typeof matcher) {
     case 'string':
@@ -21,7 +23,7 @@ module.exports = astNode => {
   const node = astNode[0]
   const parent = astNode[2]
 
-  if (parent.type !== 'link') {
+  if (!excludedParentTypes.includes(parent.type)) {
     const entry = entries.find(({ matches }) => useMatcher(matches, node.value))
     if (entry) {
       createLinkNode(entry.url, astNode)

src/components/Documentation/Markdown/index.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  ReactNode,
+  ReactElement
+} from 'react'
 import cn from 'classnames'
 import { navigate } from '@reach/router'
 import rehypeReact from 'rehype-react'
@@ -30,17 +36,31 @@ const isInsideCodeBlock = (node: Element): boolean => {
 }
 
 const Details: React.FC<{
-  children: Array<{ props: { children: Array<string> } } | string>
+  children: Array<{ props: { children: ReactNode } } | string>
 }> = ({ children }) => {
   const filteredChildren = children.filter(child => child !== '\n')
 
   if (!filteredChildren.length) return null
   if (typeof filteredChildren[0] === 'string') return null
 
-  const text = filteredChildren[0].props.children[0]
+  const headingChildren: ReactNode[] = filteredChildren[0].props
+    .children as ReactNode[]
+
+  // Remove header auto-link if present
+  const finalHeadingChild = headingChildren[headingChildren.length - 1] as {
+    props: {
+      className: string
+    }
+  }
+
+  const triggerChildren: unknown =
+    finalHeadingChild.props !== undefined &&
+    finalHeadingChild.props.className === 'anchor after'
+      ? headingChildren.slice(0, headingChildren.length - 1)
+      : headingChildren
 
   return (
-    <Collapsible trigger={text} transitionTime={200}>
+    <Collapsible trigger={triggerChildren as ReactElement} transitionTime={200}>
       {filteredChildren.slice(1)}
     </Collapsible>
   )