jekyll-theme-centos 0.5.2 → 0.5.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f1bbbe60dfe5485954ba24127364e7672078370e633879245c005d52cf02c7b
-  data.tar.gz: 7b4e9f6f42b03e136dbdd24c9bcde381876bb075ca2238c13bcea53bc5f28659
+  metadata.gz: 389ef72e2745a5d22f12569a4b37a6da193bceac1b6ef5a264becf9a068541df
+  data.tar.gz: 26474f02d482dddcd0754356b08fe927d2787d2af3dff52444e5c5fd19bf1025
 SHA512:
-  metadata.gz: bef11e25482020a3a67b3663c4730e12315a02cafcb76268bf6a6a0d6c4595f7065351a8d0f97c54e91487b585e82adf59d549ef4764bcb2e2b0cd27606d19de
-  data.tar.gz: 8735925790a820f325f8e77dfb5905ffff9b0666e2f712e7db36fcd6edec429e407f4d4b561fcbee6d824b0eab848d49b9e0f8213bb5b39e796a54abc153bb2d
+  metadata.gz: 5f2a4a3a0fdfee2b5249a782b9cc2def54d72cec4ba563f21c9838a18d970f09747705efe7dea68629bc81b91691e9d684a1a1d0a2d9995b29c006fe41fe7455
+  data.tar.gz: 120abf5ca5f499b1a2d4c2847139c29ecd26ae76f733e5cc9f1a35dc647dbec0690227d0ed6ae1bb43e98ad9e4936ea31c21536cdb19f012aa854bdb697c7c7d

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;
+  }
+
+  .copy-code-button {
+    @extend .btn, .btn-dark, .shadow-none;
+    border-radius: 0px;
+    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,18 @@
+// 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");
+      copyCodeButton.blur();
+    }, 2000);
+  });
+});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.5.7
 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