Added leading numbers to facets

Author: AndreasArvidsson

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

@@ -23,7 +23,7 @@ function renderHeader(
   { className, title, children }: Props,
 ): React.JSX.Element {
   const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
-  const href = children.toLowerCase().replaceAll(" ", "-");
+  const href = encodeHash(children);
   return (
     <Tag
       id={href}
@@ -38,3 +38,10 @@ function renderHeader(
     </Tag>
   );
 }
+
+export function encodeHash(text: string): string {
+  return text
+    .toLowerCase()
+    .replaceAll(" ", "-")
+    .replace(/[^a-z0-9-]/g, "");
+}

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

@@ -89,8 +89,8 @@ function renderScope(
   return (
     <div key={scope.scope}>
       <H3>{scope.scope}</H3>
-      {scope.facets.map((f) =>
-        renderFacet(languageId, rangeType, renderWhitespace, f),
+      {scope.facets.map((f, i) =>
+        renderFacet(languageId, rangeType, renderWhitespace, f, i),
       )}
     </div>
   );
@@ -101,11 +101,12 @@ function renderFacet(
   rangeType: RangeType,
   renderWhitespace: boolean,
   facet: Facet,
+  index: number,
 ) {
   return (
     <div key={facet.facet}>
       <H4 className="facet-name" title={facet.facet}>
-        {facet.name}
+        {`${index + 1}. ${facet.name}`}
       </H4>
       <i>{facet.info.description}</i>
       {facet.fixtures.map((fixture) => (