[Typst Universe UX/UI] Improve copying code fragments

[rwmpelstilzchen]

Description

This issue suggests two UX/UI improvements for copying code fragments.

How to add/use one-liners

Under the section ‘How to add’ (for packages) and ‘How to use’ (for templates) there are one-liners (import directive and typst init command, respectively) with a copy button to the right. Hovering over the textless button doesn’t do anything, and clicking the button provides no clear visual feedback.

I suggest adding a tooltip saying ‘Copy to clipboard’ when hovering and one saying ‘Copied!’ after clicking. This mimics the behaviour on GitHub (where in addition the icon changes to a checkmark for a short while) and Forgejo.

Copying code blocks

On GitHub and Forgejo Markdown code blocks (marked by three backticks) have a similar button with the same icon and a similar behaviour. I suggest adopting this as well. The icon can always appear at the top-right corner of the block (as in GitHub) or appear only when hovering over the block (as in Forgejo). I think the former behaviour is better, because it’s more discoverable and more friendly to people who browse the web mainly using a keyboard (either using vanilla functionality or an extension like Tridactyl).

[rwmpelstilzchen]

I’m glad to see the first suggestion was accepted 🙂