docs(conditions): add per-row anchors to the attributes tables

src/components/Tables/OptionsTable.tsx

@@ -18,7 +18,7 @@ export default function OptionsTable({ def }: Def) {
   return OptionsTableBase(configSchema, options, def);
 }
 
-function defToIdPrefix(def: string): string {
+export function defToIdPrefix(def: string): string {
   return def.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 

src/components/Tables/PullRequestAttributes.module.css

@@ -0,0 +1,33 @@
+.row {
+  scroll-margin-top: calc(var(--theme-navbar-height) + 1rem);
+}
+
+.row:target > td {
+  background-color: color-mix(in srgb, var(--section-accent) 6%, transparent);
+}
+
+.name {
+  white-space: nowrap;
+}
+
+.anchor {
+  margin-left: 0.4rem;
+  color: var(--theme-text-muted);
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
+}
+
+.anchor:hover,
+.anchor:focus {
+  color: var(--theme-link);
+}
+
+.row:hover .anchor,
+.row:focus-within .anchor,
+.row:target .anchor {
+  opacity: 1;
+}

src/components/Tables/PullRequestAttributes.tsx

@@ -1,6 +1,8 @@
 import { getAttributeSource } from '../../util/attributeMetadata';
 import configSchema from '../../util/sanitizedConfigSchema';
 import { getValueType } from './ConfigOptions';
+import { defToIdPrefix } from './OptionsTable';
+import styles from './PullRequestAttributes.module.css';
 
 import { renderMarkdown } from './utils';
 
@@ -17,6 +19,10 @@ interface ConditionMeta {
   };
 }
 
+// Mirror the config-option anchor scheme: `<def>-<key>`, e.g.
+// `pull-request-attributes-author`.
+const ID_PREFIX = defToIdPrefix('PullRequestAttributes');
+
 interface Props {
   staticAttributes?: Attributes;
   // When set, render only attributes whose metadata source matches (e.g. "github").
@@ -108,11 +114,16 @@ export default function PullRequestAttributes({ staticAttributes, source }: Prop
           {rows.map(([key, value]) => {
             const valueType = getValueType(configSchema, value);
             const meta = value as ConditionMeta;
+            const id = `${ID_PREFIX}-${key}`;
+            const href = `#${encodeURIComponent(id)}`;
 
             return (
-              <tr key={key}>
-                <td style={{ whiteSpace: 'nowrap' }}>
+              <tr key={key} id={id} className={styles.row}>
+                <td className={styles.name}>
                   <code>{key}</code>
+                  <a className={styles.anchor} href={href} aria-label={`Link to ${key}`}>
+                    #
+                  </a>
                 </td>
                 <td>{valueType}</td>
                 {hasConditionMetadata && (