Mirror of my GitHub Pages site
Refactor projects and add `fancy-tree`
Spenser Black
(Jun 27, 2026, 10:25 AM EDT)
5df02d26
e08432c1
+56
-53
-10
src/components/Paragraphs.astro
-10
src/components/Paragraphs.astro
+8
src/components/ProjectHeading.astro
+8
src/components/ProjectHeading.astro
+14
src/components/ProjectRelation.astro
+14
src/components/ProjectRelation.astro
···
1
+
---
2
+
type Relation = "owner" | "maintainer";
3
+
const relationTitle: Record<Relation, string> = {
4
+
owner: "I am an administrator of this project",
5
+
maintainer: "I am a collaborator that helps maintain this project",
6
+
};
7
+
8
+
type Props = {
9
+
relation: Relation;
10
+
};
11
+
12
+
const { relation } = Astro.props;
13
+
---
14
+
<p><em class="badge" title={relationTitle[relation]}>{relation}</em></p>
+34
-43
src/pages/projects.astro
+34
-43
src/pages/projects.astro
···
1
1
---
2
2
import BaseLayout from "../layouts/BaseLayout.astro";
3
-
import Paragraphs from "../components/Paragraphs.astro";
3
+
import ExternalLink from "../components/ExternalLink.astro";
4
+
import ProjectHeading from "../components/ProjectHeading.astro";
5
+
import ProjectRelation from "../components/ProjectRelation.astro";
4
6
const title = "Projects";
5
-
6
-
type Relation = "owner" | "maintainer";
7
-
const relationTitle: Record<Relation, string> = {
8
-
owner: "I am an administrator of this project",
9
-
maintainer: "I am a collaborator that helps maintain this project",
10
-
};
11
-
type Project = {
12
-
relation: Relation;
13
-
link: string;
14
-
description: string[];
15
-
};
16
-
const projects: Record<string, Project> = {
17
-
gengo: {
18
-
relation: "owner",
19
-
link: "https://github.com/spenserblack/gengo",
20
-
description: [
21
-
"A multi-purpose tool to help identify the code languages within a project.",
22
-
"Works on both work trees and bare repositories."
23
-
],
24
-
},
25
-
onefetch: {
26
-
relation: "maintainer",
27
-
link: "https://github.com/o2sh/onefetch",
28
-
description: [
29
-
"A CLI tool that analyzes your repository and prints an ASCII logo for its primary language and various repository statistics.",
30
-
],
31
-
},
32
-
steamdown: {
33
-
relation: "owner",
34
-
link: "https://github.com/spenserblack/steamdown",
35
-
description: [
36
-
"A parser and renderer for a markdown-like syntax. Content can be rendered as Steam's formatting language, or as HTML for a preview.",
37
-
],
38
-
},
39
-
};
40
7
---
41
8
<BaseLayout title={title}>
42
9
<p>
43
10
Here are some of the open-source projects that I work on.
44
11
</p>
45
-
{
46
-
Object.entries(projects).map(([project, { relation, link, description }]) => (
47
-
<h2><a href={link}>{project}</a></h2>
48
-
<p><em class="badge" title={relationTitle[relation]}>{relation}</em></p>
49
-
<Paragraphs paragraphs={description} />
50
-
))
51
-
}
12
+
<ProjectHeading link="https://github.com/spenserblack/fancy-tree">fancy-tree</ProjectHeading>
13
+
<ProjectRelation relation="owner" />
14
+
<p>
15
+
An alternative to <ExternalLink link="https://en.wikipedia.org/wiki/Tree_(command)"><code>tree</code></ExternalLink> with
16
+
support for Git status and code language detection.
17
+
It uses <ExternalLink link="https://www.lua.org/">Lua</ExternalLink> configuration files to
18
+
support fine-grained customization.
19
+
</p>
20
+
21
+
<ProjectHeading link="https://github.com/spenserblack/gengo">gengo</ProjectHeading>
22
+
<ProjectRelation relation="owner" />
23
+
<p>
24
+
A multi-purpose tool to help identify the code languages within a project. Works on both work trees and bare git repositories.
25
+
</p>
26
+
27
+
<ProjectHeading link="https://github.com/o2sh/onefetch">Onefetch</ProjectHeading>
28
+
<ProjectRelation relation="maintainer" />
29
+
<p>
30
+
A CLI tool that analyzes your repository and prints an ASCII logo for its primary language and
31
+
various repository statistics.
32
+
Think like <ExternalLink link="https://github.com/dylanaraps/neofetch"><code>neofetch</code></ExternalLink>,
33
+
but for a Git repository.
34
+
</p>
35
+
36
+
<ProjectHeading link="https://github.com/spenserblack/steamdown">Steamdown</ProjectHeading>
37
+
<ProjectRelation relation="owner" />
38
+
<p>
39
+
A parser and renderer for a markdown-like syntax. Content can be rendered
40
+
as <ExternalLink link="https://steamcommunity.com/comment/Recommendation/formattinghelp">Steam's formatting language</ExternalLink>,
41
+
or as HTML for a preview.
42
+
</p>
52
43
</BaseLayout>