feat(docs): Add links to deprecated and aliased attributes

docs/src/components/AttributeCard.astro

@@ -3,6 +3,7 @@ import PiiBadge from './PiiBadge.astro';
 import VisibilityBadge from './VisibilityBadge.astro';
 import OtelBadge from './OtelBadge.astro';
 import TypeBadge from './TypeBadge.astro';
+import AttributeLink from './AttributeLink.astro';
 import type { Attribute } from '../content.config';
 import { parseAttributeId } from '../utils/category';
 
@@ -76,7 +77,7 @@ const rawJson = JSON.stringify(attribute, null, 2);
       <div class="flex items-baseline gap-3 text-sm">
         <span class="text-text-muted min-w-[100px] flex-shrink-0">Aliases</span>
         <span class="text-text-secondary">
-          {attribute.alias.map((a) => <code class="text-xs mr-1">{a}</code>)}
+          {attribute.alias.map((a) => <span class="mr-1"><AttributeLink name={a} /></span>)}
         </span>
       </div>
     )}
@@ -102,7 +103,7 @@ const rawJson = JSON.stringify(attribute, null, 2);
     {isDeprecated && (
       <div class="mt-3 p-3 bg-error-soft rounded-md border-l-[3px] border-error">
         {attribute.deprecation?.replacement ? (
-          <p class="text-sm m-0">Use <code class="text-accent">{attribute.deprecation.replacement}</code> instead.</p>
+          <p class="text-sm m-0">Use <AttributeLink name={attribute.deprecation.replacement} /> instead.</p>
         ) : (
           <p class="text-sm m-0">No replacement available at this time.</p>
         )}

docs/src/components/AttributeLink.astro

@@ -0,0 +1,12 @@
+---
+import { attributeUrl } from '../utils/attributeUrl';
+
+interface Props {
+  name: string;
+}
+
+const { name } = Astro.props;
+const href = attributeUrl(name, import.meta.env.BASE_URL);
+---
+
+<a href={href} class="text-accent hover:text-accent-hover"><code class="text-xs">{name}</code></a>

docs/src/components/LinkedTemplate.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Renders a span name template string, turning `{{attribute.key}}`
+ * placeholders into clickable links to the corresponding attribute page.
+ */
+import { attributeUrl } from '../utils/attributeUrl';
+
+interface Props {
+  template: string;
+}
+
+const { template } = Astro.props;
+
+const PLACEHOLDER = /\{\{([^}]+)\}\}/g;
+
+interface Segment {
+  type: 'text' | 'link';
+  value: string;
+}
+
+const segments: Segment[] = [];
+let lastIndex = 0;
+
+for (const match of template.matchAll(PLACEHOLDER)) {
+  if (match.index > lastIndex) {
+    segments.push({ type: 'text', value: template.slice(lastIndex, match.index) });
+  }
+  segments.push({ type: 'link', value: match[1] });
+  lastIndex = match.index + match[0].length;
+}
+
+if (lastIndex < template.length) {
+  segments.push({ type: 'text', value: template.slice(lastIndex) });
+}
+
+const hasPlaceholders = segments.some((s) => s.type === 'link');
+---
+
+{hasPlaceholders ? (
+  segments.map((seg) =>
+    seg.type === 'link' ? (
+      <a href={attributeUrl(seg.value, import.meta.env.BASE_URL)} class="text-accent hover:text-accent-hover" title={seg.value}>{`{{${seg.value}}}`}</a>
+    ) : (
+      <Fragment>{seg.value}</Fragment>
+    )
+  )
+) : (
+  <Fragment>{template}</Fragment>
+)}

docs/src/pages/measurements/index.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import AttributeLink from '../../components/AttributeLink.astro';
 import { getCollection } from 'astro:content';
 
 const allMeasurements = await getCollection('measurements');
@@ -18,12 +19,6 @@ for (const measurements of platformMap.values()) {
 }
 
 const sortedPlatforms = Array.from(platformMap.keys()).sort();
-
-function attributeUrl(key: string): string {
-  const category = key.includes('.') ? key.split('.')[0] : 'general';
-  const anchor = key.replace(/\./g, '-').replace(/</g, '').replace(/>/g, '');
-  return `${import.meta.env.BASE_URL}attributes/${category}/#${anchor}`;
-}
 ---
 
 <BaseLayout title="Measurements (Legacy)" description="Legacy Sentry span measurements reference">
@@ -80,9 +75,7 @@ function attributeUrl(key: string): string {
                     </td>
                     <td>
                       {m.data.attribute ? (
-                        <a href={attributeUrl(m.data.attribute)} class="text-accent hover:text-accent-hover">
-                          <code class="text-xs">{m.data.attribute}</code>
-                        </a>
+                        <AttributeLink name={m.data.attribute} />
                       ) : (
                         <span class="text-text-muted">—</span>
                       )}

docs/src/pages/names/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import CategoryChip from '../../components/CategoryChip.astro';
+import LinkedTemplate from '../../components/LinkedTemplate.astro';
 import { getCollection } from 'astro:content';
 
 // Get all name definitions
@@ -107,13 +108,13 @@ const totalOperations = allNames.reduce((acc, name) => acc + name.data.operation
                 <div>
                   <h4 class="text-sm font-semibold text-text-muted mb-2">Templates</h4>
                   <ol class="m-0 pl-5 list-inside">
-                    {op.templates.map((template, index) => (
+                    {op.templates.map((tmpl, index) => (
                       <li class="flex items-center gap-2 mb-2 text-sm">
                         <code class:list={[
                           "px-2 py-1 bg-bg-elevated text-xs",
-                          index === op.templates.length - 1 && !template.includes('{{') ? 'border border-accent' : ''
-                        ]}>{template}</code>
-                        {index === op.templates.length - 1 && !template.includes('{{') && (
+                          index === op.templates.length - 1 && !tmpl.includes('{{') ? 'border border-accent' : ''
+                        ]}><LinkedTemplate template={tmpl} /></code>
+                        {index === op.templates.length - 1 && !tmpl.includes('{{') && (
                           <span class="text-xs px-2 py-1 bg-accent-soft text-accent rounded-sm">fallback</span>
                         )}
                       </li>

docs/src/utils/attributeUrl.ts

@@ -0,0 +1,11 @@
+/**
+ * Builds a URL to an attribute's anchor on the docs site.
+ * Derives the category from the first segment of a dotted key
+ * (e.g. "http.request.method" → category "http").
+ * Keys without a dot land in the "general" category.
+ */
+export function attributeUrl(key: string, base: string): string {
+  const category = key.includes('.') ? key.split('.')[0] : 'general';
+  const anchor = key.replace(/\./g, '-').replace(/</g, '').replace(/>/g, '');
+  return `${base}attributes/${category}/#${anchor}`;
+}