Add "Copy to Clipboard" button for code blocks in helmet.js documentation

[Oashe02]

Feature Request: Add "Copy to Clipboard" Button for Code Blocks in helmet.js Documentation
Is your feature request related to a problem? Please describe.
When following the helmet.js documentation, there are several code examples and setup commands for example, in the installation and starter code sections but no “Copy” button is provided for the code blocks.

This makes it slightly inconvenient for users who want to quickly copy shell commands or example code when setting up their projects.

Visual inspiration
Similar behavior can be seen in the documentation sites for:

• React
• Vite
• TailwindCSS

Having a small clipboard icon button next to each of these code blocks would allow users to quickly copy the full command without manually selecting text.

Additional context
This enhancement will make the helmet.js documentation more polished, modern, and beginner-friendly.

I’d love to work on this feature and contribute a PR to add copy buttons across all code blocks!

[Oashe02]

@evilpacket @EvanHahn could u assign me this issue

[EvanHahn]

@Oashe02 If you're interested in building this, could you give me a plan for how you're going to implement it before you start?

[Oashe02]

@EvanHahn sure ! this will be my implementation:

I’ll add a lightweight JavaScript enhancement that automatically injects a “Copy to Clipboard” button for each code block in the documentation.
Features:

• Select all code blocks on page load.
• Append a small 📋 button in the top-right corner.
• Use the modern Clipboard API (navigator.clipboard.writeText) to copy the code text.
• Show quick feedback (e.g., changing to “Copied!” for 2 seconds).

Styling will be minimal and consistent with the docs theme—just a small icon button with hover/focus states.

would love to get ur insights!!

[EvanHahn]

Sure, seems reasonable.

Four things:

1. It should only target JavaScript code snippets. The docs also have code blocks for HTTP header values, which I don't want to make copyable.
2. No copy UI should appear if JavaScript is disabled.
3. Can you implement it like I did in this repo?
4. If you use AI in your code, that's okay, but please disclose it.

Thanks.

[Oashe02]

Sounds Good!

[Oashe02]

I have implemented the copy-button feature as discussed and opened a PR for it here: #74