doc: refactor copy to clipboard button

[aude]

The background colour on the Copy to clipboard button is driving me nuts! 😆

I constantly think I have marked the COPY buttons, but when I check, I haven't.

The background colour is so similar to the background colour for marked text, that I think it triggers my brain's habit and makes me believe they are marked:

I'm suggesting to change the background colour to something else than that important colour, and while I was at it I experimented with using emojis as well, the kind project seems fond of emojis 😄

What do you think?

[k8s-ci-robot]

Welcome @aude!

It looks like this is your first PR to kubernetes-sigs/kind 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes-sigs/kind has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[k8s-ci-robot]

Hi @aude. Thanks for your PR.

I'm waiting for a kubernetes-sigs member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[BenTheElder]

Hi, thanks for the PR. Sorry it hasn't received any review yet.

I constantly think I have marked the COPY buttons, but when I check, I haven't.

Hmm what do you mean by marked?

Tab-selecting adds a border (typical), or hovering changes the pointer.

Do you mean you highlight the text in the copy button? If so, why?
Highlighting the button text would only be useful to copy the text of the button itself ...?

I'm suggesting to change the background colour to something else than that important colour, and while I was at it I experimented with using emojis as well, the kind project seems fond of emojis 😄

We do like emojis, but we don't use them as a sole representation of anything.

In this case the clipboard emoji can be less readable on the dark background, and is less accessible (not that the current site is nailing this yet 😞). On some systems without an emoji font available we will get a blank character or we will get a simple black design with no color which will be even harder to see.

In terminals we have whatever "standards" exist like TERM=dumb to avoid spamming visual flair, on the site we just don't use them for anything important and sparingly in general.

The background colour is so similar to the background colour for marked text, that I think it triggers my brain's habit and makes me believe they are marked:

The background marked color is browser / system dependent, avoiding it is ... challenging.
The button color we have currently is the same color as the link color, I think we can make it more obvious by removing the white border.

The kubernetes.io docs also use blue buttons with white text, though they don't look quite like these, the current design is more rounded and does change color slightly on hover, and for copying code they're using a special SVG icon.

Perhaps we should adopt this icon instead?

[aude]

Hi, Ben, thanks for the thorough review!

I started replying to each question first, but then I realized that I think you have understood what I meant, you just are not overly enthusiastic about switching to an emoji. Did I understand that correctly?

Funny thing that you should mention the kubernetes.io docs; that is what I used for reference.

I think the idea of following kubernetes.io is good, I'll make a proposal and then we can see how it turns out.

[BenTheElder]

I think that about sums it up 😅

I think it should be pretty straightforward to swap in the icon they're using with an alt tag, though we might have to alter the layout a bit to get it off of a dark background as well 😅 ... maybe we should just use the codeblock background color for the header with the copy button.

the asthetics of the codeblocks could use a general refresh, I think we can drop the outline etc and replace the copy button with the more familiar icon and not rely on color .

[BenTheElder]

Maybe something like this?

(just trying something like this, edited in the browser directly)

[aude]

That looks great! I'll try to implement it, I like everything except the gray whitespace area above the code, maybe the button can "float" over to the right instead of being a header?

[aude]

How do you think this looks?

I pushed a new commit with these changes. I tried to keep accessibility in mind as well, that's why I used <button> instead of <img style="cursor:pointer">, for example.

[stmcginnis]

How do you think this looks?

+1 from me - I think that looks cleaner and visually clear.

[BenTheElder]

that looks lovely, thank you!

[BenTheElder]

https://deploy-preview-2894--k8s-kind.netlify.app/docs/user/local-registry/ live example

[BenTheElder]

what license does copycode.svg have? inlining it here does seem preferable ... unless we're violating the license 😅

[aude]

Good point, I got it from https://github.com/kubernetes/website/blob/0088ea5da01fd82995122bcd2a4e26be8bbfe005/static/images/copycode.svg. That repo seems to be under the CC-BY-4.0 license: https://github.com/kubernetes/website/blob/0088ea5da01fd82995122bcd2a4e26be8bbfe005/LICENSE

[aude]

Hi, Ben. I took a stab at complying with the license. It seems all that is needed is to add attribution, whatever that is.

I followed Creative Commons' guide, and I think the attribution is added correctly now.

So I think it's possible to merge the PR without needing any changes now 🙂

[BenTheElder]

sorry it's been a hectic few weeks

github seems to make it hard to view SVG file raw source so using curl:

$ curl -L  https://github.com/kubernetes-sigs/kind/raw/c018fda4bc70ddd4c38c2c7b284fd1ae5f8580ff/site/static/copycode.svg
<!--
copycode.svg by The Kubernetes Authors is licensed under CC BY 4.0

[copycode.svg]: https://github.com/kubernetes/website/blob/0088ea5da01fd82995122bcd2a4e26be8bbfe005/static/images/copycode.svg
[The Kubernetes Authors]: https://github.com/kubernetes
[CC BY 4.0]: https://github.com/kubernetes/website/blob/0088ea5da01fd82995122bcd2a4e26be8bbfe005/LICENSE
-->
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#184eb1">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg

Oh!

If this is originally from https://github.com/kubernetes/website/blob/0088ea5da01fd82995122bcd2a4e26be8bbfe005/static/images/copycode.svg, then we're under the same license with the same authors ("The Kubernetes Authors") for site/ and we can just copy in the file directly 😅

[aude]

No worries. Okay, nice! I reverted the last commit then, so now copycode.svg is just a direct copy.

[BenTheElder]

/lgtm
/approve
thanks so much! sorry for the delay

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: aude, BenTheElder

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [BenTheElder]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment