Copy-to-clipboard button

<div class="copy-row">
  <code id="install-command">npm create astro@latest</code>
  <button class="copy" type="button" data-copy-target="#install-command" aria-label="Copy command">
    <svg viewBox="0 0 24 24" class="icon-copy" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg>
    <svg viewBox="0 0 24 24" class="icon-check" aria-hidden="true"><path d="m5 12 4.5 4.5L19 7"/></svg>
  </button>
  <span class="copy-status" role="status"></span>
</div>

.copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.copy-row code { font: 14px ui-monospace, Menlo, monospace; }

.copy {
  position: relative;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--fg);
  display: grid;
  place-items: center;
}

/* Both icons sit on top of each other; the "done" class swaps which one shows. */
.copy svg {
  position: absolute;
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}

/* The check starts hidden and "undrawn" (its stroke is offset by its own length). */
.icon-check {
  opacity: 0;
  transform: scale(0.4);
  color: #12a150;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.copy.done .icon-copy { opacity: 0; transform: scale(0.4); }
.copy.done .icon-check {
  opacity: 1;
  transform: none;
  stroke-dashoffset: 0;  /* draws the check */
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s, stroke-dashoffset 0.4s 0.1s;
}

/* Screen-reader-only status text ("Copied"). */
.copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

// Copy button: copies the text of the element named in `data-copy-target`,
// then shows a check mark for a moment.

const confirmationTime = 1500; // ms the check mark stays visible

document.querySelectorAll('[data-copy-target]').forEach((button) => {
  const source = document.querySelector(button.dataset.copyTarget);
  const status = button.parentElement.querySelector('.copy-status');

  button.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(source.textContent);
      if (status) status.textContent = 'Copied';
    } catch {
      // Clipboard blocked (old browser, insecure page, locked-down iframe):
      // select the text instead, so Cmd/Ctrl+C still works.
      getSelection().selectAllChildren(source);
      if (status) status.textContent = 'Text selected. Press Ctrl+C to copy.';
    }

    button.classList.add('done');
    setTimeout(() => {
      button.classList.remove('done');
      if (status) status.textContent = '';
    }, confirmationTime);
  });
});