Summary#

Injects a copy button into .prose pre.chroma code blocks via client-side DOM injection in base.html
Scoped to .prose so blob view source code (which has its own UX) is unaffected
Handles HTMX-swapped content (dynamic comment loading) via htmx:afterSettle listener

Test plan#

go test ./appview/pages/markup/... passes (no regressions)
Verify button appears on hover over code blocks in rendered markdown
Verify clicking copies code and shows check icon briefly
Verify dark mode styling
Verify blob view code blocks do NOT get copy buttons

+17 -17

2 changed files

Interdiff #0 → #1

expand all

unified split

appview

pages

templates

layouts

base.html

input.css

+17 -17

appview/pages/templates/layouts/base.html

··· 80 {{ template "layouts/fragments/footer" . }} 81 </footer> 82 {{ end }} 83 84 <script> 85 (function() { ··· 122 </body> 123 </html> 124 {{ end }} 125 - 126 - 127 - 128 - 129 - 130 - 131 - 132 - 133 - 134 - 135 - 136 - {{ template "layouts/fragments/footer" . }} 137 - </footer> 138 - {{ end }} 139 - </body> 140 - </html> 141 - {{ end }}

··· 80 {{ template "layouts/fragments/footer" . }} 81 </footer> 82 {{ end }} 83 + </body> 84 + </html> 85 + {{ end }} 86 + 87 + 88 + 89 + 90 + 91 + 92 + 93 + 94 + 95 + 96 + 97 + {{ template "layouts/fragments/footer" . }} 98 + </footer> 99 + {{ end }} 100 101 <script> 102 (function() { ··· 139 </body> 140 </html> 141 {{ end }}

input.css

This patch was likely rebased, as context lines do not match.

History

6 rounds 6 comments

natespilman.com submitted #5 1d

diff interdiff

1 commit

expand

b300c86b

appview/pages: add copy-to-clipboard button for markdown code blocks

no conflicts, ready to merge

expand 0 comments

natespilman.com submitted #4 11d

diff interdiff

1 commit

expand

2ccefe00

appview/pages: add copy-to-clipboard button for markdown code blocks

expand 3 comments

oppi.li 7d

works brilliantly! one nit: the copy button seems to add an extra newline for each line on my browser. do you notice the same behavior on your end?

will do a more thorough code review shortly!

natespilman.com 3d

I still need to look into this!! I asked Claude in the meantime, and it thinks you're right - there's an unnecessary carriage return

natespilman.com 1d

updated!

natespilman.com submitted #3 11d

diff interdiff

1 commit

expand

5663d756

appview/pages: add copy-to-clipboard button for markdown code blocks

expand 0 comments

natespilman.com submitted #2 11d

diff interdiff

1 commit

expand

63e62ad9

appview/pages: add copy-to-clipboard button for markdown code blocks

expand 0 comments

natespilman.com submitted #1 11d

diff

1 commit

expand

59b3e8ad

appview/pages: add copy-to-clipboard button for markdown code blocks

expand 3 comments

boltless.me 11d

Thank you for the contribution! Few feedbacks:

here we can use icon template like others.
can we use tailwindcss for styling? using @applysyntax in css file.

oppi.li 11d

i would prefer if we added this button using a goldmark extension instead of a clientside script!

natespilman.com 11d

Thank you for the feedback! I've updating the diff to use goldmark and apply tailwind classes.

natespilman.com submitted #0 11d

diff

1 commit

expand

64ceff0b

appview/pages: add copy-to-clipboard button for markdown code blocks

expand 0 comments