fix magic wand cursor 🪄

components/ColorfulLink/ColorfulLink.tsx

@@ -1,7 +1,5 @@
 import { memo } from "react";
 import Link from "next/link";
-import css from "styled-jsx/css";
-import classNames from "classnames";
 import type { ReactNode } from "react";
 
 type Props = {
@@ -14,9 +12,8 @@ type Props = {
   className?: string;
 };
 
-// spits out properties for link's color and background-image in a linear-gradient (that's not really a gradient) with
-// translucent color in rgba() format.
-const getColorProperties = (hex: string, alpha = 0.4) => {
+// spits out alpha'd version of given color in rgba() format within a linear-gradient (that's not really a gradient)
+const getLinearGradient = (hex: string, alpha = 0.4) => {
   // hex -> rgb, pulled from https://github.com/sindresorhus/hex-rgb/blob/main/index.js#L29
   const number = Number.parseInt(hex.replace(/^#/, ""), 16);
   const red = number >> 16;
@@ -25,30 +22,31 @@ const getColorProperties = (hex: string, alpha = 0.4) => {
 
   const rgbaString = `rgba(${red},${green},${blue},${alpha})`;
 
-  // prettier-ignore
-  return `
-color:${hex};
-background-image:linear-gradient(${rgbaString},${rgbaString})`.trim();
+  return `linear-gradient(${rgbaString},${rgbaString})`;
 };
 
 const ColorfulLink = ({ href, lightColor, darkColor, external, className, ...rest }: Props) => {
-  // prettier-ignore
-  const { className: underlineClassName, styles: underlineStyles } = css.resolve`
-a {${getColorProperties(lightColor)}}
-:global([data-theme="dark"]) a {${getColorProperties(darkColor)}}`;
-
   return (
     <>
       <Link href={href} passHref={true} prefetch={false}>
         <a
-          className={classNames(underlineClassName, className)}
+          className={className}
           target={external ? "_blank" : undefined}
           rel={external ? "noopener noreferrer" : undefined}
           {...rest}
         />
       </Link>
 
-      {underlineStyles}
+      <style jsx>{`
+        a {
+          color: ${lightColor};
+          background-image: ${getLinearGradient(lightColor)};
+        }
+        :global([data-theme="dark"]) a {
+          color: ${darkColor};
+          background-image: ${getLinearGradient(darkColor)};
+        }
+      `}</style>
     </>
   );
 };

components/Image/Image.tsx

@@ -10,6 +10,7 @@ const CustomImage = ({
   height,
   placeholder,
   alt,
+  layout,
   quality,
   priority,
   className,
@@ -17,13 +18,13 @@ const CustomImage = ({
 }: NextImageProps) => {
   // passed directly into next/image: https://nextjs.org/docs/api-reference/next/image
   const imageProps: Partial<NextImageProps> = {
-    width: typeof width === "string" ? parseInt(width) : width,
-    height: typeof height === "string" ? parseInt(height) : height,
-    layout: "intrinsic",
+    width: typeof width === "string" ? Number.parseInt(width) : width,
+    height: typeof height === "string" ? Number.parseInt(height) : height,
     alt: alt || "",
+    layout: layout || "intrinsic",
     quality: quality || 65,
-    loading: priority ? "eager" : "lazy",
     priority: !!priority,
+    loading: priority ? "eager" : "lazy",
   };
 
   if (typeof src === "object") {

package.json

@@ -77,7 +77,7 @@
   "devDependencies": {
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",
     "@svgr/webpack": "^6.2.0",
-    "@types/node": "^17.0.10",
+    "@types/node": "^17.0.11",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",

pages/index.tsx

@@ -343,8 +343,8 @@ const Index = () => (
       }
       .home .birthday :global(a:hover) {
         /* magic wand cursor easter egg */
-        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-18, 5)'>🪄</text></svg>")
-            16 0,
+        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>")
+            5 5,
           auto;
       }
 

pages/notes/index.tsx

@@ -25,7 +25,7 @@ export const getStaticProps: GetStaticProps = async () => {
   // parse the year of each note and group them together
   const notesByYear = {};
   getAllNotes().map((note) => {
-    const year = parseInt(format(new Date(note.date), "yyyy"));
+    const year = Number.parseInt(format(new Date(note.date), "yyyy"));
     (notesByYear[year] || (notesByYear[year] = [])).push(note);
   });
 

yarn.lock

@@ -1539,10 +1539,10 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@^17.0.10":
-  version "17.0.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab"
-  integrity sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==
+"@types/node@^17.0.11":
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.11.tgz#e0630988ea4c75efde22d5b099360ecfe494160f"
+  integrity sha512-TgLsFcuinMobmML3PsILoRJq/h11/qS7UDlak1LUsazJcvJeKejEBuI1m5X2pBnMBF5T5HRAvtcnr4cV5nvc8Q==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -2531,9 +2531,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.17:
-  version "1.4.51"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz#a432f5a5d983ace79278a33057300cf949627e63"
-  integrity sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==
+  version "1.4.52"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz#ce44c6d6cc449e7688a4356b8c261cfeafa26833"
+  integrity sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==
 
 email-regex@^5.0.0:
   version "5.0.0"