fix #1221

changelog.adoc

@@ -17,6 +17,8 @@ and this project tries to adhere to https://semver.org/spec/v2.0.0.html[Semantic
 
 === added
 
+* https://github.com/docToolchain/docToolchain/issues/1230[#1230 generateSite: copy to clipboard]
+
 === changed
 
 == 3.0.0-rc1 - 2023-07-13

src/docs/010_manual/20_install.adoc

@@ -10,6 +10,8 @@ include::../_feedback.adoc[]
 
 == Installation Overview
 
+icon:copy[] icon:clipboard[] icon:tags[]
+
 docToolchain is composed of two parts:
 
 - `doctoolchain` which is the toolchain used to create your documentation

src/site/assets/js/copy-n-paste.js

@@ -4,11 +4,16 @@ document.addEventListener('DOMContentLoaded', function() {
 
     copyDivs.forEach(div => {
         // Create a button
-        const btn = document.createElement('i');
-        btn.classList.add(['fa-light', 'fa-clipboard'])
-
+        const span = document.createElement('span')
+        span.classList.add('icon')
+
+        const icon = document.createElement('i');
+        icon.classList.add('fa')
+        icon.classList.add('fa-clipboard')
+        span.appendChild(icon)
+
         // Add click event to the button
-        btn.addEventListener('click', async function() {
+        icon.addEventListener('click', async function() {
             try {
                 await copyTableToClipboard(div);
                 alert('Code copied to clipboard!');
@@ -18,12 +23,12 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         // Append the button to the div
-        div.appendChild(btn);
+        div.appendChild(span);
     });
 });
 
 async function copyTableToClipboard(listingblock) {
-    const code = listingblock.querySelector('div.content').innerText;
+    const code = listingblock.querySelector('div.content').innerText+"\n";
     const blob = new Blob([code], { type: 'text/plain' });
     const data = [new ClipboardItem({ 'text/plain': blob })];
     await navigator.clipboard.write(data);

src/site/templates/header.gsp

@@ -152,5 +152,24 @@
     }
     </style>
 
-
+    <!-- copy-n-paste.js -->
+    <style>
+        div.listingblock {
+            position: relative;
+        }
+        div.listingblock > span.icon {
+            position: absolute;
+            top: 2px;
+            right: 6px;
+            visibility: hidden;
+            z-index: 2;
+            cursor: pointer;
+        }
+        div.listingblock:hover > span.icon {
+            visibility: visible;
+        }
+        div.listingblock div.content pre {
+            margin: 0;
+        }
+    </style>
 </head>