steffo/steffoweb
steffo/steffoweb
1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-10-16 07:17:28 +00:00
Code Activity

Pretty happy with this

Browse source
This commit is contained in:
Steffo 2023-05-29 03:24:24 +02:00
parent fbf92a5bd9
commit 1af7a63d34
Signed by: steffo
GPG key ID: 2A24051445686895
7 changed files with 119 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.idea/steffoweb.iml
View file

@ -6,6 +6,7 @@
<sourceFolder url="file://$MODULE_DIR$/components" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/pages" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/public" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/hooks" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />

18
components/LinkPanel.module.css
View file

@ -1,12 +1,13 @@
.linkPanel {
display: grid;
grid-template-areas:
"icon text"
"desc desc"
"icon text ext1"
"desc desc ext2"
;
grid-template-columns: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
white-space: nowrap;
@ -35,6 +36,7 @@
justify-self: center;
align-self: center;
width: 20px;
margin-right: 4px;
}
.linkPanelText {
@ -47,4 +49,14 @@
grid-area: desc;
white-space: normal;
align-self: start;
}
.linkPanelExtraTop {
grid-area: ext1;
align-self: end;
}
.linkPanelExtraBtm {
grid-area: ext2;
align-self: end;
}

14
components/LinkPanel.tsx
View file

@ -11,24 +11,36 @@ export type LinkPanelProps = {
icon: IconProp,
text: React.ReactNode,
description?: React.ReactNode,
extraTop?: React.ReactNode,
extraBtm?: React.ReactNode,
me?: boolean,
fade?: boolean,
onPress?: React.EventHandler<React.SyntheticEvent<HTMLElement>>
}
export const LinkPanel = ({href, icon, text, description, me, fade, onPress}: LinkPanelProps) => {
export const LinkPanel = ({href, icon, text, description, extraTop, extraBtm, me, fade, onPress}: LinkPanelProps) => {
const panel = (
<>
<FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
<span className={style.linkPanelText}>
{text}
</span>
{extraTop &&
<span className={style.linkPanelExtraTop}>
{extraTop}
</span>
}
{description &&
<small className={style.linkPanelDescription}>
{description}
</small>
}
{extraBtm !== undefined &&
<small className={style.linkPanelExtraBtm}>
{extraBtm}
</small>
}
</>
)

10
components/ProjectsList.module.css Normal file
View file

@ -0,0 +1,10 @@
.projectsList {
max-height: 500px;
flex-grow: 0;
flex-shrink: 1;
overflow-y: scroll;
display: flex;
flex-direction: column;
gap: 8px;
}

20
components/ProjectsList.tsx Normal file
View file

@ -0,0 +1,20 @@
import {default as style} from "./ProjectsList.module.css"
import {useGitHubRepositories} from "../hooks/useGitHubRepositories"
import {LinkPanel} from "./LinkPanel"
import {faBook, faCodeFork} from "@fortawesome/free-solid-svg-icons"
export function ProjectsList() {
const repos = useGitHubRepositories("Steffo99")
return <div className={style.projectsList}>
{repos.map((repo) => <LinkPanel
icon={repo.fork ? faCodeFork : faBook}
text={repo.name}
description={repo.description}
href={repo.html_url}
fade={repo.archived}
extraBtm={repo.stargazers_count == 0 ? null : `${repo.stargazers_count} ★`}/>
)}
</div>
}

32
hooks/useGitHubRepositories.ts Normal file
View file

@ -0,0 +1,32 @@
import React from "react"
export function useGitHubRepositories(user: string) {
const [data, setData] = React.useState<any[]>([])
const fetchData = React.useCallback(
async () => {
setData([])
let page = 1;
let count = 100;
while(count == 100) {
const resp = await fetch(`https://api.github.com/users/${user}/repos?per_page=100&page=${page}&sort=pushed&direction=desc`)
const data = await resp.json()
count = data.length
page += 1
setData((old) => [...old, ...data])
}
},
[]
)
React.useEffect(
() => {
// noinspection JSIgnoredPromiseFromCall
fetchData()
},
[fetchData]
)
return data
}

51
pages/index.tsx
View file

@ -6,6 +6,7 @@ import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackO
import {faBorderAll, faEnvelope, faGlobe, faUser, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faArrowLeft, faCog, faFloppyDisk, faScissors, faShield} from "@fortawesome/free-solid-svg-icons"
import {FlipPanel} from "../components/FlipPanel"
import {LinkPanel} from "../components/LinkPanel"
import {ProjectsList} from "../components/ProjectsList"
import {useKonamiCode} from "../hooks/useKonamiCode"
@ -41,7 +42,7 @@ const Index: NextPage = () => {
</p>
</section>
</div>
<div className={"chapter-2"}>
<div className={"chapter-3"}>
<FlipPanel
className={"box"}
front={(flip) => <>
@ -52,7 +53,7 @@ const Index: NextPage = () => {
Often, while experimenting with a new technology, I notice something that can be improved, and I try to come up with a solution to it.
</p>
<p>
Over time, I've created lots of small projects, some which have succeeded, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
Over time, I've created lots of small projects, some which have succeeded in their goal, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
</p>
<hr className={"float-bottom"}/>
<p>
@ -104,7 +105,7 @@ const Index: NextPage = () => {
<LinkPanel
href={"https://github.com/Steffo99/backup-duplicity"}
icon={faFloppyDisk}
text={"docker-backup-duplicity"}
text={"backup-duplicity"}
description={"Pluggable Docker-based backups"}
/>
<LinkPanel
@ -123,22 +124,23 @@ const Index: NextPage = () => {
href={"javascript:void(0)"}
icon={faDiagramProject}
text={"View all my projects"}
description={"There are many more projects there!"}
description={"There's a lot of stuff there!"}
onPress={flip}
/>
</div>
</>}
back={(flip) => <>
<h3>
My projects
All my projects
</h3>
<ProjectsList/>
<hr className={"float-bottom"}/>
<div className={"group-lp"}>
<LinkPanel
href={"javascript:void(0)"}
icon={faArrowLeft}
text={"Go back"}
description={"I have seen enough"}
description={"That's too much for me..."}
onPress={flip}
/>
</div>
@ -157,7 +159,9 @@ const Index: NextPage = () => {
<p>
Apart from experimentation, I'm currently the most active on the Fediverse, in particular on:
</p>
<LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
<div className={"group-lp"}>
<LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
</div>
<hr className={"float-bottom"}/>
<p>
Other services I often use are:
@ -222,17 +226,18 @@ const Index: NextPage = () => {
<p>
If you want to find me on some other service, please:
</p>
<LinkPanel
href={"javascript:void(0)"}
icon={faUser}
text={"View all my accounts"}
description={"I've started keeping track only recently..."}
onPress={flip}
/>
<div className={"group-lp"}>
<LinkPanel
fade
icon={faUser}
text={"View all my accounts"}
description={"Coming soon..."}
/>
</div>
</>}
back={(flip) => <>
<h3>
My accounts
All my accounts
</h3>
<hr className={"float-bottom"}/>
<div className={"group-lp"}>
@ -246,8 +251,6 @@ const Index: NextPage = () => {
</div>
</>}
/>
</div>
<div className={"chapter-2"}>
<section className={"panel box"} id={"panel-friends"}>
<h3>
My friends
@ -313,12 +316,14 @@ const Index: NextPage = () => {
<p>
Hey friends! If you make a website, please let me know:
</p>
<LinkPanel
icon={faPlus}
text={"Made a website?"}
fade
description={"Tell me about it!"}
/>
<div className={"group-lp"}>
<LinkPanel
icon={faPlus}
text={"Made a website?"}
fade
description={"Tell me about it!"}
/>
</div>
</section>
<section className={"panel box home-ad"} id={"panel-adblocker"}>
<h3>