Copy button for code

[papypom]

Great little tool, fits my workflow, really appreciate it. It works great as is, I'm using the latest version as of today. I was made aware of it via lobste.rs.

In the "would be nice" request : add a copy to clipboard button to code blocks.

I know, this means Javascript, that could be added to the base.html to keep the rest of the code JS free. As for the exact place to toggle it, a new option in the site.toml is a possibility.

[nrdxp]

Thanks for for trying sukr!

A copy button is inherently a JavaScript operation (the Clipboard API has no CSS/HTML equivalent), so it falls outside sukr's zero-JS core output.

That said, sukr's Tera templates give you full control over the final HTML. You can add this to your base.html with zero changes to sukr itself:

<!-- Add before </body> in base.html -->
<script>
document.querySelectorAll('pre > code').forEach(block => {
  const btn = document.createElement('button');
  btn.className = 'copy-btn';
  btn.textContent = '📋';
  btn.addEventListener('click', () => {
    navigator.clipboard.writeText(block.textContent);
    btn.textContent = '✓';
    setTimeout(() => btn.textContent = '📋', 1500);
  });
  block.parentElement.style.position = 'relative';
  block.parentElement.appendChild(btn);
});
</script>

And a bit of CSS in your style.css:

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s;
}
pre:hover .copy-btn { opacity: 1; }

note: in practice you'd probably actually want to load the js file from the template instead of inlining a script tag, but the result is the same

This is exactly the kind of user-space enhancement the template system is designed to enable; sukr is intended to stay JS-free at its core, but your site is yours to extend.

[nrdxp]

I'm gonna close as out of scope, but feel free to follow guidance above if so desired in your own site

[papypom]

Thanks, I've applied the suggested changes, and now I have a nice copy to clipboard button. I've moved the js part in it's own file. Sad that there's no "js free" way to do cut'n'paste.

I also really want to thank you to take the time to answer the question, even if it's out of scope of the project. This also helped me to better understand the whole templating thing.