fix: ensure unique TOC slugs for repeated headings(Examples)

components/TOC.tsx

@@ -11,6 +11,7 @@ interface ITOCProps {
     lvl: number;
     content: string;
     slug: string;
+    seen?: number;
   }[];
   contentSelector?: string;
   depth?: number;
@@ -28,7 +29,9 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
   const [open, setOpen] = useState(false);
 
   if (!toc || !toc.length) return null;
+
   const minLevel = toc.reduce((mLevel, item) => (!mLevel || item.lvl < mLevel ? item.lvl : mLevel), 0);
+
   const tocItems = toc
     .filter((item) => item.lvl <= minLevel + depth)
     .map((item) => ({
@@ -38,30 +41,41 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
       // markdown document MDX takes these "a" tags and uses them to render the "id" for headers like
       // a-namedefinitionsapplicationaapplication slugWithATag contains transformed heading name that is later used
       // for scroll spy identification
-      slugWithATag: item.content
-        .replace(/[<>?!:`'."\\/=@#$%^&*()[\]{}+,;]/gi, '')
-        .replace(/\s/gi, '-')
-        .toLowerCase()
+      slugWithATag: (() => {
+        const base = item.content
+          .replace(/[<>?!:`'."\\/=@#$%^&*()[\]{}+,;]/gi, '')
+          .replace(/\s/gi, '-')
+          .toLowerCase();
+
+        if (typeof item.seen === 'number' && item.seen > 0) {
+          return `${base}-${item.seen}`;
+        }
+
+        return base;
+      })()
     }));
 
   return (
     <div
-      className={twMerge(`${className} ${tocItems.length ? '' : 'hidden'} 
-      ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'} md:top-24 md:max-h-(screen-14) mb-4 z-20`)}
+      className={twMerge(
+        `${className} ${tocItems.length ? '' : 'hidden'} 
+      ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'} md:top-24 md:max-h-(screen-14) mb-4 z-20`
+      )}
       onClick={() => setOpen(!open)}
     >
       <div
         className={`flex cursor-pointer ${tocItems.length ? '' : 'hidden'}
         ${cssBreakingPoint === 'xl' ? 'xl:cursor-auto' : 'lg:cursor-auto'} xl:mt-2`}
       >
         <h5
-          className={twMerge(`${open && 'mb-4'} flex-1 text-primary-500 font-medium uppercase tracking-wide 
-          text-sm font-sans antialiased ${
-            cssBreakingPoint === 'xl'
+          className={twMerge(
+            `${open && 'mb-4'} flex-1 text-primary-500 font-medium uppercase tracking-wide 
+          text-sm font-sans antialiased ${cssBreakingPoint === 'xl'
               ? `xl:mb-4 xl:text-xs xl:text-gray-900 
           xl:font-bold`
               : 'lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold'
-          }`)}
+            }`
+          )}
           data-testid='TOC-Heading'
         >
           On this page