added copy code button

Author: steven-ja

assets/js/copybutton.js

@@ -28,7 +28,6 @@ function addCopyButtonToCodeBlocks() {
 
 
     // Get all code blocks with a class of "language-*"
-  
     const codeBlocks = document.querySelectorAll(
       'pre > code[class^="language-"]'
     );
@@ -38,35 +37,32 @@ function addCopyButtonToCodeBlocks() {
 
     // For each code block, add a copy button inside a header
     codeBlocks.forEach((codeBlock) => {
-  
       // Get the background color of the code block
       const computedStyle = window.getComputedStyle(codeBlock);
-      const backgroundColor = computedStyle.backgroundColor;
-  
-  
+      // const backgroundColor = computedStyle.backgroundColor;
+      const backgroundColor = "#455F92";
+      
       // Adjust the header color to be significantly lighter or darker than the background color
-  
-      const headerColor = isColorDark(backgroundColor)
-        ? adjustColorBrightness(backgroundColor, 65)
-        : adjustColorBrightness(backgroundColor, -65);  
-      const textColor = isColorDark(backgroundColor) ? "#d1d1d1" : "#606060";
+      // const headerColor = isColorDark(backgroundColor)
+      const headerColor = "#455F92";
+      //   ? adjustColorBrightness(backgroundColor, 65)
+      //   : adjustColorBrightness(backgroundColor, -65);  
+      const textColor = isColorDark(backgroundColor) ? "#e6e6e6" : "#e6e6e6";
 
 
       // Create the header div
 
       const header = document.createElement("div");
 
       header.style.backgroundColor = headerColor;
-  
       header.style.display = "flex";
-  
       header.style.justifyContent = "space-between";
-  
       header.style.alignItems = "center";
       header.style.paddingRight = "0.5rem";
       header.style.paddingLeft = "0.5rem";
-      header.style.borderTopLeftRadius = "5px";
-      header.style.borderTopRightRadius = "5px";
+      header.style.borderTopLeftRadius = "18px";
+      header.style.borderTopRightRadius = "0px";
+      header.style.marginTop = "5px";
 
       header.style.color = textColor;
 
@@ -78,21 +74,13 @@ function addCopyButtonToCodeBlocks() {
       // Create the copy button
 
       const copyButton = document.createElement("button");
-  
       copyButton.classList.add("btn", "copy-code-button");
-  
       copyButton.style.background = "none";
-  
       copyButton.style.border = "none";
-  
       copyButton.style.color = textColor;
-  
       copyButton.style.fontSize = "100%"; // Override the font size
-  
       copyButton.style.cursor = "pointer";
-  
       copyButton.innerHTML = copyIcon;
-  
       copyButton.style.marginLeft = "auto";
 
 

assets/styles/components/misc.scss

@@ -17,7 +17,7 @@
 }
 
 pre {
-  margin: 5px;
+  margin: 2px;
   border-bottom-right-radius: 18px;
 
   & > code {
@@ -79,3 +79,4 @@ html[data-theme='dark'] {
     }
   }
 }
+

public/application.b75fd7db826474d1a95fad8a5aec65f60f4e668ee19f6012e8a4af47b191edd3.css

@@ -16,7 +16,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="/application.48fbd910ec2bdab3c57b60f2698483acf3bb5786ccfa4b11960e2eb1117c6b89.css" integrity="sha256-SPvZEOwr2rPFe2DyaYSDrPO7V4bM&#43;ksRlg4usRF8a4k=" />
+<link rel="stylesheet" href="/application.b75fd7db826474d1a95fad8a5aec65f60f4e668ee19f6012e8a4af47b191edd3.css" integrity="sha256-t1/X24JkdNGpX62KWuxl9g9OZo7hn2AS6KSvR7GR7dM=" />
 
 
 

public/application.css.map

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="/application.48fbd910ec2bdab3c57b60f2698483acf3bb5786ccfa4b11960e2eb1117c6b89.css" integrity="sha256-SPvZEOwr2rPFe2DyaYSDrPO7V4bM&#43;ksRlg4usRF8a4k=" />
+<link rel="stylesheet" href="/application.b75fd7db826474d1a95fad8a5aec65f60f4e668ee19f6012e8a4af47b191edd3.css" integrity="sha256-t1/X24JkdNGpX62KWuxl9g9OZo7hn2AS6KSvR7GR7dM=" />
 
 
 
@@ -1092,5 +1092,5 @@ <h5 class="card-title"></h5>
 
 
 
-    <script src="http://localhost:1313/js/copybutton.min.a48e6828da436de32d10a615cb3004fd3348a7da47c661db91071e2b87a4294a.js" integrity="sha256-pI5oKNpDbeMtEKYVyzAE/TNIp9pHxmHbkQceK4ekKUo=" defer></script>
+    <script src="http://localhost:1313/js/copybutton.min.608f75dc2cc75e4b968d3472ab640b15b0b986a3bf6405a77c92f8eb207e1c16.js" integrity="sha256-YI913CzHXkuWjTRyq2QLFbC5hqO/ZAWnfJL46yB&#43;HBY=" defer></script>
 

public/index.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-<link rel="stylesheet" href="/application.48fbd910ec2bdab3c57b60f2698483acf3bb5786ccfa4b11960e2eb1117c6b89.css" integrity="sha256-SPvZEOwr2rPFe2DyaYSDrPO7V4bM&#43;ksRlg4usRF8a4k=" />
+<link rel="stylesheet" href="/application.b75fd7db826474d1a95fad8a5aec65f60f4e668ee19f6012e8a4af47b191edd3.css" integrity="sha256-t1/X24JkdNGpX62KWuxl9g9OZo7hn2AS6KSvR7GR7dM=" />
 
 
 
@@ -1284,5 +1284,5 @@ <h5 class="text-center ps-3">Table of Contents</h5>
 
 
 
-    <script src="http://localhost:1313/js/copybutton.min.a48e6828da436de32d10a615cb3004fd3348a7da47c661db91071e2b87a4294a.js" integrity="sha256-pI5oKNpDbeMtEKYVyzAE/TNIp9pHxmHbkQceK4ekKUo=" defer></script>
+    <script src="http://localhost:1313/js/copybutton.min.608f75dc2cc75e4b968d3472ab640b15b0b986a3bf6405a77c92f8eb207e1c16.js" integrity="sha256-YI913CzHXkuWjTRyq2QLFbC5hqO/ZAWnfJL46yB&#43;HBY=" defer></script>
 

public/js/copybutton.min.1d27bb725f595a043eea7a624116c855a7e07b513864caaec1dcbe6d38464e1a.js

@@ -1 +1 @@
-{"Target":"application.48fbd910ec2bdab3c57b60f2698483acf3bb5786ccfa4b11960e2eb1117c6b89.css","MediaType":"text/css","Data":{"Integrity":"sha256-SPvZEOwr2rPFe2DyaYSDrPO7V4bM+ksRlg4usRF8a4k="}}
+{"Target":"application.b75fd7db826474d1a95fad8a5aec65f60f4e668ee19f6012e8a4af47b191edd3.css","MediaType":"text/css","Data":{"Integrity":"sha256-t1/X24JkdNGpX62KWuxl9g9OZo7hn2AS6KSvR7GR7dM="}}