updated seo

components/Landing/index.jsx

@@ -3,7 +3,6 @@ import TypeIt from "typeit-react";
 import { motion } from "framer-motion"
 
 
-
 export const Landing = () => {
     const { colorMode } = useColorMode();
     const textColor = {
@@ -64,16 +63,33 @@ export const Landing = () => {
                 </Text>
 
                 <Text></Text>
+            </motion.div>
 
-                <Box>
+
+            <Box>
+                <motion.div
+                    initial={{ y: -20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ duration: 0.7, delay: 0.9 }}
+                >
                     <Text mt="8" fontSize='xl' fontWeight={600}>I&apos;m a <chakra.span color="purple.light">high school junior</chakra.span> at North Carolina&apos;s School of Science and Mathematics. Since discovering programming in 7th grade, coding has fascinated me with how simple, yet complex it is. In my free time, I like to create applications that have a <chakra.span color="purple.light">positive</chakra.span> impact on the lives of those around me. I&apos;ve created <Link color="purple.light" _hover={{ color: 'purple.hover' }} href="https://chrome.google.com/webstore/detail/focale-study-pal/khjidjdpidalladedmkjibjkklanhcnc" isExternal>Chrome extensions</Link>, mobile <Link href="https://price.house.gov/newsroom/press-releases/rep-price-announces-winner-2021-congressional-app-challenge" color="purple.light" _hover={{ color: 'purple.hover' }} isExternal>apps</Link>, <Link href="https://www.bitproject.org/" color="purple.light" _hover={{ color: 'purple.hover' }} isExternal>websites</Link> for non-profits, and <Link href="https://easybag98.qoom.space/~/MaskUp/detect" color="purple.light" _hover={{ color: 'purple.hover' }} isExternal>machine learning</Link> models. Currently, I&apos;m working on an app that helps users track expiration dates for products!
                     </Text>
-
+                </motion.div>
+                <motion.div
+                    initial={{ y: -20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ duration: .7, delay: 1.3 }}
+                >
                     <Text mt="8" fontSize='xl' fontWeight={600}>In addition to computer science, <chakra.span color="purple.light">business management</chakra.span> and administration is a <chakra.span color="purple.light">passion</chakra.span> of mine. I love being able to lead teams and see projects through from start to finish, creating a quality product in a timely manner. In college, I plan on pursuing a double major of <chakra.span color="purple.light">computer science</chakra.span> and <chakra.span color="purple.light">business management</chakra.span>.
                     </Text>
+                </motion.div>
 
 
-
+                <motion.div
+                    initial={{ y: -20, opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    transition={{ duration: .7, delay: 1.6 }}
+                >
                     <Text mt="8" fontSize='xl' fontWeight={600}>Feel free to <chakra.span color="purple.light">connect</chakra.span> with me below!</Text>
 
                     <Stack spacing={4} direction={{ base: "column", md: "row" }} mt="1">
@@ -95,9 +111,10 @@ export const Landing = () => {
                         </Link>
 
                     </Stack>
+                </motion.div>
+
+            </Box>
 
-                </Box>
-            </motion.div>
 
         </Box >
     )

data/awards.json

@@ -26,7 +26,11 @@
         "link": "https://devpost.com/software/spotion"
     },
     {
-        "title": "<span class='text-light-purple'>9th Place</span> - Hack the Cloud 2.0",
+        "title": "9th Place - Hack the Cloud 2.0",
         "link": "https://devpost.com/software/spotion"
+    },
+    {
+        "title": "State Winners - Samsumg Solve for Tomorrow",
+        "link": "https://www.samsung.com/us/solvefortomorrow/"
     }
 ]

next-seo.config.js

@@ -0,0 +1,24 @@
+const title = 'Ganning Xu - Developer, Student, Aviation Enthusiast.'
+const description =
+    'Personal website for Ganning Xu, a high school junior at the North Carolina School of Science and Mathematics.'
+
+const SEO = {
+    title,
+    description,
+    canonical: 'https://www.ganning.me',
+    openGraph: {
+        type: 'website',
+        locale: 'en_IE',
+        url: 'https://www.ganning.me',
+        title,
+        description,
+        images: [
+            {
+                url: 'https://benjamincarlson.io/images/favicon.png',
+                alt: title
+            }
+        ]
+    }
+}
+
+export default SEO

next.config.js

@@ -1,5 +1,11 @@
 module.exports = {
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      require('./scripts/generate-sitemap');
+    }
 
+    return config
+  },
   env: {
     NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
     NEXT_PUBLIC_SUPABASE_CLIENT_KEY: process.env.NEXT_PUBLIC_SUPABASE_CLIENT_KEY,

package.json

@@ -22,6 +22,7 @@
     "next": "12.0.7",
     "next-mdx-remote": "^2.1.4",
     "next-seo": "^4.28.1",
+    "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",

pages/_app.js

@@ -2,10 +2,11 @@ import '../styles/globals.css'
 import { ChakraProvider } from '@chakra-ui/react'
 import theme from '../theme'
 import React from 'react'
-import { useColorMode, ColorModeProvider, ColorModeScript } from '@chakra-ui/react'
+import { useColorMode } from '@chakra-ui/react'
 import { MDXProvider } from '@mdx-js/react'
 import { Global, css } from '@emotion/react'
-// import { DefaultSeo } from 'next-seo'
+import { DefaultSeo } from 'next-seo'
+import SEO from '../next-seo.config'
 import { prismLightTheme, prismDarkTheme } from '../styles/prism'
 import MDXComponents from '../components/MDXComponents'
 
@@ -41,7 +42,9 @@ function MyApp({ Component, pageProps }) {
     <ChakraProvider theme={theme}>
       <MDXProvider components={MDXComponents}>
         <GlobalStyle>
+          <DefaultSeo {...SEO} />
           <Component {...pageProps} />
+
         </GlobalStyle>
       </MDXProvider>
     </ChakraProvider >

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Sitemap: https://www.ganning.me/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://ganning.me/blog</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/experience</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/projects</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/timeline</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/blog/creating-a-hello-world-website</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/blog/how-to-create-a-discord-bot</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/blog/how-to-learn-web-development</loc>
+  </url>
+
+  <url>
+    <loc>https://ganning.me/blog/how-to-pick-a-programming-language</loc>
+  </url>
+
+  <url>
+    <loc
+      >https://ganning.me/blog/learning-a-new-programming-language-from-scratch</loc
+    >
+  </url>
+
+  <url>
+    <loc>https://ganning.me/blog/what-is-programming</loc>
+  </url>
+</urlset>

scripts/generate-sitemap.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+
+const globby = require('globby');
+const prettier = require('prettier');
+
+(async () => {
+    const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
+    const pages = await globby([
+        'pages/*.js',
+        'data/**/*.mdx',
+        '!pages/_*.js',
+        '!pages/api'
+    ]);
+    const sitemap = `
+        <?xml version="1.0" encoding="UTF-8"?>
+        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+            ${pages
+            .map((page) => {
+                const path = page
+                    .replace('pages', '')
+                    .replace('data', '')
+                    .replace('.js', '')
+                    .replace('.mdx', '');
+                const route = path === '/index' ? '' : path;
+                return `
+                        <url>
+                            <loc>${`https://ganning.me${route}`}</loc>
+                        </url>
+                    `;
+            })
+            .join('')}
+        </urlset>
+    `;
+
+    const formatted = prettier.format(sitemap, {
+        ...prettierConfig,
+        parser: 'html'
+    });
+
+    // eslint-disable-next-line no-sync
+    fs.writeFileSync('public/sitemap.xml', formatted);
+})();