From 4ea38d6249ffb2a146876bc3c7d4f79e6bbbe832 Mon Sep 17 00:00:00 2001 From: Kevin J Hoerr Date: Fri, 18 Nov 2022 16:28:18 -0500 Subject: Upgrade dependencies: Gatsby 5.0.1 --- src/components/SEO.tsx | 103 +++++++++------------------------------------- src/pages/404.tsx | 1 + src/pages/index.tsx | 31 +++++++------- src/styles/main.css | 109 ++++++++++++------------------------------------- 4 files changed, 60 insertions(+), 184 deletions(-) (limited to 'src') 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 ( - + <> + + + + + + + + + Kevin J Hoerr <kjhoerr@submelon.tech> + ); } -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 (
-
-
@@ -244,7 +240,7 @@ const IndexPage = (): React.ReactElement => {
- ©2021 kjhoerr@https://submelon.dev/: + ©2022 kjhoerr@https://submelon.dev/: {getTimestamp(parseInt(TIMESTAMP))}
@@ -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 -- cgit