Repository navigation
Improve website examples and documentation navigation - #21
Merged
Merged
Conversation
hyfdev
changed the title
hyfdev
changed the title
hyfdev
marked this pull request as ready for review
August 16, 2026 09:48
There was a problem hiding this comment.
Pull request overview
This PR refines the VitePress website experience by making interactive examples more transparent (showing the exact source being executed) and by consolidating documentation navigation into a single, always-visible sidebar across Guide and package docs.
Changes:
- Reworks the Getting Started in-browser Wasm example into a two-column “code + result” layout that imports and runs the displayed source file.
- Expands the homepage layout demo with additional focused controls (sidebar width, header height, horizontal/vertical gap) while keeping a compact code-to-rectangles presentation.
- Consolidates documentation navigation so Guide, Essentials, and package docs share one sidebar (and removes the separate Packages top-nav menu).
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/website/guide/getting-started.md | Embeds the browser demo as a code+result pair and includes the exact executed example source. |
| apps/website/examples/getting-started-width.js | Adds the browser-executed layout computation source used by the Getting Started demo. |
| apps/website/.vitepress/components/LayoutWidthDemo.vue | Updates the demo component to import and run the shared example source and render code+result side by side. |
| apps/website/examples/home-layout.js | Updates the homepage layout computation to accept multiple controllable inputs. |
| apps/website/.vitepress/components/HomeLayoutShowcase.vue | Adds the new homepage controls and passes them into computeHomeLayout. |
| apps/website/.vitepress/config.ts | Replaces split navigation with a single shared documentation sidebar for Guide/Node/Wasm. |
| .agents/docs/website.md | Records updated website rules for examples and unified documentation navigation. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+10
to
+14
| const tree = new TaffyTree(); | ||
|
|
||
| const sidebar = tree.newLeaf({ size: { width: 88 } }); | ||
| const header = tree.newLeaf({ size: { height: 40 } }); | ||
| const content = tree.newLeaf({ flexGrow: 1 }); | ||
| const sidebar = tree.newLeaf({ size: { width: sidebarWidth } }); | ||
| const header = tree.newLeaf({ size: { height: headerHeight } }); | ||
| const content = tree.newLeaf({ flexGrow: 1 }); |
Comment on lines
+35
to
+37
| <div class="layout-demo-code" aria-label="Read-only TaffyJS example code"> | ||
| <slot /> | ||
| </div> |
Comment on lines
84
to
86
| <div class="home-layout-code" aria-label="TaffyJS example code"> | ||
| <slot /> | ||
| </div> |
hyfdev
added a commit
that referenced
this pull request
Aug 16, 2026
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.
What changed
Why
The examples now make the connection between JavaScript inputs and computed rectangles easier to see without introducing an editor or a general-purpose playground. The documentation structure is also visible from every documentation page instead of being split between the top navigation and separate sidebars.
Checks
vp run readyvp run check:wasm