Mirror of my GitHub Pages site
Add projects page
Spenser Black
(Jun 26, 2026, 8:30 PM EDT)
b6055ff9
5756ee91
+78
-3
+11
-1
src/components/Header.astro
+11
-1
src/components/Header.astro
···
1
1
---
2
+
const pages: [description: string, link: string][] = [
3
+
["Homepage", "/"],
4
+
["Projects", "/projects/"],
5
+
];
2
6
---
3
7
<header>
4
8
<nav>
5
-
<a href="/">Homepage</a>
9
+
{
10
+
pages.map(([description, link]) => <a class="button primary" href={link}>{description}</a>)
11
+
}
6
12
</nav>
7
13
<div class="controls">
8
14
<div id="theme-dropdown" class="dropdown">
···
40
46
.dropdown ul li * {
41
47
color: var(--main-fg);
42
48
background-color: var(--contrast);
49
+
}
50
+
51
+
nav a {
52
+
margin: 0 0.5rem;
43
53
}
44
54
</style>
+10
src/components/Paragraphs.astro
+10
src/components/Paragraphs.astro
+52
src/pages/projects.astro
+52
src/pages/projects.astro
···
1
+
---
2
+
import BaseLayout from "../layouts/BaseLayout.astro";
3
+
import Paragraphs from "../components/Paragraphs.astro";
4
+
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
+
---
41
+
<BaseLayout title={title}>
42
+
<p>
43
+
Here are some of the open-source projects that I work on.
44
+
</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
+
}
52
+
</BaseLayout>
+5
-2
src/styles/global.css
+5
-2
src/styles/global.css
···
90
90
color: var(--link-hover);
91
91
}
92
92
93
-
button {
93
+
button,
94
+
.button {
94
95
padding: 0.25rem 0.5rem;
95
96
background-color: none;
96
97
border: none;
97
98
cursor: pointer;
98
99
font-size: 1rem;
100
+
text-decoration: none;
99
101
}
100
-
button.primary {
102
+
button.primary,
103
+
.button.primary {
101
104
background-color: var(--primary);
102
105
color: var(--contrast);
103
106
}