diff --git a/README.md b/README.md
index e96076e5..2c1cf0b8 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
[](https://github.com/jakejarvis/jarv.is)
[](http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion/)
-Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using [Hugo](https://gohugo.io/), [Vercel](https://vercel.com/), [and more](https://jarv.is/humans.txt).
+Personal website of [@jakejarvis](https://github.com/jakejarvis), created and deployed using [Hugo](https://gohugo.io/), [Preact](https://preactjs.com/), [Vercel](https://vercel.com/), [and more](https://jarv.is/humans.txt).
I keep an ongoing list of [post ideas](https://github.com/jakejarvis/jarv.is/issues/1) and [coding to-dos](https://github.com/jakejarvis/jarv.is/issues/11) as issues in this repo. Outside contributions, improvements, and/or corrections are welcome too!
diff --git a/assets/js/src/clipboard.js b/assets/js/src/clipboard.js
index 61c5e66e..7e622709 100644
--- a/assets/js/src/clipboard.js
+++ b/assets/js/src/clipboard.js
@@ -10,6 +10,6 @@ document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
if (codeElement) {
// add the button as a sibling to the original Hugo block whose contents we're copying
- render(, highlightDiv);
+ render(, highlightDiv);
}
});
diff --git a/assets/js/src/components/CopyButton.js b/assets/js/src/components/CopyButton.js
index 860515f9..5f753b09 100644
--- a/assets/js/src/components/CopyButton.js
+++ b/assets/js/src/components/CopyButton.js
@@ -1,6 +1,6 @@
import { h } from "preact";
-import { useState } from "preact/hooks";
-import copy from "clipboard-copy";
+import { useState, useEffect } from "preact/hooks";
+import copy from "copy-to-clipboard";
import trimNewlines from "trim-newlines";
// react components:
@@ -16,16 +16,25 @@ const CopyButton = (props) => {
e.target.blur();
// trim any surrounding whitespace from target block's content and send it to the clipboard
- copy(trimNewlines(props.content));
+ const didCopy = copy(trimNewlines(props.content));
- // indicate success...
- setCopied(true);
- // ...but reset everything after 2 seconds
- setTimeout(() => {
- setCopied(false);
- }, 2000);
+ // indicate success
+ setCopied(didCopy);
};
+ useEffect(() => {
+ // reset everything after given ms (defaults to 2 seconds)
+ if (copied) {
+ const id = setTimeout(() => {
+ setCopied(false);
+ }, props.timeout || 2000);
+
+ return () => clearTimeout(id);
+ }
+
+ return () => {};
+ }, [props.timeout, copied]);
+
return (