updated packages, added opengraph

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -18,6 +18,7 @@ process.env.SENTRY_DSN = SENTRY_DSN
 const basePath = ''
 
 const config = {
+  experimental: { esmExternals: true },
   productionBrowserSourceMaps: true,
   env: {
     // Make the COMMIT_SHA available to the client so that Sentry events can be
@@ -32,9 +33,6 @@ const config = {
   images: {
     domains: ['cdn-images-1.medium.com']
   },
-  future: {
-    webpack5: true,
-  },
   workboxOpts: {
     swDest: 'static/service-worker.js',
     runtimeCaching: [

package.json

@@ -23,55 +23,55 @@
   },
   "homepage": "https://github.com/kochie/me.kochie.io#readme",
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-react": "^7.13.13",
-    "@fortawesome/fontawesome-pro": "^5.15.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/pro-duotone-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@fortawesome/fontawesome-pro": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/pro-duotone-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
-    "@next/mdx": "^10.1.3",
-    "@sentry/browser": "^6.3.0",
-    "@sentry/integrations": "^6.3.0",
-    "@sentry/node": "^6.3.0",
-    "@sentry/webpack-plugin": "^1.15.0",
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@next/mdx": "^11.1.0",
+    "@sentry/browser": "^6.11.0",
+    "@sentry/integrations": "^6.11.0",
+    "@sentry/node": "^6.11.0",
+    "@sentry/webpack-plugin": "^1.17.1",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "@typescript-eslint/typescript-estree": "^4.22.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "babel-jest": "^26.6.3",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
+    "@typescript-eslint/typescript-estree": "^4.29.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "babel-jest": "^27.0.6",
     "enzyme": "^3.11.0",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-import": "^2.24.1",
+    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
-    "jest": "^26.6.3",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
     "jest-css-modules": "^2.1.0",
-    "next": "^10.1.3",
+    "next": "^11.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-offline": "^5.0.5",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.2.10",
-    "postcss-css-variables": "^0.17.0",
+    "next-seo": "^4.26.0",
+    "postcss": "^8.3.6",
+    "postcss-css-variables": "^0.18.0",
     "postcss-custom-media": "^8.0.0",
     "postcss-custom-properties": "^11.0.0",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "ts-jest": "^26.5.5",
-    "typescript": "^4.2.4"
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.3.5"
   }
 }

src/components/Contact/Contact.tsx

@@ -9,11 +9,13 @@ export default function Contact(): ReactElement {
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [message, setMessage] = useState('')
+
+  console.log(ContactInfo)
 
   return (
     <div>
       <h2>Contact</h2>
-      <ContactInfo />
+      {/* <ContactInfo /> */}
       <div id="map" />
       <form action="https://formspree.io/robert@kochie.io" method="POST">
         <div>

src/pages/index.tsx

@@ -1,9 +1,34 @@
 import React, { ReactElement } from 'react'
+import { NextSeo } from 'next-seo';
 
 import { Head, App, Theme, BuyMeACoffee } from '../components'
 
 const Index = (): ReactElement => (
   <>
+    <NextSeo
+      title="About Robert Koch"
+      description="Hi, I'm Robert. This is my site, click through to see some of the content I've worked on. I'm an electrical and software engineer, based in Melbourne, Australia."
+      canonical="https://me.kochie.io/"
+      openGraph={{
+        url: 'https://me.kochie.io',
+        title: 'About Robert Koch',
+        description: "Hi, I'm Robert. This is my site, click through to see some of the content I've worked on. I'm an electrical and software engineer, based in Melbourne, Australia.",
+        images: [
+          {
+            url: 'https://me.kochie.io/images/AirplaneMaker.jpg',
+            width: 1920,
+            height: 1080,
+            alt: 'Airplane Maker',
+          }
+        ],
+        site_name: 'Robert Koch',
+      }}
+      twitter={{
+        handle: '@kochie',
+        site: '@kochie',
+        cardType: 'summary_large_image',
+      }}
+    />
     <Head />
     <App />
     <Theme />