Upgrade dependencies: Gatsby 5.0.1

4 files changed, 60 insertions, 184 deletions

diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
index e3683df..6d3323b 100644
--- a/src/components/SEO.tsx
+++ b/src/components/SEO.tsx
@@ -1,88 +1,25 @@
 import React from "react";
-import PropTypes from "prop-types";
-import { Helmet } from "react-helmet";
-import { useStaticQuery, graphql } from "gatsby";
 
-interface MetaProps {
-  name: string;
-  content: string;
-}
-
-interface SEOProps {
-  description: string;
-  lang: string;
-  meta: MetaProps[];
-  title: string;
-}
-
-function SEO({ description, lang, meta, title }: SEOProps): React.ReactElement {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-          }
-        }
-      }
-    `
-  );
-  const metaDescription = description || site.siteMetadata.description;
+export function Head(): React.ReactElement {
+  const metaDescription =
+    "The official website of Kevin Hoerr, developer of websites.";
   return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ].concat(meta)}
-    />
+    <>
+      <meta name="twitter:description" content={metaDescription} />
+      <meta
+        name="twitter:title"
+        content="Kevin J Hoerr &lt;kjhoerr@submelon.tech&gt;"
+      />
+      <meta name="twitter:creator" content="Kevin J Hoerr" />
+      <meta name="twitter:card" content="summary" />
+      <meta property="og:type" content="website" />
+      <meta property="og:description" content={metaDescription} />
+      <meta
+        property="og:title"
+        content="Kevin J Hoerr &lt;kjhoerr@submelon.tech&gt;"
+      />
+      <meta name="description" content={metaDescription} />
+      <title>Kevin J Hoerr &lt;kjhoerr@submelon.tech&gt;</title>
+    </>
   );
 }
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-};
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-};
-export default SEO;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 0f6164c..ac489f1 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -52,3 +52,4 @@ const NotFoundPage = (): React.ReactElement => {
 };
 
 export default NotFoundPage;
+export { Head } from "../components/SEO";
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a1f4f35..33b062b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 import { StaticImage } from "gatsby-plugin-image";
-import SEO from "../components/SEO";
 import "../styles/main.css";
-import { FaMastodon } from "react-icons/fa";
+import { FaGithub, FaMastodon } from "react-icons/fa";
 
-const TIMESTAMP = "1641237448";
+const TIMESTAMP = "1668805149";
 const SHORT_CHARS = [
   "0",
   "1",
@@ -72,11 +71,13 @@ const SHORT_CHARS = [
 ];
 
 function toShort(valu: number): string {
-  return valu
-    .toString()
-    .match(/.{1,2}/g)
-    .map((s) => SHORT_CHARS[parseInt(s)])
-    .join("");
+  return (
+    valu
+      .toString()
+      .match(/.{1,2}/g)
+      ?.map((s) => SHORT_CHARS[parseInt(s)])
+      .join("") ?? ""
+  );
 }
 
 function getTimestamp(seconds: number): string {
@@ -188,7 +189,6 @@ const StyledContainer = styled.div`
 const IndexPage = (): React.ReactElement => {
   return (
     <main>
-      <SEO title="Kevin J Hoerr <kjhoerr@submelon.tech>" />
       <StyledContainer>
         <div id="content">
           <div id="header">
@@ -230,13 +230,9 @@ const IndexPage = (): React.ReactElement => {
               </a>
             </div>
             <div className="link">
-              <a href="https://order.blackrockbrews.com">
-                Black Rock Brewing (recent project)
-              </a>
-            </div>
-            <div className="link">
-              <a href="https://git.submelon.dev">
-                My Gitea instance for pet projects
+              <a href="https://github.com/kjhoerr">
+                <FaGithub size={20} style={{ marginBottom: "-4px" }} /> My git
+                projects
               </a>
             </div>
           </div>
@@ -244,7 +240,7 @@ const IndexPage = (): React.ReactElement => {
 
         <div id="meta">
           <span>
-            &copy;2021 kjhoerr@https://submelon.dev/:
+            &copy;2022 kjhoerr@https://submelon.dev/:
             {getTimestamp(parseInt(TIMESTAMP))}
           </span>
         </div>
@@ -254,3 +250,4 @@ const IndexPage = (): React.ReactElement => {
 };
 
 export default IndexPage;
+export { Head } from "../components/SEO";
diff --git a/src/styles/main.css b/src/styles/main.css
index 4553a42..e8cdf95 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -3,102 +3,43 @@
   * Author: Kevin J Hoerr
   */
 body {
-  background-color: #e1e1e1; /* #e1e1e1, #d5d5d5 */
+  background-color: #e1e1e1;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXpUWHRUaXRsZQAACNdLSkzOTi/KL81LAQAWSwQhPQTyzQAAABt6VFh0QXV0aG9yAAAI1/NOLcvMU/DITy0qAgAYDwQeUS3vvwAAAZNJREFUeNrt3bFtQ0EMREH5x+q/M3Wi3IJaMGR7yHtbwCWDBY4J+fV4PL5vH879fr9tz/P5/JV3rzAcjI+DhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhAGBhDHglxXG/+RdjisMB2N1QyZirAWZirESZDLGOpDpGKtANmCsAdmCsQJkE8Z4kG0Yo0E2YowF2YoxEmQzxjiQ7RijQE7AGANyCsYIkJMweJDTMGiQEzFYkFMxSJCTMTiQ0zEokDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAgkDAGTuph/E3e5bjCcDBGNOS03fRXGA4GDXLq1YYrDAeDBDn9nskVhoNBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYQBgYTxs7wA+yQwVSKvoHMAAAAASUVORK5CYII=);
   background-repeat: repeat;
-  font-family: Verdana;
-  font-size: 16px;
+  font-display: serif;
+  font-family: Merriweather, serif;
+  font-size: 16px
 }
+
 ::selection {
   background-color: #999;
-  color: #fff;
-}
-div#content {
-  width: 350px;
-  margin: 0px auto;
-  margin-bottom: 120px;
-  padding-top: 136px;
-}
-div#header {
-  margin: 0px 5px;
-  text-align: center;
-  pointer-events: none;
-  user-select: none;
-}
-div#tagline {
-  background-color: #000;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-size: 36px;
-  font-weight: bold;
-}
-div#info {
-  padding: 4px 8px;
-}
-div#info a,
-div#info a:visited,
-div#info a:hover {
-  text-decoration: none;
-  color: #000;
-  padding: 1px 3px;
-}
-div#info a,
-div#info a:visited {
-  background-color: #e1e1e1;
-}
-div#info a:hover {
-  background-color: #d5d5d5;
+  color: #fff
 }
-div#info,
-div.link {
-  background-color: #fff;
-  border: 1px #000 solid;
-  border-left: 3px #000 solid;
-  border-right: 3px #000 solid;
-}
-div.link,
-div#tagline {
-  margin-top: 3px;
-}
-div.link > a,
-div.link > a:visited,
-div.link > a:active {
-  padding: 8px;
-  width: 328px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
-  color: #666;
-}
-div.link:hover {
-  background-color: #ddd;
-  color: #222;
-}
-div.link:last-child,
-div.link:last-child > a {
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
-}
-q,
+
+em,
 p,
-em {
+q {
   display: block;
-  text-indent: 28px;
+  text-indent: 28px
 }
 
 p {
-  margin: 0px 0px 16px;
+  margin: 0 0 16px
 }
 
-div#meta {
-  width: 100%;
-  position: fixed;
-  left: 0px;
-  bottom: 0px;
-  text-align: center;
-  font-size: 12px;
+p>a,
+p>a:hover,
+p>a:visited {
+  color: #000;
+  padding: 1px 3px;
+  text-decoration: none
 }
-div#meta > span {
-  background-color: #e1e1e1;
+
+p>a,
+p>a:visited {
+  background-color: #e1e1e1
 }
+
+p>a:hover {
+  background-color: #d5d5d5
+}
\ No newline at end of file