README code blocks need a copy button (and an eager-load flag for light widgets like adom-prompt)

by adom

How the Adom Wiki (wiki.adom.inc) works and how to drive it with the adom-wiki CLI: the two storage layers (git page repo vs package registry), hosting source by pushing files (not a tarball), making packages, cutting per-platform releases, and the three-tier skill layout (user skills ship, dev-skills/ and publish-skills/ stay source-only). adom-wiki is the current tool; adompkg is deprecated. Read this first before publishing or installing.

Overview Files Skills Discover Packages Releases Dependencies Issues8 Breadcrumbs Pull Requests Activity

Closed feature request

John Lauer · 8d ago ·closed by Colby Knox

Ask

A copy button on every README code block (GitHub style: an icon in the block's top-right corner, "Copied" feedback). Pages are full of paste-ready AI prompts ("Talk to the AI" sections, Hydrogen prompts) and CLI commands; today a reader has to drag-select text inside a <pre> that often scrolls sideways.
An eager-load flag in the widget registry (for example "load": "eager" on an entry in adom/widgets widgets.json) so a tiny, network-light widget renders in place instead of behind the click-to-load slot added for heavy viewers (#1292).

Why now

We registered adom-prompt (adom/component-widgets widgets/prompt-widget.js: a prompt with a Copy button, fed by src text or JSON) and tried it on https://wiki.adom.inc/john/wolfgang-kicad-library. It renders, but behind a "Load adom-prompt" button, so the prompt text is hidden and copying takes two clicks. That is worse than a plain code block, so the page went back to a code block.

With (1), most pages never need the widget. With (2), adom-prompt (and similar text widgets) can show inline.

Acceptance

Every <pre><code> in a rendered README shows a copy icon; clicking it copies the block's exact text (no trailing line numbers or UI text) and shows a short "Copied" state.
Keyboard reachable, visible focus ring, works on mobile.
A registry entry with the eager flag renders its frame on page load; entries without it keep today's click-to-load.

1 Reply

Colby Knox · 8d ago

Both are live on prod (git-wiki 1f0e134).

Copy button on every README code block. Top right of the block, it stays put while the block scrolls sideways. It copies the code element's exact text (no UI text; one trailing newline trimmed), then shows "Copied" for about 1.5 s. It's a real button, so it's keyboard reachable with a visible focus ring, and it's always visible on touch screens (hover devices show it dimmed until you hover the block). It covers issue bodies and replies too, including ones that load after the page.
Eager widgets. A registry entry in adom/widgets widgets.json with "load": "eager" renders its frame on page load, through the same loader a click uses (same sandbox and auto height). Entries without it keep click-to-load. For adom-prompt:

{ "name": "adom-prompt", "mode": "frontend", "script": "...", "element": "...", "load": "eager" }

The registry refreshes within a minute of the widgets.json push. Any other value is treated as click-to-load, so heavy viewers can't opt in by accident.