nebari-dev / nebari-dev/starlight
Add a "Copy Page" Button to Documentation Pages
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 0
- Forks
- 0
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 7
Description
Summary
Add a CopyPage component to the @nebari/starlight theme plugin that renders a "Copy page" button on every content page, copying the page's raw Markdown source to the clipboard. This follows the pattern used by Astro Docs and other LLM-oriented doc sites, and touches packages/starlight/src/components/, packages/starlight/src/styles/components.css, and the component overrides in packages/starlight/src/index.ts.
Motivation
- Readers increasingly paste docs into LLMs; the rendered HTML copies poorly (broken code fences, lost structure, sidebar/nav noise)
- Raw Markdown is the highest-fidelity form of a page — it round-trips code blocks, tables, and frontmatter-driven headings intact
- One implementation in the shared theme gives every Nebari pack docs site the feature for free, with no per-site wiring
- Complements the existing header controls (
ThemeSelect) with a consistent Darby-style icon button
Acceptance Criteria
- New
packages/starlight/src/components/CopyPage.astrorenders a labeled button on doc pages, styled with the existing Nebari tokens innebari-tokens.css - The button is registered as a Starlight component override in
nebari()(packages/starlight/src/index.ts), placed so it appears near the page title/PageTitleregion and is overridable by consumers viaconfig.components - Raw Markdown source for each page is exposed at build time (e.g. an
astro:build:done-emitted<page-path>.mdalongside the HTML, or an equivalent virtual endpoint) so the button copies source, not rendered text - Emitted
.mdpaths respect the sitebaseand are prefixed consistently withwithBasePrefixbehavior inpackages/starlight/src/index.ts - Clicking the button writes the Markdown to the clipboard via
navigator.clipboard.writeTextand shows a transient "Copied" state (icon/label swap), reverting after ~2s - Graceful fallback when the Clipboard API is unavailable or denied (insecure context): the button does not throw and surfaces a non-blocking failure state
- Accessible:
<button type="button">with anaria-label, visible focus ring, and the copied state announced viaaria-live - Button styles added to
packages/starlight/src/styles/components.css— no hard-coded colors, tokens only, correct in both light and dark themes - Unit test in
packages/starlight/test/covering the Markdown-emit/base-prefix logic - Playwright e2e test in
docs/e2e/asserting the button is present on a docs page and that clicking it copies the expected Markdown -
bun run checkandbun testpass - Feature documented in
docs/src/content(what it does, how to override or disable it viaconfig.components)
Out of Scope
- A "Copy as Markdown for ChatGPT/Claude" dropdown with per-provider deep links — a possible follow-up once the base button lands
- A site-wide
llms.txt/llms-full.txtaggregate — separate issue; this covers per-page copy only - Copying individual code blocks — Starlight's Expressive Code already provides that
- Changing the raw Markdown authoring format or adding source transformation/sanitization beyond emitting the file as-authored
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the component entry points in packages/starlight/src/components/, packages/starlight/src/index.ts, and packages/starlight/src/styles/components.css, then inspect the existing tests in packages/starlight/test/ and docs/e2e/. Trace how page output and base prefixes are handled before implementing the feature. Done means the component override, Markdown output, fallback and accessibility behavior, unit and Playwright tests, checks, and documentation all satisfy the listed criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, markdown, typescript
- Domain
- build-system, documentation, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100