Skip to content

feat(docs): add "Copy as Markdown" button to docs pages#1067

Merged
ngnijland merged 2 commits into
masterfrom
copy-as-markdown-button
Jul 1, 2026
Merged

feat(docs): add "Copy as Markdown" button to docs pages#1067
ngnijland merged 2 commits into
masterfrom
copy-as-markdown-button

Conversation

@ngnijland

Copy link
Copy Markdown
Collaborator

What

Adds a Copy as Markdown button to every docs content page. It sits above the page title, right-aligned, and copies a clean Markdown version of the page to the clipboard with brief "Copied!" feedback — so developers and LLMs can grab a page easily.

Placement/appearance is modelled on the starlight-copy-button plugin, but the Markdown is generated by reusing our existing llms.txt conversion rather than a new client-side HTML→Markdown converter (no new dependencies).

How

  • src/lib/llms/page-markdown.ts (new) — extracts the content-level Markdown transforms (<Youtube>/<Tweet> → plain links, JSX-artifact stripping, ::: directives → blockquotes, etc.) into a shared module, plus docBodyToMarkdown(entry) that composes a page exactly like the llms generator (# title / > description / body).
  • src/integrations/llms-txt-post-process.ts — refactored to reuse those helpers, so the button and the llms export produce identical output. Also fixes a latent gap: the <Youtube url="…"> variant was previously left as raw JSX in llms-full.txt; now both id and url variants convert.
  • src/components/starlight/PageTitle.astro — renders the button, embeds the page Markdown inline (works identically in astro dev and production, no extra route), scoped theme-matched styles, an inline copy script (with a non-secure-context fallback), a visually-hidden aria-live region for screen readers, and a Plausible Copy as Markdown event on success.

Note on approach

Initially implemented as a static .md endpoint, but Starlight's /docs/* catch-all shadows it in astro dev (404), so the Markdown is embedded inline instead — largest page ~12.6 KB, most 2–6 KB, gzips to a few KB.

Verification

  • Quality gate all green: lint, format:check, typecheck (0 errors), build, knip.
  • Button present on content pages, absent on the docs index.
  • Copied Markdown is clean; <Youtube> (both variants) renders as [title](youtube link), not raw markup.
  • Inline JSON payload round-trips through JSON.parse (checked on the 12.6 KB code-heavy CLI page).

Before/after screenshot to be added.

🤖 Generated with Claude Code

Add a "Copy as Markdown" button next to each docs page title that copies a
clean Markdown version of the page to the clipboard, reusing the same
conversion as the llms.txt export (custom <Youtube>/<Tweet> shortcodes become
plain links).

- Extract the shared content-level Markdown transforms into
  src/lib/llms/page-markdown.ts and refactor the llms-txt post-process
  integration to reuse them, so output stays identical everywhere.
- Also convert the <Youtube url="..."> variant (previously left as raw JSX in
  llms output), fixing a latent gap surfaced by this feature.
- Render the button in the page-title row (placement/appearance modelled on the
  starlight-copy-button plugin) with "Copied!" feedback and a Plausible event.
- Embed the page Markdown inline so copying works the same in dev and prod.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a “Copy as Markdown” control to Starlight docs pages by generating per-page Markdown using the same transforms as the llms*.txt export, so users can quickly copy a clean Markdown representation of a page.

Changes:

  • Introduces shared Markdown transform utilities and a docBodyToMarkdown(entry) composer for docs entries.
  • Refactors llms-txt-post-process to reuse the shared transforms to keep outputs identical.
  • Updates the custom PageTitle component to render the Copy button, embed page Markdown as JSON, and add client-side copy + feedback + analytics.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File Description
docs/src/lib/llms/page-markdown.ts New shared Markdown transform module + page-to-Markdown composer used by both the button and llms export.
docs/src/integrations/llms-txt-post-process.ts Refactors llms post-processing to call the shared transforms.
docs/src/components/starlight/PageTitle.astro Renders the “Copy as Markdown” button, embeds JSON payload, and adds inline copy script/styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread docs/src/lib/llms/page-markdown.ts Outdated
Comment thread docs/src/lib/llms/page-markdown.ts Outdated
Comment thread docs/src/lib/llms/page-markdown.ts Outdated
Comment thread docs/src/components/starlight/PageTitle.astro
Comment thread docs/src/components/starlight/PageTitle.astro
Comment thread docs/src/components/starlight/PageTitle.astro
Address PR review feedback:
- convertDirectivesToBlockquotes/stripDirectives now match 3+ colons and an
  optional bracketed custom title (e.g. ::::tip[Title]); previously these
  leaked as raw :::/:::: syntax into copied and llms Markdown.
- Tweet shortcode links now use the canonical /i/status/<id> permalink form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@ngnijland ngnijland merged commit 5d3a6dd into master Jul 1, 2026
1 check passed
@ngnijland ngnijland deleted the copy-as-markdown-button branch July 1, 2026 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants