update <PageTitle /> component

components/Layout.tsx

@@ -3,10 +3,15 @@ import { useTheme } from "next-themes";
 import Header from "./page-header/Header";
 import Footer from "./page-footer/Footer";
 import { themeColors } from "../lib/config";
+import type { ReactNode } from "react";
 
 import styles from "./Layout.module.css";
 
-const Layout = ({ children }) => {
+type Props = {
+  children: ReactNode;
+};
+
+const Layout = ({ children }: Props) => {
   const { resolvedTheme } = useTheme();
 
   return (

components/notes/Meta.tsx

@@ -15,7 +15,9 @@ const Meta = ({ slug, date, title, htmlTitle = "", tags = [] }: NoteMetaType) =>
           <DateIcon className={`icon ${styles.icon}`} />
         </span>
         <span title={format(new Date(date), "PPppp")}>
-          <Link href={`/notes/${slug}/`}>{format(new Date(date), "MMMM d, yyyy")}</Link>
+          <Link href={`/notes/${slug}/`}>
+            <a>{format(new Date(date), "MMMM d, yyyy")}</a>
+          </Link>
         </span>
       </div>
       {tags.length > 0 && (

components/page-header/Header.module.css

@@ -60,6 +60,7 @@
   margin: 0 0.6em;
   font-size: 1.2em;
   font-weight: 500;
+  line-height: 1;
 }
 
 /*** right side: menu ***/

components/page/PageTitle.tsx

@@ -1,19 +1,24 @@
+import { memo } from "react";
 import { useRouter } from "next/router";
+import Link from "next/link";
+import type { ReactNode } from "react";
 
 import styles from "./PageTitle.module.css";
 
 type Props = {
-  title: unknown;
+  children: ReactNode;
 };
 
-const PageTitle = ({ title }: Props) => {
+const PageTitle = ({ children }: Props) => {
   const router = useRouter();
 
   return (
     <h1 className={styles.title}>
-      <a href={router.asPath}>{title}</a>
+      <Link href={router.asPath}>
+        <a>{children}</a>
+      </Link>
     </h1>
   );
 };
 
-export default PageTitle;
+export default memo(PageTitle);

pages/birthday.tsx

@@ -16,13 +16,10 @@ const Birthday = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <TapeIcon /> 1996.MOV
-        </>
-      }
-    />
+    <PageTitle>
+      <TapeIcon /> 1996.MOV
+    </PageTitle>
+
     <Content>
       <Video
         url={[

pages/cli.tsx

@@ -16,13 +16,10 @@ const CLI = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <BotIcon /> CLI
-        </>
-      }
-    />
+    <PageTitle>
+      <BotIcon /> CLI
+    </PageTitle>
+
     <Content>
       <blockquote>
         <p>

pages/contact.tsx

@@ -13,13 +13,10 @@ const Contact = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <MailIcon /> Contact Me
-        </>
-      }
-    />
+    <PageTitle>
+      <MailIcon /> Contact Me
+    </PageTitle>
+
     <Content>
       <div className="wrapper">
         <p>

pages/hillary.tsx

@@ -15,7 +15,7 @@ const Hillary = () => (
       }}
     />
 
-    <PageTitle title="My Brief Apperance in Hillary Clinton's DNC Video" />
+    <PageTitle>My Brief Apperance in Hillary Clinton's DNC Video</PageTitle>
     <Content>
       <Video
         url={[

pages/leo.tsx

@@ -15,7 +15,8 @@ const Leo = () => (
       }}
     />
 
-    <PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
+    <PageTitle>Facebook App on "The Lab with Leo Laporte"</PageTitle>
+
     <Content>
       <Video
         url={[

pages/license.tsx

@@ -12,13 +12,10 @@ const License = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <LicenseIcon /> License
-        </>
-      }
-    />
+    <PageTitle>
+      <LicenseIcon /> License
+    </PageTitle>
+
     <Content>
       <p>
         Unless otherwise noted, content on this website is published under the{" "}

pages/previously.tsx

@@ -32,13 +32,10 @@ const Previously = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <FloppyIcon /> Previously on...
-        </>
-      }
-    />
+    <PageTitle>
+      <FloppyIcon /> Previously on...
+    </PageTitle>
+
     <Content>
       <figure>
         <a

pages/privacy.tsx

@@ -16,13 +16,10 @@ const Privacy = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <PrivacyIcon /> Privacy
-        </>
-      }
-    />
+    <PageTitle>
+      <PrivacyIcon /> Privacy
+    </PageTitle>
+
     <Content>
       <p>Okay, this is an easy one. 😉</p>
 
@@ -179,8 +176,11 @@ const Privacy = () => (
         <a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer">
           <strong>hCaptcha</strong>
         </a>{" "}
-        to fight bot spam on the <Link href="/contact/">contact form</Link> was an easy choice over seemingly
-        unavoidable alternatives like{" "}
+        to fight bot spam on the{" "}
+        <Link href="/contact/" prefetch={false}>
+          <a>contact form</a>
+        </Link>{" "}
+        was an easy choice over seemingly unavoidable alternatives like{" "}
         <a href="https://developers.google.com/recaptcha/" target="_blank" rel="noopener noreferrer">
           reCAPTCHA
         </a>

pages/projects.tsx

@@ -15,13 +15,9 @@ const Projects = (props: { repos: RepoType[] }) => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          <ProjectsIcon /> Projects
-        </>
-      }
-    />
+    <PageTitle>
+      <ProjectsIcon /> Projects
+    </PageTitle>
 
     <div>
       {props.repos.map((repo: RepoType) => (

pages/uses.tsx

@@ -17,13 +17,10 @@ const Uses = () => (
       }}
     />
 
-    <PageTitle
-      title={
-        <>
-          /uses <LaptopIcon />
-        </>
-      }
-    />
+    <PageTitle>
+      /uses <LaptopIcon />
+    </PageTitle>
+
     <Content>
       <p>
         <del>I regularly get messages asking about which tools I use to work.</del>