From 0e1d66c30c4ea8332f20967460b4b03704276f42 Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 14:38:18 +0900 Subject: [PATCH 1/6] Add link to script for "copy code" button --- _includes/scripts.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_includes/scripts.html b/_includes/scripts.html index 11732438..8c79356d 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -37,3 +37,6 @@ window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid')); }); + + + From b9a83bf81affde0222fda63790ececf500029f60 Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 14:38:28 +0900 Subject: [PATCH 2/6] Add newline to end of file --- _sass/minimal-mistakes/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/minimal-mistakes/_buttons.scss b/_sass/minimal-mistakes/_buttons.scss index 83d60c15..aca91736 100644 --- a/_sass/minimal-mistakes/_buttons.scss +++ b/_sass/minimal-mistakes/_buttons.scss @@ -94,4 +94,4 @@ &--small { font-size: $type-size-7; } -} \ No newline at end of file +} From 056702ce2dc862b6109e18ada44ff2ab459dffa9 Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 14:38:42 +0900 Subject: [PATCH 3/6] Create `copy-code-to-clipboard.js` --- assets/js/copy-code-to-clipboard.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 assets/js/copy-code-to-clipboard.js diff --git a/assets/js/copy-code-to-clipboard.js b/assets/js/copy-code-to-clipboard.js new file mode 100644 index 00000000..a072c9a7 --- /dev/null +++ b/assets/js/copy-code-to-clipboard.js @@ -0,0 +1,24 @@ +// This JavaScript file allows users to press a button to copy content in a code block to a clipboard (added by josh-wong) +var codeBlocks = document.querySelectorAll('pre.highlight'); + +codeBlocks.forEach(function (codeBlock) { + var copyButton = document.createElement('button'); + copyButton.className = 'copy'; + copyButton.type = 'button'; + copyButton.ariaLabel = 'Copy code to clipboard'; + copyButton.innerText = 'Copy'; + + codeBlock.append(copyButton); + + copyButton.addEventListener('click', function () { + var code = codeBlock.querySelector('code').innerText.replace("$ ", "").trim(); // Copy the code block, removing any leading `$ ` + window.navigator.clipboard.writeText(code); + + copyButton.innerText = 'Copied!'; + var threeSeconds = 3000; + + setTimeout(function () { + copyButton.innerText = 'Copy'; + }, threeSeconds); + }); +}); From 7d48631c731cdc7a5ed9005154b66561db6ee5ef Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 14:39:15 +0900 Subject: [PATCH 4/6] Add style for "copy code" button --- _sass/minimal-mistakes/_syntax.scss | 31 +++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss index 72652020..e4c34bd8 100644 --- a/_sass/minimal-mistakes/_syntax.scss +++ b/_sass/minimal-mistakes/_syntax.scss @@ -9,7 +9,7 @@ figure.highlight { background: $base00; color: $base05; font-family: $monospace; - font-size: $type-size-6; + font-size: $type-size-5-5; /* Originally `font-size: $type-size-6;` (modified by josh-wong) */ line-height: 1.8; border-radius: $border-radius; @@ -17,6 +17,33 @@ figure.highlight { pre.highlight { margin: 0; padding: 1em; + /* white-space: pre-wrap; /* Added this initially to make commands in a code block wrap, but that looks a little confusing. Keeping this line but commenting it out for historical sake. (added by josh-wong) */ + } + + /* The following button style is for the copy button that allows users to copy content in a code block to a clipboard. (added by josh-wong) */ + pre.highlight > button { + background-color: $scalar-primary-color; + border: none; + color: $lighter-gray; + display: block; + font-family: $sans-serif; + font-size: $type-size-4-5; + min-height: 10%; + line-height: 1.5; + min-width: 8.5%; + outline: none; + padding: 0.7em; + position: absolute; + right: 0; + top: 0; + transition: all 0.2s ease-out; + + &:active, + &:focus, + &:hover { + background-color: darken($scalar-primary-color, 15%); + outline: none; + } } } @@ -53,7 +80,7 @@ figure.highlight { } .highlight pre { - width: 100%; + width: 91.5%; } .highlight .hll { From b13d5227c61a4ef12e05721eff99f45ddd2d1039 Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 15:04:56 +0900 Subject: [PATCH 5/6] Adjust size of "copy code" button --- _sass/minimal-mistakes/_syntax.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss index e4c34bd8..6b66dc2c 100644 --- a/_sass/minimal-mistakes/_syntax.scss +++ b/_sass/minimal-mistakes/_syntax.scss @@ -28,7 +28,7 @@ figure.highlight { display: block; font-family: $sans-serif; font-size: $type-size-4-5; - min-height: 10%; + min-height: 5%; line-height: 1.5; min-width: 8.5%; outline: none; From b02ae0fefc252ff88181873fa14defdd64d107e3 Mon Sep 17 00:00:00 2001 From: josh-wong Date: Wed, 6 Sep 2023 15:06:53 +0900 Subject: [PATCH 6/6] Adjust size of "copy code" button --- _sass/minimal-mistakes/_syntax.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss index 6b66dc2c..b11f9292 100644 --- a/_sass/minimal-mistakes/_syntax.scss +++ b/_sass/minimal-mistakes/_syntax.scss @@ -28,7 +28,7 @@ figure.highlight { display: block; font-family: $sans-serif; font-size: $type-size-4-5; - min-height: 5%; + height: 100%; line-height: 1.5; min-width: 8.5%; outline: none;