✨ Add third chapter

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",

src/App.tsx

@@ -1,11 +1,34 @@
-import React from 'react';
+import React, {useState} from 'react';
-import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Idiomatic as I, Anchor} from "@steffo/bluelib-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<Theme>("royalblue")
+
     return (
-        <Bluelib theme={"royalblue"}>
+        <Bluelib theme={theme}>
             <LayoutThreeCol>
                 <LayoutThreeCol.Center>
                     <Heading level={1}>
@@ -31,15 +54,38 @@ function App() {
                             </Heading>
                             <Project user={"Steffo99"} repo={"greed"}/>
                             <Project user={"Steffo99"} repo={"bluelib"}/>
-                            <Project user={"Steffo99"} repo={"appuntiweb"}/>
                             <Project user={"RYGhub"} repo={"bobbot"}/>
-                            <Project user={"Steffo99"} repo={"lihzahrd"}/>
                             <Project user={"Steffo99"} repo={"flyingsnake"}/>
                             <Project user={"pds-nest"} repo={"nest"}/>
                             <Project user={"Steffo99"} repo={"keep-everything-alive"}/>
                             <MoreProjects user={"Steffo99"}/>
                         </Box>
                     </Chapter>
+                    <Chapter>
+                        <Box>
+                            <Heading level={3}>
+                                Me on the web
+                            </Heading>
+                            <Chapter>
+                                <Account icon={faReddit} url={"https://www.reddit.com/u/Steffo99/"} name={"/u/Steffo99"}/>
+                                <Account icon={faGithub} url={"https://github.com/Steffo99"} name={"Steffo99"}/>
+                                <Account icon={faDiscord} url={""} name={"Steffo#4036"}/>
+                                <Account icon={faTelegram} url={"https://t.me/Steffo"} name={"Steffo"}/>
+                                <Account icon={faEnvelope} url={"mailto:ste.pigozzi@gmail.com"} name={"ste.pigozzi@gmail.com"}/>
+                                <Account icon={faEnvelope} url={"mailto:me@steffo.eu"} name={"me@steffo.eu"}/>
+                            </Chapter>
+                        </Box>
+                        <Box>
+                            <Heading level={3}>
+                                Other stuff
+                            </Heading>
+                            <Form>
+                                <Form.Select label={"Theme"} onChange={event => setTheme(FULL_THEME_NAMES[event.target.value])}>
+                                    {Object.keys(FULL_THEME_NAMES).map(key => <Form.Select.Option value={key}/>)}
+                                </Form.Select>
+                            </Form>
+                        </Box>
+                    </Chapter>
                 </LayoutThreeCol.Center>
             </LayoutThreeCol>
         </Bluelib>

src/components/Account.module.css

@@ -0,0 +1,5 @@
+.Account {
+    white-space: nowrap;
+    width: 50%;
+    flex-basis: calc(50% - 8px) !important;
+}

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 = <Anchor href={url}><FontAwesomeIcon icon={icon}/>&nbsp;{name}</Anchor>
+    }
+    else {
+        contents = <><FontAwesomeIcon icon={icon}/>&nbsp;{name}</>
+    }
+
+    return (
+        <Panel className={Style.Account}>
+            {contents}
+        </Panel>
+    )
+}

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"]}
                 </div>
                 <div className={Style.Stars}>
-                    ★ {data["stargazers_count"]}
+                    <FontAwesomeIcon icon={faStar}/> {data["stargazers_count"]}
                 </div>
             </>
         },

src/index.css

@@ -8,3 +8,7 @@ body {
 body > * {
   min-height: 100vh;
 }
+
+body > * > * {
+  min-height: 100vh;
+}

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"