1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-29 02:35:48 -04:00

shave off some JS bytes by using more modern clipboard logic

This commit is contained in:
2021-11-02 09:00:50 -04:00
parent 2f56906cb8
commit 991f3db820
3 changed files with 78 additions and 116 deletions

View File

@@ -1,42 +1,35 @@
import ClipboardJS from "clipboard";
import copy from "clipboard-copy";
import trimNewlines from "trim-newlines";
// the default text of the copy button:
const defaultTerm = "Copy";
const successTerm = "Copied!";
const defaultText = "Copy";
const successText = "Copied!";
// immediately give up if not supported or if there are no code blocks
if (ClipboardJS.isSupported() && document.querySelector("div.highlight")) {
// loop through each code fence on page (if any)
document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
const wrapperDiv = document.createElement("div");
wrapperDiv.className = "highlight-clipboard-enabled";
// loop through each code fence on page (if any)
document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
// bind a new button to the copy action
const button = document.createElement("button");
button.className = "copy-button";
button.textContent = defaultText;
button.addEventListener("click", () => {
// prevent unintentional double-clicks by unfocusing button
button.blur();
const button = document.createElement("button");
button.className = "copy-button";
button.textContent = defaultTerm;
// actual code element will have class "language-*", even if plaintext
if (copy(trimNewlines(highlightDiv.querySelector('code[class^="language-"]').textContent))) {
// show a subtle indication of success
button.textContent = successText;
// insert button as a sibling to Hugo's code fence
highlightDiv.before(wrapperDiv);
wrapperDiv.prepend(button);
wrapperDiv.append(highlightDiv);
// reset button to original text after 2 seconds
setTimeout(() => {
button.textContent = defaultText;
}, 2000);
}
});
// now that all the buttons are in place, bind them to the copy action
new ClipboardJS("button.copy-button", {
text: (trigger) =>
// actual code element will have class "language-*", even if plaintext
trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').textContent),
}).on("success", (e) => {
// show a subtle indication of success
e.trigger.textContent = successTerm;
// reset button to original text after 2 seconds
setTimeout(() => {
e.trigger.textContent = defaultTerm;
}, 2000);
// text needed to be auto-selected to copy, unselect immediately
e.clearSelection();
});
}
// add Hugo's code block to a new wrapper element, and insert the copy button as a sibling to it
const wrapperDiv = document.createElement("div");
wrapperDiv.className = "highlight-clipboard-enabled";
highlightDiv.before(wrapperDiv);
wrapperDiv.append(highlightDiv, button);
});

View File

@@ -31,7 +31,7 @@
"@fontsource/roboto-mono": "4.5.0",
"@octokit/graphql": "^4.8.0",
"@sentry/node": "^6.13.3",
"clipboard": "^2.0.8",
"clipboard-copy": "^4.0.1",
"cross-fetch": "^3.1.4",
"dark-mode-switcheroo": "^0.9.1",
"dayjs": "^1.10.7",
@@ -89,7 +89,7 @@
"postcss-focus": "^5.0.1",
"postcss-loader": "^6.2.0",
"postcss-normalize-charset": "^5.0.1",
"postcss-svgo": "^5.0.2",
"postcss-svgo": "^5.0.3",
"prettier": "^2.4.1",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
@@ -97,7 +97,7 @@
"stylelint": "~14.0.1",
"stylelint-config-prettier": "~9.0.3",
"stylelint-config-sass-guidelines": "~9.0.1",
"stylelint-config-standard-scss": "^2.0.0",
"stylelint-config-standard-scss": "^2.0.1",
"stylelint-no-unsupported-browser-features": "~5.0.2",
"stylelint-prettier": "~1.2.0",
"stylelint-scss": "~4.0.0",

127
yarn.lock
View File

@@ -2410,14 +2410,10 @@ cli-truncate@2.1.0, cli-truncate@^2.1.0:
slice-ansi "^3.0.0"
string-width "^4.2.0"
clipboard@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
clipboard-copy@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
cliui@^3.2.0:
version "3.2.0"
@@ -2535,7 +2531,7 @@ color-support@^1.1.3:
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
colord@^2.0.1, colord@^2.6:
colord@^2.9.1:
version "2.9.1"
resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.1.tgz#c961ea0efeb57c9f0f4834458f26cb9cc4a3f90e"
integrity sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==
@@ -2866,16 +2862,16 @@ cssesc@^3.0.0:
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
cssnano-preset-default@^5.1.4:
version "5.1.4"
resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.4.tgz#359943bf00c5c8e05489f12dd25f3006f2c1cbd2"
integrity sha512-sPpQNDQBI3R/QsYxQvfB4mXeEcWuw0wGtKtmS5eg8wudyStYMgKOQT39G07EbW1LB56AOYrinRS9f0ig4Y3MhQ==
cssnano-preset-default@^5.1.5:
version "5.1.5"
resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.5.tgz#6effb7175ee5d296f95330e137587e27ee974d44"
integrity sha512-fF00UI+d3PWkGfMd62geqmoUe5h+LOhGE2GH4Fqq3beNKdCU1LWwLUyIcu4/A72lWv0737cHey5zhhWw3rW0sA==
dependencies:
css-declaration-sorter "^6.0.3"
cssnano-utils "^2.0.1"
postcss-calc "^8.0.0"
postcss-colormin "^5.2.0"
postcss-convert-values "^5.0.1"
postcss-colormin "^5.2.1"
postcss-convert-values "^5.0.2"
postcss-discard-comments "^5.0.1"
postcss-discard-duplicates "^5.0.1"
postcss-discard-empty "^5.0.1"
@@ -2883,7 +2879,7 @@ cssnano-preset-default@^5.1.4:
postcss-merge-longhand "^5.0.2"
postcss-merge-rules "^5.0.2"
postcss-minify-font-values "^5.0.1"
postcss-minify-gradients "^5.0.2"
postcss-minify-gradients "^5.0.3"
postcss-minify-params "^5.0.1"
postcss-minify-selectors "^5.1.0"
postcss-normalize-charset "^5.0.1"
@@ -2898,7 +2894,7 @@ cssnano-preset-default@^5.1.4:
postcss-ordered-values "^5.0.2"
postcss-reduce-initial "^5.0.1"
postcss-reduce-transforms "^5.0.1"
postcss-svgo "^5.0.2"
postcss-svgo "^5.0.3"
postcss-unique-selectors "^5.0.1"
cssnano-utils@^2.0.1:
@@ -2907,11 +2903,11 @@ cssnano-utils@^2.0.1:
integrity sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==
cssnano@^5.0.6:
version "5.0.8"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.8.tgz#39ad166256980fcc64faa08c9bb18bb5789ecfa9"
integrity sha512-Lda7geZU0Yu+RZi2SGpjYuQz4HI4/1Y+BhdD0jL7NXAQ5larCzVn+PUGuZbDMYz904AXXCOgO5L1teSvgu7aFg==
version "5.0.9"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.9.tgz#bd03168835c0883c16754085704f57861a32d99c"
integrity sha512-Y4olTKBKsPKl5izpcXHRDiB/1rVdbIDM4qVXgEKBt466kYT42SEEsnCYOQFFXzEkUYV8pJNCII9JKzb8KfDk+g==
dependencies:
cssnano-preset-default "^5.1.4"
cssnano-preset-default "^5.1.5"
is-resolvable "^1.1.0"
lilconfig "^2.0.3"
yaml "^1.10.2"
@@ -3158,11 +3154,6 @@ del@^6.0.0:
rimraf "^3.0.2"
slash "^3.0.0"
delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
depd@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -4665,13 +4656,6 @@ glogg@^1.0.0:
dependencies:
sparkles "^1.0.0"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"
got@^11.8.2:
version "11.8.2"
resolved "https://registry.yarnpkg.com/got/-/got-11.8.2.tgz#7abb3959ea28c31f3576f1576c1effce23f33599"
@@ -6679,11 +6663,6 @@ nan@^2.12.1:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
nanocolors@^0.1.12:
version "0.1.12"
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6"
integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
nanoid@^3.1.30:
version "3.1.30"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
@@ -7525,20 +7504,20 @@ postcss-calc@^8.0.0:
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.0.2"
postcss-colormin@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.2.0.tgz#2b620b88c0ff19683f3349f4cf9e24ebdafb2c88"
integrity sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==
postcss-colormin@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.2.1.tgz#6e444a806fd3c578827dbad022762df19334414d"
integrity sha512-VVwMrEYLcHYePUYV99Ymuoi7WhKrMGy/V9/kTS0DkCoJYmmjdOMneyhzYUxcNgteKDVbrewOkSM7Wje/MFwxzA==
dependencies:
browserslist "^4.16.6"
caniuse-api "^3.0.0"
colord "^2.0.1"
colord "^2.9.1"
postcss-value-parser "^4.1.0"
postcss-convert-values@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz#4ec19d6016534e30e3102fdf414e753398645232"
integrity sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==
postcss-convert-values@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz#879b849dc3677c7d6bc94b6a2c1a3f0808798059"
integrity sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==
dependencies:
postcss-value-parser "^4.1.0"
@@ -7608,12 +7587,12 @@ postcss-minify-font-values@^5.0.1:
dependencies:
postcss-value-parser "^4.1.0"
postcss-minify-gradients@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.0.2.tgz#7c175c108f06a5629925d698b3c4cf7bd3864ee5"
integrity sha512-7Do9JP+wqSD6Prittitt2zDLrfzP9pqKs2EcLX7HJYxsxCOwrrcLt4x/ctQTsiOw+/8HYotAoqNkrzItL19SdQ==
postcss-minify-gradients@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.0.3.tgz#f970a11cc71e08e9095e78ec3a6b34b91c19550e"
integrity sha512-Z91Ol22nB6XJW+5oe31+YxRsYooxOdFKcbOqY/V8Fxse1Y3vqlNRpi1cxCqoACZTQEhl+xvt4hsbWiV5R+XI9Q==
dependencies:
colord "^2.6"
colord "^2.9.1"
cssnano-utils "^2.0.1"
postcss-value-parser "^4.1.0"
@@ -7783,13 +7762,13 @@ postcss-sorting@^7.0.1:
resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-7.0.1.tgz#923b5268451cf2d93ebf8835e17a6537757049a5"
integrity sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==
postcss-svgo@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.0.2.tgz#bc73c4ea4c5a80fbd4b45e29042c34ceffb9257f"
integrity sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==
postcss-svgo@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.0.3.tgz#d945185756e5dfaae07f9edb0d3cae7ff79f9b30"
integrity sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==
dependencies:
postcss-value-parser "^4.1.0"
svgo "^2.3.0"
svgo "^2.7.0"
postcss-unique-selectors@^5.0.1:
version "5.0.1"
@@ -8513,11 +8492,6 @@ select-hose@^2.0.0:
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
selfsigned@^1.10.11:
version "1.10.11"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.11.tgz#24929cd906fe0f44b6d01fb23999a739537acbe9"
@@ -9156,9 +9130,9 @@ stylelint-config-prettier@~9.0.3:
integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg==
stylelint-config-recommended-scss@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.0.tgz#0b1d8117c84f616283abf309272af97df32ba79d"
integrity sha512-nQonGHxkv+n61WiU03bcHBHlA9XPMg7mGyD48ZmwrcnNroCEbH2nZhfn6Y1xcxfIHpD2wnwtAUPAwFaNQQpivw==
version "5.0.1"
resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.1.tgz#4f16ff9c85966c0c37de5243b628eef104da504e"
integrity sha512-kVI5lX8jtaw9uNnnxxziw+LhW59m0x/JzGj8zVepeFQJ56eM4HazN4gMyCRQQSLr/8CXlIHGOW34CV5hIMr3FQ==
dependencies:
postcss-scss "^4.0.1"
stylelint-config-recommended "^6.0.0"
@@ -9178,10 +9152,10 @@ stylelint-config-sass-guidelines@~9.0.1:
stylelint-order "^5.0.0"
stylelint-scss "^4.0.0"
stylelint-config-standard-scss@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-2.0.0.tgz#95f5ce656429bc06ee3cbc0dee03958365627e02"
integrity sha512-Pfex2nCvFKSL4u4d8sECYRkQadu6w+XO7kiE521sZNmFBGxLYhhZt0RN9HwXj5oBKWcE6Y5g86IjbaiXI7zrPg==
stylelint-config-standard-scss@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-2.0.1.tgz#b0cafad0a32c7eea13e045913c4e6a6de45be69c"
integrity sha512-TW5NLquUSS0mg2N31zzaSbYRbV/CMifSVLdpgo6VdGvjysgYqJOcKM/5bmXucTOsdfqomcPXetFZ3adC7nD+cg==
dependencies:
stylelint-config-recommended-scss "^5.0.0"
stylelint-config-standard "^23.0.0"
@@ -9311,17 +9285,17 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svgo@^2.1.0, svgo@^2.3.0, svgo@^2.5.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.7.0.tgz#e164cded22f4408fe4978f082be80159caea1e2d"
integrity sha512-aDLsGkre4fTDCWvolyW+fs8ZJFABpzLXbtdK1y71CKnHzAnpDxKXPj2mNKj+pyOXUCzFHzuxRJ94XOFygOWV3w==
svgo@^2.1.0, svgo@^2.5.0, svgo@^2.7.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^4.1.3"
css-tree "^1.1.3"
csso "^4.2.0"
nanocolors "^0.1.12"
picocolors "^1.0.0"
stable "^0.1.8"
table@^6.7.2:
@@ -9488,11 +9462,6 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
to-absolute-glob@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"