jekyll-theme-centos 0.5.4 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c8b3903dfafcdfc16621eb04c60b5318324da9f098d0fd6f98ba2e2d0755f59
-  data.tar.gz: 4ee8e670151a2ada4e46f958905ca29e5f85294cb39108b5f84b63cd765bd8f6
+  metadata.gz: 27f828d8ef0af0325b4b9d2c40feef81d414bb3712a7c7c37fd5aefda4a7904b
+  data.tar.gz: 11e18543e0b7210023a7524e5407afa7b95ed7c21497a2091dad647bbc372654
 SHA512:
-  metadata.gz: 1cda7eb97f4ed171ffaaf9589101eed578731780994e1ed843d9e72a3321b262166002ba9a2c5ad7a2550995317118296814b66ffa6f681236f7ce897e63d712
-  data.tar.gz: 41721c53396948ded2cadb065c0d6fcfc8241e826d476d7fe5f945d6b6835b78b2b2c6367e045bd239e907993db4b92a7cfbabe2ca7e5731f5d22ffa2b696a81
+  metadata.gz: 6bbb77c8c4a14bd8febc828b03f02dae1af36c14b43c0253e3bbf84bc8da7d1f586d721492b32efcd010962ecceae96a3986b567b97361d0d8605271b217e3c3
+  data.tar.gz: 5128068a4ad8532b86e24130a5e876878f74da7eb71d393bbc996694086a871bec3fb304853ba1a2217a305df99e036c7e221da13db369d9c760ed89c34b59ae

data/_includes/page/code-header.html

@@ -0,0 +1,4 @@
+<div class="code-header">
+    <button class="copy-code-button" aria-label="Copy code to clipboard"></button>
+</div>
+

data/_layouts/default.html

@@ -14,6 +14,7 @@
 
   <script src="/assets/js/jquery.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
+  <script src="/assets/js/copycode.js"></script>
 </body>
 
 </html>

data/_sass/centos/_mixins.scss

@@ -2,5 +2,6 @@
 @import "mixins/_content-nav";
 @import "mixins/_aside-nav";
 @import "mixins/_link-list";
+@import "mixins/_code-header";
 
 @import "mixins/_post-nav-explorer"

data/_sass/centos/mixins/_code-header.scss

@@ -0,0 +1,47 @@
+@mixin code-header {
+
+  .code-header {
+    display: flex;
+    justify-content: flex-end;
+    background: $black;
+  }
+
+  .copy-code-button {
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    grid-column-gap: 4px;
+    border: none;
+    cursor: pointer;
+    background: $black;
+    color: $white;
+    font-size: small;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &:before {
+      @extend .fas;
+      content: fa-content($fa-var-clipboard);
+    }
+    &:after {
+      content: "Copy";
+      display: block;
+    }
+
+    // This class will be toggled via JavaScript
+    &.copied {
+      opacity: 1;
+      &:before {
+        @extend .fas;
+        content: fa-content($fa-var-check);
+        color: $green;
+      }
+      &:after {
+        content: "Copied!";
+      }
+    }
+  }
+}

data/_sass/centos/mixins/_content.scss

@@ -70,4 +70,5 @@
     margin-bottom: $line-height-base * 1em;
   }
 
+  @include code-header;
 }

data/assets/js/copycode.js

@@ -0,0 +1,17 @@
+// Thanks Aleksandr
+// https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/
+const codeBlocks = document.querySelectorAll(".code-header + .highlighter-rouge");
+const copyCodeButtons = document.querySelectorAll(".copy-code-button");
+
+copyCodeButtons.forEach((copyCodeButton, index) => {
+  const code = codeBlocks[index].innerText;
+
+  copyCodeButton.addEventListener("click", () => {
+    window.navigator.clipboard.writeText(code);
+    copyCodeButton.classList.add("copied");
+
+    setTimeout(() => {
+      copyCodeButton.classList.remove("copied");
+    }, 2000);
+  });
+});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.5.4
+  version: 0.5.5
 platform: ruby
 authors:
 - Alain Reguera Delgado
@@ -97,6 +97,7 @@ files:
 - _includes/page/alert-info.html
 - _includes/page/alert-success.html
 - _includes/page/alert-warning.html
+- _includes/page/code-header.html
 - _includes/page/figure.html
 - _includes/page/video.html
 - _includes/post-nav-explorer.html
@@ -217,6 +218,7 @@ files:
 - _sass/centos/centos.scss
 - _sass/centos/fonts/_montserrat.scss
 - _sass/centos/mixins/_aside-nav.scss
+- _sass/centos/mixins/_code-header.scss
 - _sass/centos/mixins/_content-nav.scss
 - _sass/centos/mixins/_content.scss
 - _sass/centos/mixins/_link-list.scss
@@ -335,6 +337,7 @@ files:
 - assets/img/post.png
 - assets/js/bootstrap.min.js
 - assets/js/bootstrap.min.js.map
+- assets/js/copycode.js
 - assets/js/dataTables.bootstrap4.min.js
 - assets/js/instantsearch.min.js
 - assets/js/jquery.dataTables.min.js