feat: copy to clipboard for code blocks

_config.yml

@@ -176,6 +176,9 @@ analytics:
     tracking_id : # Google Analytics id for the site
     anonymize_ip: false # Anonymize IP tracking for Analytics
 
+## => Clipboard
+##############################
+clipboard: false
 
 ## => Build
 ##############################

_data/variables.yml

@@ -11,6 +11,7 @@ default:
   mathjax_autoNumber: false
   mermaid: false
   chart: false
+  clipboard: false
   toc:
     selectors: 'h1,h2,h3'
   sources: bootcdn
@@ -51,6 +52,7 @@ sources:
     valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available
     mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
     mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js'
+    clipboard: 'https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'
   unpkg:
     font_awesome: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css'
     jquery: 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
@@ -62,3 +64,4 @@ sources:
     valine: 'https//unpkg.com/valine/dist/Valine.min.js'
     mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
     mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js'
+    clipboard: 'https://unpkg.com/clipboard@2/dist/clipboard.min.js'

_includes/clipboard.html

@@ -0,0 +1,4 @@
+{%- include snippets/get-sources.html -%}
+{%- assign _sources = __return -%}
+
+<script type="text/javascript" src='{{ _sources.clipboard }}'></script>

_includes/copy-to-clipboard.html

@@ -0,0 +1,8 @@
+{%- include snippets/assign.html target=site.data.variables.default.clipboard
+  source0=site.clipboard source1=page.clipboard -%}
+{%- if __return == true -%}
+  {%- include clipboard.html -%}
+<script async>
+  {%- include scripts/lib/copy-to-clipboard.js -%}
+</script>
+{%- endif -%}

_includes/scripts/lib/copy-to-clipboard.js

@@ -0,0 +1,52 @@
+(function() {
+	var snippets = document.querySelectorAll('pre');
+	[].forEach.call(snippets, function(snippet) {
+		if (snippet.closest('.copyable') !== null) {
+			snippet.firstChild.insertAdjacentHTML('beforebegin', '<button class="btn" data-clipboard-snippet><i class="far fa-copy"></i></button>');
+		}
+	});
+	var clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
+		target: function(trigger) {
+			return trigger.nextElementSibling;
+		}
+	});
+	clipboardSnippets.on('success', function(e) {
+		e.clearSelection();
+		showTooltip(e.trigger, 'Copied!');
+	});
+	clipboardSnippets.on('error', function(e) {
+		showTooltip(e.trigger, fallbackMessage(e.action));
+	});
+
+	var btns = document.querySelectorAll('.btn');
+	for (var i = 0; i < btns.length; i++) {
+		btns[i].addEventListener('mouseleave', clearTooltip);
+		btns[i].addEventListener('blur', clearTooltip);
+		btns[i].addEventListener('mouseenter', function(e) {
+			showTooltip(e.currentTarget, "copy to clipboard")
+		}, false);
+	}
+
+	function clearTooltip(e) {
+		e.currentTarget.setAttribute('class', 'btn');
+		e.currentTarget.removeAttribute('aria-label');
+	}
+
+	function showTooltip(elem, msg) {
+		elem.setAttribute('class', 'btn tooltipped tooltipped-s');
+		elem.setAttribute('aria-label', msg);
+	}
+
+	function fallbackMessage(action) {
+		var actionMsg = '';
+		var actionKey = (action === 'cut' ? 'X' : 'C');
+		if (/iPhone|iPad/i.test(navigator.userAgent)) {
+			actionMsg = 'No support :(';
+		} else if (/Mac/i.test(navigator.userAgent)) {
+			actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
+		} else {
+			actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
+		}
+		return actionMsg;
+	}
+})();

_layouts/page.html

@@ -268,3 +268,4 @@
 
 {%- include markdown-enhancements.html -%}
 {%- include pageview.html -%}
+{%- include copy-to-clipboard.html -%}

_sass/additional/_copy-to-clipboard.scss

@@ -0,0 +1,93 @@
+.tooltipped {
+	position: relative
+}
+
+.tooltipped:after {
+	position: absolute;
+	z-index: 1000000;
+	display: none;
+	padding: 5px 8px;
+	font: arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: map-get($base, font-size-sm);
+	color: #fff;
+	text-align: center;
+	text-decoration: none;
+	text-shadow: none;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: break-word;
+	white-space: pre;
+	pointer-events: none;
+	content: attr(aria-label);
+	background: rgba(0, 0, 0, .8);
+	border-radius: 3px;
+	-webkit-font-smoothing: subpixel-antialiased
+}
+
+.tooltipped:before {
+	position: absolute;
+	z-index: 1000001;
+	display: none;
+	width: 0;
+	height: 0;
+	color: rgba(0, 0, 0, .8);
+	pointer-events: none;
+	content: "";
+	border: 5px solid transparent
+}
+
+.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
+	display: inline-block;
+	text-decoration: none
+}
+
+.tooltipped-s:after {
+	top: 100%;
+	right: 50%;
+	margin-top: 5px
+}
+
+.tooltipped-s:before {
+	top: auto;
+	right: 50%;
+	bottom: -5px;
+	margin-right: -5px;
+	border-bottom-color: rgba(0, 0, 0, .8)
+}
+
+.tooltipped-s:after {
+	-webkit-transform: translateX(50%);
+	-ms-transform: translateX(50%);
+	transform: translateX(50%)
+}
+
+.fa-copy {
+	margin-top: -3px;
+	position: relative;
+	top: 3px
+}
+
+.btn[disabled] .fa-copy {
+	opacity: .3
+}
+
+.copyable {
+	position: relative;
+	overflow: visible
+}
+
+.copyable .btn {
+	-webkit-transition: opacity .3s ease-in-out;
+	-o-transition: opacity .3s ease-in-out;
+	transition: opacity .3s ease-in-out;
+	opacity: 0;
+	padding: 2px 6px;
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	color: $copy-button-color
+}
+
+.copyable:hover .btn, .copyable .btn:focus {
+	opacity: 1
+}

_sass/skins/highlight/_default.scss

@@ -0,0 +1,2 @@
+// copy button color
+$copy-button-color: #000;

_sass/skins/highlight/_tomorrow-night-blue.scss

@@ -1,2 +1,5 @@
 @import "./tomorrow/night-blue";
 @import "./tomorrow/highlight";
+
+// copy button color
+$copy-button-color: #fff;

_sass/skins/highlight/_tomorrow-night-bright.scss

@@ -1,2 +1,5 @@
 @import "./tomorrow/night-bright";
 @import "./tomorrow/highlight";
+
+// copy button color
+$copy-button-color: #fff;

_sass/skins/highlight/_tomorrow-night-eighties.scss

@@ -1,2 +1,5 @@
 @import "./tomorrow/night-eighties";
 @import "./tomorrow/highlight";
+
+// copy button color
+$copy-button-color: #fff;

_sass/skins/highlight/_tomorrow-night.scss

@@ -1,2 +1,5 @@
 @import "./tomorrow/night";
 @import "./tomorrow/highlight";
+
+// copy button color
+$copy-button-color: #fff;

_sass/skins/highlight/_tomorrow.scss

@@ -1,2 +1,5 @@
 @import "./tomorrow/default";
 @import "./tomorrow/highlight";
+
+// copy button color
+$copy-button-color: #000;

assets/css/main.scss

@@ -59,6 +59,7 @@
     "additional/alert",
     "additional/tag",
     "additional/photo-frame",
+    "additional/copy-to-clipboard",
 
     "layout/base",
     "layout/page",