diff --git a/README.md b/README.md index e96076e5..2c1cf0b8 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ [![GitHub repo size](https://img.shields.io/github/repo-size/jakejarvis/jarv.is?color=009cdf&label=repo%20size&logo=git&logoColor=white)](https://github.com/jakejarvis/jarv.is) [![Tor mirror uptime](https://img.shields.io/uptimerobot/ratio/m788172098-a4fcb769c8779f9a37a60775?color=7e4798&label=tor%20mirror&logo=tor-project&logoColor=white)](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 (