Skip to content

docs: add recipe pages with navigation hub#42

Merged
stefvw93 merged 6 commits intomainfrom
docs/recipes-pages
Jan 22, 2026
Merged

docs: add recipe pages with navigation hub#42
stefvw93 merged 6 commits intomainfrom
docs/recipes-pages

Conversation

@stefvw93
Copy link
Owner

@stefvw93 stefvw93 commented Jan 22, 2026

Summary

  • Create recipe navigation hub at /recipes/ with links to all recipes
  • Restructure existing recipes (type-augmentation, declarative-event-handlers) into folder structure
  • Add 5 new recipes demonstrating effect-ui patterns:
    • reactive-styles: Stream-based style updates, animated hue, pulsing, size animations
    • async-data-loading: Effect components with loading states, error handling, parallel loading
    • form-handling: Reactive inputs, validation streams, character counters
    • list-rendering: Arrays, Fragments, growing lists, nested iterables
    • subscription-ref: SubscriptionRef as SolidJS-like signals with .changes streams
  • Update styling to clean black-on-white monospace design
  • Each recipe includes index.html, app.tsx, and readme.md

Test plan

  • Run pnpm dev and navigate to http://localhost:3000/recipes/
  • Verify navigation hub lists all 7 recipes
  • Click each recipe link and verify it loads
  • Test interactive elements in each recipe (buttons, inputs, animations)

🤖 Generated with Claude Code

stefvw93 and others added 6 commits January 22, 2026 14:39
- Create recipe navigation hub at /recipes/
- Restructure existing recipes into folder structure
- Add 5 new recipes:
  - reactive-styles: stream-based style updates
  - async-data-loading: Effect components with loading states
  - form-handling: reactive inputs and validation
  - list-rendering: arrays, fragments, dynamic lists
  - subscription-ref: SubscriptionRef as SolidJS-like signals
- Each recipe has index.html, app.tsx, and readme.md
- Update styling to clean black-on-white monospace
- Add link from main playground to recipes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Schema-based email validation example to form-handling
- Add complete registration form with Schema validation
  (username, password, age fields with multiple rules)
- Update subscription-ref Object State to use Schema validation
- Update readme files with Schema validation patterns

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Wrap component outputs in divs with margin to prevent
overlap with description paragraphs.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The Counter example didn't update the UI because clicking the button
only incremented a local variable without emitting to the stream.
Replaced with a simple AlertButton that clearly demonstrates a plain
callback handler working.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replaces the broken AlertButton with a more interesting StreamCounter
that demonstrates Effect and Stream composition patterns:

- Effect.andThen to wait for DOM readiness after mount
- Stream.fromEventListener to capture button click events
- Stream.merge to combine increment/decrement streams
- Stream.scan to accumulate state over time
- Stream.concat to prepend initial value

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The form submit handler now actually validates all fields before
showing "Registration successful!" - it was always showing success
regardless of validation state.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@stefvw93 stefvw93 merged commit 333340b into main Jan 22, 2026
6 checks passed
@stefvw93 stefvw93 deleted the docs/recipes-pages branch January 22, 2026 13:58
@github-actions
Copy link

🎉 This PR is included in version 0.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant