Current Behavior
Inline code snippets in Layer5 blog posts (e.g. npx skill install,
~/.claude/skills/) have no way to copy them quickly.
Users have to manually select the text and copy it which
is inconvenient especially for long commands.
Desired Behavior
When a user hovers over an inline code snippet in a blog post,
a small copy icon appears on the right side. Clicking it copies
the text to clipboard and shows a brief "Copied!" confirmation
for 2 seconds then reverts back to the copy icon.
Screenshots / Mockups
The following blog post contains inline code snippets with no copy button:
https://layer5.io/blog/engineering/claude-code-skills-not-found-after-npx-install
Reference of desired behavior (how MDN Web Docs shows copy button on hover):
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
GitHub also uses a similar copy button pattern on all code blocks:
https://github.com/meshery/meshery#readme
Implementation
- Locate where inline
tags are rendered in blog post components
- Wrap each inline code element with a relative positioned container
- Add an absolutely positioned copy icon button that appears on hover using CSS opacity transition
- Use navigator.clipboard.writeText() API to copy the text content
- Show "Copied!" text for 2 seconds after successful copy using React state
- No additional libraries needed — pure React and CSS
Acceptance Tests
- Hovering over any inline code snippet in a blog post shows a copy icon
- Clicking the copy icon copies the exact code text to clipboard
- A "Copied!" confirmation appears for 2 seconds after clicking
- Icon disappears when mouse leaves the code snippet
- Works consistently across all blog posts on layer5.io/blog
- Does not break existing inline code styling or layout
- Works on all modern browsers (Chrome, Firefox, Safari)
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Current Behavior
Inline code snippets in Layer5 blog posts (e.g.
npx skill install,~/.claude/skills/) have no way to copy them quickly.Users have to manually select the text and copy it which
is inconvenient especially for long commands.
Desired Behavior
When a user hovers over an inline code snippet in a blog post,
a small copy icon appears on the right side. Clicking it copies
the text to clipboard and shows a brief "Copied!" confirmation
for 2 seconds then reverts back to the copy icon.
Screenshots / Mockups
The following blog post contains inline code snippets with no copy button:
https://layer5.io/blog/engineering/claude-code-skills-not-found-after-npx-install
Reference of desired behavior (how MDN Web Docs shows copy button on hover):
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
GitHub also uses a similar copy button pattern on all code blocks:
https://github.com/meshery/meshery#readme
Implementation
tags are rendered in blog post componentsAcceptance Tests
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.