Implement HTML cheatsheet

[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: pokey

cheatsheet/gatsby-browser.js

@@ -1 +1 @@
-import './src/styles/global.css'
+import "./src/styles/global.css";

cheatsheet/package.json

@@ -16,18 +16,24 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.1.1",
+		"@fortawesome/free-solid-svg-icons": "^6.1.1",
+		"@fortawesome/react-fontawesome": "^0.1.18",
 		"@mdx-js/mdx": "^1.6.22",
 		"@mdx-js/react": "^1.6.22",
 		"gatsby": "^4.10.2",
 		"gatsby-plugin-mdx": "^3.10.2",
+		"gatsby-plugin-react-helmet": "^5.13.0",
 		"gatsby-source-filesystem": "^4.10.1",
 		"react": "^17.0.1",
-		"react-dom": "^17.0.1"
+		"react-dom": "^17.0.1",
+		"react-helmet": "^6.1.0"
 	},
 	"devDependencies": {
 		"@types/node": "^17.0.21",
 		"@types/react": "^17.0.41",
 		"@types/react-dom": "^17.0.14",
+		"@types/react-helmet": "^6.1.5",
 		"autoprefixer": "^10.4.5",
 		"gatsby-plugin-postcss": "^5.13.0",
 		"postcss": "^8.4.12",

cheatsheet/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = () => ({
   plugins: [require("tailwindcss")],
-})
+});

cheatsheet/src/cheatsheetLegend.tsx

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

cheatsheet/src/components/CheatsheetLegendComponent.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { CheatsheetLegend } from "../cheatsheetLegend";
+import SmartLink from "./SmartLink";
+
+type Props = {
+  data: CheatsheetLegend;
+};
+
+export default function CheatsheetLegendComponent({
+  data,
+}: Props): JSX.Element {
+  return (
+    <div
+      id="legend"
+      className="border border-violet-300 rounded-lg bg-violet-100"
+    >
+      <h2 className="text-xl text-center my-1 text-violet-900">Legend</h2>
+      <table className="w-full">
+        <tr className="text bg-violet-300">
+          <th className="px-1 font-normal">Term</th>
+          <th className="px-1 border-l border-violet-400 font-normal">
+            Definition
+          </th>
+        </tr>
+        {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">
+              {link != null ? (
+                <SmartLink to={link}>{definition}</SmartLink>
+              ) : (
+                definition
+              )}
+            </td>
+          </tr>
+        ))}
+      </table>
+    </div>
+  );
+}

cheatsheet/src/components/CheatsheetListComponent.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { CheatsheetSection } from "../pages/Section";
+
+type Props = {
+  section: CheatsheetSection;
+};
+
+export default function CheatsheetListComponent({
+  section,
+}: Props): JSX.Element {
+  const spokenForms = section.items.flatMap((item) =>
+    item.spokenForms.map((spokenForm) => ({
+      item,
+      spokenForm,
+    }))
+  );
+
+  spokenForms.sort((form1, form2) =>
+    form1.spokenForm.spokenForm.localeCompare(form2.spokenForm.spokenForm)
+  );
+
+  return (
+    <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">
+          <th className="px-1 font-normal">Spoken form</th>
+          <th className="px-1 border-l border-stone-400 font-normal">
+            Meaning
+          </th>
+        </tr>
+        {spokenForms.map(({ item, spokenForm }) => (
+          <tr className="odd:bg-stone-200">
+            <td className="px-1">
+              <span className="text-stone-400">"</span>
+              {spokenForm.spokenForm}
+              <span className="text-stone-400">"</span>
+            </td>
+            <td className="border-l border-stone-400 px-1">
+              {spokenForm.description}
+            </td>
+          </tr>
+        ))}
+      </table>
+    </div>
+  );
+}

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;