🐛 Docs Link Fixes – Standardising Regex's and Menu Highlights (#2181)

updating regex's for the heading references, and using the same function to generate table of contents links – also fixing an issue where docs links including a fragment identifier wouldn't be identified in the LHS table of contents

components/DocumentationNavigation/DocsNavigationList.tsx

@@ -97,7 +97,7 @@ const NavLevel = ({
       level === 0
   );
 
-  const selected = path == slug || (slug == '/docs' && path == "/docs/")
+  const selected = path.split("#")[0] == slug || (slug == '/docs' && path == "/docs/")
   const childSelected = hasNestedSlug(categoryData.items, router.asPath)
 
 

components/toc/index.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styled, { css } from 'styled-components'
 import RightArrowSvg from '../../public/svg/right-arrow.svg'
+import { getDocId } from 'utils/docs/getDocIds'
 
 interface TocProps {
   tocItems: Array<{ type: string; text: string }>
@@ -11,7 +12,7 @@ interface TocProps {
 const generateMarkdown = (tocItems: Array<{ type: string; text: string }>) => {
   return tocItems
     .map((item) => {
-      const anchor = item.text.toLowerCase().replace(/[\s-]+/g, '-').replace(/[^a-z0-9-]+/g, '')
+      const anchor = getDocId(item.text)
       const prefix = item.type === 'h3' ? '  ' : ''
       return `${prefix}- [${item.text}](#${anchor})`
     })

utils/docs/getDocIds.ts

@@ -5,7 +5,8 @@ export const getDocId = (label) => {
     }
     return label
       .toLowerCase()
-      .replace(/^\s*"|"\s*$/g, '-')  
+      .replace(/^\s*"|"\s*$/g, '-')
+      .replace(/^-*|-*$/g, '')  
       .replace(/\s+/g, '-')
       .replace(/[^a-z0-9\-]/g, '');
   };