ID:WORK-041Status:done
Add client behaviors to plan site
Wire @refrakt-md/behaviors into the plan site via initPage() from @refrakt-md/html/client. This enables copy-to-clipboard buttons on code blocks and provides the foundation for future interactive behaviors.
Priority:mediumComplexity:simpleSource:SPEC-014
Acceptance Criteria
- Behaviors JS bundle is served at
/__plan-behaviors.js(serve) or written tobehaviors.js(build) initPage()is called on page load via a<script>tag- Copy-to-clipboard button appears on all
<pre>code blocks - Plan theme CSS includes
.rf-code-wrapper,.rf-copy-button,.rf-copy-button--copiedselectors - Behaviors work in both
serveandbuildmodes
Approach
The behaviors bundle is loaded client-side — @refrakt-md/behaviors is a runtime dependency, not a build-time package dependency. The script tag is injected via the scripts option on renderFullPage(). Add the copy button CSS selectors to the plan theme stylesheets.
References
- Plan Site via HTML Adapter (Plan Site via HTML Adapter)
- Refactor plan render pipeline to use @refrakt-md/html (the refactored pipeline)
- Add syntax highlighting to plan site (syntax highlighting — copy buttons are most useful on highlighted code)