Feature Request: Add Copy Button to Code Snippets in OnchainKit Documentation

Elishaokon13 commented 1 month ago

Issue Summary

Currently, the OnchainKit documentation lacks a copy button for code snippets, making it inconvenient for developers to quickly copy and paste the provided examples into their projects. This feature request proposes adding a copy button to all code blocks to enhance usability and improve the overall developer experience.

Motivation

Increased Efficiency: A copy button would allow developers to quickly copy the code without having to manually select text, reducing time and errors.
Improved Developer Experience: Many popular documentation sites include this feature, and adding it to OnchainKit will bring the docs in line with modern standards.

Proposed Solution

Implement a copy-to-clipboard button for all code snippets in the documentation.
The button should appear at the top-right corner of the code block.
When clicked, it should copy the entire code snippet to the user’s clipboard and provide a success notification (e.g., "Copied!").

Acceptance Criteria

[ ] A copy button is visible on all code snippets in the OnchainKit documentation.
[ ] Clicking the button copies the entire code block to the user’s clipboard.
[ ] A small notification (e.g., "Copied!") confirms the action.

Priority: Medium

Describe alternatives you've considered.

No response

Zizzamia commented 1 month ago

Love that!

We use https://vocs.dev for our docs, and I think the issue here is that they miss this functionality (at least I believe so).

If you have some extra time, would love some help from you in adding this feature to Vocs, or just help us figure out how to do it.

Right now how priority is to complete twoslash support for the entire codebase. But after that we can start take a look on this as well.

Elishaokon13 commented 1 month ago

I have some time

I'll take it up

Elishaokon13 commented 1 month ago

PR Review Request for Issue #1256 - Adding Code Copy Buttons in Documentation

Hi @Zizzamia, I hope you're doing well! I’ve submitted a PR that addresses issue [#1256](link to issue), which implements the "Copy to Clipboard" buttons for code snippets in the OnchainKit documentation by updating the vocs package from 1.0.0-alpha.58 to 1.0.0-alpha.61.

The main goal of the PR is to improve the developer experience by making code snippets easier to copy. Please review the changes when you have time and let me know if anything needs adjustment.

Thank you in advance for your time and feedback!

coinbase / onchainkit