Merge branch 'main' of https://github.com/Developer-DAO/academy into lesson-5-quizzes

Author: elPiablo

.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['next/core-web-vitals', 'plugin:storybook/recommended'],
+  extends: ['next/core-web-vitals'],
 }

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

components/Header.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"

components/Hero.tsx

@@ -0,0 +1,23 @@
+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"
+        minH={{ base: 'calc(75vh - 3.5rem)' }}
+      >
+        {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]') ? (
@@ -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} />

components/NavBar.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

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

@@ -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>