prepare for new next/link behavior

see new-next-link branch

components/ContactForm/ContactForm.tsx

@@ -260,7 +260,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
               Markdown syntax
             </Link>{" "}
             is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
-            <Link href="https://jarv.is" fancy={false} forceNewWindow>
+            <Link href="https://jarv.is" underline={false} forceNewWindow>
               links
             </Link>
             ](https://jarv.is), and <code>`code`</code>.

components/Image/Image.tsx

@@ -63,7 +63,7 @@ const CustomImage = ({
   return (
     <Wrapper className={className}>
       {href ? (
-        <Link href={href} fancy={false}>
+        <Link href={href} underline={false}>
           {img}
         </Link>
       ) : (

components/Link/Link.tsx

@@ -10,7 +10,7 @@ const FancyLink = styled("a", {
 
   variants: {
     // fancy animated link underline effect
-    fancy: {
+    underline: {
       true: {
         // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind the
         // local `$$underline` variable.
@@ -30,7 +30,7 @@ const FancyLink = styled("a", {
   },
 
   defaultVariants: {
-    fancy: true,
+    underline: true,
   },
 });
 

components/NoteMeta/NoteMeta.tsx

@@ -1,5 +1,5 @@
 import { ErrorBoundary } from "react-error-boundary";
-import Link from "next/link";
+import NextLink from "next/link";
 import Time from "../Time";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
@@ -62,7 +62,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
   <>
     <Wrapper>
       <MetaItem>
-        <Link
+        <NextLink
           href={{
             pathname: "/notes/[slug]/",
             query: { slug },
@@ -75,7 +75,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
             </span>
             <Time date={date} format="MMMM D, YYYY" />
           </MetaLink>
-        </Link>
+        </NextLink>
       </MetaItem>
 
       {tags.length > 0 && (

pages/api/hits.ts

@@ -113,7 +113,7 @@ const getSiteStats = async (client: faunadb.Client) => {
     pages,
   };
 
-  pages.map((page) => {
+  pages.forEach((page) => {
     // match URLs from RSS feed with db to populate some metadata
     const match = notes.find((note) => `notes/${note.slug}` === page.slug);
     if (match) {

pages/index.tsx

@@ -5,12 +5,10 @@ const ColorfulLink = ({
   lightColor,
   darkColor,
   css,
-  fancy = true,
   ...rest
 }: CustomLinkProps & {
   lightColor: string;
   darkColor: string;
-  fancy?: boolean;
 }) => {
   return (
     <Link
@@ -25,7 +23,6 @@ const ColorfulLink = ({
 
         ...css,
       }}
-      fancy={fancy}
       {...rest}
     />
   );
@@ -319,7 +316,7 @@ const Index = () => (
           title="My Public Key"
           lightColor="#757575"
           darkColor="#959595"
-          fancy={false}
+          underline={false}
           forceNewWindow
         >
           🔐 <PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>

pages/notes/index.tsx

@@ -25,7 +25,7 @@ export const getStaticProps: GetStaticProps = async () => {
   const notes = await getAllNotes();
   const notesByYear: NotesListProps["notesByYear"] = {};
 
-  notes.map((note) => {
+  notes.forEach((note) => {
     const year = new Date(note.date).getUTCFullYear();
     (notesByYear[year] || (notesByYear[year] = [])).push(note);
   });

pages/sitemap.xml.ts

@@ -33,7 +33,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   // push notes separately and use their metadata
   const notes = await getAllNotes();
-  notes.map((note) =>
+  notes.forEach((note) =>
     pages.push({
       loc: urlJoin("/notes/", note.slug, "/"),
       // pull lastMod from front matter date
@@ -43,7 +43,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   );
 
   // make all relative URLs absolute
-  pages.map((page) => (page.loc = urlJoin(baseUrl, page.loc)));
+  pages.forEach((page) => (page.loc = urlJoin(baseUrl, page.loc)));
 
   // cache on edge for 12 hours
   const { res } = context;

pages/stats.tsx

@@ -35,7 +35,7 @@ const Stats = () => (
     <Content>
       <PoweredBy>
         Powered by{" "}
-        <Link href="https://usefathom.com/ref/ZEYG0O" fancy={false}>
+        <Link href="https://usefathom.com/ref/ZEYG0O" underline={false}>
           <FathomIcon /> Fathom Analytics
         </Link>
       </PoweredBy>