Repository navigation
CheerpJ docs: an "AI agents" button in the nav, with the agent prompt and the skill - #514
Merged
Merged
Conversation
… and the skill The button opens a panel with cheerpj.com's agent prompt, which points the agent at the CheerpJ skill, the skill's install command, and links to the skill and agents.md, each with a Copy button. It's a native popover, so the nav's overflow-hidden doesn't clip it, and it closes on Esc or a click outside. The nav is full on phones, so below 640px the button sits in the bar under it, beside the breadcrumbs; up to 1023px it's an icon. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Deploying labs-browserpod-previews with
|
| Latest commit: |
51d25ec
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://06d51737.labs-browserpod-previews.pages.dev |
| Branch Preview URL: | https://cheerpj-docs-agent-prompt.labs-browserpod-previews.pages.dev |
Deploying labs-cheerpj-previews with
|
| Latest commit: |
51d25ec
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ef9aa2b8.labs-cheerpj-previews.pages.dev |
| Branch Preview URL: | https://cheerpj-docs-agent-prompt.labs-cheerpj-previews.pages.dev |
astro-icon emits the mdi:content-copy <symbol> inside the first copy button's SVG and points the second button's <use> at it. Setting button.textContent for the "Copied" feedback removed that <symbol>, so clicking the first button blanked the second button's icon for the two seconds until the label was restored. Swap only the text in the button's <span>, leaving the SVG in place. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The button: a robot rather than a terminal window, and a rule between it and Discord and GitHub, which it is not one of — it opens a panel where they lead somewhere else. Its colours stay theirs. The panel: a close button in the corner, a plain popovertargetaction ="hide" that needs no script. The copy buttons drop their "Copy" label for the icon alone and tick for two seconds once the text is on the clipboard, so the prompt gets the width the label was taking. The tick fades over the copy icon rather than replacing it: astro-icon keeps each icon's shared <symbol> in its first occurrence, so hiding one blanks the other button. Nothing ticks when the clipboard is barred — the text is selected to copy by hand instead, and nothing was copied to report. Their labels now say which is which, where both read "Copy" before. The panel's two links lose their thick orange underline for orange text, white on hover, one at each edge of the code blocks above them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The panel is fixed and uncapped, so on a window shorter than its content — a phone held sideways, or a short desktop window — everything below the fold was out of reach: the page behind cannot scroll it, and the panel had no overflow of its own to scroll. At 844x390 that lost the install command's copy button and both links. Cap it at the window less the nav above and a little air below, and let it scroll inside itself. Roomy windows are unchanged: nothing reaches the cap, so no scrollbar appears. The vh line before the dvh one is for browsers without dvh. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
GabrielaReyna
approved these changes
Nov 3, 2026
GabrielaReyna
left a comment
GabrielaReyna
left a comment
Contributor
There was a problem hiding this comment.
I did some cosmetic changes and fixed a bug with the copy buttons (icon gone when clicking one of them). This is ready to merge (unless another PR is merged prior).
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.
Why
Add a fixed 'for AI' button / information panel on each page of the docs. The design is temporary and should be improved.
Change
An "AI agents" button in the CheerpJ docs nav, next to Discord and GitHub. It opens a panel:
npx skills add leaningtech/skills --skill cheerpj, with a Copy button;SKILL.md), and Are you an AI agent? Read this (cheerpj.com/agents.md), as in cheerpj.com's menu.How
cheerpj-brand/AgentMenu.astro: the panel, as a nativepopover. It opens in the top layer, so the nav'soverflow-hiddendoesn't clip it, and closes on Esc or a click outside. It comes before<main>in the HTML, so an agent reading raw HTML meets the skill link near the top of every page.cheerpj-brand/AgentButton.astro: the button, in two places, because the nav is full on phones (Demos ends at 352 px on a 360 px screen):isCheerpj), so the other docs sites don't change.sites/cheerpj/src/lib/agent-prompt.ts(leaningtech.com repo); a comment says to keep the two in step.🤖 Generated with Claude Code