[docs] Better copy code button

docs/assets/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#fff" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>

docs/assets/docsify-init.js

@@ -29,6 +29,8 @@ const oldProBadge = "<i class='badge badge-pro'></i>";
 
 const configRegex = /^\* `([^`]+)`:/gm;
 
+const copyCodeBtn = '<button class="copy-code" title="Copy code"></button>';
+
 const defaultVersions = [["latest", "latest"]];
 
 const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
@@ -148,6 +150,36 @@ const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
           // Docsify cuts off "target" sometimes
           const links = Docsify.dom.findAll("a.badge");
           links.forEach(l => { l.setAttribute("target", "_blank") });
+
+          const codeBlocks = Docsify.dom.findAll('pre[data-lang]');
+          codeBlocks.forEach(elm =>
+            elm.insertAdjacentHTML('beforeend', copyCodeBtn));
+        })
+
+        hook.mounted(() => {
+          const content = Docsify.dom.find('.content');
+
+          content.addEventListener('click', function(e) {
+            if (!e.target.classList.contains('copy-code'))
+              return;
+
+            const btn = e.target;
+            const code = Docsify.dom.find(btn.parentNode, 'code');
+
+            navigator.clipboard.writeText(code.innerText).then(() => {
+              btn.classList.add('copy-code-success');
+              setTimeout(() => {
+                btn.classList.remove('copy-code-success');
+              }, 1500);
+            }).catch((err)  =>{
+              console.log(`Can't copy code: ${err}`);
+
+              btn.classList.add('copy-code-error');
+              setTimeout(() => {
+                btn.classList.remove('copy-code-error');
+              }, 1500);
+            });
+          });
         })
       }
     ])

docs/assets/style.css

@@ -38,8 +38,6 @@
   --sidebar-width: 20rem;
   --sidebar-nav-link-before-content-l3: "";
 
-  --copycode-background: linear-gradient(0deg, #1d40b2, #1680d6);
-
   --table-row-even-background: var(--base-background-color);
 
   --selection-color: rgba(255, 255, 255, 0.3);
@@ -90,27 +88,63 @@
 .markdown-section pre[data-lang] {
   border: 2px solid var(--white-20);
 }
-.markdown-section pre[data-lang]:hover {
-  border: 2px solid var(--theme-color);
+.markdown-section pre[data-lang]::after {
+  display: none;
 }
 
-body .docsify-copy-code-button {
-  transition: none;
+.copy-code {
+  appearance: none;
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  border: none;
+  padding: 0;
+  background: none;
+  background-image: url(/assets/copy.svg);
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 0.8;
 }
-body .docsify-copy-code-button,
-body .docsify-copy-code-button::after {
-  border-radius: 0;
+.copy-code:hover {
+  opacity: 1;
 }
-body .docsify-copy-code-button span {
-  background: none;
+.copy-code::before {
+  content: "";
+  position: absolute;
+  display: block;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 16px;
+  height: 16px;
+  left: 0;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+}
+.copy-code-success {
+  background-image: url(/assets/check.svg);
+  opacity: 1;
 }
-body .docsify-copy-code-button .success {
+.copy-code-success::before {
+  content: "Copied!";
   color: #77b33a;
-  font-weight: bold;
 }
-body .docsify-copy-code-button .error {
+.copy-code-error {
+  background-image: url(/assets/cross.svg);
+  opacity: 1;
+}
+.copy-code-error::before {
+  content: "Can't copy";
   color: #e65855;
-  font-weight: bold;
+}
+.copy-code-success::before,
+.copy-code-error::before {
+  padding-right: 8px;
+  transform: translate3d(-100%, -50%, 0);
+  transition: transform .2s;
 }
 
 .loading {
@@ -199,7 +233,7 @@ i.icon-cross::after {
   position: fixed;
   bottom: 0;
   right: 1em;
-  background: var(--copycode-background);
+  background: linear-gradient(0deg, #1d40b2, #1680d6);
   color: var(--base-color) !important;
   text-decoration: none !important;
   font-size: .8em;

docs/index.html

@@ -53,7 +53,6 @@
   <script src="/assets/docsify.search.min.20230513.js"></script>
   <script src="//unpkg.com/docsify-namespaced@0.1.1/dist/docsify-namespaced.min.js"></script>
   <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
-  <script src="//unpkg.com/docsify-copy-code@2"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
 
   <script src="/assets/docsify-init.js"></script>