diff --git a/src/Body.tsx b/src/Body.tsx deleted file mode 100644 index a86a4bd..0000000 --- a/src/Body.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import "./style.css"; - -import type { PropsWithChildren } from "react"; - -import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture"; - -import CV from "./assets/cv.svg?react"; -import Git from "./assets/git.svg?react"; -import LinkedIn from "./assets/linkedin.svg?react"; -import Mastodon from "./assets/mastodon.svg?react"; -import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react"; - -type ColouredBlockProps = { - colorNum: number; -}; - -const ColouredBlock = ({ colorNum }: ColouredBlockProps) => ( - ███ -); - -type ColouredLineProps = { - light: boolean; -}; - -const ProfilePicture = () => ( -
- - {Object.entries(hero.sources).map(([format, src]) => ( - - ))} - A picture of me in a suit smiling - -
-); - -const Highlight = ({ children }: PropsWithChildren) => {children}; - -type FetchHeaderProps = { - user: string; - hostname: string; -}; - -const FetchHeader = ({ user, hostname }: FetchHeaderProps) => ( - <> -

- {user}@{hostname} -

-

{"-".repeat(user.length + 1 + hostname.length)}

- -); - -type InfoLineProps = { - label: string; - value: string; -}; - -const InfoLine = ({ label, value }: InfoLineProps) => ( -

- {label}: {value} -

-); - -const BlankLine = () => ( -

-
-

-); - -const Description = () => ( -
- - - - - - - - - -
-); - -const ColouredLine = ({ light }: ColouredLineProps) => { - const startIndex = light ? 8 : 0; - return ( -

- {Array.from({ length: 8 }).map( - ( - _value, - index, // Apparently this is the best way to map a range in JavaScript - ) => ( - - ), - )} -

- ); -}; - -// TODO: Automate screenshot of info for thumbnail? -const Fetch = () => { - return ( -
-
- -
- - - - -
-
-
- ); -}; - -type ImageLinkProps = { - href: string; - title: string; - Image: typeof Git; // Not ideal, but I can't figure out how to import the type directly from the declared wildcard module -}; - -const ImageLink = ({ href, title, Image }: ImageLinkProps) => ( - - - -); - -const Links = () => ( -
- - - - - - -
-); - -const Body = () => { - return ( - <> - - - - ); -}; - -export default Body; diff --git a/src/Body/Fetch/ColouredLine.tsx b/src/Body/Fetch/ColouredLine.tsx new file mode 100644 index 0000000..f328013 --- /dev/null +++ b/src/Body/Fetch/ColouredLine.tsx @@ -0,0 +1,29 @@ +type ColouredBlockProps = { + colorNum: number; +}; + +const ColouredBlock = ({ colorNum }: ColouredBlockProps) => ( + ███ +); + +type ColouredLineProps = { + light: boolean; +}; + +const ColouredLine = ({ light }: ColouredLineProps) => { + const startIndex = light ? 8 : 0; + return ( +

+ {Array.from({ length: 8 }).map( + ( + _value, + index, // Apparently this is the best way to map a range in JavaScript + ) => ( + + ), + )} +

+ ); +}; + +export default ColouredLine; diff --git a/src/Body/Fetch/Description.tsx b/src/Body/Fetch/Description.tsx new file mode 100644 index 0000000..833cf32 --- /dev/null +++ b/src/Body/Fetch/Description.tsx @@ -0,0 +1,42 @@ +import { Highlight } from "./utils"; + +type HeaderProps = { + user: string; + hostname: string; +}; + +const Header = ({ user, hostname }: HeaderProps) => ( + <> +

+ {user}@{hostname} +

+

{"-".repeat(user.length + 1 + hostname.length)}

+ +); + +type InfoLineProps = { + label: string; + value: string; +}; + +const InfoLine = ({ label, value }: InfoLineProps) => ( +

+ {label}: {value} +

+); + +const Description = () => ( +
+
+ + + + + + + + +
+); + +export default Description; diff --git a/src/Body/Fetch/ProfilePicture.tsx b/src/Body/Fetch/ProfilePicture.tsx new file mode 100644 index 0000000..3a74ca1 --- /dev/null +++ b/src/Body/Fetch/ProfilePicture.tsx @@ -0,0 +1,14 @@ +import hero from "../../assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture"; + +const ProfilePicture = () => ( +
+ + {Object.entries(hero.sources).map(([format, src]) => ( + + ))} + A picture of me in a suit smiling + +
+); + +export default ProfilePicture; diff --git a/src/Body/Fetch/index.tsx b/src/Body/Fetch/index.tsx new file mode 100644 index 0000000..9e47a0d --- /dev/null +++ b/src/Body/Fetch/index.tsx @@ -0,0 +1,23 @@ +import ColouredLine from "./ColouredLine"; +import Description from "./Description"; +import ProfilePicture from "./ProfilePicture"; +import { BlankLine } from "./utils"; + +// TODO: Automate screenshot of info for thumbnail? +const Fetch = () => { + return ( +
+
+ +
+ + + + +
+
+
+ ); +}; + +export default Fetch; diff --git a/src/Body/Fetch/utils.tsx b/src/Body/Fetch/utils.tsx new file mode 100644 index 0000000..d817367 --- /dev/null +++ b/src/Body/Fetch/utils.tsx @@ -0,0 +1,9 @@ +import type { PropsWithChildren } from "react"; + +export const Highlight = ({ children }: PropsWithChildren) => {children}; + +export const BlankLine = () => ( +

+
+

+); diff --git a/src/Body/Links.tsx b/src/Body/Links.tsx new file mode 100644 index 0000000..68c5811 --- /dev/null +++ b/src/Body/Links.tsx @@ -0,0 +1,32 @@ +import CV from "../assets/cv.svg?react"; +import Git from "../assets/git.svg?react"; +import LinkedIn from "../assets/linkedin.svg?react"; +import Mastodon from "../assets/mastodon.svg?react"; +import DarkModeToggleIcon from "../assets/darkmodetoggle.svg?react"; + +type ImageLinkProps = { + href: string; + title: string; + Image: typeof Git; // Not ideal, but I can't figure out how to import the type directly from the declared wildcard module +}; + +const ImageLink = ({ href, title, Image }: ImageLinkProps) => ( + + + +); + +const Links = () => ( +
+ + + + + + +
+); + +export default Links; diff --git a/src/Body/index.tsx b/src/Body/index.tsx new file mode 100644 index 0000000..6c8c256 --- /dev/null +++ b/src/Body/index.tsx @@ -0,0 +1,13 @@ +import Fetch from "./Fetch"; +import Links from "./Links"; + +const Body = () => { + return ( + <> + + + + ); +}; + +export default Body; diff --git a/src/entry-client.tsx b/src/entry-client.tsx index 784c65d..bea7ffe 100644 --- a/src/entry-client.tsx +++ b/src/entry-client.tsx @@ -1,6 +1,9 @@ // Entry point for development +import "./style.css"; + import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; + import Body from "./Body"; import Head from "./Head"; diff --git a/src/entry-server.tsx b/src/entry-server.tsx index adf23df..51130bd 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -1,8 +1,10 @@ // Entry point for SSG +import style from "./style.css?inline"; + import { renderToString } from "react-dom/server"; + import Body from "./Body"; import Head from "./Head"; -import style from "./style.css?inline"; export const render = () => { const html =