Add copy code button

[BernatBC]

Issue

• Fixes Feature Request - Add Copy Button to Code Blocks #954

Description

Adds a copy code button in all code blocks. To enable this feature, you'll need to add the following lines into config.yaml/hugo.yaml:

params:
  features:
    # Enables copy code button
    copyCodeButton:
      enable: true

I will add this into hugo-toha/hugo-toha.github.io and hugo-toha/guides

Test Evidence

[netlify]

✅ Deploy Preview for toha-ci ready!

Name	Link
🔨 Latest commit	f786f8a
🔍 Latest deploy log	https://app.netlify.com/sites/toha-ci/deploys/66eccfac65575f0008416ae1
😎 Deploy Preview	https://deploy-preview-963--toha-ci.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[hossainemruz]

Hi @BernatBC! I will review on the weekend. Giving a quick look on the deploy preview, I noticed these:

1. The copy button looks large. We have to reduce its size little bit.
2. Need to adjust margin/padding so that the copy icon is at the same level as the first line.
3. It does not have any feedback on hover.
4. It does not have any feedback when clicked.

You can follow the GitHub style. Also, we need to think about where to put the configuration. It will be better to unify all markdown related configurations under a single section.

[BernatBC]

Hi @hossainemruz,
I've made some tweaks to it. Regarding your points:

1. I've reduced a little bit the icon size.
2. I've readjusted a little bit the margin, so now it's aligned properly.
3. When on hover, the icon has the same behavior as any other link. I have also added a mouse tooltip. Should we translate the string "copy"?
4. I've been thinking about it, and I'm not sure what's the best feedback to give after pressing the button. Maybe a little text "Copied!"? If that's the case, will we have to add it to localization as well?

[hossainemruz]

Hi @hossainemruz, I've made some tweaks to it. Regarding your points:

1. I've reduced a little bit the icon size.
2. I've readjusted a little bit the margin, so now it's aligned properly.
3. When on hover, the icon has the same behavior as any other link. I have also added a mouse tooltip. Should we translate the string "copy"?
4. I've been thinking about it, and I'm not sure what's the best feedback to give after pressing the button. Maybe a little text "Copied!"? If that's the case, will we have to add it to localization as well?

Awesome. Thank you. I will take a look soon.

[hossainemruz]

@BernatBC I have updated the button look and also added some feedback on click. Let me know how does it feel now.

Normal State:

Hover State:

On Click:

[BernatBC]

Hi @hossainemruz,
it looks great!
Thank you once again

[hossainemruz]

@BernatBC I was wondering if we should combine these kind of feature configurations under common section? That will make them easily discover-able. For example:

params:
  features:
    utility: # not sure what should be the name. feel free to suggest
      copyCodeButton:
         enable: true # add a button to copy code on a code blocks. default "true"
      readingTime:
         enable: true # show estimated reading time on reading page. default: "true"

Maybe few other settings can go there too.

[BernatBC]

Looks good to me, but will need to be careful with this change, as it will introduce breaking changes for "readingTime"

[hossainemruz]

Looks good to me, but will need to be careful with this change, as it will introduce breaking changes for "readingTime"

Keeping as it is now. If we want to group them under utility section, the configuration will be:

params:
  features:
    utility:
      enabled: true
      services:
        copyCodeButton:
          enable: true # add a button to copy code on a code blocks. default "true"
        readingTime:
          enable: true # show estimated reading time on reading page. default: "true"

The utility functions does not have anything in common. So, it does not make sense to put them under same service.

[rageSpin]

Thanks 💯