switch to link component and fix seo canonical

components/BlogSeo.js

@@ -31,7 +31,7 @@ const BlogSeo = ({ title, summary, date, url, image }) => {
         datePublished={publishedAt}
         description={summary}
         images={[featuredImage]}
-        publisherLogo="/static/favicons/android-chrome-192x192.png"
+        publisherLogo="/static/favicons/android-chrome-96x96.png"
         publisherName={siteMetadata.author}
         title={title}
         url={url}

components/MobileNav.js

@@ -21,9 +21,8 @@ const MobileNav = () => {
     <div className="sm:hidden">
       <button
         type="button"
-        className="rounded ml-1 mr-1 h-8 w-8 focus:outline-none"
+        className="rounded ml-1 mr-1 h-8 w-8"
         aria-label="Toggle Menu"
-        aria-hidden={!navShow}
         onClick={onToggleNav}
       >
         <svg
@@ -54,6 +53,7 @@ const MobileNav = () => {
       >
         <button
           type="button"
+          aria-label="toggle modal"
           className="w-full h-full fixed cursor-auto focus:outline-none"
           onClick={onToggleNav}
         ></button>

components/SEO.js

@@ -3,7 +3,6 @@ import siteMetadata from '@/data/siteMetadata'
 const SEO = {
   title: siteMetadata.title,
   description: siteMetadata.description,
-  canonical: siteMetadata.siteUrl,
   openGraph: {
     type: 'website',
     locale: siteMetadata.language,

layouts/ListLayout.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import Link from 'next/link'
 import tinytime from 'tinytime'
+import Link from '@/components/Link'
 import Tag from '@/components/Tag'
 
 const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
@@ -58,11 +58,11 @@ export default function ListLayout({ posts, title }) {
                   <div className="space-y-3 xl:col-span-3">
                     <div>
                       <h3 className="text-2xl leading-8 font-bold tracking-tight">
-                        <Link href={`/blog/${slug}`}>
-                          <a className="text-gray-900 dark:text-gray-100">{title}</a>
+                        <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
+                          {title}
                         </Link>
                       </h3>
-                      <div className="space-x-2">
+                      <div className="space-x-3">
                         {tags.map((tag) => (
                           <Tag key={tag} text={tag} />
                         ))}

layouts/PostLayout.js

@@ -80,7 +80,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                 <h2 className="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-400">
                   Tags
                 </h2>
-                <div className="space-x-2 xl:flex xl:flex-col xl:space-x-0">
+                <div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
                   {tags.map((tag) => (
                     <Tag key={tag} text={tag} />
                   ))}

pages/index.js

@@ -1,8 +1,9 @@
 import tinytime from 'tinytime'
-import Link from 'next/link'
+import { NextSeo } from 'next-seo'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import siteMetadata from '@/data/siteMetadata'
 import Tag from '@/components/Tag'
+import Link from '@/components/Link'
 
 const MAX_DISPLAY = 5
 const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
@@ -15,7 +16,16 @@ export async function getStaticProps() {
 
 export default function Home({ posts }) {
   return (
-    <div>
+    <>
+      <NextSeo
+        title={siteMetadata.title}
+        description={siteMetadata.description}
+        canonical={siteMetadata.siteUrl}
+        openGraph={{
+          url: siteMetadata.siteUrl,
+          description: siteMetadata.description,
+        }}
+      />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">
           <h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
@@ -42,11 +52,11 @@ export default function Home({ posts }) {
                     <div className="space-y-6">
                       <div>
                         <h2 className="text-2xl leading-8 font-bold tracking-tight">
-                          <Link href={`/blog/${slug}`}>
-                            <a className="text-gray-900 dark:text-gray-100">{title}</a>
+                          <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
+                            {title}
                           </Link>
                         </h2>
-                        <div className="space-x-2">
+                        <div className="space-x-3">
                           {tags.map((tag) => (
                             <Tag key={tag} text={tag} />
                           ))}
@@ -57,13 +67,12 @@ export default function Home({ posts }) {
                       </div>
                     </div>
                     <div className="text-base leading-6 font-medium">
-                      <Link href={`/blog/${slug}`}>
-                        <a
-                          className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
-                          aria-label={`Read "${title}"`}
-                        >
-                          Read more &rarr;
-                        </a>
+                      <Link
+                        href={`/blog/${slug}`}
+                        className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                        aria-label={`Read "${title}"`}
+                      >
+                        Read more &rarr;
                       </Link>
                     </div>
                   </div>
@@ -85,6 +94,6 @@ export default function Home({ posts }) {
           </Link>
         </div>
       )}
-    </div>
+    </>
   )
 }

pages/tags.js

@@ -1,9 +1,9 @@
-import Link from 'next/link'
 import kebabCase from 'just-kebab-case'
 import { NextSeo } from 'next-seo'
 import siteMetadata from '@/data/siteMetadata'
 import { getAllTags } from '@/lib/tags'
 import Tag from '@/components/Tag'
+import Link from '@/components/Link'
 
 export async function getStaticProps() {
   const tags = await getAllTags('blog')
@@ -35,8 +35,11 @@ export default function Tags({ tags }) {
             return (
               <div key={t} className="m-2">
                 <Tag text={t} />
-                <Link href={`/tags/${kebabCase(t)}`}>
-                  <a className="uppercase font-semibold text-sm mx-1 text-gray-600 dark:text-gray-300">{` (${tags[t]})`}</a>
+                <Link
+                  href={`/tags/${kebabCase(t)}`}
+                  className="uppercase font-semibold text-sm mx-1 text-gray-600 dark:text-gray-300"
+                >
+                  {` (${tags[t]})`}
                 </Link>
               </div>
             )