Refine tko.io landing page#317
Merged
brianmhunt merged 8 commits intomainfrom Apr 16, 2026
Merged
Conversation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughQuick Start and landing content were reworked to promote Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
Redesigns the tko.io docs landing page to present a more guided “Quick start” and align the hero/CTA structure with the v4 release messaging.
Changes:
- Replaces separate browser “script tag” / “ES module” sections with a single tabbed “Browser” block.
- Introduces tabbed package-manager install instructions (npm/bun/pnpm/yarn) using Starlight components.
| <TabItem label="ES module"> | ||
| ```html | ||
| <script type="module"> | ||
| import ko from 'https://esm.run/@tko/build.knockout' |
There was a problem hiding this comment.
The ES module example imports a default export from @tko/build.knockout, but the package entry point doesn’t currently re-export the default (unlike @tko/build.reference). As a result, import ko from 'https://esm.run/@tko/build.knockout' will fail with “does not provide an export named 'default'”. Either update the docs to match the actual export shape (or point this tab at a build that does export a default), or change the build’s entry point to re-export the default so the example works.
Suggested change
| import ko from 'https://esm.run/@tko/build.knockout' | |
| import * as ko from 'https://esm.run/@tko/build.knockout' |
- Fix transparent sidebar on mobile (unreadable over content) - Add Examples card to What to Read Next section Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The transparent background rule was applied to .sidebar-pane, overriding Starlight's built-in solid background on mobile. Remove .sidebar-pane from the transparent rule so the mobile overlay sidebar is readable. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@tko.io/src/content/docs/index.mdx`:
- Around line 124-128: The "Examples" landing-card copy in index.mdx is outdated
and mentions specific demos ("todo app", "animated transitions") that no longer
match the examples page; update the <a class="landing-card"> content (the
eyebrow span, h3, and paragraph text inside that anchor) to use neutral,
up-to-date wording (e.g., "Explore interactive demos and integrations" or
similar) so the card remains accurate without listing deprecated examples; edit
the paragraph under the <h3>Examples</h3> in the existing anchor to reflect a
general description that won't drift as specific examples change.
- Around line 20-39: Update the agent guide to match the new quick-start pattern
by replacing the legacy CDN string "https://tko.io/lib/tko.js" and the global
reference "globalThis.tko" with the new CDN endpoint
"https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js" and
"globalThis.ko" respectively in the guide content (look for occurrences of those
exact strings in the guide); ensure any example snippets and prose reflect the
ES module/classic script pattern used in the Starlight docs (importing
'@tko/build.knockout' for modules and referencing globalThis.ko for the browser
bundle).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6e65a441-a2d2-43eb-9770-503bba37038f
📒 Files selected for processing (2)
tko.io/src/content/docs/index.mdxtko.io/src/styles/tko.css
Comment on lines
+20
to
+39
| ### Browser | ||
|
|
||
| <Tabs syncKey="script"> | ||
| <TabItem label="ES module"> | ||
| ```html | ||
| <script type="module"> | ||
| import ko from 'https://esm.run/@tko/build.knockout' | ||
| const name = ko.observable('TKO') | ||
| </script> | ||
| ``` | ||
| </TabItem> | ||
| <TabItem label="Classic script"> | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js"></script> | ||
| <script> | ||
| const ko = globalThis.ko | ||
| </script> | ||
| ``` | ||
| </TabItem> | ||
| </Tabs> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find agent guide files in tko.io and check whether they mention the new quick-start patterns
fd -i 'agents\.md$' tko.io
fd -i 'agents\.md$' tko.io -x rg -n "esm\.run|globalThis\.ko|@tko/build\.knockout|Quick start|Browser"Repository: knockout/tko
Length of output: 38
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Search for agent guide files in tko.io/public/ as indicated by learnings
echo "=== Finding agent guide files in tko.io/public/ ==="
fd '\.md$' tko.io/public/ 2>/dev/null | head -20
echo ""
echo "=== Checking tko.io structure ==="
ls -la tko.io/ 2>/dev/null | grep -E '^d' || echo "No directories found"
echo ""
echo "=== Searching for any guide/agent related files ==="
find tko.io -type f -name '*guide*' -o -name '*agent*' 2>/dev/null | head -20Repository: knockout/tko
Length of output: 1676
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Checking tko.io/public/agents/guide.md for quick-start patterns ==="
rg -n "esm\.run|globalThis\.ko|@tko/build\.knockout|Quick start|Browser|import ko from|cdn.jsdelivr" tko.io/public/agents/guide.md 2>/dev/null || echo "No matches found"
echo ""
echo "=== Checking tko.io/public/agent-guide.md ==="
rg -n "esm\.run|globalThis\.ko|@tko/build\.knockout|Quick start|Browser|import ko from|cdn.jsdelivr" tko.io/public/agent-guide.md 2>/dev/null || echo "No matches found"
echo ""
echo "=== Full content of tko.io/public/agents/guide.md (first 100 lines) ==="
head -100 tko.io/public/agents/guide.md
echo ""
echo "=== Searching for setup/installation/import sections in guide.md ==="
rg -n -A 5 "setup|installation|import|browser|quick" tko.io/public/agents/guide.md -i | head -50Repository: knockout/tko
Length of output: 6482
Update agent guide setup section to match new quick-start patterns.
The new Starlight docs (lines 20–39) introduce https://cdn.jsdelivr.net/npm/@tko/build.knockout and globalThis.ko, but tko.io/public/agents/guide.md (lines 10–12) still references the legacy https://tko.io/lib/tko.js and globalThis.tko. Update the agent guide to use the new CDN endpoint and globalThis.ko to keep automated guidance aligned with the canonical quick-start pattern.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tko.io/src/content/docs/index.mdx` around lines 20 - 39, Update the agent
guide to match the new quick-start pattern by replacing the legacy CDN string
"https://tko.io/lib/tko.js" and the global reference "globalThis.tko" with the
new CDN endpoint
"https://cdn.jsdelivr.net/npm/@tko/build.knockout/dist/browser.min.js" and
"globalThis.ko" respectively in the guide content (look for occurrences of those
exact strings in the guide); ensure any example snippets and prose reflect the
ES module/classic script pattern used in the Starlight docs (importing
'@tko/build.knockout' for modules and referencing globalThis.ko for the browser
bundle).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Quick start, browser examples, and package manager tabs now use @tko/build.reference. Choose-a-build cards reordered: reference first (recommended), knockout second (migrations). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tko.io/src/styles/tko.css (1)
260-266: Consider scoping.landing-versionto the hero for tighter CSS isolation.This avoids accidental styling collisions if
landing-versionis reused elsewhere later.Suggested diff
-.landing-version { +.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); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tko.io/src/styles/tko.css` around lines 260 - 266, The .landing-version rule should be scoped to the hero container to avoid global collisions: change the selector from .landing-version to a more specific selector like .landing-hero .landing-version (or .hero .landing-version) and move the existing declarations under that selector so the styles only apply when .landing-version is inside the hero component; update any corresponding HTML if needed to ensure the version element is a child of the chosen hero class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@tko.io/src/styles/tko.css`:
- Around line 260-266: The .landing-version rule should be scoped to the hero
container to avoid global collisions: change the selector from .landing-version
to a more specific selector like .landing-hero .landing-version (or .hero
.landing-version) and move the existing declarations under that selector so the
styles only apply when .landing-version is inside the hero component; update any
corresponding HTML if needed to ensure the version element is a child of the
chosen hero class.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 87c5584a-ac55-46cd-a0f0-73a8eb9c4484
📒 Files selected for processing (2)
tko.io/src/content/docs/index.mdxtko.io/src/styles/tko.css
✅ Files skipped from review due to trivial changes (1)
- tko.io/src/content/docs/index.mdx
- Gitignore .dts-tmp/, .nx/, .vitest-attachments/ build artifacts - Use general wording for Examples card instead of naming specific demos - Scope .landing-version CSS to .landing-hero for tighter isolation - Throttle honeycomb hover to one update per animation frame - Cancel in-progress click waterfall before starting a new one Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Run chromium, firefox, and webkit as separate concurrent jobs instead of sequentially in one job. Should cut wall time ~3x. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
brianmhunt
force-pushed
the
docs/landing-redesign
branch
from
9704948 to
0e1e8de
Compare
4 tasks
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
🤖 Generated with Claude Code
Summary by CodeRabbit