feat(code): add copy button for code (#239)

assets/css/_core/_base.scss

@@ -33,6 +33,7 @@ body {
   background-color: $global-background-color;
   color: $global-font-color;
   overflow-wrap: break-word;
+  scrollbar-color: auto;
 
   &.dark {
     color: $global-font-color-dark;

assets/css/_mixin/_compatibility.scss

@@ -41,8 +41,8 @@
   display: -webkit-box;
   display: box;
 
-  -moz-box-orient: $orient;
   -webkit-box-orient: $orient;
+  -moz-box-orient: $orient;
   box-orient: $orient;
 }
 
@@ -67,3 +67,21 @@
     color: $color;
   }
 }
+
+@mixin max-content($property) {
+  #{$property}: -webkit-max-content;
+  #{$property}: -moz-max-content;
+  #{$property}: intrinsic;
+  #{$property}: max-content;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+@mixin appearance($value) {
+  -moz-appearance: $value;
+  -webkit-appearance: $value;
+}

assets/css/_page/_single.scss

@@ -339,17 +339,10 @@
       }
     }
 
-    .version {
-      img {
-        min-height: 1.2rem;
-        vertical-align: sub;
-      }
-
-      &.small {
-        img {
-          min-height: 1rem;
-        }
-      }
+    .version img {
+      min-height: 1.2rem;
+      height: 1.2rem;
+      vertical-align: text-bottom;
     }
   }
 

assets/css/_partial/_single/_code.scss

@@ -1,12 +1,52 @@
 code {
   font-size: $code-font-size;
   font-family: $code-font-family;
-  padding: .2rem .4rem;
   color: $code-color;
 
+  img, .version img {
+    min-height: 1.1 * $code-font-size;
+    height: 1.1 * $code-font-size;
+  }
+
   .dark & {
     color: $code-color-dark;
   }
+
+  &:not(.block) {
+    padding: .2rem .4rem;
+  }
+}
+
+pre {
+  position: relative;
+  margin: 0;
+  padding: .25rem 0 .25rem .5rem;
+  @include tab-size(4);
+
+  .copy-button {
+    font-size: $code-font-size;
+    line-height: $code-font-size;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .3rem .5rem;
+    color: $code-info-color;
+    background: darken($code-background-color, 3%);
+
+    .dark & {
+      color: $code-info-color-dark;
+      background: darken($code-background-color-dark, 3%);
+    }
+  }
+
+  .copy-button:hover, .copy-button:focus {
+    cursor: pointer;
+    color: $global-link-hover-color;
+
+    .dark & {
+      color: $global-link-hover-color-dark;
+    }
+  }
 }
 
 code, pre, .highlight table, .highlight tr, .highlight td {
@@ -17,17 +57,26 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma {
-  margin: .5rem 0;
-
-  code, pre {
+.highlight > .chroma, .gist {
+  table, tr, td {
     margin: 0;
     padding: 0;
+    border: none !important;
+    white-space: nowrap;
+  }
+}
+
+.highlight > .chroma {
+  position: relative;
+  margin: .5rem 0;
+
+  pre {
+    position: unset;
   }
 
   &::before {
     display: block;
-    padding: .2rem .4rem;
+    padding: .3rem .4rem;
     font-family: $global-font-family;
     font-weight: bold;
     color: $code-info-color;
@@ -46,20 +95,25 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     }
   }
 
-  .ln {
-    padding-right: .8rem;
+  .lntd:last-child {
+    width: 100%;
+
+    pre {
+      padding-left: .75rem;
+      @include max-content(min-width);
+    }
   }
 
-  .lntd {
-    &:last-child {
-      .hl {
-        display: block;
-        background-color: darken($code-background-color, 5%);
+  .ln {
+    padding-right: .75rem;
+  }
 
-        .dark & {
-          background-color: darken($code-background-color-dark, 5%);
-        }
-      }
+  .hl {
+    display: block;
+    background-color: darken($code-background-color, 10%);
+
+    .dark & {
+      background-color: darken($code-background-color-dark, 5%);
     }
   }
 
@@ -96,18 +150,6 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma, .gist {
-  table, tr, td {
-    margin: 0;
-    border: none !important;
-    white-space: nowrap;
-  }
-
-  td {
-    padding: .2rem .4rem;
-  }
-}
-
 .gist {
   .gist-file, .gist-data, .gist-meta {
     border: none;

assets/css/_variables.scss

@@ -82,7 +82,7 @@ $search-background-color-dark: #363636 !default;
 // ========== Single Content ========== //
 // Font size of the TOC
 $toc-title-font-size: 1.2rem !default;
-$toc-content-font-size: 0.9rem !default;
+$toc-content-font-size: 1rem !default;
 
 // Color of the single link
 $single-link-color: #2d96bd !default;
@@ -124,7 +124,7 @@ $code-info-color: #b1b0b0 !default;
 $code-info-color-dark: #b1b0b0 !default;
 
 // Font size of the code
-$code-font-size: 13px !default;
+$code-font-size: .875rem !default;
 
 // Font family of the code
 $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace !default;

assets/lib/VERSION

@@ -6,9 +6,10 @@ smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll
 autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
 lunr.js@2.3.8 https://lunrjs.com/
 algoliasearch@4.1.0 https://github.com/algolia/algoliasearch-client-javascript
-sharer@0.4.0 https://github.com/ellisonleao/sharer.js
 lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
 lightgallery.js@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
+clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
+sharer@0.4.0 https://github.com/ellisonleao/sharer.js
 typeit@6.5.1 https://github.com/alexmacarthur/typeit
 katex@0.11.1 https://katex.org/
 mermaid@8.4.8 https://github.com/knsv/mermaid

assets/lib/polyfill.yml

@@ -10,3 +10,4 @@ theme:
   - Object.values
   - Promise
   - fetch
+  - Element.prototype.after

assets/svg/version.template.svg

@@ -0,0 +1,19 @@
+{{- /* https://img.shields.io/badge/$label-$version-$color?style=flat-square&labelColor=403c3d */ -}}
+{{- $labelLength := strings.RuneCount .label | mul 60 | add 120 -}}
+{{- $versionLength := strings.RuneCount .version | mul 60 -}}
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ add $labelLength $versionLength | add 200 | mul 0.1 }}" height="20">
+    <g shape-rendering="crispEdges">
+        {{- $x1 := add $labelLength 100 | mul 0.1 -}}
+        {{- $x2 := add $versionLength 100 | mul 0.1 -}}
+        <path fill="#403c3d" d="M0 0h{{ $x1 }}v20H0z"/>
+        <path fill="#{{ .color }}" d="M{{ $x1 }} 0h{{ $x2 }}v20H{{ $x1 }}z"/>
+    </g>
+    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
+        <text x="{{ div $labelLength 2 | add 60 }}" y="140" textLength="{{ $labelLength }}" transform="scale(.1)">
+            {{- .label -}}
+        </text>
+        <text x="{{ div $versionLength 2 | add $labelLength | add 140 }}" y="140" textLength="{{ $versionLength }}" transform="scale(.1)">
+            {{- .version -}}
+        </text>
+    </g>
+</svg>