feat: seo

9 files changed, 89 insertions, 10 deletions

diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..95f2595
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,35 @@
+import { 
+  Link,
+  Box, 
+  HStack, 
+  IconButton,
+  Menu,
+  Heading,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
+  useMediaQuery,
+  Container
+} from '@chakra-ui/react'
+
+const Footer = () => {
+  return (
+    <Box as="footer">
+    <Container 
+      maxW="xl"
+      mt="5"
+      mb="5"
+      textAlign="center"
+      opacity="0.5"
+      fontSize="0.8rem"
+    >© 2022 Michał Sapka. All Rights Reserved.
+    </Container>
+    </Box>)
+
+}
+
+export default Footer
diff --git a/components/layout.tsx b/components/layout.tsx
index f137cb4..bca00b8 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -1,6 +1,7 @@
 import TopNav from '../components/topnav'
+import Footer from '../components/footer'
 import { Container, Box } from '@chakra-ui/react'
-import ReactNode from 'react'
+import { DefaultSeo } from 'next-seo'
 
 type Props = {
     children?: any
@@ -9,12 +10,27 @@ type Props = {
 export default function Layout({ children } : Props) {
   return (
     <>
+        <DefaultSeo
+          openGraph={{
+            type: 'website',
+            locale: 'en_US',
+            url: 'https://michal.sapka.me/',
+            site_name: 'Michał Sapka'
+          }}
+          twitter={{
+            handle: '@handle',
+            site: '@site',
+            cardType: 'summary_large_image',
+          }}
+        />
       <TopNav/>
       <Container maxW="lg">
         <Box as="main" pt="20">
           {children}
         </Box>
       </Container>
+      <Footer/>
+
     </>
   )
 }
diff --git a/components/topnav.tsx b/components/topnav.tsx
index a46f38f..083471d 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -70,7 +70,11 @@ export default function Navbar() {
     width="100%"
     pt="5px"
   >
-    <Container maxW="xl">
+    <Container 
+      maxW="xl"
+      mt="0"
+      mb="1"
+    >
       <HStack>
         <Heading flex={[1,1,0,0]}>Michal </Heading>
         <Navigation/>
diff --git a/package-lock.json b/package-lock.json
index 662c9c9..94b7354 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "feed": "^4.2.2",
         "framer-motion": "^7.0.0",
         "next": "^12.2.5",
+        "next-seo": "^5.5.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-icons": "^4.4.0"
@@ -4157,6 +4158,16 @@
         }
       }
     },
+    "node_modules/next-seo": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.5.0.tgz",
+      "integrity": "sha512-5ouBHFtx8YrSDW44lj0qIEQ+oMcz6stgoITB+SqHUZbhgizoJsyLmq73gJ0lxtEKpcN8vG2QgRIJfdb8OAPChw==",
+      "peerDependencies": {
+        "next": "^8.1.1-canary.54 || >=9.0.0",
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -8332,6 +8343,12 @@
         "use-sync-external-store": "1.2.0"
       }
     },
+    "next-seo": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.5.0.tgz",
+      "integrity": "sha512-5ouBHFtx8YrSDW44lj0qIEQ+oMcz6stgoITB+SqHUZbhgizoJsyLmq73gJ0lxtEKpcN8vG2QgRIJfdb8OAPChw==",
+      "requires": {}
+    },
     "node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
diff --git a/package.json b/package.json
index 3156103..98a8fd7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "feed": "^4.2.2",
     "framer-motion": "^7.0.0",
     "next": "^12.2.5",
+    "next-seo": "^5.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0"
diff --git a/pages/_document.tsx b/pages/_document.tsx
index ca81402..05755e2 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -5,11 +5,11 @@ import theme from '../lib/theme'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
-         <title>Michał Sapka's website</title>
+      <Head>
         <link rel="alternate" type="application/rss+xml" href="https://michal.sapka.me/rss/feed.xml" title="Recent publications RSS Feed" />
         <link rel="alternate" type="application/feed+json" href="https://michal.sapka.me/rss/feed.json" title="Recent publications RSS Feed" />
         <link rel="alternate" type="application/atom+xml" href="https://michal.sapka.me/rss/atom.xml" title="Recent publications RSS Feed" />
+        </Head>
       <body>
         <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Main />
diff --git a/pages/index.tsx b/pages/index.tsx
index 2e73368..1e82aa8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,8 +12,10 @@ import {
   Stack,
   Button,
 } from '@chakra-ui/react'
+import Head from 'next/head'
 import { AiFillGithub,AiFillMediumCircle} from "react-icons/ai";
 import Publications from "../data/publications"
+import { NextSeo } from 'next-seo'
 import generateRssFeed from "../lib/feed"
 
 type BioEntryType = {
@@ -31,12 +33,16 @@ const BioEntry = ({date, description} : BioEntryType) => {
 const Home: NextPage = () => {
   return (
     <Layout>
+      <NextSeo
+        title="Michał Sapka - Homepage"
+        description="Hello and welcome to my homepage"
+        />
       <VStack spacing="24px"align="stretch">
         <Box as="section">
           <Stack width="100%" direction={["column", "column", "row"]}>
             <Box flex="1">
-              <Heading variant="main-title">Michal Sapka</Heading>
-              <Text variant="main-title">Self-though senior software engineer from Poland.</Text>
+              <Heading variant="main-title">Michał Sapka</Heading>
+              <Text variant="main-title">Self-though Senior Software Engineer working at Zendesk.</Text>
             </Box>
             <Box textAlign="center">
               <CImage
@@ -52,7 +58,7 @@ const Home: NextPage = () => {
       <Box as="section">
       <Heading variant="section-title" as="h3">About me</Heading>
           <Text>
-            I am a self-thought software engineer working at <Link href="https://zendesk.com" isExternal>Zendesk</Link>. Even though I started my professional programming life relatively late in life, I&apos;ve been passionate about computers since I was ten. I love the process of creating software. Even though I consider caring about the product a requisite, the technical side strongly drives me. I take pride in what and how I do things. I have most extensive experience working with Ruby on Rails and relative databases. Still, I am expanding my knowledge around service-oriented architecture, no-SQL databases, and other languages - currently, I am trying to get the hang of Golang and MongoDB. I am also trying to get familiar with the modern ReactJS ecosystem.
+            Michał is a self-thought software engineer working at <Link href="https://zendesk.com" isExternal>Zendesk</Link>. Even though he has started his professional programming life relatively late in life, he has been passionate about computers since he was ten. He loves the process of creating software. Even though he consider caring about the product a requisite, the technical side strongly drives him. He takes pride in what and how he do things. He has most extensive experience working with Ruby on Rails and relative databases. Still, he is expanding my knowledge around service-oriented architecture, no-SQL databases, and other languages - currently, he is trying to get the hang of Golang and MongoDB. He is also trying to get familiar with the modern ReactJS ecosystem.
         </Text>
       </Box>
       
@@ -76,7 +82,7 @@ const Home: NextPage = () => {
           </VStack>
             
             <Stack width="100%" direction={['column', 'column', 'row', 'row']}>
-            <Box flex="1" textAlign={['left', 'left', 'center', 'center']}>
+            <Box flex="1" mt="2" mb="2" textAlign={['left', 'left', 'center', 'center']}>
               <Link href="https://mailchi.mp/85b0caa8a1c1/michalsapkapl" isExternal>
                 <Button>Subscribe to my newsletter</Button>
               </Link>
diff --git a/public/rss/atom.xml b/public/rss/atom.xml
index 75ad28b..c6fbf3b 100644
--- a/public/rss/atom.xml
+++ b/public/rss/atom.xml
@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://michal.sapka.pl</id>
     <title>Michał's publications</title>
-    <updated>2022-09-05T20:50:45.878Z</updated>
+    <updated>2022-09-06T20:00:31.101Z</updated>
     <generator>Feed for Node.js</generator>
     <author>
         <name>Michał M. Sapka</name>
diff --git a/public/rss/feed.xml b/public/rss/feed.xml
index 4cdc9f3..2113bdc 100644
--- a/public/rss/feed.xml
+++ b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <title>Michał's publications</title>
         <link>https://michal.sapka.pl</link>
         <description>Michał Sapka's recent publications</description>
-        <lastBuildDate>Mon, 05 Sep 2022 20:50:45 GMT</lastBuildDate>
+        <lastBuildDate>Tue, 06 Sep 2022 20:00:31 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>Feed for Node.js</generator>
         <copyright>All rights reserved 2022, Michał M. Sapka</copyright>