Adding a CopyButton feature

[yufi16]

What this PR does / why we need it:

Introducing a Copy button feature to quickly copy code snippets, reducing friction and saving time.

Which issue(s) this PR fixes:

#2022 -> flatcar/Flatcar#2022

Does this PR introduce a user-facing change?

Enhancing code blocks with distinct background, improving readability and visual clarity.

Special Notes for your Reviewer:

Incorporated suggested changes.

[tormath1]

Thanks for the PR, while I'm not a front-end developer, I'll delegate this PR review to @ervcz :)

[tormath1]

Let's avoid adding the .idea folder. We can .idea to the main .gitignore file.

[yufi16]

Thanks for sharing @tormath1
With a couple more changes, will stash them before opening the PR for review.

[John15321]

Linking it for visibility 😊 flatcar/Flatcar#2022

[sayanchowdhury]

Thanks a lot for the PR!

The implementation needs to change a bit, currently the copy button is rendered outside of the codeblock - which does not look good in UI terms.

It would be better to use a font-awesome icon and place it within.

Other thing is we use pygments, but you can switch over to use Hugo's highlight which give much more better themes for the code block.

[John15321]

Could you please remove the .idea folder from Git?

[John15321]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

[yufi16]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

Thanks for investigating, looking into this!

[sayanchowdhury]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant#:~:text=List the status of the running machines%3A

I see that the innerText that you are using is returning a \n in the end - you could switch to textContent and check. For this example textContent returns me without the trailing newline.

or better just use trim() or trimEnd() to stay on the safer side.

[sayanchowdhury]

Dropped a few comments - it should look exactly how it looks but there is some redundant code which needs to be removed.

[yufi16]

Sure, on it!

[sayanchowdhury]

This would require to pull #548

@ervcz this PR would also require your review when you have spare cycles

[ervcz]

Hello @yufi16, @sayanchowdhury! Sorry for the late response.

Please use the existing SCSS variables. E.g. $flatcar-blue for #08a2af, $gray-100 for #f8f9fa, etc. These are exact matches already defined in _custom.scss and Bootstraps variables.

Can you please check if "Fira Code" is properly loading? That is a custom font that is not installed on most of devices.

[ervcz]

Can you please use measurement units? It may still be correct without them, but it is a good practice to indicate them.

[ervcz]

Here too.

[ervcz]

The comment can be removed.

[ervcz]

I just noticed we already load a monospace font family. Could we use $font-family-monospace instead (- that should include it)? Perhaps the difference doesn't make worth loading a new font family.

[ervcz]

what we have already is called overpass mono

[ervcz]

If overpass mono is similar enough to fira code, I would suggest to drop fira code

[yufi16]

Sure thing, On it!