starred/healthchecks

Fork 0

mirror of https://github.com/healthchecks/healthchecks.git synced 2026-04-25 23:15:49 +03:00

[GH-ISSUE #88] Add "copy to clipboard" function to example code snippets #52

New issue

Closed

opened 2026-02-25 23:40:59 +03:00 by kerem · 5 comments

kerem commented

2026-02-25 23:40:59 +03:00

Owner

Originally created by @cuu508 on GitHub (Sep 28, 2016).
Original GitHub issue: https://github.com/healthchecks/healthchecks/issues/88

For the example code snippets (bash, python, ruby, etc.), it would be great to have a "copy" buttons next to each.

The snippets are in several places on the site:

the welcome page for not-logged-in users
documentation
My Checks → gear icon → Usage Examples

The project is already using clipboard.js for ping addresses.

Originally created by @cuu508 on GitHub (Sep 28, 2016). Original GitHub issue: https://github.com/healthchecks/healthchecks/issues/88 For the example code snippets (bash, python, ruby, etc.), it would be great to have a "copy" buttons next to each. The snippets are in several places on the site: - the welcome page for not-logged-in users - documentation - My Checks → gear icon → Usage Examples The project is already using clipboard.js for ping addresses.

kerem closed this issue

2026-02-25 23:40:59 +03:00

kerem commented

2026-02-25 23:41:00 +03:00

Author

Owner

@eddieosmanbasic commented on GitHub (Sep 30, 2016):

Hello,

I'm new to contributing to open source projects, and using GitHub in general. I was wondering if this button needs to be written in Python considering the fact that the website uses Django?

@eddieosmanbasic commented on GitHub (Sep 30, 2016): Hello, I'm new to contributing to open source projects, and using GitHub in general. I was wondering if this button needs to be written in Python considering the fact that the website uses Django?

kerem commented

2026-02-25 23:41:00 +03:00

Author

Owner

@cuu508 commented on GitHub (Sep 30, 2016):

Hi @eddieosmanbasic – no, this would be done entirely on client side, using JS.
If you log into healthchecks.io and look at the list of your checks, there is a "copy" link next to each ping URL. It works, it uses clipboard.js under the hood. This issue is about extending the same functionality to more places on the site.

A quick note: clipboard.js and similar libraries do not work on OSX. There, we fall back to simply not showing the "copy" link/button.

@cuu508 commented on GitHub (Sep 30, 2016): Hi @eddieosmanbasic – no, this would be done entirely on client side, using JS. If you log into healthchecks.io and look at the list of your checks, there is a "copy" link next to each ping URL. It works, it uses clipboard.js under the hood. This issue is about extending the same functionality to more places on the site. A quick note: clipboard.js and similar libraries do not work on OSX. There, we fall back to simply not showing the "copy" link/button.

kerem commented

2026-02-25 23:41:00 +03:00

Author

Owner

@cdax commented on GitHub (Sep 30, 2016):

Hi @cuu508, I've been thinking about how this should look from a UI/UX perspective. There are cases where the same tab can have multiple independent code snippets. For example, have a look at the Bash tab:
screen shot 2016-09-30 at 4 59 26 pm
here, you can't have a single floating "Copy" button for the whole tab since the curl snippet is independent of the wget snippet.

One solution might be to break down independent snippets into separate Bootstrap panels. I should be able to finish working on this over the weekend once we've reach some agreement around how this should look.

@cdax commented on GitHub (Sep 30, 2016): Hi @cuu508, I've been thinking about how this should look from a UI/UX perspective. There are cases where the same tab can have multiple independent code snippets. For example, have a look at the _Bash_ tab: <img width="654" alt="screen shot 2016-09-30 at 4 59 26 pm" src="https://cloud.githubusercontent.com/assets/7029291/18990434/6f8292aa-872f-11e6-9ba0-a22b769aefda.png"> here, you can't have a single floating "Copy" button for the whole tab since the `curl` snippet is independent of the `wget` snippet. One solution might be to break down independent snippets into separate [Bootstrap panels](http://getbootstrap.com/components/#panels). I should be able to finish working on this over the weekend once we've reach some agreement around how this should look.

kerem commented

2026-02-25 23:41:00 +03:00

Author

Owner

@cuu508 commented on GitHub (Sep 30, 2016):

Yes, here, copying the whole snippet, comments and all, is not very useful.

I think I would prefer to still have a single "Bash" tab, but split this snippet in two parts: front/snippets/curl.txt and front/snippets/wget.txt.

The comments could also be moved from the snippet to the parent template.

@cuu508 commented on GitHub (Sep 30, 2016): Yes, here, copying the whole snippet, comments and all, is not very useful. I think I would prefer to still have a single "Bash" tab, but split this snippet in two parts: `front/snippets/curl.txt` and `front/snippets/wget.txt`. The comments could also be moved from the snippet to the parent template.

kerem commented

2026-02-25 23:41:00 +03:00

Author

Owner

@cuu508 commented on GitHub (Oct 1, 2016):

PR from @cdax received and merged.

@cuu508 commented on GitHub (Oct 1, 2016): PR from @cdax received and merged.