Fix details triggers that contain markup

content/docs/user-guide/external-dependencies.md

@@ -154,7 +154,7 @@ The command above creates the <abbr>import stage</abbr> (DVC-file)
 
 <details>
 
-### Expand to see resulting DVC-file
+### Expand to see resulting `.dvc` file
 
 ```yaml
 # ...
@@ -193,7 +193,7 @@ specified (with the `repo` field).
 
 <details>
 
-### Expand to see resulting DVC-file
+### Expand to see resulting `.dvc` file
 
 ```yaml
 # ...

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,34 @@ 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')
+  const filteredChildren: ReactNode[] = children.filter(child => child !== '\n')
+  const firstChild = filteredChildren[0] as JSX.Element
 
-  if (!filteredChildren.length) return null
-  if (typeof filteredChildren[0] === 'string') return null
-
-  const text = filteredChildren[0].props.children[0]
+  if (!/^h.$/.test(firstChild.type)) {
+    throw new Error('The first child of a details element must be a heading!')
+  }
 
+  /*
+     To work around auto-linked headings, the last child of the heading node
+     must be removed. The only way around this is the change the autolinker,
+     which we currently have as an external package.
+   */
+  const triggerChildren: ReactNode[] = firstChild.props.children.slice(
+    0,
+    firstChild.props.children.length - 1
+  ) as ReactNode[]
+
+  /*
+     Collapsible's trigger type wants ReactElement, so we force a TS cast from
+     ReactNode here.
+   */
   return (
-    <Collapsible trigger={text} transitionTime={200}>
+    <Collapsible
+      trigger={(triggerChildren as unknown) as ReactElement}
+      transitionTime={200}
+    >
       {filteredChildren.slice(1)}
     </Collapsible>
   )

src/gatsby/models/github/index.js

@@ -7,34 +7,6 @@
    alone does.
  */
 
-async function createStaticGithubDataNode(api, fieldData = {}) {
-  const {
-    actions: { createNode },
-    createNodeId,
-    createContentDigest
-  } = api
-
-  const fields = {
-    stars: 8888,
-    parent: null,
-    ...fieldData
-  }
-
-  const node = {
-    id: createNodeId('DVCGithubStaticData'),
-    children: [],
-    ...fields,
-    internal: {
-      type: 'StaticGithubData',
-      contentDigest: createContentDigest(fields)
-    }
-  }
-
-  await createNode(node)
-
-  return node
-}
-
 module.exports = {
   async createSchemaCustomization({ actions: { createTypes }, schema }) {
     createTypes(