Merge pull request #317 from knockout/docs/landing-redesign

Refine tko.io landing page

Author: brianmhunt

.github/workflows/test-headless.yml

@@ -8,6 +8,10 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
     container:
       image: mcr.microsoft.com/playwright:v1.59.1-noble
 
@@ -33,4 +37,4 @@ jobs:
         run: bunx vitest run
         env:
           HOME: /root
-          VITEST_BROWSERS: chromium,firefox,webkit
+          VITEST_BROWSERS: ${{ matrix.browser }}

.gitignore

@@ -37,3 +37,6 @@ builds/**/meta
 test-results/
 .claude/worktrees/
 __screenshots__
+.dts-tmp/
+.nx/
+.vitest-attachments/

tko.io/public/examples/honeycomb.html

@@ -557,34 +557,54 @@ <h1>Honeycomb</h1>
           lastKey: ko.observable(null),
           activeSource: null,
           activeNeighbors: [],
+          _pendingHover: null,
+          _hoverRaf: 0,
+          _clickRaf: 0,
           hoverCell(cell) {
             if (!cell.interactive || cell.key === viewModel.lastKey()) return true
 
-            if (viewModel.activeSource) {
-              viewModel.activeSource.source(false)
-            }
-            viewModel.activeNeighbors.forEach(neighbor => neighbor.neighbor(false))
+            viewModel._pendingHover = cell
+            if (!viewModel._hoverRaf) {
+              viewModel._hoverRaf = requestAnimationFrame(() => {
+                viewModel._hoverRaf = 0
+                const target = viewModel._pendingHover
+                if (!target) return
+
+                if (viewModel.activeSource) {
+                  viewModel.activeSource.source(false)
+                }
+                viewModel.activeNeighbors.forEach(neighbor => neighbor.neighbor(false))
 
-            viewModel.lastKey(cell.key)
-            viewModel.activeSource = cell
-            viewModel.activeNeighbors = cell.neighbors
+                viewModel.lastKey(target.key)
+                viewModel.activeSource = target
+                viewModel.activeNeighbors = target.neighbors
 
-            cell.source(true)
-            cell.neighbors.forEach(neighbor => neighbor.neighbor(true))
+                target.source(true)
+                target.neighbors.forEach(neighbor => neighbor.neighbor(true))
 
-            viewModel.vdomCount(viewModel.vdomCount() + viewModel.totalVisible())
-            viewModel.obsCount(viewModel.obsCount() + cell.neighbors.length)
+                viewModel.vdomCount(viewModel.vdomCount() + viewModel.totalVisible())
+                viewModel.obsCount(viewModel.obsCount() + target.neighbors.length)
+              })
+            }
             return true
           },
           clickCell(cell) {
             if (!cell.interactive) return true
 
+            if (viewModel._clickRaf) {
+              cancelAnimationFrame(viewModel._clickRaf)
+              viewModel._clickRaf = 0
+            }
+
             const queue = buildWaterfallQueue(cell, cells)
             let index = 0
             const batchSize = 24
 
             function advanceBurst() {
-              if (index >= queue.length) return
+              if (index >= queue.length) {
+                viewModel._clickRaf = 0
+                return
+              }
 
               let touched = 0
               while (index < queue.length && touched < batchSize) {
@@ -604,10 +624,10 @@ <h1>Honeycomb</h1>
 
               viewModel.vdomCount(viewModel.vdomCount() + touched * viewModel.totalVisible())
               viewModel.obsCount(viewModel.obsCount() + touched)
-              requestAnimationFrame(advanceBurst)
+              viewModel._clickRaf = requestAnimationFrame(advanceBurst)
             }
 
-            requestAnimationFrame(advanceBurst)
+            viewModel._clickRaf = requestAnimationFrame(advanceBurst)
             return true
           }
         }

tko.io/src/content/docs/index.mdx

@@ -6,8 +6,8 @@ description: Modern Knockout — reactive data binding and UI templating with ze
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <div class="landing-hero">
-  <p class="landing-kicker">TKO v4.0.1</p>
-  <h2>Modern Knockout, clarified</h2>
+  <h2 class="landing-version">TKO v4.0.1</h2>
+  <p class="landing-kicker">Modern Knockout, clarified</p>
   <p class="landing-lede">Reactive data binding and UI templating with zero runtime dependencies. Start with the package you need and move from overview to working bindings.</p>
   <div class="landing-actions">
     <a class="landing-button landing-button--primary" href="/bindings/">Start with bindings</a>
@@ -17,50 +17,53 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 ## Quick start
 
-### Script tag (global)
+### Browser
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js"></script>
-<script>
-  const ko = globalThis.ko
-</script>
-```
-
-### ES module (browser)
-
-```html
-<script type="module">
-  import ko from 'https://esm.run/@tko/build.knockout'
-  const name = ko.observable('TKO')
-</script>
-```
+<Tabs syncKey="script">
+  <TabItem label="ES module">
+    ```html
+    <script type="module">
+      import ko from 'https://esm.run/@tko/build.reference'
+      const name = ko.observable('TKO')
+    </script>
+    ```
+  </TabItem>
+  <TabItem label="Classic script">
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/@tko/build.reference/dist/browser.min.js"></script>
+    <script>
+      const ko = globalThis.tko
+    </script>
+    ```
+  </TabItem>
+</Tabs>
 
 ### Package manager
 
 <Tabs syncKey="pkg">
   <TabItem label="npm">
     ```sh
-    npm install @tko/build.knockout
+    npm install @tko/build.reference
     ```
   </TabItem>
   <TabItem label="bun">
     ```sh
-    bun add @tko/build.knockout
+    bun add @tko/build.reference
     ```
   </TabItem>
   <TabItem label="pnpm">
     ```sh
-    pnpm add @tko/build.knockout
+    pnpm add @tko/build.reference
     ```
   </TabItem>
   <TabItem label="yarn">
     ```sh
-    yarn add @tko/build.knockout
+    yarn add @tko/build.reference
     ```
   </TabItem>
 </Tabs>
 
-For the modern TSX / `ko-*` path, use `@tko/build.reference` instead.
+For Knockout 3.x compatibility, use `@tko/build.knockout` instead.
 
 ## First binding example
 
@@ -73,25 +76,26 @@ For the modern TSX / `ko-*` path, use `@tko/build.reference` instead.
   <p>Hello, <strong data-bind="text: name"></strong>.</p>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tko/build.reference/dist/browser.min.js"></script>
 <script>
+  const ko = globalThis.tko
   ko.applyBindings({ name: ko.observable('TKO') }, document.getElementById('app'))
 </script>
 ```
 
 ## Choose a build
 
 <div class="landing-grid">
-  <a class="landing-card" href="/bindings/">
-    <span class="landing-card__eyebrow">Recommended for migrations</span>
-    <h3><code>@tko/build.knockout</code></h3>
-    <p>Compatibility-focused. Closest match to a traditional Knockout application. Includes `data-bind` and `foreach`.</p>
-  </a>
   <a class="landing-card" href="/advanced/provider/">
-    <span class="landing-card__eyebrow">Recommended for new projects</span>
+    <span class="landing-card__eyebrow">Recommended</span>
     <h3><code>@tko/build.reference</code></h3>
     <p>Modern path with TSX, `ko-*` attributes, native provider, and strict equality in expressions.</p>
   </a>
+  <a class="landing-card" href="/3to4/">
+    <span class="landing-card__eyebrow">Knockout 3.x migrations</span>
+    <h3><code>@tko/build.knockout</code></h3>
+    <p>Compatibility-focused. Drop-in replacement for existing Knockout applications.</p>
+  </a>
 </div>
 
 ## What stays familiar
@@ -118,6 +122,11 @@ For the modern TSX / `ko-*` path, use `@tko/build.reference` instead.
     <h3>Components</h3>
     <p>Reusable UI, loading strategies, and component architecture.</p>
   </a>
+  <a class="landing-card" href="/examples/">
+    <span class="landing-card__eyebrow">See it in action</span>
+    <h3>Examples</h3>
+    <p>Interactive demos showing observable updates, dependency graphs, and reactive state.</p>
+  </a>
 </div>
 
 ## Community

tko.io/src/styles/tko.css

@@ -128,8 +128,7 @@ header {
 
 .sidebar,
 .right-sidebar-panel,
-.content-panel,
-.sidebar-pane {
+.content-panel {
   background: transparent;
 }
 
@@ -258,7 +257,15 @@ header {
   color: var(--sl-color-text-accent);
 }
 
-.landing-hero h2 {
+.landing-hero .landing-version {
+  margin: 0 0 0.3rem;
+  font-family: var(--tko-font-display);
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  font-weight: 700;
+  color: var(--sl-color-white);
+}
+
+.landing-hero h2:not(.landing-version) {
   margin: 0;
   max-width: 11ch;
   font-size: clamp(1.55rem, 3.7vw, 2.55rem);