Code block copy button

```js
//adds a "copy" button to every code block in the default PieFed UI
(function() {
// places the provided string in the clipboard
function copyToClipboard(value) {
let isSuccessful = false;
try {
if (navigator.clipboard) {
navigator.clipboard.writeText(value);
isSuccessful = true;
} else {
const textarea = document.createElement("textarea");
textarea.textContent = value;
document.body.appendChild(textarea);
textarea.focus({ preventScroll: true });
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
isSuccessful = true;
}
}
catch {
isSuccessful = false;
}
return isSuccessful;
}

// copies to clipboard the code block associated with the provided button
function buttonHandlerCopy(button) {
let success = false;

// determine string to be copied  
let codeblock = button.parentElement;  
let copyString = codeblock.innerText;  

// copy string to clipboard  
success = copyToClipboard(copyString);  

// temporarily change icon to a checkmark if copy happened  
if (success){  
  // get copy icon size/color  
  let style = window.getComputedStyle(button);  
  var iconSize = style.getPropertyValue('font-size');  
  var iconColor = style.getPropertyValue('color');  

  // change icon to green checkmark  
  while (button.firstChild) button.removeChild(button.lastChild);  
  button.appendChild(checkmark(iconSize));  

  // after short amount of time, change icon back  
  setTimeout(function() {  
    while (button.firstChild) button.removeChild(button.lastChild);  
    button.appendChild(copyIcon(iconSize, iconColor));  
  }, 1000);  
}

}

// add css stylesheet to document
function addStylesheet(){
var styleString = `
code {
position: relative;
}

code .btn {
--bs-btn-padding-x: 0.25rem ! important;
--bs-btn-padding-y: 0 ! important;
}

code .before {
float: right;
}

code .btn:hover {
background-color: rgba(0, 0, 0, 0.3);
color: white;
}
`;
var head = document.querySelector('head');
if (!head) { return; }
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = styleString;
head.appendChild(style);
}

const copyIcon = (size = "16", color = "#000000") => {
const svgNamespace = "http://www.w3.org/2000/svg";

// Create the SVG element  
const svg = document.createElementNS(svgNamespace, "svg");  
svg.setAttribute("xmlns", svgNamespace);  
svg.setAttribute("width", size);  
svg.setAttribute("height", size);  
svg.setAttribute("viewBox", "0 0 20 20");  
svg.setAttribute("fill", "none");  

// Create the path element  
const path = document.createElementNS(svgNamespace, "path");  
path.setAttribute("fill", color);  
path.setAttribute("fill-rule", "evenodd");  
path.setAttribute("d", "M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z");  

// Append the path to the SVG  
svg.appendChild(path);  

return svg;  

return svg;

};

const checkmark = (size = "16", color = "#26a269") => {
const svgNamespace = "http://www.w3.org/2000/svg";

// Create the SVG element  
const svg = document.createElementNS(svgNamespace, "svg");  
svg.setAttribute("xmlns", svgNamespace);  
svg.setAttribute("width", size);  
svg.setAttribute("height", size);  
svg.setAttribute("viewBox", "0 0 16 16");  
svg.setAttribute("fill", "none");  

// create g elements  
const g0 = document.createElementNS(svgNamespace, "g");  
g0.setAttribute("id", "SVGRepo_bgCarrier");  
g0.setAttribute("stroke-width", "0");  

const g1 = document.createElementNS(svgNamespace, "g");  
g1.setAttribute("id", "SVGRepo_tracerCarrier");  
g1.setAttribute("stroke-linecap", "round");  
g1.setAttribute("stroke-linejoin", "round");  
svg.appendChild(g1);  

const g2 = document.createElementNS(svgNamespace, "g");  
g2.setAttribute("id", "SVGRepo_iconCarrier");  

// Create the path element, place in final g element  
const path = document.createElementNS(svgNamespace, "path");  
path.setAttribute("fill", color);  
path.setAttribute("d", "M15.4141 4.91424L5.99991 14.3285L0.585693 8.91424L3.41412 6.08582L5.99991 8.6716L12.5857 2.08582L15.4141 4.91424Z");  
g2.appendChild(path);  
svg.appendChild(g2);  

return svg;

};

addStylesheet();

// add buttons to each code block onscreen
document.querySelectorAll("code").forEach(code => {
// get element properties for the new button to match
let style = window.getComputedStyle(code);
var fontSize = style.getPropertyValue('font-size');
var color = style.getPropertyValue('color');

// create button  
var button = document.createElement('button');  
button.classList.add("btn");  
button.appendChild(copyIcon(fontSize, color));  
button.addEventListener("click", function(event){ buttonHandlerCopy(event.target.parentElement); });  
button.addEventListener("tap", function(event){ buttonHandlerCopy(event.target.parentElement); });  

// place the button at the beginning/end of the code block  
// depending on whether it is a multi-line block or an inline block  
if (code.parentElement.tagName.toLowerCase() == "pre"){  
  // place button at the beginning of the multi-line code block  
  button.classList.add("before");  
  code.insertBefore(button, code.firstChild);  
} else {  
  // place button at the end of the inline code block  
  button.classList.add("after");  
  code.appendChild(button);  
}

});
})();
```