docs: allow code syntax in headers

Author: hassankhan

docs/src/components/Headers/MyH2.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import kebabCase from 'lodash/kebabCase';
 
-const MyH2 = (props) => <h2 name={kebabCase(props.children)} {...props} />;
+import { getHashFromContent } from './getHashFromContent';
+
+const MyH2 = (props) => {
+  const hash = getHashFromContent(props.children);
+  return (<h2 name={hash} {...props} />);
+}
 export default MyH2;

docs/src/components/Headers/ScrollSpyH2.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import kebabCase from 'lodash/kebabCase';
 import ScrollLink from '../templates/ScrollSpyLink';
 import * as styles from '../../../static/styles/index.module.scss';
 import cx from 'classnames';
 import { Icon } from 'antd';
 
+import { getHashFromContent } from './getHashFromContent';
+
 const ScrollSpyH2 = (props) => {
-  const hash = kebabCase(props.children);
+
+  const hash = getHashFromContent(props.children);
 
   return (
     <h2 name={hash} className={styles.hTag}>

docs/src/components/Headers/getHashFromContent.ts

@@ -0,0 +1,7 @@
+import kebabCase from 'lodash/kebabCase';
+
+export const getHashFromContent = (children) => {
+  const isString = typeof children === 'string';
+  const nameString = isString ? children : children.props.children;
+  return kebabCase(nameString);
+}

docs/src/templates/DocTemplate.tsx

@@ -244,7 +244,18 @@ class DocTemplate extends Component<Props, State> {
           [styles.postClearSection]: isPreviousSectionClearable,
         });
 
-        currentID = kebabCase(item.props.children[0]);
+        let elementId = item.props.children[0];
+        let elementTitle = item.props.children[0];
+        // Handle code-block H2 headers
+        if (Array.isArray(item.props.children) && item.props.children.length === 1 && typeof item.props.children[0] !== 'string') {
+          elementId = item.props.children[0].props.children[0];
+        }
+        // Handle code-block H3 headers with custom ID prefix
+        if (Array.isArray(item.props.children) && item.props.children.length > 1) {
+          elementId = item.props.children[1].props.children[0];
+        }
+
+        currentID = kebabCase(elementId);
 
         if (item.type === 'h2') {
           prevSection.className = cx(prevSection.className, {
@@ -262,7 +273,7 @@ class DocTemplate extends Component<Props, State> {
               : currentID,
           type: item.type,
           nodes: [],
-          title: item.props.children[0],
+          title: elementTitle,
           className,
         });
 
@@ -276,7 +287,7 @@ class DocTemplate extends Component<Props, State> {
               type: 'link',
               className: styles.hTagIcon,
             }),
-            item.props.children[0]
+            elementId
           )
         );
       }

docs/static/styles/_code.scss

@@ -1,5 +1,13 @@
 @import 'variables';
 
+h2, h3 {
+  code {
+    font-size: inherit;
+    line-height: inherit;
+    margin-bottom: inherit;
+  }
+}
+
 pre, code, tt {
 	font-family: $code-font;
 	font-size: 16px;