Merge pull request #168 from CloudBytes-Academy/copy

FEAT: Copy to clipboard feature

design/alexis/static/css/style.css

@@ -853,7 +853,7 @@ li code, p code {
 }
 
 .highlight, pre.highlight {
-    padding: 0 1em;
+    padding: 0 0 0 1em;
     line-height: 1.5;
     color: var(--text-color);
     margin-bottom: 1rem;
@@ -2681,4 +2681,38 @@ div.hint p.admonition-title:before, div.tip p.admonition-title:before {
 .tag-wsl, .tag-wsl2 {
     color: #fff;
     background: #0078d7
-}
+}
+
+.codecopy {
+    position: relative;
+    overflow: auto;
+
+    & button.codecopy-btn {
+
+      box-shadow: none;
+      min-height: initial;
+
+      position: absolute;
+      z-index: 1;
+
+      right: 0;
+      top: 0;
+      background-color: var(--gray4);
+      color: var(--gray1);
+      border: none;
+      border-bottom-left-radius: 5px;
+      padding: 0.5rem;
+      &:hover,
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+
+  /* Remove radus when inside liquid_tags.include_code */
+  figure.code
+    > div.highlight:not(:first-child)
+    > div.codecopy
+    > button.codecopy-btn {
+    border-top-right-radius: 0;
+  }

design/alexis/static/js/copy.js

@@ -0,0 +1,52 @@
+const copyToClipboardDefaultText = {
+    innerText: "Copy",
+    ariaLabel: "Copy to clipboard",
+};
+const copyToClipboardSuccessText = {
+    innerText: "Copied!",
+    ariaLabel: "Copied to clipboard",
+};
+
+// Get all pre. But ignore line numbers section
+document.querySelectorAll("div.highlight pre").forEach((snippet) => {
+    // create div.codecopy
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("codecopy");
+
+    // Wrap code inside div.codecopy
+    const parent = snippet.parentNode;
+    parent.replaceChild(wrapper, snippet);
+    wrapper.appendChild(snippet);
+
+    // Create button
+    const button = `
+              <button
+                  class="codecopy-btn"
+                  title=${copyToClipboardDefaultText.ariaLabel}
+                  aria-label=${copyToClipboardDefaultText.ariaLabel}
+              >${copyToClipboardDefaultText.innerText}
+              </button>`;
+
+    // Add button to div.codecopy
+    wrapper.insertAdjacentHTML("afterbegin", button);
+});
+
+// Add copy to clipboard functionality
+const clipboard = new ClipboardJS(".codecopy-btn", {
+    target: (trigger) => {
+        return trigger.parentNode;
+    },
+});
+
+// Show message on success
+clipboard.on("success", (e) => {
+    e.trigger.innerText = copyToClipboardSuccessText.innerText;
+    e.trigger.setAttribute("aria-label", copyToClipboardSuccessText.ariaLabel);
+    e.clearSelection();
+
+    // Reset button text
+    setTimeout(() => {
+        e.trigger.innerText = copyToClipboardDefaultText.innerText;
+        e.trigger.setAttribute("aria-label", copyToClipboardDefaultText.ariaLabel);
+    }, 400);
+});

design/alexis/templates/layouts/base.html

@@ -16,6 +16,7 @@
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
     <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
     <link rel="prefetch" as="script" href="/{{ THEME_STATIC_DIR }}/js/app.js" />
+    <link rel="prefetch" as="script" href="/{{ THEME_STATIC_DIR }}/js/copy.js" />
 
     <!-- Title -->
     <title>{% block title%}{% endblock %}</title>
@@ -52,6 +53,7 @@
 
     <!-- App -->
     <script defer src="/{{ THEME_STATIC_DIR }}/js/app.js"></script>
+    <script defer src="/{{ THEME_STATIC_DIR }}/js/copy.js"></script>
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0503340532690886"
         crossorigin="anonymous"></script>
 </head>
@@ -133,6 +135,8 @@
         {% include "layouts/footer.html" %}
     </footer>
 </body>
+<!-- Code Copy JS-->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
 <!-- Include AlgoliaSearch JS Client and autocomplete.js library -->
 <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>