diff --git a/.gitignore b/.gitignore index 2835504..ba2d1f8 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ _site/ .bundle/ vendor/ +node_modules/ diff --git a/_includes/head.html b/_includes/head.html index 71674b7..d0baf15 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,5 +4,9 @@ {% seo %} + + + diff --git a/_includes/js.html b/_includes/js.html index 9705f45..3685c59 100644 --- a/_includes/js.html +++ b/_includes/js.html @@ -1,4 +1,18 @@ - + + + + + + + + + + + diff --git a/_sass/_base.scss b/_sass/_base.scss index b24e2dc..b7fdeea 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -31,3 +31,18 @@ figure { margin-top: 2em; } } + +.btn { + + &:hover { + cursor: pointer; + color: $brand-color; + } +} + +.btn-copy-code { + float: right; + .far, .fas { + color: $text-gray !important; + } +} diff --git a/_scripts/app.js b/_scripts/app.js new file mode 100644 index 0000000..12d5ad0 --- /dev/null +++ b/_scripts/app.js @@ -0,0 +1,50 @@ + +anchors.add(); + +// adapted from https://stackoverflow.com/a/48078807/1217368 +$(document).ready(function() { + $('.highlight > pre').each(function(i) { + if (!$(this).parent().hasClass('no-select-button')) { + + // create an id for the current code section + var currentId = "codeblock" + (i + 1); + + // find the code section and add the id to it + var codeSection = $(this).find('code'); + codeSection.attr('id', currentId); + + // now create the button, setting the clipboard target to the id + var btn = document.createElement('a'); + btn.setAttribute('type', 'button'); + btn.setAttribute('class', 'btn btn-copy-code'); + btn.setAttribute('data-clipboard-target', '#' + currentId); + btn.innerHTML = ''; + this.insertBefore(btn, this.firstChild); + + // Create tooltip + tippy(btn, { + trigger: 'manual', + content: "Copied!", + placement: 'left', + }); + } + }); + + var clipboard = new ClipboardJS('.btn-copy-code'); + + // Attach callback to copy successful event. + clipboard.on('success', function(event) { + var tooltip = event.trigger._tippy; + + // Clear text selection. + event.clearSelection(); + + // Show tooltiop + tooltip.show(); + + // After 1 second, hide it again. + setTimeout(function() { + tooltip.hide(); + }, 1000, tooltip); + }); +}); diff --git a/_scripts/build.sh b/_scripts/build.sh new file mode 100755 index 0000000..6e62ba9 --- /dev/null +++ b/_scripts/build.sh @@ -0,0 +1,8 @@ +#!/usr/bin/env bash + +UGLIFYJS=node_modules/uglify-js/bin/uglifyjs + +SRC=_scripts/app.js +TARGET=assets/scripts.js + +$UGLIFYJS $SRC -c -m > $TARGET diff --git a/assets/scripts.js b/assets/scripts.js new file mode 100644 index 0000000..bf8c794 --- /dev/null +++ b/assets/scripts.js @@ -0,0 +1 @@ +anchors.add(),$(document).ready(function(){$(".highlight > pre").each(function(t){if(!$(this).parent().hasClass("no-select-button")){var e="codeblock"+(t+1);$(this).find("code").attr("id",e);var i=document.createElement("a");i.setAttribute("type","button"),i.setAttribute("class","btn btn-copy-code"),i.setAttribute("data-clipboard-target","#"+e),i.innerHTML='',this.insertBefore(i,this.firstChild),tippy(i,{trigger:"manual",content:"Copied!",placement:"left"})}}),new ClipboardJS(".btn-copy-code").on("success",function(t){var e=t.trigger._tippy;t.clearSelection(),e.show(),setTimeout(function(){e.hide()},1e3,e)})}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..2b54498 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "apt-site", + "version": "1.0.0", + "description": "", + "main": "index.js", + "dependencies": {}, + "devDependencies": { + "uglify-js": "^3.6.9" + }, + "scripts": { + "build": "./_scripts/build.sh" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/eosswedenorg/apt.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/eosswedenorg/apt/issues" + }, + "homepage": "https://github.com/eosswedenorg/apt#readme" +}