appview: repo/fragments: add copy button to readme #25

closes #429

Add a copy-to-clipboard button to the README view on the repository homepage.

The button appears in the top-right corner of the README and copies the full Markdown source to the clipboard.

Also, should we display a snackbar or toast notification to clearly inform users when the copy action is completed?

+14 -3

1 changed file

Diff round #1

expand all

appview

pages

templates

repo

fragments

readme.html

+14 -3

appview/pages/templates/repo/fragments/readme.html

··· 1 1 {{ define "repo/fragments/readme" }} 2 2 <div class="mt-4 rounded bg-white dark:bg-gray-800 drop-shadow-sm w-full mx-auto overflow-hidden"> 3 3 {{- if .ReadmeFileName -}} 4 - <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-2"> 5 - {{ i "file-text" "w-4 h-4" "text-gray-600 dark:text-gray-400" }} 6 - <span class="font-mono text-sm text-gray-800 dark:text-gray-200">{{ .ReadmeFileName }}</span> 4 + <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center justify-between gap-2"> 5 + <div class="flex items-center gap-1"> 6 + {{ i "file-text" "w-4 h-4" "text-gray-600 dark:text-gray-400" }} 7 + <span class="font-mono text-sm text-gray-800 dark:text-gray-200">{{ .ReadmeFileName }}</span> 8 + </div> 9 + <button type="button" title="Copy Readme" onclick="copyReadme()">{{ i "clipboard" "w-4 h-4" "text-gray-600 dark:text-gray-400" 10 + }}</button> 7 11 </div> 8 12 {{- end -}} 9 13 <section ··· 20 24 {{ .HTMLReadme }} 21 25 {{- end -}}</article> 22 26 </section> 27 + <div id="readme-raw" hidden>{{ .Readme }}</div> 23 28 </div> 29 + <script> 30 + function copyReadme() { 31 + const content = document.getElementById('readme-raw').textContent; 32 + navigator.clipboard.writeText(content); 33 + } 34 + </script> 24 35 {{ end }}

History

2 rounds 0 comments

nove-b.dev submitted #1 3d

interdiff

1 commit

expand

1231e842

appview: repo/fragments: add copy button to readme

no conflicts, ready to merge

expand 0 comments

nove-b.dev submitted #0 3d

diff