improved copy button

Valkyrie00 · Mar 1, 2025 · 43da8bc · 43da8bc
1 parent 52a40d3
commit 43da8bc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -69,7 +69,7 @@ <h2>Installation</h2>
                                     <h5>Install Bold Brew</h5>
                                 </div>
                                 <div class="code-block">
-                                    <pre><code>brew install Valkyrie00/homebrew-bbrew/bbrew</code></pre>
+                                    <pre><code><span class="prompt">></span> brew install Valkyrie00/homebrew-bbrew/bbrew</code></pre>
                                     <button class="copy-btn" onclick="copyToClipboard(this)">
                                         <span class="copy-icon">⧉</span>
                                         <span class="copy-text">Copy</span>
@@ -84,7 +84,7 @@ <h5>Install Bold Brew</h5>
                                     <h5>Run Bold Brew</h5>
                                 </div>
                                 <div class="code-block">
-                                    <pre><code>bbrew</code></pre>
+                                    <pre><code><span class="prompt">></span> bbrew</code></pre>
                                     <button class="copy-btn" onclick="copyToClipboard(this)">
                                         <span class="copy-icon">⧉</span>
                                         <span class="copy-text">Copy</span>
@@ -301,9 +301,10 @@ <h5>Where can I report issues or request features?</h5>
 <script>
 function copyToClipboard(button) {
     const preEl = button.parentElement.querySelector('pre');
-    const textToCopy = preEl.textContent;
+    const codeText = preEl.textContent;
+    const cleanText = codeText.replace(/^>\s/, '');
 
-    navigator.clipboard.writeText(textToCopy).then(() => {
+    navigator.clipboard.writeText(cleanText).then(() => {
         const copyText = button.querySelector('.copy-text');
         copyText.textContent = 'Copied!';
 

diff --git a/docs/styles.css b/docs/styles.css
@@ -54,7 +54,7 @@ footer a:hover {
     left: 0;
     right: 0;
     bottom: 0;
-    background: url('assets/grid-pattern.png') repeat;
+    /*background: url('assets/grid-pattern.png') repeat;*/
     opacity: 0.05;
     z-index: 0;
 }
@@ -254,6 +254,13 @@ footer a:hover {
     overflow: hidden;
 }
 
+.code-block .prompt {
+    color: #4EA1FF;
+    margin-right: 8px;
+    font-weight: bold;
+    user-select: none;
+}
+
 .code-block pre {
     background-color: #0A1622;
     border: 1px solid #1E3449;