Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add copy code btn #1841

Open
wants to merge 9 commits into
base: gh-pages
Choose a base branch
from
Open

feat: add copy code btn #1841

wants to merge 9 commits into from

Conversation

ShubhamOulkar
Copy link
Member

@ShubhamOulkar ShubhamOulkar commented Mar 23, 2025 •
edited
Loading

  • added new feature: copy code btn
  • a11y: wcag 2.1
  • added copied text popup
  • reponsive design

closes #1814

design

image

@ShubhamOulkar ShubhamOulkar requested review from a team as code owners March 23, 2025 14:29
@ShubhamOulkar ShubhamOulkar marked this pull request as draft March 23, 2025 14:30
@netlify Netlify
Copy link

netlify bot commented Mar 23, 2025 •
edited
Loading

✅ Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit bbc8743
🔍 Latest deploy log https://app.netlify.com/sites/expressjscom-preview/deploys/67e3eb6f68281d00089612d9
😎 Deploy Preview https://deploy-preview-1841--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@carlosstenzel
Copy link
Contributor

Good job, thanks for the help ;)

@ShubhamOulkar ShubhamOulkar marked this pull request as ready for review March 24, 2025 13:04
@ShubhamOulkar ShubhamOulkar changed the title WIP: (feat: copy code btn) feat: add copy code btn Mar 24, 2025
bjohansebas
bjohansebas requested changes Mar 25, 2025
View reviewed changes
Copy link
Member

@bjohansebas bjohansebas left a comment

Choose a reason for hiding this comment

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

Should we show a small pop-up indicating that it was copied successfully? Below the button—I think I remember that this already exists in HTML, so we wouldn't need JavaScript. I'll look for it.

I don't think the color change is enough.

@bjohansebas
Copy link
Member

bjohansebas commented Mar 25, 2025 •
edited
Loading

image

Something like this could be good to indicate that it was copied successfully or that something went wrong. This is from the ESLint page, by the way.

@ShubhamOulkar
Copy link
Member Author

ShubhamOulkar commented Mar 26, 2025 •
edited
Loading

image

yup 👍🏻

Edit :- I added on left side because it overflows over border of <pre> code box

ShubhamOulkar
ShubhamOulkar commented Mar 26, 2025
View reviewed changes
@ShubhamOulkar ShubhamOulkar mentioned this pull request Mar 26, 2025
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@carlosstenzel carlosstenzel Awaiting requested review from carlosstenzel

@bjohansebas bjohansebas Awaiting requested review from bjohansebas

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Feature Request: Add Copy Button for Code Blocks
3 participants
@ShubhamOulkar @carlosstenzel @bjohansebas