// A web component to display a terminal command with a copy button.
// Icons are from https://github.com/lucide-icons/lucide
const copyIcon = ``;
const checkIcon = ``;
// Define custom element, so we can do apt install flatpak
class TerminalCommand extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const commands = this.textContent
.trim()
.split(/\n|\\n/)
.map((command) => command.trim())
.filter(Boolean);
this.innerHTML = "";
const code = document.createElement("code");
code.innerHTML = commands
.map((command) => `$ ${command}`)
.join("\n");
this.appendChild(code);
const button = document.createElement("button");
button.title = "Copy the command to clipboard";
button.innerHTML = copyIcon;
button.addEventListener("click", () => {
navigator.clipboard.writeText(commands.join("\n"));
button.innerHTML = checkIcon;
setTimeout(() => (button.innerHTML = copyIcon), 1000);
});
this.appendChild(button);
}
}
customElements.define("terminal-command", TerminalCommand);