steffo/steffoweb
steffo/steffoweb
1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-11-21 15:44:31 +00:00
Code Activity

✨ Add third chapter

Browse source
This commit is contained in:
Steffo 2021-08-29 20:42:35 +02:00
parent 7461a5b4aa
commit 1b8f271e67
Signed by: steffo
GPG key ID: 6965406171929D01
7 changed files with 138 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

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

56
src/App.tsx
View file

@ -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<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>

5
src/components/Account.module.css Normal file
View file

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

30
src/components/Account.tsx Normal file
View file

@ -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>
)
}

4
src/components/Project.jsx
View file

@ -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>
</>
},

4
src/index.css
View file

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

40
yarn.lock
View file

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