[Docs Site] Support custom IDs in AnchorHeading (#16980)

* [Docs Site] Support custom IDs in AnchorHeading

* Rename id to slug

Author: KianNH

src/components/AnchorHeading.astro

@@ -1,23 +1,26 @@
 ---
 import { z } from "astro:schema";
 import { marked } from "marked";
-import { slug } from "github-slugger";
+import { slug as GithubSlug } from "github-slugger";
 
 type Props = z.infer<typeof props>;
 
 const props = z.object({
 	title: z.string(),
+	slug: z.string().optional(),
 	depth: z.number().min(1).max(6),
 });
 
-const { title, depth } = props.parse(Astro.props);
+const { title, slug, depth } = props.parse(Astro.props);
+
+const slugified = GithubSlug(slug ?? title);
 
 const Heading = `h${depth}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 ---
 
 <div tabindex="-1" class=`heading-wrapper level-h${depth}`>
-	<Heading id={slug(title)} set:html={marked.parseInline(title) as string} />
-	<a class="anchor-link" href={`#${slug(title)}`}>
+	<Heading id={slugified} set:html={marked.parseInline(title) as string} />
+	<a class="anchor-link" href={`#${slugified}`}>
 		<span aria-hidden class="anchor-icon">
 			<svg width="16" height="16" viewBox="0 0 24 24">
 				<path