Merge pull request #231 from Developer-DAO/okhai-seo-fix

okhaimie-dev · web-flow · commit 8e8914b3f772 · 2023-08-21T15:30:34.000-05:00
Okhai seo fix
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['next/core-web-vitals', 'plugin:storybook/recommended'],
+  extends: ['next/core-web-vitals'],
 }
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/components/Header.tsx b/components/Header.tsx
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -11,6 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { ArrowForwardIcon } from '@chakra-ui/icons'
 import Image from 'next/image'
+import NextLink from 'next/link'
 
 const Hero = () => {
   return (
@@ -45,6 +46,7 @@ const Hero = () => {
               <Link
                 href={'/getting-started'}
                 alignSelf={{ base: 'center', md: 'flex-start' }}
+                as={NextLink}
               >
                 <Button
                   colorScheme="pink"
diff --git a/components/Layout.tsx b/components/Layout.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
diff --git a/components/NavBar.tsx b/components/NavBar.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]') ? (
@@ -79,7 +84,7 @@ function NavBar() {
                     GET STARTED
                   </Link>
                 </MenuItem>
-                <MenuItem>
+                {/* <MenuItem>
                   <Link
                     as={NextLink}
                     href="/lessons"
@@ -92,7 +97,7 @@ function NavBar() {
                   >
                     Tracks
                   </Link>
-                </MenuItem>
+                </MenuItem> */}
               </MenuList>
             </Menu>
           </Flex>
@@ -131,7 +136,7 @@ function NavBar() {
               Get Started
             </Link>
 
-            <Link
+            {/* <Link
               as={NextLink}
               href="/lessons"
               passHref
@@ -142,7 +147,7 @@ function NavBar() {
               }
             >
               Tracks
-            </Link>
+            </Link> */}
 
             {/* <Button colorScheme="gray" variant="solid">
               <ConnectButton chainStatus="icon" showBalance={false} />
diff --git a/components/PageSeoLayout.tsx b/components/PageSeoLayout.tsx
@@ -0,0 +1,51 @@
+import { NextSeo } from 'next-seo'
+
+interface PageSeoLayoutProps {
+  title: string
+  description?: string
+  children?: React.ReactNode
+}
+
+const PageSeoLayout = ({
+  title,
+  description,
+  children,
+}: PageSeoLayoutProps) => {
+  return (
+    <>
+      <NextSeo
+        title={`Developer DAO Academy | ${title}`}
+        description={description}
+        openGraph={{
+          type: 'website',
+          locale: 'en_US',
+          url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+          site_name: `Developer DAO Academy`,
+          title: `Developer DAO Academy | ${title}`,
+          description: `${description}`,
+          images: [
+            {
+              url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
+              alt: 'Developer DAO Academy',
+              type: 'image/png',
+            },
+          ],
+        }}
+        twitter={{
+          handle: '@devdao_academy',
+          site: '@devdao_academy',
+          cardType: 'summary_large_image',
+        }}
+        additionalLinkTags={[
+          {
+            rel: 'icon',
+            href: '/favicon/favicon.ico',
+          },
+        ]}
+      />
+      {children}
+    </>
+  )
+}
+
+export default PageSeoLayout
diff --git a/components/footer/Footer.tsx b/components/footer/Footer.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
diff --git a/components/mdx/ContributorFooter.tsx b/components/mdx/ContributorFooter.tsx
@@ -26,8 +26,8 @@ export function ContributorFooter({
             {authors.length > 1 ? 'Authors' : 'Author'}
           </Text>
           <VStack spacing={4} alignItems="left">
-            {authors.map((contrib) => {
-              return <Contributor handle={contrib} avatarSize="2xl" />
+            {authors.map((contrib, idx) => {
+              return <Contributor key={idx} handle={contrib} avatarSize="2xl" />
             })}
           </VStack>
         </Box>
@@ -39,8 +39,8 @@ export function ContributorFooter({
             {reviewers.length > 1 ? 'Reviewers' : 'Reviewer'}
           </Text>
           <VStack spacing={4} alignItems="left">
-            {reviewers.map((contrib) => {
-              return <Contributor handle={contrib} avatarSize="lg" />
+            {reviewers.map((contrib, idx) => {
+              return <Contributor key={idx} handle={contrib} avatarSize="lg" />
             })}
           </VStack>
         </Box>
@@ -56,8 +56,10 @@ export function ContributorFooter({
                 : 'Additional Contributor'}
             </Text>
             <VStack spacing={4} alignItems="left">
-              {contributors.map((contrib) => {
-                return <Contributor handle={contrib} avatarSize="lg" />
+              {contributors.map((contrib, idx) => {
+                return (
+                  <Contributor key={idx} handle={contrib} avatarSize="lg" />
+                )
               })}
             </VStack>
           </Box>
diff --git a/next.config.js b/next.config.js
@@ -17,4 +17,8 @@ export default withMDX({
   reactStrictMode: true,
   // Append the default value with md extensions
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
 })
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.5.1",
+    "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/inter": "^4.5.15",
@@ -25,7 +25,8 @@
     "next-seo": "^5.15.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.7.1"
+    "react-icons": "^4.7.1",
+    "sharp": "^0.32.5"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
@@ -53,7 +54,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"
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,9 +2,7 @@ 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 { DefaultSeo } from 'next-seo'
+import Layout from '@components/Layout'
 import { MDXProvider } from '@mdx-js/react'
 import Components from '@components/mdx/Components'
 import { Analytics } from '@vercel/analytics/react'
@@ -41,43 +39,12 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="theme-color" content="#000000" />
       </Head>
-      <DefaultSeo
-        openGraph={{
-          type: 'website',
-          locale: 'en_US',
-          url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
-          site_name: 'Developer DAO Academy',
-          title: 'Developer DAO Academy',
-          description:
-            'Academy is an open-source education platform created by the Developer DAO.',
-          images: [
-            {
-              url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/landing-page-screenshot.png`,
-              alt: 'Developer DAO Academy',
-              type: 'image/png',
-            },
-          ],
-        }}
-        twitter={{
-          handle: '@devdao_academy',
-          site: '@devdao_academy',
-          cardType: 'summary_large_image',
-        }}
-        additionalLinkTags={[
-          {
-            rel: 'icon',
-            href: '/favicon/favicon.ico',
-          },
-        ]}
-      />
-      <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 />
-        <Analytics />
-      </Box>
+        </Layout>
+      </MDXProvider>
+      <Analytics />
     </ChakraProvider>
   )
 }
diff --git a/pages/getting-started/index.tsx b/pages/getting-started/index.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`module.exports = {`
`2`		`- extends: ['next/core-web-vitals', 'plugin:storybook/recommended'],`
	`2`	`+ extends: ['next/core-web-vitals'],`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "typescript.tsdk": "node_modules/typescript/lib"`
	`3`	`+}`