✨ Add projects list

.idea/discord.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="DiscordProjectSettings">
-    <option name="show" value="ASK" />
+    <option name="show" value="PROJECT_FILES" />
     <option name="description" value="" />
   </component>
 </project>

.idea/misc.xml

@@ -3,6 +3,9 @@
   <component name="ClojureProjectResolveSettings">
     <currentScheme>IDE</currentScheme>
   </component>
+  <component name="PWA">
+    <option name="wasEnabledAtLeastOnce" value="true" />
+  </component>
   <component name="ProjectRootManager">
     <output url="file://$PROJECT_DIR$/out" />
   </component>

src/App.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Anchor, ListUnordered as UL} from "@steffo/bluelib-react";
+import {Bluelib, LayoutThreeCol, Heading, Chapter, Box, BringAttention as B, Idiomatic as I, Anchor} from "@steffo/bluelib-react";
+import {Project} from "./components/Project";
+import {MoreProjects} from "./components/MoreProjects";
 
 function App() {
     return (
@@ -25,22 +27,17 @@ function App() {
                     <Chapter>
                         <Box>
                             <Heading level={3}>
-                                Some of my projects
+                                My software projects
                             </Heading>
-                            <UL>
+                            <Project user={"Steffo99"} repo={"greed"}/>
-                                <UL.Item>
+                            <Project user={"Steffo99"} repo={"bluelib"}/>
-                                    <Anchor href={"https://github.com/Steffo99/greed"}>Greed</Anchor>, a customizable, multilanguage Telegram shop bot with Payments support
+                            <Project user={"Steffo99"} repo={"appuntiweb"}/>
-                                </UL.Item>
+                            <Project user={"RYGhub"} repo={"bobbot"}/>
-                                <UL.Item>
+                            <Project user={"Steffo99"} repo={"lihzahrd"}/>
-                                    <Anchor href={"https://github.com/Steffo99/bluelib"}>Bluelib</Anchor> and <Anchor href={"https://github.com/Steffo99/bluelib-react"}>Bluelib React</Anchor>, the libraries this website is based on
+                            <Project user={"Steffo99"} repo={"flyingsnake"}/>
-                                </UL.Item>
+                            <Project user={"pds-nest"} repo={"nest"}/>
-                                <UL.Item>
+                            <Project user={"Steffo99"} repo={"keep-everything-alive"}/>
-                                    <Anchor href={"https://github.com/Steffo99/lihzahrd"}>Lihzahrd</Anchor>, a Python library to parse Terraria worlds, and <Anchor href={"https://github.com/Steffo99/flyingsnake"}>Flyingsnake</Anchor>, a map renderer based on it
+                            <MoreProjects user={"Steffo99"}/>
-                                </UL.Item>
-                                <UL.Item>
-                                    <Anchor href={"https://github.com/RYGhub/bobbot"}>Bob</Anchor>, a Discord bot that allows server members to create temporary voice channels
-                                </UL.Item>
-                            </UL>
                         </Box>
                     </Chapter>
                 </LayoutThreeCol.Center>

src/components/MoreProjects.jsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Anchor} from "@steffo/bluelib-react"
+import Style from "./MoreProjects.module.css"
+
+
+export function MoreProjects({user}) {
+    const [data, setData] = React.useState(null)
+    const [error, setError] = React.useState(null)
+
+    const fetchData = React.useCallback(
+        () => {
+            fetch(`https://api.github.com/users/${user}`)
+            .then(r => r.json())
+            .then(d => setData(d))
+            .catch(e => setError(e))
+        },
+        [user, setData, setError]
+    )
+
+    React.useEffect(
+        () => {
+            fetchData()
+        },
+        [fetchData]
+    )
+
+    const contents = React.useMemo(
+        () => {
+            if(data === null) return "Loading..."
+            else if(error !== null) return "Error: {error}"
+            return `...and ${data["public_repos"]} more!`
+        },
+        [data, error]
+    )
+
+    return (
+        <div className={Style.More}>
+            <Anchor href={"https://github.com/Steffo99?tab=repositories"}>{contents}</Anchor>
+        </div>
+    )
+}

src/components/MoreProjects.module.css

@@ -0,0 +1,4 @@
+.More {
+    font-size: x-small;
+    text-align: center;
+}

src/components/Project.jsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import {Panel, Anchor} from "@steffo/bluelib-react";
+import Style from "./Project.module.css"
+
+
+export function Project({user, repo}) {
+    const [data, setData] = React.useState(null)
+    const [error, setError] = React.useState(null)
+
+    const fetchData = React.useCallback(
+        () => {
+            fetch(`https://api.github.com/repos/${user}/${repo}`)
+                .then(r => r.json())
+                .then(d => setData(d))
+                .catch(e => setError(e))
+        },
+        [user, repo, setData, setError]
+    )
+
+    React.useEffect(
+        () => {
+            fetchData()
+        },
+        [fetchData]
+    )
+
+    const color = React.useMemo(
+        () => {
+            if(data === null) {
+                return "color-yellow"
+            }
+            else if(error !== null) {
+                return "color-red"
+            }
+            else {
+                return ""
+            }
+        },
+        [data, error]
+    )
+
+    const info = React.useMemo(
+        () => {
+            if(data === null) return (
+                <div className={Style.Description}>Loading...</div>
+            )
+            else if(error !== null) return (
+                <div className={Style.Description}>Error: {error}</div>
+            )
+
+            return <>
+                <div className={Style.Description}>
+                    {data["description"]}
+                </div>
+                <div className={Style.Stars}>
+                    ★ {data["stargazers_count"]}
+                </div>
+            </>
+        },
+        [data, error]
+    )
+
+    return (
+        <Panel className={Style.Project} bluelibClassNames={color}>
+            <div className={Style.Title}>
+                <Anchor href={`https://github.com/${user}/${repo}`}>
+                    {repo}
+                </Anchor>
+            </div>
+            {info}
+        </Panel>
+    )
+}

src/components/Project.module.css

@@ -0,0 +1,29 @@
+.Project {
+    display: grid;
+
+    grid-template-areas:
+            "title description stars"
+    ;
+    grid-template-columns: 1fr 4fr auto;
+    grid-column-gap: 12px;
+
+    align-items: center;
+}
+
+.Title {
+    font-size: larger;
+
+    grid-area: title;
+}
+
+.Description {
+    justify-self: start;
+
+    grid-area: description;
+}
+
+.Stars {
+    justify-self: end;
+
+    grid-area: stars;
+}

src/react-app-env.d.ts

@@ -0,0 +1 @@
+declare module '*.css'