added seo fix

Author: okhaimie-dev

components/Header.tsx

@@ -0,0 +1,22 @@
+import NavBar from '@components/NavBar'
+import Footer from '@components/footer/Footer'
+import { Box } from '@chakra-ui/react'
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <NavBar />
+      <Box
+        p="1.25em"
+        px="5%"
+        mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+        as="main"
+      >
+        {children}
+      </Box>
+      <Footer />
+    </>
+  )
+}
+
+export default Layout

components/Layout.tsx

@@ -19,7 +19,12 @@ import { PomodoroTimer } from '@components/PomodoroTimer'
 function NavBar() {
   const router = useRouter()
   return (
-    <Box>
+    <Box
+      p="1.25em"
+      px="5%"
+      mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+      as="header"
+    >
       <Flex justify="left" alignItems="center">
         <Link as={NextLink} variant="logo" href={'/'}>
           {router.pathname.endsWith('/[slug]') ? (

components/NavBar.tsx

@@ -40,9 +40,8 @@ const PageSeoLayout = ({
             href: '/favicon/favicon.ico',
           },
         ]}
-      >
-        {children}
-      </NextSeo>
+      />
+      {children}
     </>
   )
 }

components/PageSeoLayout.tsx

@@ -14,6 +14,10 @@ export default function Footer() {
   return (
     <Box
       // bg={useColorModeValue('#00000f', '#1d1e20')}
+      p="1.25em"
+      px="5%"
+      mx={{ base: '2rem', md: '6rem', lg: '10rem' }}
+      as="footer"
       color={useColorModeValue('gray.700', 'gray.200')}
     >
       <Container

components/footer/Footer.tsx

@@ -53,7 +53,7 @@
     "prettier": "^2.8.4",
     "react-syntax-highlighter": "^15.5.0",
     "remark-frontmatter": "^4.0.1",
-    "typescript": "4.9.5"
+    "typescript": "^5.1.6"
   },
   "lint-staged": {
     "*.{js,ts,tsx,md,json,yml}": "prettier --write"

package.json

@@ -2,11 +2,12 @@ import { ChakraProvider, Box } from '@chakra-ui/react'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { theme } from '@theme'
-import Header from '@components/Header'
-import Footer from '@components/footer/Footer'
+import Layout from '@components/Layout'
 import { MDXProvider } from '@mdx-js/react'
 import Components from '@components/mdx/Components'
 import { Analytics } from '@vercel/analytics/react'
+import { type NextPage } from 'next'
+import { type ReactNode, type ReactElement } from 'react'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -40,14 +41,12 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="theme-color" content="#000000" />
       </Head>
-      <Box p="1.25em" px="5%" mx={{ base: '2rem', md: '6rem', lg: '10rem' }}>
-        <Header />
-        <MDXProvider components={Components}>
+      <MDXProvider components={Components}>
+        <Layout>
           <Component {...pageProps} />
-        </MDXProvider>
-        <Footer />
+        </Layout>
         <Analytics />
-      </Box>
+      </MDXProvider>
     </ChakraProvider>
   )
 }

pages/_app.tsx

@@ -6683,10 +6683,10 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
-typescript@4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"