Added link buttons

Author: AndreasArvidsson

packages/cursorless-org-docs/src/css/custom.css

@@ -46,7 +46,3 @@
 .pointer {
   cursor: pointer;
 }
-
-.facet-name {
-  font-weight: 600;
-}

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeVisualizer.css

@@ -0,0 +1,11 @@
+.facet-name {
+  font-weight: 600;
+}
+
+.link-icon {
+  margin-left: 0.25rem;
+}
+
+.link-icon:hover {
+  text-decoration: none;
+}

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeVisualizer.tsx

@@ -8,6 +8,7 @@ import {
 import React, { useState } from "react";
 import scopeTestsJson from "../../../../../static/scopeTests.json";
 import { Code, type Highlight } from "./Code";
+import "./ScopeVisualizer.css";
 import type { Fixture, ScopeTestsJson } from "./types";
 import { getFacetInfo, prettifyFacet, prettifyScopeType } from "./util";
 
@@ -83,9 +84,15 @@ function renderScope(
   renderWhitespace: boolean,
   scope: Scope,
 ) {
+  const href = scope.scope.toLowerCase().replaceAll(" ", "-");
   return (
     <div key={scope.scope}>
-      <h3>[{scope.scope}]</h3>
+      <h3 id={href}>
+        {scope.scope}
+        <a href={`#${href}`} className="link-icon">
+          🔗
+        </a>
+      </h3>
       {scope.facets.map((f) =>
         renderFacet(languageId, rangeType, renderWhitespace, f),
       )}