Added link to scope fixture on GitHub

Author: AndreasArvidsson

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

@@ -47,23 +47,39 @@
   border-right: 1px solid rgba(115, 138, 148, 0.4);
 }
 
-.code-container:hover .code-copy-button {
-  display: block;
+.code-ws-symbol {
+  color: #666;
 }
 
-.code-copy-button {
+.code-copy-button,
+.code-container > .code-link {
   display: none;
   position: absolute;
   top: 0.5em;
-  right: 0.5em;
   background-color: rgb(216, 222, 233);
   border: none;
   padding: 4px 8px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.75rem;
+  height: 1.75rem;
 }
 
-.code-ws-symbol {
-  color: #666;
+.code-container:hover .code-copy-button,
+.code-container:hover .code-link {
+  display: block;
+}
+
+.code-copy-button {
+  right: 7.5em;
+}
+
+.code-container > .code-link {
+  right: 0.5em;
+}
+
+.code-container > .code-link:before {
+  display: inline-block;
+  width: 1.25rem;
+  height: 0.75rem;
 }

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

@@ -12,13 +12,18 @@ interface Props {
   languageId: string;
   renderWhitespace?: boolean;
   highlights?: Highlight[];
+  link?: {
+    name: string;
+    url: string;
+  };
   children: string;
 }
 
 export function Code({
   languageId,
   renderWhitespace,
   highlights,
+  link,
   children,
 }: Props) {
   const [html, setHtml] = React.useState("");
@@ -54,8 +59,25 @@ export function Code({
     }
   };
 
+  const renderLink = () => {
+    if (link == null) {
+      return null;
+    }
+    return (
+      <a
+        className="code-link header-github-link"
+        href={link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {link.name}
+      </a>
+    );
+  };
+
   return (
     <div className="code-container">
+      {renderLink()}
       <button onClick={handleCopy} className="code-copy-button">
         {copied ? "✅ Copied!" : "📋 Copy"}
       </button>

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

@@ -133,6 +133,10 @@ function renderFacet(
       {facet.fixtures.map((fixture) => (
         <Code
           key={fixture.name}
+          link={{
+            name: "GitHub",
+            url: `https://github.com/cursorless-dev/cursorless/blob/main/data/fixtures/${fixture.name}.scope`,
+          }}
           languageId={languageId}
           renderWhitespace={renderWhitespace}
           highlights={calculateHighlights(fixture, rangeType)}