-
Notifications
You must be signed in to change notification settings - Fork 95
Expand file tree
/
Copy pathcommand.js
More file actions
39 lines (33 loc) · 1.66 KB
/
command.js
File metadata and controls
39 lines (33 loc) · 1.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// A web component to display a terminal command with a copy button.
// Icons are from https://github.com/lucide-icons/lucide
const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
// Define custom element, so we can do <terminal-command>apt install flatpak</terminal-command>
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) => `<span class="unselectable">$</span> ${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);