book/super-example: remove CLI tab (#6378)

Author: nwt

book/super-example/aria-tabs.js

@@ -8,69 +8,6 @@
   --space-2xs: clamp(0.5625rem, 0.5362rem + 0.1316vi, 0.625rem);
   --space-s: clamp(1.125rem, 1.0724rem + 0.2632vi, 1.25rem);
 
-  & [role='tablist'] {
-    line-height: 1;
-    font-size: var(--label-size);
-    color: var(--color-text-meta);
-    display: flex;
-    justify-content: flex-end;
-    gap: 2px;
-    margin-bottom: 2px;
-  }
-
-  & [role='tab'] {
-    border: none;
-    color: var(--color-text-meta);
-    padding-block: var(--space-2xs);
-    background: var(--color-bg-code);
-    padding-inline: var(--space-s);
-    cursor: pointer;
-    font-weight: normal;
-    user-select: none;
-
-    &[aria-selected='true'] {
-      color: var(--color-text);
-    }
-
-    &:hover:not([aria-selected='true']) {
-      color: var(--sidebar-active);
-    }
-
-    &:first-child {
-      border-top-left-radius: calc(var(--radius) / 2);
-    }
-
-    &:last-child {
-      border-top-right-radius: calc(var(--radius) / 2);
-    }
-  }
-
-  & [role='tabpanel'],
-  & [role='tabpanel'] pre {
-    border-top-right-radius: 0 !important;
-  }
-
-  [hidden=true],[hidden]:not([hidden=false]) {
-    display: none!important
-  }
-}
-
-.super-command {
-  border-radius: var(--radius);
-  background-color: var(--color-bg-code);
-  color: var(--color-text-code);
-
-  & code {
-    overflow: auto;
-  }
-
-  & pre {
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-}
-
-.super-playground {
   display: grid;
   grid-template-rows: auto auto;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

book/super-example/super-example.css

@@ -1,4 +1,3 @@
-import { AriaTabs } from './aria-tabs';
 import { SuperPlayground } from './super-playground';
 
 const preNodes = document.querySelectorAll('pre:has(> code.language-mdtest-spq)');
@@ -25,49 +24,19 @@ for (const [i, pre] of preNodes.entries()) {
   }
 
   const html = `
-  <article class="super-example">
-    <nav role="tablist">
-      <button
-        role="tab"
-        aria-selected="true"
-        aria-controls="playground-panel-${i}"
-        id="playground-tab-${i}"
-        tabindex="0"
-      >
-        Interactive
-      </button>
-      <button
-        role="tab"
-        aria-selected="false"
-        aria-controls="command-panel-${i}"
-        id="command-tab-${i}"
-        tabindex="-1"
-      >
-        CLI
-      </button>
-    </nav>
-    <section
-      role="tabpanel"
-      id="playground-panel-${i}"
-      class="super-playground"
-      ${attributes}
-    >
-      <div class="editor query">
-        <header class="repel"><label>Query</label></header>
-        <pre><code></code></pre>
-      </div>
-      <div class="editor input">
-        <header class="repel"><label>Input</label></header>
-        <pre><code></code></pre>
-      </div>
-      <div class="editor result">
-        <header class="repel"><label>Result</label></header>
-        <pre><code></code></pre>
-      </div>
-    </section>
-    <section hidden role="tabpanel" id="command-panel-${i}" class="super-command">
+  <article class="super-example" ${attributes}>
+    <div class="editor query">
+      <header class="repel"><label>Query</label></header>
       <pre><code></code></pre>
-    </section>
+    </div>
+    <div class="editor input">
+      <header class="repel"><label>Input</label></header>
+      <pre><code></code></pre>
+    </div>
+    <div class="editor result">
+      <header class="repel"><label>Result</label></header>
+      <pre><code></code></pre>
+    </div>
   </article>
 `;
 
@@ -76,22 +45,12 @@ for (const [i, pre] of preNodes.entries()) {
   const node = div.children[0];
   pre.replaceWith(node);
 
-    const tablist = node.querySelector('[role="tablist"]');
-    AriaTabs.setup(tablist);
-
-  node.querySelector('.super-playground .query code').textContent = spq;
-  node.querySelector('.super-playground .input code').textContent = input;
-  node.querySelector('.super-playground .result code').textContent = expected;
+  node.querySelector('.query code').textContent = spq;
+  node.querySelector('.input code').textContent = input;
+  node.querySelector('.result code').textContent = expected;
 
-  const commandCode = node.querySelector('.super-command code')
-  SuperPlayground.setup(node, (query, input) => {
-    let command = `super -s -c '${query}'`;
-    if (input.length > 0) {
-      command = `echo '${input}' \\\n| ${command} -`;
-    }
-    commandCode.textContent = command;
-  });
+  SuperPlayground.setup(node, null);
 
-    // Prevent keydown from bubbling up to book.js listeners.
-    node.addEventListener('keydown', (e) => e.stopPropagation());
+  // Prevent keydown from bubbling up to book.js listeners.
+  node.addEventListener('keydown', (e) => e.stopPropagation());
 }