diff --git a/package.json b/package.json index f2f685e..33c1755 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "version": "3.0.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-brands-svg-icons": "^5.15.4", + "@fortawesome/free-regular-svg-icons": "^5.15.4", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.15", "@steffo/bluelib-react": "^3.0.4", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/App.tsx b/src/App.tsx index 3dd5ba4..37f42fa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,34 @@ -import React from 'react'; -import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Idiomatic as I, Anchor} from "@steffo/bluelib-react"; +import React, {useState} from 'react'; +import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Anchor, Form} from "@steffo/bluelib-react"; import {Project} from "./components/Project"; import {MoreProjects} from "./components/MoreProjects"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faDiscord, faGithub, faReddit, faTelegram, faTwitter} from "@fortawesome/free-brands-svg-icons"; +import {Account} from "./components/Account"; +import {faEnvelope} from "@fortawesome/free-solid-svg-icons"; + + +type Theme = "paper" | "royalblue" | "hacker" | "sophon" + + +type ThemeMap = { + [fullname: string]: Theme; +}; + + +const FULL_THEME_NAMES: ThemeMap = { + "Royal Blue": "royalblue", + "The Sophonity": "sophon", + "Sheet of Paper": "paper", + "Hacker Terminal": "hacker", +} + function App() { + const [theme, setTheme] = useState("royalblue") + return ( - + @@ -31,15 +54,38 @@ function App() { - - + + + + Me on the web + + + + + + + + + + + + + Other stuff + +
+ setTheme(FULL_THEME_NAMES[event.target.value])}> + {Object.keys(FULL_THEME_NAMES).map(key => )} + +
+
+
diff --git a/src/components/Account.module.css b/src/components/Account.module.css new file mode 100644 index 0000000..dd29ed4 --- /dev/null +++ b/src/components/Account.module.css @@ -0,0 +1,5 @@ +.Account { + white-space: nowrap; + width: 50%; + flex-basis: calc(50% - 8px) !important; +} \ No newline at end of file diff --git a/src/components/Account.tsx b/src/components/Account.tsx new file mode 100644 index 0000000..f47d3e1 --- /dev/null +++ b/src/components/Account.tsx @@ -0,0 +1,30 @@ +import * as React from "react" +import * as ReactDOM from "react-dom" +import {IconDefinition} from "@fortawesome/free-regular-svg-icons"; +import {Panel, Anchor} from "@steffo/bluelib-react"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import Style from "./Account.module.css" + + +interface AccountProps { + icon: IconDefinition, + url: string, + name: string, +} + + +export function Account({icon, url, name}: AccountProps): JSX.Element { + let contents: JSX.Element + if(url) { + contents =  {name} + } + else { + contents = <> {name} + } + + return ( + + {contents} + + ) +} diff --git a/src/components/Project.jsx b/src/components/Project.jsx index 0c19fb7..cce3453 100644 --- a/src/components/Project.jsx +++ b/src/components/Project.jsx @@ -1,6 +1,8 @@ import * as React from "react" import {Panel, Anchor} from "@steffo/bluelib-react"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import Style from "./Project.module.css" +import { faStar } from "@fortawesome/free-solid-svg-icons" export function Project({user, repo}) { @@ -53,7 +55,7 @@ export function Project({user, repo}) { {data["description"]}
- ★ {data["stargazers_count"]} + {data["stargazers_count"]}
}, diff --git a/src/index.css b/src/index.css index ceaad76..116adf1 100644 --- a/src/index.css +++ b/src/index.css @@ -8,3 +8,7 @@ body { body > * { min-height: 100vh; } + +body > * > * { + min-height: 100vh; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index e844a8b..87699ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1234,6 +1234,46 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@^0.2.36": + version "0.2.36" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903" + integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg== + +"@fortawesome/fontawesome-svg-core@^1.2.36": + version "1.2.36" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3" + integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/free-brands-svg-icons@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733" + integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/free-regular-svg-icons@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02" + integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/free-solid-svg-icons@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5" + integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/react-fontawesome@^0.1.15": + version "0.1.15" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz#1450b838f905981d721bf07e14e3b52c0e9a91ed" + integrity sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g== + dependencies: + prop-types "^15.7.2" + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"