Complete 4 unfinished tutorial chapters in component-patterns section

[Copilot]

Four tutorial chapters in apps/tutorial/public/docs/6-component-patterns/ contained only placeholder text. This PR completes them with full prose, working examples, and progressive exercises.

Completed Chapters

4-contextual-components

Explains yielding multiple related components via {{hash}} helper. Shows ButtonGroup pattern with Accept/Decline buttons, demonstrates passing arguments and blocks to contextual components.

5-provider-components

Introduces provider pattern for state management. Counter component yields count, increment, decrement separately, consumer controls rendering.

6-provider-components-too

Builds on chapter 5 by yielding hash objects instead of separate values for cleaner API:

<template>
  {{yield (hash
    count=this.count
    increment=this.increment
    decrement=this.decrement
  )}}
</template>

Consumer code becomes self-documenting:

<Counter as |counter|>
  <p>{{counter.count}}</p>
  <button {{on 'click' counter.increment}}>+</button>
</Counter>

9-portalling

Covers {{in-element}} for rendering content outside component hierarchy. Essential for modals, tooltips, and escaping z-index constraints. Shows interactive toggle example with portal target separation.

Changes

• Added comprehensive prose.md for each chapter explaining concepts and use cases
• Implemented prompt.gjs files with starter code and TODO markers
• Implemented answer.gjs files with working solutions
• Maintained consistency with existing tutorial patterns (call-to-play prompts, code examples, external links)

Original prompt

Repository: NullVoxPopuli/limber (base: main)

Goal

• Find all unfinished tutorial chapters under apps/tutorial/public/docs/** and implement them fully.

Definition of “unfinished” (based on example)

• A chapter is considered unfinished if it is missing one or more of the expected tutorial components that most chapters have:
  • A prose.md with a complete description and call-to-action.
  • An implemented prompt file.
  • An answer file.
• Use the provided example as the canonical “unfinished chapter” reference:
  • apps/tutorial/public/docs/6-component-patterns/6-provider-components-too/prose.md
  • https://github.com/NullVoxPopuli/limber/blob/main/apps/tutorial/public/docs/6-component-patterns/6-provider-components-too/prose.md

Tasks

1. Audit apps/tutorial/public/docs/** to identify every unfinished tutorial chapter.
   • Produce a checklist of chapters found and what’s missing in each.
2. For each unfinished chapter, add/complete:
   • prose.md content: description, context, and clear call-to-action.
   • The prompt implementation file(s).
   • The answer file(s).
   • Any supporting assets needed (code snippets, components, etc.), consistent with patterns used by completed chapters.
3. Ensure consistency across chapters:
   • Naming conventions, folder structure, and file formats match existing finished chapters.
   • Any cross-links or navigation references continue to work.
4. Verify:
   • The tutorial app continues to build/run.
   • Any existing tests/lints pass.
   • The new chapters render and function properly in the tutorial.
5. Open a pull request with a concise title and description summarizing:
   • Which chapters were completed.
   • What was added/changed.
   • How it was validated.

Constraints / Notes

• Keep the tone and structure of prose consistent with other chapters in the tutorial.
• Prefer minimal but complete implementations that match the learning goals of each chapter.
• If a chapter’s intent is unclear from existing files, infer intent from neighboring chapters and existing tutorial progression, and document assumptions in the PR description.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Project	Preview URL1	Manage
Limber	https://copilot-complete-unfinished-.limber-glimdown.pages.dev	on Cloudflare
Tutorial	https://copilot-complete-unfinished-.limber-glimmer-tutorial.pages.dev	on Cloudflare

Logs

Footnotes

1. if these branch preview links are not working, please check the logs for the commit-based preview link. There is a character limit of 28 for the branch subdomain, as well as some other heuristics, described here for the sake of implementation ease in deploy-preview.yml, that algo has been omitted. The URLs are logged in the wrangler output, but it's hard to get outputs from a matrix job. ↩