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

Co-authored-by: Sourya07 <singhsourya137@gmail.com>
Co-authored-by: Sambhav Gupta <81870866+sambhavgupta0705@users.noreply.github.com>

Author: Sourya07

components/TOC.tsx

@@ -11,6 +11,7 @@ interface ITOCProps {
     lvl: number;
     content: string;
     slug: string;
+    seen?: number;
   }[];
   contentSelector?: string;
   depth?: number;
@@ -29,6 +30,7 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
 
   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 +40,40 @@ 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'
-              ? `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'
-          }`)}
+          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