Add links to legend

Author: pokey

cheatsheet/src/cheatsheetLegend.tsx

@@ -1,7 +1,7 @@
 interface CheatsheetLegendEntry {
   term: string;
   definition: string;
-  link: string;
+  link?: string;
   id: string;
 }
 
@@ -10,26 +10,24 @@ export type CheatsheetLegend = CheatsheetLegendEntry[];
 const cheatsheetLegend: CheatsheetLegend = [
   {
     term: "F",
-    definition: "Formatter (eg camel, snake)",
-    link: "",
+    definition: 'Formatter (eg camel, snake). Say "format help" for a list',
     id: "formatter",
   },
   {
     term: "P",
     definition: "Paired delimiter",
-    link: "",
+    link: "#paired-delimiters",
     id: "paired-delimiter",
   },
   {
     term: "S",
     definition: "Current selection(s)",
-    link: "",
     id: "selection",
   },
   {
     term: "T",
     definition: "Cursorless target",
-    link: "",
+    link: "https://www.cursorless.org/docs/#targets",
     id: "target",
   },
 ];

cheatsheet/src/components/CheatsheetLegendComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CheatsheetLegend } from "../cheatsheetLegend";
+import SmartLink from "./SmartLink";
 
 type Props = {
   data: CheatsheetLegend;
@@ -21,10 +22,16 @@ export default function CheatsheetLegendComponent({
             Definition
           </th>
         </tr>
-        {data.map(({ term, definition }) => (
+        {data.map(({ term, definition, link }) => (
           <tr className="odd:bg-violet-200">
             <td className="px-1">{`<${term}>`}</td>
-            <td className="border-l border-violet-400 px-1">{definition}</td>
+            <td className="border-l border-violet-400 px-1">
+              {link != null ? (
+                <SmartLink to={link}>{definition}</SmartLink>
+              ) : (
+                definition
+              )}
+            </td>
           </tr>
         ))}
       </table>

cheatsheet/src/components/CheatsheetListComponent.tsx

@@ -20,7 +20,10 @@ export default function CheatsheetListComponent({
   );
 
   return (
-    <div className="border border-stone-300 rounded-lg bg-stone-100">
+    <div
+      id={section.id}
+      className="border border-stone-300 rounded-lg bg-stone-100"
+    >
       <h2 className="text-xl text-center my-1">{section.name}</h2>
       <table className="w-full">
         <tr className="text bg-stone-300">

cheatsheet/src/components/CheatsheetNotesComponent.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import SmartLink from "./SmartLink";
+
+export default function CheatsheetNotesComponent(): JSX.Element {
+  return (
+    <div
+      id="notes"
+      className="p-2 border border-violet-300 rounded-lg bg-violet-100"
+    >
+      <h2 className="text-xl text-center mb-1 text-violet-900">Notes</h2>
+      <ul>
+        <li className="">
+          See the{" "}
+          <SmartLink to={"https://www.cursorless.org/docs/"}>
+            full documentation
+          </SmartLink>{" "}
+          to learn more.
+        </li>
+      </ul>
+    </div>
+  );
+}

cheatsheet/src/components/SmartLink.tsx

@@ -0,0 +1,28 @@
+import { Link } from "gatsby";
+import * as React from "react";
+
+type SmartLinkProps = {
+  /**
+   * The target of the link
+   */
+  to: string;
+};
+
+/**
+ * Link component that will use `a` tag for external links and `Link` tag for
+ * internal
+ * @returns SmartLink component
+ */
+const SmartLink: React.FC<SmartLinkProps> = ({ to, children }) => (
+  <span className="text-cyan-700 hover:text-violet-700">
+    {to.startsWith("https://") ? (
+      <a href={to} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    ) : (
+      <Link to={to}>{children}</Link>
+    )}
+  </span>
+);
+
+export default SmartLink;