[Docs Site] Add topic tags to right sidebar (cloudflare#22985)

* [Docs Site] Add topic tags to right sidebar

* tracking

* title and container

* Update src/components/overrides/TableOfContents.astro

---------

Co-authored-by: Kody Jackson <[email protected]>

Author: 2 people

src/components/overrides/TableOfContents.astro

@@ -3,9 +3,32 @@ import Default from "@astrojs/starlight/components/TableOfContents.astro";
 
 import { Icon } from "@astrojs/starlight/components";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
+
+const tags = Astro.locals.starlightRoute.entry.data.tags;
 ---
 
 <Default />
+{
+	tags && (
+		<>
+			<br />
+			<div>
+				<h2>Tags</h2>
+				<div class="flex gap-2">
+					{tags.map((tag) => (
+						<a
+							href={`/search/?tags=${tag}`}
+							class="rounded-sm border border-(--sl-color-hairline) px-3 text-black"
+							data-tag-serp-link={true}
+						>
+							{tag}
+						</a>
+					))}
+				</div>
+			</div>
+		</>
+	)
+}
 <br />
 <FeedbackPrompt client:idle />
 {

src/scripts/analytics/links.ts

@@ -16,6 +16,14 @@ export function registerLinks() {
 	for (const el of elements) {
 		const { hostname, pathname } = new URL(el.href);
 
+		if (el.dataset.tagSerpLink) {
+			el.addEventListener("click", () => {
+				track("click docs tag", { value: el.innerText });
+			});
+
+			continue;
+		}
+
 		if (hostname === "developers.cloudflare.com" || hostname === "localhost") {
 			continue;
 		}