nulang/docs/src/components/CopyMarkdown.astro at main · ghzhost/nulang · GitHub

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
---
// CopyMarkdown.astro — Copy Markdown button for doc pages, floats to the right
---

<button id="copy-markdown-btn" class="copy-markdown-btn" type="button">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
  </svg>
  Copy Markdown
</button>


<style>
  .copy-markdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sl-color-gray-2);
    background: var(--sl-color-bg-inline-code);
    border: 1px solid var(--sl-color-hairline);
    border-radius: 0.5rem;
    cursor: pointer;
    float: right;
    margin: 0 0 1rem 1.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .copy-markdown-btn:hover {
    background: var(--sl-color-accent);
    color: #ffffff;
    border-color: var(--sl-color-accent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  }
  .copy-markdown-btn.copied {
    background: var(--nu-orange);
    color: #ffffff;
    border-color: var(--nu-orange);
  }
</style>

<script>
  const button = document.getElementById('copy-markdown-btn');
  if (button) {
    button.addEventListener('click', async () => {
      try {
        const path = location.pathname.replace(/\/$/, '') + '.md';
        const res = await fetch(path);
        if (!res.ok) return;
        await navigator.clipboard.writeText(await res.text());
        button.classList.add('copied');
        const originalHTML = button.innerHTML;
        button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
        setTimeout(() => { button.classList.remove('copied'); button.innerHTML = originalHTML; }, 2000);
      } catch {
        // Clipboard/fetch unavailable — no-op
      }
    });
  }
</script>