fix: cleanup styling for cli gen, remove node gen from ToC, add missi…

…ng commands
denoland · crowlKats · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024
commit 8a0f31b749a6c68abfd9215f6fe414251372f788
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
@@ -495,7 +495,7 @@ function renderCommand(
       {Object.entries(options).map(([heading, flags]) => {
         const id = heading.toLowerCase().replace(/\s/g, "-");
 
-        const renderedFlags = flags.map((flag) =>
+        const renderedFlags = flags.toSorted((a, b) => a.name.localeCompare(b.name)).map((flag) =>
           renderOption(id, flag, helpers)
         );
 
@@ -556,9 +556,10 @@ function renderOption(group: string, arg, helpers: Lume.Helpers) {
   return (
     <>
       <h3 id={id}>
-        {docsLink
+        <code>{docsLink
           ? <a href={docsLink}>{"--" + arg.name}</a>
-          : ("--" + arg.name)} <HeaderAnchor id={id} />
+          : ("--" + arg.name)}</code>
+        {" "}<HeaderAnchor id={id} />
       </h3>
       {arg.short && (
         <p>

diff --git a/runtime/_data.ts b/runtime/_data.ts
@@ -51,6 +51,10 @@ export const sidebar = [
             label: "Environment Variables",
             id: "/runtime/reference/cli/env_variables/",
           },
+          {
+            label: "deno add",
+            id: "/runtime/reference/cli/add/",
+          },
           {
             label: "deno bench",
             id: "/runtime/reference/cli/benchmarker/",
@@ -115,6 +119,10 @@ export const sidebar = [
             label: "LSP integration",
             id: "/runtime/reference/cli/lsp_integration/",
           },
+          {
+            label: "deno remove",
+            id: "/runtime/reference/cli/remove/",
+          },
           {
             label: "deno repl",
             id: "/runtime/reference/cli/repl/",
@@ -318,7 +326,7 @@ export async function generateNodeCompatability() {
     keyA.localeCompare(keyB)
   ).map(([key, content]) => {
     let out =
-      `<div class="module-info compat-status-${content.status}">\n\n### [\`node:${key}\`](/api/node/${key})\n\n</div>\n\n`;
+      `<div class="module-info compat-status-${content.status}"><div class="compat-title"><a href="/api/node/${key}">node:${key}</a></div>\n\n`;
 
     if (content) {
       if (content.description) {
@@ -333,6 +341,6 @@ export async function generateNodeCompatability() {
       }
     }
 
-    return out;
+    return out + "</div>";
   }).join("\n\n");
 }
diff --git a/runtime/reference/cli/add.md b/runtime/reference/cli/add.md
@@ -0,0 +1,4 @@
+---
+title: "deno add"
+command: add
+---
diff --git a/runtime/reference/cli/all_commands.md b/runtime/reference/cli/all_commands.md
@@ -8,6 +8,7 @@ runtime environment from your terminal or command prompt. The CLI has a number
 of subcommands that can be used to perform different tasks, check the links
 below for more information on each subcommand.
 
+- [deno add](/runtime/reference/cli/add) - Add dependencies
 - [deno bench](/runtime/reference/cli/benchmarker/) - benchmarking tool
 - [deno check](/runtime/reference/cli/check/) - type check your program without
   running it
@@ -30,6 +31,7 @@ below for more information on each subcommand.
 - [deno lint](/runtime/reference/cli/linter/) - lint your code
 - [deno lsp](/runtime/reference/cli/lsp/) - language server protocol integration
 - [deno publish](/runtime/reference/cli/publish/) - publish a module
+- [deno remove](/runtime/reference/cli/remove) - Remove dependencies
 - [deno repl](/runtime/reference/cli/repl/) - starts a read-eval-print-loop
 - [deno run](/runtime/reference/cli/run/) - run a script
 - [deno serve](/runtime/reference/cli/serve/) - run a web server

diff --git a/runtime/reference/cli/remove.md b/runtime/reference/cli/remove.md
@@ -0,0 +1,4 @@
+---
+title: "deno remove"
+command: remove
+---
diff --git a/styles.css b/styles.css
@@ -318,12 +318,12 @@ body:not(:has(.ddoc)) {
   @apply mt-4;
 }
 
-.markdown-body .module-info > h3 {
+.markdown-body .module-info > .compat-title {
   @apply text-lg mt-0 mb-1 flex flex-row items-center font-semibold;
 }
 
-.markdown-body .module-info > h3 > a > code {
-  @apply bg-white pl-2;
+.markdown-body .module-info > .compat-title a {
+  @apply pl-2 font-mono;
 }
 
 .markdown-body .module-info > p {
@@ -350,7 +350,7 @@ body:not(:has(.ddoc)) {
   @apply text-red-500;
 }
 
-.markdown-body .module-info.compat-status-good > h3::before {
+.markdown-body .module-info.compat-status-good > .compat-title::before {
   content: "";
   display: inline-block;
   width: 1.5rem;
@@ -360,7 +360,7 @@ body:not(:has(.ddoc)) {
   background-repeat: no-repeat;
 }
 
-.markdown-body .module-info.compat-status-partial > h3::before {
+.markdown-body .module-info.compat-status-partial > .compat-title::before {
   content: "";
   display: inline-block;
   width: 1.5rem;
@@ -370,7 +370,7 @@ body:not(:has(.ddoc)) {
   background-repeat: no-repeat;
 }
 
-.markdown-body .module-info.compat-status-unsupported > h3::before {
+.markdown-body .module-info.compat-status-unsupported > .compat-title::before {
   content: "";
   display: inline-block;
   width: 1.5rem;