some component cleanup

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!
 

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(<CopyButton content={codeElement.textContent} />, highlightDiv);
+    render(<CopyButton content={codeElement.textContent} timeout={2000} />, highlightDiv);
   }
 });

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 (
     <button
       class="copy-button"

assets/js/src/components/Counter.js

@@ -10,7 +10,7 @@ const Counter = (props) => {
 
   // start fetching hits from API once slug is set
   useEffect(() => {
-    fetch(`/api/hits/?slug=${encodeURIComponent(props.slug)}`)
+    return fetch(`/api/hits/?slug=${encodeURIComponent(props.slug)}`)
       .then((response) => response.json())
       .then((data) => setHits(data.hits || 0));
   }, [props.slug]);

assets/js/src/components/RepositoryGrid.js

@@ -12,7 +12,7 @@ const RepositoryGrid = () => {
   // start fetching repos from API immediately
   useEffect(() => {
     // API endpoint (sort by stars, limit to 12)
-    fetch("/api/projects/?top&limit=12")
+    return fetch("/api/projects/?top&limit=12")
       .then((response) => response.json())
       .then((data) => setRepos(data || []));
   }, []);

assets/js/src/components/ThemeToggle.js

@@ -11,7 +11,7 @@ const ThemeToggle = () => {
   const [dark, setDark] = useState(isDark());
 
   useEffect(() => {
-    setDarkClass(dark);
+    return setDarkClass(dark);
   }, [dark]);
 
   const handleToggle = () => {

content/privacy/index.md

@@ -13,7 +13,7 @@ Okay, this is an easy one. 😉
 
 A simple hit counter on each page tallies an aggregate number of pageviews (i.e. `hits = hits + 1`). Individual views and identifying (or non-identifying) details are **never stored or logged**.
 
-The [serverless function](https://github.com/jakejarvis/jarv.is/blob/main/api/hits.js) and [client script](https://github.com/jakejarvis/jarv.is/blob/main/assets/js/src/hits.js) are open source, and [snapshots of the database](https://github.com/jakejarvis/website-stats) are public.
+The [serverless function](https://github.com/jakejarvis/jarv.is/blob/main/api/hits.js) and [client script](https://github.com/jakejarvis/jarv.is/blob/main/assets/js/src/components/Counter.js) are open source, and [snapshots of the database](https://github.com/jakejarvis/website-stats) are public.
 
 {{< image src="images/fauna_hits.png" alt="The entire database schema." link="/privacy/images/fauna_hits.png" />}}
 

package.json

@@ -32,7 +32,7 @@
     "@octokit/graphql": "^4.8.0",
     "@primer/octicons-react": "^16.2.0",
     "@sentry/node": "^6.16.1",
-    "clipboard-copy": "^4.0.1",
+    "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.7",
     "faunadb": "^4.4.1",
     "get-canonical-url": "^1.1.0",

webpack.config.js

@@ -66,7 +66,9 @@ export default (env, argv) => {
         licenseFileOverrides: {
           twemoji: "LICENSE-GRAPHICS", // we only use the emojis, not the bundled code
         },
-        excludedPackageTest: (packageName) => packageName.startsWith("preact-"),
+        stats: {
+          warnings: false,
+        },
       }),
       new CopyPlugin({
         patterns: [

yarn.lock

@@ -2693,11 +2693,6 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.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"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -2971,6 +2966,13 @@ copy-props@^2.0.1:
     each-props "^1.3.2"
     is-plain-object "^5.0.0"
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-10.1.0.tgz#d27cf1cbe1c9b4ac57f1f96312e6f7da00108d23"
@@ -9917,6 +9919,11 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"