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}>
+    <Link rel="author" title={authorName} {...rest}>
-      <Image src={selfieJpg} alt="Photo of Jake Jarvis" width={50} height={50} quality={60} layout="raw" priority />
+      <Image src={selfieJpg} alt={`Photo of ${authorName}`} width={50} height={50} quality={60} layout="raw" priority />
-      <Name>Jake Jarvis</Name>
+      <Name>{authorName}</Name>
     </Link>
   </NextLink>
 );

lib/helpers/build-feed.ts

@@ -7,11 +7,16 @@ import { favicons } from "../config/seo";
 import type { GetServerSidePropsContext, PreviewData } from "next";
 import type { ParsedUrlQuery } from "querystring";
 
+export type BuildFeedOptions = {
+  type?: "rss" | "atom" | "json"; // defaults to rss
+  edgeCacheAge?: number; // defaults to 3600 (one hour)
+};
+
 // handles literally *everything* about building the server-side rss/atom feeds and writing the response.
 // all the page needs to do is `return buildFeed(context, { format: "rss" })` from getServerSideProps.
 export const buildFeed = async (
   context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
-  options?: { type: "rss" | "atom" }
+  options: BuildFeedOptions = {}
 ): Promise<{ props: Record<string, unknown> }> => {
   const { res } = context;
 
@@ -54,13 +59,18 @@ export const buildFeed = async (
     });
   });
 
-  // cache on edge for one hour
+  // cache on edge for one hour by default
-  res.setHeader("cache-control", "s-maxage=3600, stale-while-revalidate");
+  res.setHeader("cache-control", `s-maxage=${options.edgeCacheAge ?? 3600}, stale-while-revalidate`);
 
   // generates RSS by default
-  if (options?.type === "atom") {
+  if (options.type === "atom") {
     res.setHeader("content-type", "application/atom+xml; charset=utf-8");
     res.write(feed.atom1());
+  } else if (options.type === "json") {
+    // rare but including as an option because why not...
+    // https://www.jsonfeed.org/
+    res.setHeader("content-type", "application/feed+json; charset=utf-8");
+    res.write(feed.json1());
   } else {
     res.setHeader("content-type", "application/rss+xml; charset=utf-8");
     res.write(feed.rss2());

pages/cli.tsx

@@ -55,9 +55,7 @@ const CLI = () => (
         </ListItem>
       </UnorderedList>
       <p>
-        <Link href="https://github.com/jakejarvis/jakejarvis/tree/main/cli" target="_blank" rel="noreferrer">
+        <Link href="https://github.com/jakejarvis/jakejarvis/tree/main/cli">View source on GitHub.</Link>
-          View source on GitHub.
-        </Link>
       </p>
 
       <H2 id="license">License</H2>

pages/contact.tsx

@@ -35,7 +35,7 @@ const Contact = () => (
       </p>
       <p>
         🔐 You can grab my public key here:{" "}
-        <Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn noopener" forceNewWindow>
+        <Link href="/pubkey.asc" title="My Public PGP Key" rel="pgpkey authn" forceNewWindow>
           <PGPKey>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</PGPKey>
         </Link>
         .

pages/index.tsx

@@ -290,6 +290,7 @@ const Index = () => (
       You can find more of my work on{" "}
       <ColorfulLink
         href="https://github.com/jakejarvis"
+        rel="me"
         title="Jake Jarvis on GitHub"
         lightColor="#8d4eff"
         darkColor="#a379f0"
@@ -299,6 +300,7 @@ const Index = () => (
       and{" "}
       <ColorfulLink
         href="https://www.linkedin.com/in/jakejarvis/"
+        rel="me"
         title="Jake Jarvis on LinkedIn"
         lightColor="#0073b1"
         darkColor="#3b9dd2"
@@ -312,7 +314,7 @@ const Index = () => (
       <Sup>
         <ColorfulLink
           href="/pubkey.asc"
-          rel="pgpkey authn noopener"
+          rel="pgpkey authn"
           title="My Public Key"
           lightColor="#757575"
           darkColor="#959595"
@@ -325,6 +327,7 @@ const Index = () => (
       ,{" "}
       <ColorfulLink
         href="https://twitter.com/jakejarvis"
+        rel="me"
         title="Jake Jarvis on Twitter"
         lightColor="#00acee"
         darkColor="#3bc9ff"

pages/license.tsx

@@ -36,11 +36,10 @@ const License = () => (
       <H2 id="full-text">Creative Commons Attribution 4.0 International Public License</H2>
 
       <p style={{ textAlign: "center", lineHeight: 0 }}>
-        <a
+        <Link
           href="https://creativecommons.org/licenses/by/4.0/"
-          target="_blank"
+          title="Creative Commons Attribution 4.0"
-          rel="noopener noreferrer"
+          underline={false}
-          aria-label="Creative Commons Attribution 4.0"
         >
           <svg width="120" height="42">
             <path d="M3.1.5l113.4.2c1.6 0 3-.2 3 3.2l-.1 37.3H.3V3.7C.3 2.1.4.5 3 .5z" fill="#aab2ab"></path>
@@ -61,7 +60,7 @@ const License = () => (
               ></path>
             </g>
           </svg>
-        </a>
+        </Link>
       </p>
 
       <Blockquote>

pages/previously.tsx

@@ -105,21 +105,14 @@ iframe {
         alt="Timeline of this website's past."
         priority
       >
-        ...the{" "}
+        ...the <Link href="https://web.archive.org/web/20010501000000*/jakejarvis.com">Cringey Chronicles&trade;</Link>{" "}
-        <Link
-          href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Cringey Chronicles&trade;
-        </Link>{" "}
         of this website's past.
       </Figure>
 
       <HorizontalRule />
 
       <p>
-        🚨 <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
+        🚨 <strong>Trigger warning:</strong> marquees, Comic Sans, popups,{" "}
         <Code>
           color: <span style={{ color: "#32cd32" }}>limegreen</span>
         </Code>
@@ -140,11 +133,8 @@ iframe {
         allowScripts
       />
       <p className="iframe_caption">
-        November 2001 (
+        <Link href="https://jakejarvis.github.io/my-first-website/">November 2001</Link> (
-        <Link href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
+        <Link href="https://github.com/jakejarvis/my-first-website">view source</Link>)
-          view source
-        </Link>
-        )
       </p>
 
       <HorizontalRule />