LadrillosJS/samples/apps/docs/codeblock.html at main · drubiodev/LadrillosJS · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<style>
  :host {
    display: block;
    margin: 1em 0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  }

  .code-container {
    background: #282c34;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-width: 800px;
  }

  .code-header {
    background: #21252b;
    color: #ffffff;
    padding: 0.5em 1em;
    font-size: 0.875em;
    border-bottom: 1px solid #3a3f4b;
    position: relative; /* allow absolutely‑positioned button */
  }

  .copy-button {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #61dafb;
    cursor: pointer;
    font-size: 0.875em;
  }

  pre {
    margin: 0;
    padding: 1em;
    overflow: auto;
  }
</style>

<div class="code-container">
  <div class="code-header">
    {filename}
    <button class="copy-button" onclick="copyCode">Copy</button>
  </div>
  <pre><code id="code" class="language-html"></code></pre>
</div>

<slot></slot>

<script>
  const codeElement = this.querySelector("pre code");
  const innerRe = /(?<=<template\b[^>]*>)[\s\S]*?(?=<\/template>)/gi;
  const html = this.innerHTML.match(innerRe);
  codeElement.textContent = html;
  hljs.highlightElement(codeElement);

  const slotEl = this.querySelector("slot");
  if (slotEl) slotEl.remove();

  const copyCode = () => {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard
        .writeText(html)
        .then(() =>
          this.emit("copied", { message: "Code copied to clipboard!" })
        )
        .catch((err) => console.error("Clipboard API failed:", err));
    }

    // iOS / fallback for older browsers
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "absolute";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();

    try {
      document.execCommand("copy");
      this.emit("copied", { message: "Code copied to clipboard!" });
    } catch (err) {
      console.error("execCommand fallback failed:", err);
    }

    document.body.removeChild(textarea);
  };
</script>