Add copy button to formatted citation when using `citation: true`

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/8788

^{Originally posted by Pottal February 19, 2024}

Description

Description

I am using Quarto for creating websites and blogs. To facilitate easy sharing of article titles and URLs, I have customized the front matter with appendix-cite-as: display and also customized the CSL to display the article's title and URL at the end of the articles. However, this requires users to manually copy and paste the information if they wish to share it. I would like to propose a feature to make sharing even simpler.

Problem Statement

While the current setup with appendix-cite-as: display and customized CSL works for displaying the article's title and URL at the end of an article, it doesn't offer a seamless way for users to share this information. Users have to manually select the text and copy it, which can be cumbersome and not user-friendly.

Proposed Solution

1. Button to Copy to Clipboard: Implement a button functionality that allows users to easily copy the article's title and URL to their clipboard with a single click. This button could be placed near the displayed title and URL at the end of the article.

2. Code Block for Citation: Alternatively, or additionally, format after the "For attribution, please cite this work as:" section and its contents into a code block. This would make it clearer for users that this section is meant to be copied and would facilitate easier copying and pasting. (The code block comes with a button to copy it to the clipboard, making it easy to copy.)

Additional Context

This feature would significantly enhance user experience by simplifying the process of sharing articles created with Quarto. It would also align with the goals of making scholarly and professional communication more accessible and user-friendly.

Start by locating the generated website handling for citation: true, appendix-cite-as: display, and the customized CSL output described in the issue and linked discussion. Compare the proposed copy button and code-block alternatives, then verify that the displayed citation can be copied with one action in the resulting article.