Show languages in the docs sidebar (#2859)

So far our implementation of scope facets have been lacking and
therefore we made the decision to hide languages in the docs sidebar.
Now our support for scope facets in the most common languages is quite
good so I would like to show languages.

Author: AndreasArvidsson

changelog/2025-02-addedLanguagesToDocs.md

@@ -0,0 +1,6 @@
+---
+tags: [documentation]
+pullRequest: 2859
+---
+
+- Added languages sidebar to documents page. Here you can see the supported scope facets for each language.

packages/common/src/index.ts

@@ -93,6 +93,7 @@ export * from "./types/TreeSitter";
 export * from "./types/tutorial.types";
 export * from "./util";
 export * from "./util/camelCaseToAllDown";
+export * from "./util/capitalize";
 export * from "./util/clientSupportsFallback";
 export * from "./util/CompositeKeyDefaultMap";
 export * from "./util/CompositeKeyMap";

packages/common/src/util/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

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

@@ -28,3 +28,23 @@
 .hidden {
   display: none;
 }
+
+.card {
+  border: 1px solid rgba(0, 0, 0, 0.175);
+  margin-bottom: 1rem;
+}
+
+.card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.facet-name {
+  font-weight: 600;
+}

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

@@ -1,4 +1,4 @@
-import Language from "./Language";
+import { Language } from "./components/Language";
 
 # C
 

packages/cursorless-org-docs/src/docs/user/languages/_category_.json

@@ -1,4 +1,4 @@
-import Language from "./Language";
+import { Language } from "./components/Language";
 
 # Clojure
 

packages/cursorless-org-docs/src/docs/user/languages/c.mdx

@@ -1,10 +1,10 @@
 import React from "react";
-import ScopeSupport from "./ScopeSupport";
+import { ScopeSupport } from "./ScopeSupport";
 
 interface Props {
   languageId: string;
 }
 
-export default function Language({ languageId }: Props) {
+export function Language({ languageId }: Props) {
   return <ScopeSupport languageId={languageId} />;
 }

packages/cursorless-org-docs/src/docs/user/languages/clojure.mdx

@@ -0,0 +1,80 @@
+import {
+  ScopeSupportFacetLevel,
+  languageScopeSupport,
+  scopeSupportFacets,
+} from "@cursorless/common";
+import React from "react";
+import { ScopeSupportForLevel } from "./ScopeSupportForLevel";
+
+interface Props {
+  languageId: string;
+}
+
+export function ScopeSupport({ languageId }: Props): JSX.Element {
+  const scopesSorted = [...scopeSupportFacets].sort();
+  const scopeSupport = languageScopeSupport[languageId] ?? {};
+
+  const supportedScopes = scopesSorted.filter(
+    (facet) => scopeSupport[facet] === ScopeSupportFacetLevel.supported,
+  );
+  const supportedLegacyScopes = scopesSorted.filter(
+    (facet) => scopeSupport[facet] === ScopeSupportFacetLevel.supportedLegacy,
+  );
+  const unsupportedScopes = scopesSorted.filter(
+    (facet) => scopeSupport[facet] === ScopeSupportFacetLevel.unsupported,
+  );
+  const unspecifiedScopes = scopesSorted.filter(
+    (facet) => scopeSupport[facet] == null,
+  );
+
+  return (
+    <>
+      <h2>Scopes</h2>
+
+      <ScopeSupportForLevel
+        facets={supportedScopes}
+        title="Supported facets"
+        subtitle="These facets are supported"
+        expanded
+      />
+
+      <ScopeSupportForLevel
+        facets={supportedLegacyScopes}
+        title="Supported Legacy facets"
+        subtitle="These facets are supported with the legacy implementation and should be migrated to the new implementation"
+      />
+
+      <ScopeSupportForLevel
+        facets={unsupportedScopes}
+        title="Unsupported facets"
+        subtitle="These facets are not supported yet and needs a developer to implement them"
+        description={
+          <>
+            We would happily accept{" "}
+            <a href="https://www.cursorless.org/docs/contributing/adding-a-new-scope">
+              contributions
+            </a>
+          </>
+        }
+      />
+
+      <ScopeSupportForLevel
+        facets={unspecifiedScopes}
+        title="Unspecified facets"
+        subtitle="These facets are unspecified"
+        description={
+          <>
+            Note that in many instances we actually do support these scopes and
+            facets, but we have not yet updated 'languageScopeSupport' to
+            reflect this fact.
+            <br />
+            We would happily accept{" "}
+            <a href="https://www.cursorless.org/docs/contributing/adding-a-new-scope">
+              contributions
+            </a>
+          </>
+        }
+      />
+    </>
+  );
+}