From 90ee21b577edf666a6814f642037a69b2dd01026 Mon Sep 17 00:00:00 2001
From: Jacob Marshall <me@jhqcat.com>
Date: Wed, 29 Jan 2025 21:59:52 +0000
Subject: [PATCH] remove useState, match all special chars

---
 .../src/components/MdxProvider/MdxTitle/MdxTitle.tsx         | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx b/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
index e9963f8f..59f3a402 100644
--- a/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
+++ b/apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx
@@ -1,9 +1,8 @@
 import type { ElementType, JSX, ReactNode } from 'react'
-import { useState } from 'react'
 import { Title, type TitleProps } from '@mantine/core'
 
 export default function MdxTitle(props: TitleProps): JSX.Element {
-  const [headingId] = useState(getIdFrom(props.children))
+  const headingId = getIdFrom(props.children)
 
   return (
     <Title
@@ -30,7 +29,7 @@ function getIdFrom(children: ReactNode): string {
     ? children.map(getTextContent).join('')
     : getTextContent(children)
 
-  return textContent.toLowerCase().replace(/\s+/g, '-')
+  return textContent.toLowerCase().replace(/[\s\W_]+/g, '-')
 }
 
 export const h = (order: 1 | 2 | 3 | 4 | 5 | 6): ElementType<TitleProps> => {