trim some unnecessary dependencies

components/Header/Header.tsx

@@ -15,15 +15,14 @@ const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
       <nav className={styles.nav}>
-        <Link href="/" rel="author" title={config.authorName} plain className={styles.homeLink}>
+        <Link href="/" rel="author" aria-label={config.authorName} plain className={styles.homeLink}>
           <Image
             src={selfieJpg}
             alt={`Photo of ${config.authorName}`}
             className={styles.homeImage}
             width={70}
             height={70}
-            quality={60}
-            placeholder="empty"
+            quality={50}
             priority
           />
           <span className={styles.name}>{config.authorName}</span>

components/Heading/Heading.tsx

@@ -19,7 +19,7 @@ const Heading = ({ level, id, divider, className, children, ...rest }: HeadingPr
 
       {/* add anchor link to H2s and H3s. ID is either provided or automatically generated by rehype-slug. */}
       {id && (level === 2 || level === 3) && (
-        <HeadingAnchor id={id} title={innerText(children)} className={styles.anchor} />
+        <HeadingAnchor id={id} title={`Jump to "${innerText(children)}"`} className={styles.anchor} />
       )}
     </HWild>
   );

components/HeadingAnchor/HeadingAnchor.tsx

@@ -2,14 +2,13 @@ import Link from "../Link";
 import { LinkIcon } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
 
-export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
+export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href" | "id"> & {
   id: string;
-  title: string;
 };
 
-const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => {
+const HeadingAnchor = ({ id, ...rest }: HeadingAnchorProps) => {
   return (
-    <Link href={`#${id}`} title={`Jump to "${title}"`} plain {...rest}>
+    <Link href={`#${id}`} plain {...rest}>
       <LinkIcon size="0.8em" />
     </Link>
   );

components/Link/Link.module.css

@@ -1,8 +1,10 @@
 .link {
   color: var(--colors-link);
   text-decoration: none;
+}
 
-  /* fancy underline */
+/* fancy underline effect on hover */
+.link:not(.plain) {
   background-image: linear-gradient(var(--colors-link-underline), var(--colors-link-underline));
   background-position: 0% 100%;
   background-repeat: no-repeat;
@@ -11,18 +13,13 @@
   padding-bottom: 3px;
 }
 
-.link:hover,
-.link:focus-visible {
+.link:not(.plain):hover,
+.link:not(.plain):focus-visible {
   background-size: 100% 2px;
 }
 
-.link.plain {
-  background: none;
-  transition: none;
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .link {
+  .link:not(.plain) {
     transition: none !important;
   }
 }

components/Link/Link.tsx

@@ -19,7 +19,12 @@ const Link = ({ href, rel, target, prefetch = false, plain, className, ...rest }
       prefetch={prefetch}
       target={target || (isExternal ? "_blank" : undefined)}
       rel={`${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}` || undefined}
-      className={clsx(styles.link, plain && styles.plain, className)}
+      className={clsx(
+        styles.link,
+        // eslint-disable-next-line css-modules/no-undef-class
+        plain && styles.plain,
+        className
+      )}
       {...rest}
     />
   );

components/MenuItem/MenuItem.module.css

@@ -1,7 +1,7 @@
 .link {
   display: inline-block;
+  padding: 0.6em;
   color: var(--colors-medium-dark) !important;
-  padding: 0.6em !important;
 }
 
 /* indicate active page/section */

components/MenuItem/MenuItem.tsx

@@ -27,10 +27,9 @@ const MenuItem = ({ text, href, icon, current, className, ...rest }: MenuItemPro
     return (
       <Link
         href={href}
-        className={clsx(styles.link, current && styles.current, className)}
-        title={text}
-        plain
         aria-label={text}
+        plain
+        className={clsx(styles.link, current && styles.current, className)}
         {...rest}
       >
         {item}

components/Video/Video.tsx

@@ -7,7 +7,7 @@ export type VideoProps = Omit<Partial<ComponentPropsWithoutRef<"video">>, "src">
   src: string | string[] | undefined;
 };
 
-const Video = ({ src, autoPlay, className, ...rest }: VideoProps) => {
+const Video = ({ src, autoPlay, className, children, ...rest }: VideoProps) => {
   return (
     <video
       {...(typeof src === "string" ? { src } : {})}
@@ -37,6 +37,8 @@ const Video = ({ src, autoPlay, className, ...rest }: VideoProps) => {
             return <source key={file} src={file} type={`video/${extension}`} />;
           }
         })}
+
+      {children}
     </video>
   );
 };