summer2021-codetour

main.tour

{
  "$schema": "https://aka.ms/codetour-schema",
  "title": "Legend",
  "steps": [
    {
      "file": "pages/_app.js",
      "description": "The loading indicator is here",
      "line": 33,
      "selection": {
        "start": {
          "line": 33,
          "character": 8
        },
        "end": {
          "line": 45,
          "character": 12
        }
      },
      "contents": "import Router, { useRouter } from 'next/router';\n\nimport NProgress from 'nprogress';\n\nimport { DefaultSeo } from 'next-seo';\nimport { Box, Button, ChakraProvider, VStack } from '@chakra-ui/react';\nimport { AnimatePresence, motion } from 'framer-motion';\n\nimport SEO from 'next-seo.config';\nimport theme from 'styles/theme';\nimport GlobalStyle from 'styles/styles';\nimport 'styles/css/nprogress.css';\n\nimport Star from 'components/Star';\nimport Footer from 'components/Footer';\nimport Home from 'components/Home';\n\nRouter.events.on('routeChangeStart', () => NProgress.start());\nRouter.events.on('routeChangeComplete', () => NProgress.done());\nRouter.events.on('routeChangeError', () => NProgress.done());\n\nconst MotionBox = motion(Box);\n\nfunction MyApp({ Component, pageProps, router }) {\n  const otherrouter = useRouter();\n  return (\n    <ChakraProvider resetCSS theme={theme}>\n      <DefaultSeo {...SEO} />\n\n      <GlobalStyle>\n        <Star />\n        <AnimatePresence exitBeforeEnter>\n          <MotionBox\n            key={router.route}\n            animate=\"enter\"\n            as=\"main\"\n            exit=\"exit\"\n            flexGrow={1}\n            initial=\"initial\"\n            variants={{\n              initial: { opacity: 0, y: -10 },\n              enter: { opacity: 1, y: 0 },\n              exit: { opacity: 0, y: 10 },\n            }}\n          >\n            <Home />\n\n            <Component {...pageProps} />\n          </MotionBox>\n        </AnimatePresence>\n        <Footer />\n      </GlobalStyle>\n    </ChakraProvider>\n  );\n}\n\nexport default MyApp;\n"
    },
    {
      "file": "pages/_app.js",
      "description": "This is where the Home Navigation on the top is located",
      "line": 46,
      "contents": "import Router, { useRouter } from 'next/router';\n\nimport NProgress from 'nprogress';\n\nimport { DefaultSeo } from 'next-seo';\nimport { Box, Button, ChakraProvider, VStack } from '@chakra-ui/react';\nimport { AnimatePresence, motion } from 'framer-motion';\n\nimport SEO from 'next-seo.config';\nimport theme from 'styles/theme';\nimport GlobalStyle from 'styles/styles';\nimport 'styles/css/nprogress.css';\n\nimport Star from 'components/Star';\nimport Footer from 'components/Footer';\nimport Home from 'components/Home';\n\nRouter.events.on('routeChangeStart', () => NProgress.start());\nRouter.events.on('routeChangeComplete', () => NProgress.done());\nRouter.events.on('routeChangeError', () => NProgress.done());\n\nconst MotionBox = motion(Box);\n\nfunction MyApp({ Component, pageProps, router }) {\n  const otherrouter = useRouter();\n  return (\n    <ChakraProvider resetCSS theme={theme}>\n      <DefaultSeo {...SEO} />\n\n      <GlobalStyle>\n        <Star />\n        <AnimatePresence exitBeforeEnter>\n          <MotionBox\n            key={router.route}\n            animate=\"enter\"\n            as=\"main\"\n            exit=\"exit\"\n            flexGrow={1}\n            initial=\"initial\"\n            variants={{\n              initial: { opacity: 0, y: -10 },\n              enter: { opacity: 1, y: 0 },\n              exit: { opacity: 0, y: 10 },\n            }}\n          >\n            <Home />\n\n            <Component {...pageProps} />\n          </MotionBox>\n        </AnimatePresence>\n        <Footer />\n      </GlobalStyle>\n    </ChakraProvider>\n  );\n}\n\nexport default MyApp;\n"
    }
  ]
}