allow additional rel info for new tab links

components/Link/Link.tsx

@@ -50,14 +50,21 @@ const CustomLink = ({
 }: CustomLinkProps) => {
   // this component auto-detects whether or not we should use a normal HTML anchor externally or next/link internally,
   // can be overridden with `forceNewWindow={true}`.
-  if (forceNewWindow || isAbsoluteUrl(href.toString())) {
+  const isExternal = isAbsoluteUrl(href.toString());
+
+  if (forceNewWindow || isExternal) {
     return (
-      <FancyLink href={href.toString()} target={target || "_blank"} rel={rel || "noopener noreferrer"} {...rest} />
+      <FancyLink
+        href={href.toString()}
+        target={target ?? "_blank"}
+        rel={[rel, "noopener", isExternal ? "noreferrer" : ""].join(" ").trim()}
+        {...rest}
+      />
     );
   } else {
     return (
       <NextLink href={href} prefetch={prefetch} passHref={passHref}>
-        <FancyLink {...rest} />
+        <FancyLink target={target} rel={rel} {...rest} />
       </NextLink>
     );
   }

components/Selfie/Selfie.tsx

@@ -2,6 +2,7 @@ import { memo } from "react";
 import NextLink from "next/link";
 import NextImage from "next/image";
 import { styled } from "../../lib/styles/stitches.config";
+import { authorName } from "../../lib/config";
 import type { ComponentProps } from "react";
 
 import selfieJpg from "../../public/static/images/selfie.jpg";
@@ -52,9 +53,9 @@ export type SelfieProps = ComponentProps<typeof Link>;
 
 const Selfie = ({ ...rest }: SelfieProps) => (
   <NextLink href="/" passHref={true}>
-    <Link {...rest}>
-      <Image src={selfieJpg} alt="Photo of Jake Jarvis" width={50} height={50} quality={60} layout="raw" priority />
-      <Name>Jake Jarvis</Name>
+    <Link rel="author" title={authorName} {...rest}>
+      <Image src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} layout="raw" priority />
+      <Name>{authorName}</Name>
     </Link>
   </NextLink>
 );