Skip to content

Commit 51964be

Browse files
Brian M Huntclaude
authored and
Brian M Hunt
committed
Redesign tko.io landing page
- Show version (v4.0.1) prominently in hero - Add ES module example with esm.run import - Install commands in tabs (npm/bun/pnpm/yarn) via Starlight Tabs - Move migration guide to bottom of sidebar, remove from hero CTA - Convert index.md to index.mdx for component support Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 3a56611 commit 51964be

3 files changed

Lines changed: 130 additions & 140 deletions

File tree

‎tko.io/astro.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ export default defineConfig({
2828
},
2929
sidebar: [
3030
{ label: 'Introduction', slug: 'index' },
31-
{ label: 'Knockout 3 to 4 Guide', slug: '3to4' },
3231
{ label: 'Examples', slug: 'examples' },
3332
{ label: 'Bindings', autogenerate: { directory: 'bindings' } },
3433
{ label: 'Observables', autogenerate: { directory: 'observables' } },
3534
{ label: 'Computed', autogenerate: { directory: 'computed' } },
3635
{ label: 'Components', autogenerate: { directory: 'components' } },
3736
{ label: 'Binding Context', autogenerate: { directory: 'binding-context' } },
38-
{ label: 'Advanced', autogenerate: { directory: 'advanced' } }
37+
{ label: 'Advanced', autogenerate: { directory: 'advanced' } },
38+
{ label: 'Knockout 3 → 4 Guide', slug: '3to4' }
3939
]
4040
})
4141
]

‎tko.io/src/content/docs/index.md‎

Lines changed: 0 additions & 138 deletions
This file was deleted.

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: Introduction
3+
description: Modern Knockout — reactive data binding and UI templating with zero runtime dependencies.
4+
---
5+
6+
import { Tabs, TabItem } from '@astrojs/starlight/components';
7+
8+
<div class="landing-hero">
9+
<p class="landing-kicker">TKO v4.0.1</p>
10+
<h2>Modern Knockout, clarified</h2>
11+
<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>
12+
<div class="landing-actions">
13+
<a class="landing-button landing-button--primary" href="/bindings/">Start with bindings</a>
14+
<a class="landing-button landing-button--secondary" href="/playground">Try the Playground</a>
15+
</div>
16+
</div>
17+
18+
## Quick start
19+
20+
### Script tag (global)
21+
22+
```html
23+
<script src="https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js"></script>
24+
<script>
25+
const ko = globalThis.ko
26+
</script>
27+
```
28+
29+
### ES module (browser)
30+
31+
```html
32+
<script type="module">
33+
import ko from 'https://esm.run/@tko/build.knockout'
34+
const name = ko.observable('TKO')
35+
</script>
36+
```
37+
38+
### Package manager
39+
40+
<Tabs syncKey="pkg">
41+
<TabItem label="npm">
42+
```sh
43+
npm install @tko/build.knockout
44+
```
45+
</TabItem>
46+
<TabItem label="bun">
47+
```sh
48+
bun add @tko/build.knockout
49+
```
50+
</TabItem>
51+
<TabItem label="pnpm">
52+
```sh
53+
pnpm add @tko/build.knockout
54+
```
55+
</TabItem>
56+
<TabItem label="yarn">
57+
```sh
58+
yarn add @tko/build.knockout
59+
```
60+
</TabItem>
61+
</Tabs>
62+
63+
For the modern TSX / `ko-*` path, use `@tko/build.reference` instead.
64+
65+
## First binding example
66+
67+
```html
68+
<div id="app">
69+
<label>
70+
Name
71+
<input data-bind="textInput: name" />
72+
</label>
73+
<p>Hello, <strong data-bind="text: name"></strong>.</p>
74+
</div>
75+
76+
<script src="https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js"></script>
77+
<script>
78+
ko.applyBindings({ name: ko.observable('TKO') }, document.getElementById('app'))
79+
</script>
80+
```
81+
82+
## Choose a build
83+
84+
<div class="landing-grid">
85+
<a class="landing-card" href="/bindings/">
86+
<span class="landing-card__eyebrow">Recommended for migrations</span>
87+
<h3><code>@tko/build.knockout</code></h3>
88+
<p>Compatibility-focused. Closest match to a traditional Knockout application. Includes `data-bind` and `foreach`.</p>
89+
</a>
90+
<a class="landing-card" href="/advanced/provider/">
91+
<span class="landing-card__eyebrow">Recommended for new projects</span>
92+
<h3><code>@tko/build.reference</code></h3>
93+
<p>Modern path with TSX, `ko-*` attributes, native provider, and strict equality in expressions.</p>
94+
</a>
95+
</div>
96+
97+
## What stays familiar
98+
99+
- **Observables and computed values** — `ko.observable`, `ko.observableArray`, `ko.computed`
100+
- **Declarative bindings** — `data-bind="text: msg"` and the same binding APIs
101+
- **Components and custom bindings** — the component system and binding extensibility
102+
103+
## What to read next
104+
105+
<div class="landing-grid">
106+
<a class="landing-card" href="/bindings/">
107+
<span class="landing-card__eyebrow">Core docs</span>
108+
<h3>Bindings</h3>
109+
<p>Binding syntax, common bindings, and view updates.</p>
110+
</a>
111+
<a class="landing-card" href="/observables/">
112+
<span class="landing-card__eyebrow">State model</span>
113+
<h3>Observables</h3>
114+
<p>Observables, observable arrays, extenders, and rate limiting.</p>
115+
</a>
116+
<a class="landing-card" href="/components/">
117+
<span class="landing-card__eyebrow">Composition</span>
118+
<h3>Components</h3>
119+
<p>Reusable UI, loading strategies, and component architecture.</p>
120+
</a>
121+
</div>
122+
123+
## Community
124+
125+
- [GitHub issues](https://github.com/knockout/tko/issues)
126+
- [Gitter knockout/tko](https://gitter.im/knockout/tko)
127+
- [Reddit /r/knockoutjs](https://www.reddit.com/r/knockoutjs/)
128+
- [StackOverflow [knockout.js]](http://stackoverflow.com/tags/knockout.js/info)

0 commit comments

Comments
 (0)