docs: add copy button to docs code blocks - #657
Open
SHYXIN wants to merge 1 commit into
Open
Conversation
Author
Verification (local
|
Adds a one-click "Copy" button to every code block in the docs content area. The button is hidden until the parent <pre> is hovered or focused, and flashes a "Copied!" confirmation after a successful clipboard write. Follows the existing Hugo Pipes pattern used for nav-toggle.js: the script lives in assets/js/copy-code.js and is loaded only on doc pages via the scripts block in layouts/doc/single.html. The absolutely-positioned button could overlap the first line of code in blocks whose opening line reached the right edge, so add top padding to docs code blocks so the button sits in the clear space above the code. Fixes huggingface#343
SHYXIN
force-pushed
the
fix/issue-343-docs-copy-button
branch
from
August 26, 2026 02:31
a2e0b25 to
1c799b2
Compare
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.
What changed
Adds a one-click Copy button to every code block in the docs content area (issue #343).
website/assets/js/copy-code.js(new): onDOMContentLoaded, injects a<button class="copy-btn">into each.docs-content pre. Clicking copies the code vianavigator.clipboard.writeText()and shows a briefCopied!confirmation (orFailedif the clipboard write is rejected).website/assets/css/main.css: styles.copy-btn— absolutely positioned top-right, hidden until the parent<pre>is hovered or focused (keyboard accessible via:focus-visible), and flashes green on success. Docs code blocks get top padding so the button sits clear of the first line instead of overlapping it.website/layouts/doc/single.html: loads the script only on doc pages through the existingscriptsblock inbaseof.html, following the same Hugo Pipes pattern already used fornav-toggle.js(resources.Get "js/copy-code.js"→js.Build | minify | fingerprintin production).No new dependencies, and no impact on landing or other page types.
Related issue
Fixes #343
Test approach
node --check website/assets/js/copy-code.jspasses (JS syntax valid).hugo --minify(Hugo extended 0.165.0): the site builds clean (35 pages), the copy-code asset is emitted (minified + fingerprinted), and it is loaded only on docs pages (the landing page does not reference it).Copied!), and — after the top-padding fix — no longer overlaps the first code line (measured: button bottom ≈ 569px < code top ≈ 580px). Screenshots for all three states are attached in the PR comment.Checklist
hugo --minifybuild + screenshots in comment); maintainer review welcome