nebari-dev / nebari-dev/starlight

Add a "Copy Page" Button to Documentation Pages

Open
#24 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: user experience 👩🏻‍💻
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.astro renders a labeled button on doc pages, styled with the existing Nebari tokens in nebari-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/PageTitle region and is overridable by consumers via config.components
  • Raw Markdown source for each page is exposed at build time (e.g. an astro:build:done-emitted <page-path>.md alongside the HTML, or an equivalent virtual endpoint) so the button copies source, not rendered text
  • Emitted .md paths respect the site base and are prefixed consistently with withBasePrefix behavior in packages/starlight/src/index.ts
  • Clicking the button writes the Markdown to the clipboard via navigator.clipboard.writeText and 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 an aria-label, visible focus ring, and the copied state announced via aria-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 check and bun test pass
  • Feature documented in docs/src/content (what it does, how to override or disable it via config.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.txt aggregate — 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.