#34

docs/_includes/header.html

@@ -35,14 +35,21 @@
             <a href="{{ "/examples/reduce_example.html" | relative_url }}">Reduce</a>
             <span class="nav-dropdown-heading">Configurable</span>
             <a href="{{ "/examples/scan_pane_example.html" | relative_url }}">Scan / Reduce (Pane)</a>
-            <span class="nav-dropdown-heading">Performance</span>
-            <a href="{{ "/examples/scan_sort_perf.html" | relative_url }}">Scan / Sort Performance</a>
-            <a href="{{ "/examples/reduce_perf.html" | relative_url }}">Reduce Performance</a>
             <span class="nav-dropdown-heading">Regression</span>
             <a href="{{ "/examples/regression.html" | relative_url }}">Regression Tests</a>
           </div>
         </div>
 
+        <!-- Performance link + dropdown -->
+        <div class="nav-dropdown">
+          <a class="page-link nav-dropdown-toggle" href="{{ "/performance/" | relative_url }}">Performance ▾</a>
+          <div class="nav-dropdown-content">
+            <span class="nav-dropdown-heading">Benchmarks</span>
+            <a href="{{ "/examples/scan_sort_perf.html" | relative_url }}">Scan / Sort</a>
+            <a href="{{ "/examples/reduce_perf.html" | relative_url }}">Reduce</a>
+          </div>
+        </div>
+
         <!-- Demos link + dropdown -->
         <div class="nav-dropdown">
           <a class="page-link nav-dropdown-toggle" href="{{ "/demos/" | relative_url }}">Demos ▾</a>

docs/_includes/sidebar.html

@@ -14,12 +14,16 @@ <h3>Examples</h3>
     <li><a href="{{ "/examples/reduce_example.html" | relative_url }}">Reduce</a></li>
     <li class="nav-section-heading">Configurable</li>
     <li><a href="{{ "/examples/scan_pane_example.html" | relative_url }}">Scan / Reduce (Pane)</a></li>
-    <li class="nav-section-heading">Performance</li>
-    <li><a href="{{ "/examples/scan_sort_perf.html" | relative_url }}">Scan / Sort Performance</a></li>
-    <li><a href="{{ "/examples/reduce_perf.html" | relative_url }}">Reduce Performance</a></li>
     <li class="nav-section-heading">Regression</li>
     <li><a href="{{ "/examples/regression.html" | relative_url }}">Regression Tests</a></li>
   </ul>
+  {%- elsif page.sidebar == "performance" -%}
+  <h3>Performance</h3>
+  <ul class="docs-nav">
+    <li class="nav-section-heading">Benchmarks</li>
+    <li><a href="{{ "/examples/scan_sort_perf.html" | relative_url }}">Scan / Sort</a></li>
+    <li><a href="{{ "/examples/reduce_perf.html" | relative_url }}">Reduce</a></li>
+  </ul>
   {%- else -%}
   <h3>Documentation</h3>
   {%- assign gridwise_pages = site.pages | where: "category", "gridwise" | sort: "order" -%}

docs/examples.md

@@ -54,31 +54,6 @@ validate the output.
 <a href="{{ "/examples/scan_pane_example.html" | relative_url }}" class="doc-btn">Open Example</a>
 <a href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/scan_pane_example.mjs" target="_blank" class="doc-btn">Source</a>
 
-## Performance Testing
-
-These examples benchmark Gridwise primitives over a range of input sizes (logarithmically spaced)
-and plot throughput in GB/s versus input length. Both CPU and GPU timing are reported. See the
-[timing strategy documentation]({{ "/timing-strategy/" | relative_url }}) for how
-primitives are timed and how to interpret results.
-
-### Scan and Sort Performance
-
-Benchmarks scan, reduce, and sort over a configurable range of input sizes. Choose the primitive,
-datatype, and sort direction; results are plotted after each run. Note that sort overwrites its
-input, so repeated trials measure a partially-sorted array.
-
-<a href="{{ "/examples/scan_sort_perf.html" | relative_url }}" class="doc-btn">Open Example</a>
-<a href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/scan_sort_perf.mjs" target="_blank" class="doc-btn">Source</a>
-
-### Reduce Performance
-
-Benchmarks the reduce primitive over a configurable range of input sizes. Explains the
-warmup-then-trials timing strategy with inline code excerpts showing how to call
-`getTimingResult` after execution.
-
-<a href="{{ "/examples/reduce_perf.html" | relative_url }}" class="doc-btn">Open Example</a>
-<a href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/reduce_perf.mjs" target="_blank" class="doc-btn">Source</a>
-
 ## Regression Testing
 
 ### Gridwise Regression Tests

docs/performance.md

@@ -0,0 +1,31 @@
+---
+layout: page
+title: Performance
+permalink: /performance/
+sidebar: performance
+---
+
+Benchmarks for Gridwise primitives over a range of input sizes (logarithmically spaced),
+plotting throughput in GB/s versus input length. Both CPU and GPU timing are reported. See the
+[timing strategy documentation]({{ "/timing-strategy/" | relative_url }}) for how
+primitives are timed and how to interpret results.
+
+## Scan and Sort Performance
+
+Benchmarks scan, reduce, and sort over a configurable range of input sizes. Choose the primitive,
+datatype, and sort direction; results are plotted after each run. Note that sort overwrites its
+input, so repeated trials measure a partially-sorted array.
+
+<a href="{{ "/examples/scan_sort_perf.html" | relative_url }}" class="doc-btn">Open Example</a>
+<a href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/scan_sort_perf.mjs" target="_blank" class="doc-btn">Source</a>
+
+## Reduce Performance
+
+Benchmarks the reduce primitive over a configurable range of input sizes. Explains the
+warmup-then-trials timing strategy with inline code excerpts showing how to call
+`getTimingResult` after execution.
+
+<a href="{{ "/examples/reduce_perf.html" | relative_url }}" class="doc-btn">Open Example</a>
+<a href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/reduce_perf.mjs" target="_blank" class="doc-btn">Source</a>
+
+---

examples/gridwise.css

@@ -116,3 +116,20 @@ ul.test-list li.fail {
 #large-section {
   display: none;
 }
+
+.back-link {
+  display: inline-block;
+  padding: 5px 12px;
+  background: #39bda7;
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  font-size: 13px;
+  transition: background 0.2s;
+}
+.back-link:hover {
+  background: #2a9a87;
+  color: white;
+  text-decoration: none;
+}

examples/reduce_example.html

@@ -10,6 +10,7 @@
     />
   </head>
   <body>
+    <a href="/gridwise/examples/" class="back-link">← Back to Examples</a>
     <h1>Gridwise Reduce Primitive Example</h1>
     <p>
       This example calls Gridwise's <code>reduce</code> primitive. You can look

examples/reduce_perf.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
   </head>
   <body>
+    <a href="/gridwise/performance/" class="back-link">← Back to Performance</a>
     <h1>Reduce Performance</h1>
     <p>
       This example is a self-contained use of the <code>reduce</code>

examples/regression.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="gridwise.css" />
   </head>
   <body>
+    <a href="/gridwise/examples/" class="back-link">← Back to Examples</a>
     <h1>Gridwise Regression Tests</h1>
     <ul id="test-list" class="test-list"></ul>
     <div id="summary" class="summary">Running…</div>

examples/scan_example.html

@@ -10,6 +10,7 @@
     />
   </head>
   <body>
+    <a href="/gridwise/examples/" class="back-link">← Back to Examples</a>
     <h1>Gridwise Scan Primitive Example</h1>
     <p>
       This example calls Gridwise's <code>scan</code> primitive. You can look at

examples/scan_pane_example.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="gridwise.css" />
   </head>
   <body>
+    <a href="/gridwise/examples/" class="back-link">← Back to Examples</a>
     <h1>Scan / Reduce Example, with Configuration Pane</h1>
     <div id="instructions">
       <p>Set your parameters in the pane and click "Start" to run and validate a WebGPU scan/reduce.</p>

examples/scan_sort_perf.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
   </head>
   <body>
+    <a href="/gridwise/performance/" class="back-link">← Back to Performance</a>
     <h1>Scan / Sort Performance</h1>
     <p>
       This example is a self-contained use of the <code>scan</code> and

examples/sort_example.html

@@ -10,6 +10,7 @@
     />
   </head>
   <body>
+    <a href="/gridwise/examples/" class="back-link">← Back to Examples</a>
     <h1>Gridwise Sort Primitive Example</h1>
     <p>
       This example calls Gridwise's <code>sort</code> primitive. You can look at