Start working on the copy-code

_includes/code.html

@@ -0,0 +1,23 @@
+<!-- https://www.aleksandrhovhannisyan.com/blog/dev/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/ -->
+<div class="code-header">
+    {% if include.file %}
+    <div class="file-name-container">
+        <span class="file-name"
+            aria-label="File name: {{ include.file }}">
+            {{ include.file }}
+        </span>
+    </div>
+    {% endif %}
+    {% unless include.copyable == false %}
+    <div class="copy-code-container">
+        <button class="copy-code-button"
+                aria-label="Copy code block to your clipboard"
+                data-code="{{ include.code | escape }}"
+                onclick="copyCode"
+        ></button>
+    </div>
+    {% endunless %}
+</div>
+```{{ include.lang }}
+{{ include.code }}
+```

_includes/head.html

@@ -30,6 +30,7 @@
     <script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | absolute_url }}"></script>
   {% endif %}
   <script type="text/javascript" src="{{ '/assets/js/java-boot-camp.js' | absolute_url }}"></script>
+  <script type="text/javascript" src="{{ '/assets/js/copy-code.js' | absolute_url }}"></script>
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 

_layouts/default.html

@@ -27,6 +27,7 @@
       <footer class="site-footer">
         <p class="text-small text-grey-dk-000 mb-4"><a href="https://docs.oracle.com/javase/specs/">Java Language Specification</a></p>
         <p class="text-small text-grey-dk-000 mb-4"><a href="https://learning.oreilly.com/library/view/effective-java-3rd/9780134686097/">Effective Java</a></p>
+        <p class="text-small text-grey-dk-000 mb-4"><a href="https://github.com/albertattard/java-boot-camp-blueprint">Blueprint Project</a></p>
       </footer>
     </div>
     <div class="main-content-wrap js-main-content" tabindex="0">

_sass/custom/copy-code.scss

@@ -0,0 +1,75 @@
+.code-header {
+  display: flex;
+  background-color: #3b3b3b;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding: 12px 20px;
+  margin-bottom: calc(-1 * calc(1em + 0.5vw) + -1px);
+  margin-top: 0.5em;
+  z-index: 2;
+}
+
+.code-header .file-name-container {
+  display: flex;
+  align-items: center;
+  flex: 2;
+  justify-content: flex-start;
+}
+
+.code-header .file-name {
+  color: #bcbcbc;
+  font-size: 1.1em;
+  font-weight: 400;
+  font-family: monospace, monospace;
+  margin: 0;
+  padding-bottom: 1em;
+  word-break: break-all;
+  transition: color ease 0.3s;
+}
+
+.copy-code-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 1.5em;
+}
+
+.copy-code-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  background-color: #616161;
+  color: #e7e7e7;
+  padding: 0.4em 0.5em;
+  border-radius: 5px;
+
+  &::before {
+    content: "Copy";
+  }
+
+  &::after {
+    margin-left: 4px;
+    content: "📋";
+    width: 1em;
+  }
+
+  // This class will be toggled via JavaScript
+  &.copied {
+    &::before {
+      content: "Copied!";
+    }
+
+    &::after {
+      content: "✔️";
+    }
+  }
+}
+
+.copy-code-button:hover {
+  color: black;
+  background-color: #adadad;
+}

assets/css/dark-mode-preview.scss

@@ -38,8 +38,10 @@ $logo: "{{ site.logo | absolute_url }}";
 @import "./tables";
 @import "./code";
 @import "./utilities/utilities";
+@import "./overrides";
 
 //
 // Import custom overrides
 //
 @import "./custom/custom";
+@import "./custom/copy-code";

assets/css/java-boot-camp.scss

@@ -20,12 +20,6 @@ $logo: "{{ site.logo | absolute_url }}";
 // Support
 @import "./support/support";
 
-//
-// Import custom overrides
-//
-
-@import "./custom/custom";
-
 //
 // Import custom color scheme scss
 //
@@ -47,3 +41,9 @@ $logo: "{{ site.logo | absolute_url }}";
 @import "./code";
 @import "./utilities/utilities";
 @import "./overrides";
+
+//
+// Import custom overrides
+//
+@import "./custom/custom";
+@import "./custom/copy-code";

assets/js/copy-code.js

@@ -0,0 +1,23 @@
+const copyCode = (clickEvent) => {
+    console.log("clicked...")
+    // const copyCodeButton = clickEvent.target;
+    // const tempTextArea = document.createElement('textarea');
+    // tempTextArea.textContent = copyCodeButton.getAttribute('data-code');
+    // document.body.appendChild(tempTextArea);
+    //
+    // const selection = document.getSelection();
+    // selection.removeAllRanges();
+    // tempTextArea.select();
+    // document.execCommand('copy');
+    // selection.removeAllRanges();
+    // document.body.removeChild(tempTextArea);
+    //
+    // copyCodeButton.classList.add('copied');
+    // setTimeout(() => {
+    //     copyCodeButton.classList.remove('copied');
+    // }, 2000);
+};
+
+// document.querySelectorAll('.copy-code-button').forEach((copyCodeButton) => {
+//     copyCodeButton.addEventListener('click', copyCode);
+// });