jekyll-theme-centos 0.5.1 → 0.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8bf39e464cb6a246a1ad2f65fcfe940c021cece91ed825ee30dd46156fa6cac8
-  data.tar.gz: 946436eca51a68284388ff2935c2085828cfaf846eb7e205636b9435eca16c8e
+  metadata.gz: 38e2c82abcca2f4a190afa49488fff2a6867968f3a6ec4f0734eeb074b58b1df
+  data.tar.gz: 1a62c27359772f4a7dd8ac25bd94d8dcf9ac7768c2caae3b12bd456c86928737
 SHA512:
-  metadata.gz: e2449152531261982d3e586d0f8203d2911dddb916debb7869e98f6b4f1748c84cd830feae41d134d8cbd8bca2e07118a9cdf96c6ce76d643bfd9dbc7597fbd6
-  data.tar.gz: 2fef55c62f06a42787a62047239793298491503d5643601d5d9aa0929b407699194efb315dd64d7e50aa0171fbbf9423eb0ef44785bc1ac316d120ccc0bb1b20
+  metadata.gz: c7de46e856028d61291c0944f36295a09ea0ddf18714d8b674761da7c56ec1f49f8757ffad724a1a4ed0ad9cefcd9b267a32604802779a7bb86b71e107cfb246
+  data.tar.gz: f63edff0aa3c155855a9e1c4c6264b9c9d8d21328200ef15c8b03c97e039c95a29813596fe5e6df10cee850dbc73cd61c4afe9cb8bf43233750fa144bf146cdf

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/_main.scss

@@ -10,6 +10,7 @@
     &__distributions {
       .btn {
         @extend .btn-primary;
+        width: 100%;
         margin-right: 15px;
         margin-bottom: $paragraph-margin-bottom;
       }
@@ -115,32 +116,34 @@
 }
 
 .search {
-  @include content;
+  &__content {
+    @extend .col-sm-12;
+    @include content;
 
-  .ais-search-box {
-    max-width: 100%;
-    margin-bottom: 15px;
-  }
-  .ais-hits {
-    @include link-list;
-  }
-  .ais-pagination {
-    li {
-      text-decoration: none;
+    .ais-search-box {
+      max-width: 100%;
+      margin-bottom: 15px;
+    }
+    .ais-hits {
+      @include link-list;
+    }
+    .ais-pagination {
+      li {
+        text-decoration: none;
+      }
+    }
+    .ais-Highlight {
+      font-weight: bold;
+      font-style: normal;
+    }
+    .post-breadcrumbs {
+      display: block;
+      font-size: small;
+    }
+    .post-snippet img {
+      display: none;
     }
   }
-  .ais-Highlight {
-    font-weight: bold;
-    font-style: normal;
-  }
-  .post-breadcrumbs {
-    display: block;
-    font-size: small;
-  }
-  .post-snippet img {
-    display: none;
-  }
-
 }
 
 .download {

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,42 @@
+@mixin code-header {
+
+  .code-header {
+    display: flex;
+    justify-content: flex-end;
+    background: $black;
+    padding: 5px;
+  }
+
+  .copy-code-button {
+    @extend .btn, .btn-dark;
+    display: grid;
+    grid-auto-flow: column;
+    align-items: center;
+    grid-column-gap: 4px;
+    border: none;
+    cursor: pointer;
+    background-color: $black;
+    font-size: small;
+
+    &:before {
+      @extend .fas;
+      content: fa-content($fa-var-clipboard);
+    }
+    &:after {
+      content: "Copy";
+      display: block;
+    }
+
+    // This class will be toggled via JavaScript
+    &.copied {
+      &:before {
+        @extend .fas;
+        content: fa-content($fa-var-check);
+        color: $green;
+      }
+      &:after {
+        content: "Copied!";
+      }
+    }
+  }
+}

data/_sass/centos/mixins/_content.scss

@@ -4,6 +4,7 @@
   padding: 2.75rem;
   margin-top: -120px;
   min-height: 430px;
+  box-shadow: 0px -2px 3px 0px rgba(50, 50, 50, 0.25);
 
   h1, h2, h3, h4, h5, h6 {
     scroll-margin-top: $scroll-margin-top + 2.5;
@@ -69,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,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.6
 platform: ruby
 authors:
 - Alain Reguera Delgado
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-10 00:00:00.000000000 Z
+date: 2021-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -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