From 299159ab2b4b1488cfc99e38c921e35d61a1264a Mon Sep 17 00:00:00 2001 From: Kevin J Hoerr Date: Fri, 18 Nov 2022 17:57:24 -0500 Subject: Refactor components and styles to be consistent --- src/components/BlockLink.tsx | 12 ++ src/components/Footer.tsx | 103 ++++++++++++++++ src/pages/404.tsx | 60 +++------ src/pages/index.tsx | 285 ++++++++----------------------------------- src/styles/BlockAnchor.ts | 21 ++++ src/styles/BlockBody.ts | 27 ++++ src/styles/BlockHeader.ts | 12 ++ src/styles/Content.ts | 8 ++ src/styles/Footer.ts | 13 ++ src/styles/index.ts | 7 ++ 10 files changed, 270 insertions(+), 278 deletions(-) create mode 100644 src/components/BlockLink.tsx create mode 100644 src/components/Footer.tsx create mode 100644 src/styles/BlockAnchor.ts create mode 100644 src/styles/BlockBody.ts create mode 100644 src/styles/BlockHeader.ts create mode 100644 src/styles/Content.ts create mode 100644 src/styles/Footer.ts create mode 100644 src/styles/index.ts diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx new file mode 100644 index 0000000..3144c86 --- /dev/null +++ b/src/components/BlockLink.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { BlockAnchor, BlockBody } from "../styles"; + +const BlockLink = ({ children, ...attributes }) => { + return ( + + {children} + + ); +}; + +export default BlockLink; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..3e6932b --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import { Footer } from "../styles"; + +const SHORT_CHARS = [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "a", + "b", + "c", + "d", + "e", + "f", + "g", + "h", + "i", + "j", + "k", + "l", + "m", + "n", + "o", + "p", + "q", + "r", + "s", + "t", + "u", + "v", + "w", + "x", + "y", + "z", + "A", + "B", + "C", + "D", + "E", + "F", + "G", + "H", + "I", + "J", + "K", + "L", + "M", + "N", + "O", + "P", + "Q", + "R", + "S", + "T", + "U", + "V", + "W", + "X", + "Y", + "Z", +]; + +function toShort(valu: number): string { + return ( + valu + .toString() + .match(/.{1,2}/g) + ?.map((s) => SHORT_CHARS[parseInt(s)]) + .join("") ?? "" + ); +} + +function getTimestamp(seconds: number): string { + const date = new Date(seconds * 1000); + const dateArr = [ + date.getUTCFullYear(), + date.getUTCMonth(), + date.getUTCDate(), + date.getUTCHours(), + date.getUTCMinutes(), + ]; + + return dateArr.map(toShort).join(".") + "-0"; +} + +const FooterInfo = ({ timestamp }) => { + return ( + + ); +}; + +export default FooterInfo; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index ac489f1..6b0b85a 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,52 +1,24 @@ import * as React from "react"; -import { Link } from "gatsby"; - -// styles -const pageStyles = { - color: "#232129", - padding: "96px", - fontFamily: "-apple-system, Roboto, sans-serif, serif", -}; -const headingStyles = { - marginTop: 0, - marginBottom: 64, - maxWidth: 320, -}; - -const paragraphStyles = { - marginBottom: 48, -}; -const codeStyles = { - color: "#8A6534", - padding: 4, - backgroundColor: "#FFF4DB", - fontSize: "1.25rem", - borderRadius: 4, -}; +import BlockLink from "../components/BlockLink"; +import { BlockBody, BlockHeader, Content } from "../styles"; // markup const NotFoundPage = (): React.ReactElement => { return ( -
- Not found -

Page not found

-

- Sorry{" "} - - 😔 - {" "} - we couldn’t find what you were looking for. -
- {process.env.NODE_ENV === "development" ? ( - <> -
- Try creating a page in src/pages/. -
- - ) : null} -
- Go home. -

+
+ + Not found + + Sorry{" "} + + 😔 + {" "} + we couldn't find what you were looking for. + + + Home + +
); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 33b062b..58f5616 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,250 +1,67 @@ import React from "react"; -import styled from "styled-components"; import { StaticImage } from "gatsby-plugin-image"; import "../styles/main.css"; import { FaGithub, FaMastodon } from "react-icons/fa"; +import BlockLink from "../components/BlockLink"; +import Footer from "../components/Footer"; +import { BlockBody, BlockHeader, Content } from "../styles"; const TIMESTAMP = "1668805149"; -const SHORT_CHARS = [ - "0", - "1", - "2", - "3", - "4", - "5", - "6", - "7", - "8", - "9", - "a", - "b", - "c", - "d", - "e", - "f", - "g", - "h", - "i", - "j", - "k", - "l", - "m", - "n", - "o", - "p", - "q", - "r", - "s", - "t", - "u", - "v", - "w", - "x", - "y", - "z", - "A", - "B", - "C", - "D", - "E", - "F", - "G", - "H", - "I", - "J", - "K", - "L", - "M", - "N", - "O", - "P", - "Q", - "R", - "S", - "T", - "U", - "V", - "W", - "X", - "Y", - "Z", -]; - -function toShort(valu: number): string { - return ( - valu - .toString() - .match(/.{1,2}/g) - ?.map((s) => SHORT_CHARS[parseInt(s)]) - .join("") ?? "" - ); -} - -function getTimestamp(seconds: number): string { - const date = new Date(seconds * 1000); - const dateArr = [ - date.getUTCFullYear(), - date.getUTCMonth(), - date.getUTCDate(), - date.getUTCHours(), - date.getUTCMinutes(), - ]; - - return dateArr.map(toShort).join(".") + "-0"; -} - -// styles -const StyledContainer = styled.div` - div#content { - width: 350px; - margin: 0px auto; - margin-bottom: 120px; - padding-top: 136px; - } - div#header { - 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; - } - 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, - p, - em { - display: block; - text-indent: 28px; - } - - p { - margin: 0px 0px 16px; - } - - div#meta { - width: 100%; - position: fixed; - left: 0px; - bottom: 0px; - text-align: center; - font-size: 12px; - } - div#meta > span { - background-color: #e1e1e1; - } -`; // markup const IndexPage = (): React.ReactElement => { return (
- -
- -
Hello!
-
-

- I'm a computer science and math graduate from Millersville - University. I work as an IT consultant and specialize in - development operations and systems validation for web - applications. -

-

- My most recent projects have been focused on full-stack - development. I use Kubernetes for orchestration, NextJS for - front-end, and rust+actix-web for my backend services with GraphQL - serving as the public API. -

-

- This site was recently rebuilt using GatsbyJS since the instance - formerly holding this website broke during upgrades. Thank - goodness for backups. -

- - Kevin H. -
- + +
+
+ Hello! + +

+ I'm a computer science and math graduate from Millersville + University. I work as an IT consultant and specialize in development + operations and systems validation for web applications. +

+

+ My most recent projects have been focused on full-stack development. + I use Kubernetes for orchestration, NextJS for front-end, and + rust+actix-web for my backend services with GraphQL serving as the + public API. +

+

+ This site was recently rebuilt using GatsbyJS since the instance + formerly holding this website broke during upgrades. Thank goodness + for backups. +

+ - Kevin H. + + + {" "} + @kjhoerr@cybr.es + + + kjhoerr on + GitHub + + -
- - ©2022 kjhoerr@https://submelon.dev/: - {getTimestamp(parseInt(TIMESTAMP))} - -
- +
); }; diff --git a/src/styles/BlockAnchor.ts b/src/styles/BlockAnchor.ts new file mode 100644 index 0000000..05eb2a2 --- /dev/null +++ b/src/styles/BlockAnchor.ts @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +export default styled.a` + padding: 8px; + width: 328px; + display: block; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + color: #666; + &:visited, + &:active { + padding: 8px; + width: 328px; + display: block; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + color: #666; + } +`; diff --git a/src/styles/BlockBody.ts b/src/styles/BlockBody.ts new file mode 100644 index 0000000..7791873 --- /dev/null +++ b/src/styles/BlockBody.ts @@ -0,0 +1,27 @@ +import styled from "styled-components"; +import BlockAnchor from "./BlockAnchor"; + +export default styled.div` + & + & { + margin-top: 3px; + } + + background-color: #fff; + border: 1px #000 solid; + border-left: 3px #000 solid; + border-right: 3px #000 solid; + + padding: ${(props) => props.theme.padding ?? "0"}; + + & > ${BlockAnchor} { + &:hover { + background-color: #ddd; + color: #222; + } + } + &:last-child, + &:last-child > ${BlockAnchor} { + border-bottom-left-radius: 18px; + border-bottom-right-radius: 18px; + } +`; diff --git a/src/styles/BlockHeader.ts b/src/styles/BlockHeader.ts new file mode 100644 index 0000000..eb6fe93 --- /dev/null +++ b/src/styles/BlockHeader.ts @@ -0,0 +1,12 @@ +import styled from "styled-components"; + +export default styled.div` + background-color: #000; + width: 100%; + text-align: center; + color: #fff; + font-size: 36px; + font-weight: bold; + margin-top: 3px; + padding-top: 4px; +`; diff --git a/src/styles/Content.ts b/src/styles/Content.ts new file mode 100644 index 0000000..388e12f --- /dev/null +++ b/src/styles/Content.ts @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +export default styled.div` + width: 350px; + margin: 0px auto; + margin-bottom: 120px; + padding-top: 136px; +`; diff --git a/src/styles/Footer.ts b/src/styles/Footer.ts new file mode 100644 index 0000000..a121b68 --- /dev/null +++ b/src/styles/Footer.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export default styled.div` + width: 100%; + position: fixed; + left: 0px; + bottom: 0px; + text-align: center; + font-size: 12px; + span { + background-color: #e1e1e1; + } +`; diff --git a/src/styles/index.ts b/src/styles/index.ts new file mode 100644 index 0000000..8eee62a --- /dev/null +++ b/src/styles/index.ts @@ -0,0 +1,7 @@ +import BlockAnchor from "./BlockAnchor"; +import BlockBody from "./BlockBody"; +import BlockHeader from "./BlockHeader"; +import Content from "./Content"; +import Footer from "./Footer"; + +export { BlockAnchor, BlockBody, BlockHeader, Content, Footer }; -- cgit