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);