Missing “Copy Code” Button in Documentation Code Blocks

[MUFFANUJ]

While reviewing the documentation, I noticed that code blocks in sections such as Quickstart and Installation do not provide a “Copy” button. This makes it less convenient for users to quickly copy commands or examples, especially for first-time users who rely on documentation to get started. Adding a copy-to-clipboard button for code cells would improve usability, reduce friction, and align the docs with common documentation UX patterns.

[cmainas]

Hello @MUFFANUJ ,

thank you opening this issue. Indeed, we are missing such functionality in the documentation.

A few more notes about this:

We have a distinction in the code blocks between simple commands and commands with output. In the first category, it would definitely be helpful to have such functionality, but in the second, the copied text will also contain the output and therefore mess up the instructions.

[MUFFANUJ]

Thanks for pointing this out! I reviewed the command blocks that include outputs, and it looks like this can be handled with a simple CSS-based solution. Specifically, we can hide the copy button for code blocks that represent command outputs. These blocks use the language-console class, so targeting this class should prevent the copy button from appearing where it isn’t useful.

I’ve implemented this approach in the PR: #432. I also checked the deployed preview, and it appears that the copy button is no longer shown for command blocks with output: https://deploy-preview-432--urunc.netlify.app/.

Could you please take a look and confirm whether this meets the expected condition? If not, it would be helpful if you could share a reference or example of the intended behavior.

[ilp-sys]

I found it slightly inconvenient to follow the tutorial when the commands and outputs are combined in the same code block. How about separating them and removing the $ prefix to make the commands easier to copy and paste.

[cmainas]

Hello @ilp-sys ,

we have done that for the most part of the instructions, except a few that we want to show the output. Would you mind providing more information on which instructions were difficult to follow and what an alternative would be?

[ilp-sys]

As an example, in the quickstart code block, readers do not want to copy the container ID.

docker run --rm -d --runtime io.containerd.urunc.v2 harbor.nbfc.io/nubificus/urunc/nginx-qemu-unikraft-initrd:latest
67bec5ab9a748e35faf7c2079002177b9bdc806220e59b6b413836db1d6e4018

We can separate the code block into command and output parts. So readers can just copy only the command.

docker run --rm -d --runtime io.containerd.urunc.v2 harbor.nbfc.io/nubificus/urunc/nginx-qemu-unikraft-initrd:latest

67bec5ab9a748e35faf7c2079002177b9bdc806220e59b6b413836db1d6e4018

(also, the quick start part on the README.md in this repository, we get to copy the $)

[cmainas]

Yes, this is intentional to showcase that in urunc users can follow the exact same workflows as with any other container runtime. It is just a few commands which simply spawn a container. However, in the README we can remove '$' from the commands with no output.