Add developers route with code viewer

Author: quantuminformation

js/components/code-viewer.js

@@ -0,0 +1,58 @@
+// File: js/components/code-viewer.js
+// Component for displaying code snippets in multiple languages with a selector
+
+export default (hostComponent) => {
+  const pres = Array.from(hostComponent.querySelectorAll('pre[data-lang]'));
+  if (pres.length === 0) return;
+
+  const selector = document.createElement('select');
+  pres.forEach((pre, index) => {
+    const { lang } = pre.dataset;
+    const code = pre.querySelector('code');
+    if (code) {
+      code.classList.add(`language-${lang}`);
+    }
+    const option = document.createElement('option');
+    option.value = lang;
+    option.textContent = lang;
+    selector.appendChild(option);
+    pre.style.display = index === 0 ? '' : 'none';
+  });
+
+  selector.addEventListener('change', (event) => {
+    const lang = event.target.value;
+    pres.forEach((pre) => {
+      pre.style.display = pre.dataset.lang === lang ? '' : 'none';
+    });
+  });
+
+  hostComponent.insertBefore(selector, hostComponent.firstChild);
+
+  const ensureHighlight = () =>
+    new Promise((resolve) => {
+      if (window.hljs) {
+        resolve();
+        return;
+      }
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href =
+        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css';
+      document.head.appendChild(link);
+      const script = document.createElement('script');
+      script.src =
+        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js';
+      script.onload = resolve;
+      document.head.appendChild(script);
+    });
+
+  ensureHighlight().then(() => {
+    pres.forEach((pre) => {
+      const code = pre.querySelector('code');
+      if (code && window.hljs?.highlightElement) {
+        window.hljs.highlightElement(code);
+      }
+    });
+  });
+};
+

js/components/code-viewer.test.js

@@ -0,0 +1,42 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import codeViewer from './code-viewer.js';
+
+beforeEach(() => {
+  // Mock hljs to avoid loading external scripts during tests
+  vi.stubGlobal('hljs', {
+    highlightElement: vi.fn(),
+  });
+});
+
+describe('code-viewer component', () => {
+  it('renders selector and shows only first snippet', () => {
+    const host = document.createElement('div');
+    host.innerHTML = `
+      <pre data-lang="js"><code>console.log('hi')</code></pre>
+      <pre data-lang="python"><code>print('hi')</code></pre>
+    `;
+    codeViewer(host);
+    const select = host.querySelector('select');
+    expect(select).toBeTruthy();
+    const pres = host.querySelectorAll('pre[data-lang]');
+    expect(pres[0].style.display).toBe('');
+    expect(pres[1].style.display).toBe('none');
+  });
+
+  it('switches visible snippet on selector change', () => {
+    const host = document.createElement('div');
+    host.innerHTML = `
+      <pre data-lang="js"><code>console.log('hi')</code></pre>
+      <pre data-lang="python"><code>print('hi')</code></pre>
+    `;
+    codeViewer(host);
+    const select = host.querySelector('select');
+    select.value = 'python';
+    select.dispatchEvent(new Event('change'));
+    const jsPre = host.querySelector('pre[data-lang="js"]');
+    const pyPre = host.querySelector('pre[data-lang="python"]');
+    expect(jsPre.style.display).toBe('none');
+    expect(pyPre.style.display).toBe('');
+  });
+});
+

js/components/nav.js

@@ -194,6 +194,10 @@ export default (hostComponent) => {
         <span class="icon">🧮</span>
         <span class="text">Web GPU tutorial</span>
       </a>
+      <a href="/developers" title="Developer code examples">
+        <span class="icon">💻</span>
+        <span class="text">Developers</span>
+      </a>
   <!--    <a href="/web-gpu" title="Web GPU Scene (wip)">
         <span class="icon">🧮</span>
         <span class="text">Web GPU</span>

js/routes/developers.js

@@ -0,0 +1,14 @@
+// File: js/routes/developers.js
+
+export default (hostComponent) => {
+  hostComponent.innerHTML = `
+    <h1>Developers</h1>
+    <p>Select a language to view the hello world snippet.</p>
+    <div data-component="code-viewer">
+      <pre data-lang="js"><code>console.log('Hello, world!');</code></pre>
+      <pre data-lang="python"><code>print('Hello, world!')</code></pre>
+      <pre data-lang="ruby"><code>puts 'Hello, world!'</code></pre>
+    </div>
+  `;
+};
+