Skip to content

Commit 67e991d

Browse files
ux: hover effects on all certificate buttons + polish README
- cert buttons: replace inline mousedown opacity hacks with CSS classes (cert-btn-primary, cert-btn-secondary) with proper hover/active states - about: coffee button matches fixed header button exactly - README: stronger hook, screenshots moved up, /terms removed from tree, Redis note added, section titles more on-brand, Node version noted Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent ad2438e commit 67e991d

3 files changed

Lines changed: 111 additions & 209 deletions

File tree

README.md

Lines changed: 61 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,13 @@
11
# Commitment Issues
22

3-
Official death certificates for abandoned GitHub repositories.
3+
Your abandoned repos deserve a proper funeral.
44

55
**Live:** [commitmentissues.dev](https://commitmentissues.dev)
66

77
![MIT License](https://img.shields.io/github/license/dotsystemsdevs/commitmentissues?style=flat-square)
88
![Vercel Deploy](https://img.shields.io/badge/deployed%20on-Vercel-black?style=flat-square&logo=vercel)
99

10-
## What is Commitment Issues?
11-
12-
Paste a public GitHub repository URL and get a shareable **Certificate of Death**: a tongue-in-cheek summary of how "dead" the repo looks, with a score, cause of death, last words, and exportable graphics for social posts. No account required.
13-
14-
## Features
15-
16-
- **Certificate of Death** - A4-style layout with cause, last words, repo age, and derived stats
17-
- **Exports** - Multiple aspect ratios (feed, square, story-style) for common social platforms
18-
- **Mobile share** - Native share uses a tall story-friendly format on small screens to reduce bad crops
19-
- **Hall of Shame** - Curated leaderboard of famously abandoned repositories
20-
- **Recently Buried** - Live feed of the latest public burials (repo, cause, score, time)
21-
22-
## How scoring works (high level)
23-
24-
| Step | What happens |
25-
|------|----------------|
26-
| Input | You provide a public repo URL |
27-
| Data | The app reads public metadata from the GitHub API |
28-
| Score | A death score and narrative (cause, last words) are computed in `src/lib/scoring.ts` |
29-
| Output | You get an on-screen certificate and optional image exports |
30-
31-
Hall of Shame entries are curated for recognizable repos and fast first paint; Recently Buried reflects real recent usage.
10+
Paste a public GitHub URL. Get a shareable **Certificate of Death** — cause of death, last words, repo age, exportable graphics. No account required.
3211

3312
## Screenshots
3413

@@ -44,12 +23,14 @@ About:
4423

4524
![About page screenshot](docs/screenshots/about.png)
4625

47-
## Privacy
26+
## Features
4827

49-
- No login required
50-
- Only public GitHub data is used
51-
- Recently Buried stores recent public burial entries (repo, cause, score, timestamp)
52-
- Anonymous aggregate analytics may be used for product metrics
28+
- **Certificate of Death** — A4-style layout with cause, last words, repo age, and derived stats
29+
- **Exports** — Multiple aspect ratios (feed, square, story-style) for Instagram, X, Facebook
30+
- **Mobile share** — Native share sheet on mobile with story-friendly format
31+
- **Hall of Shame** — Curated leaderboard of famously abandoned repos
32+
- **Recently Buried** — Live feed of the latest public burials
33+
- **Chrome extension** — Tombstone badge injected on any GitHub repo page (MVP)
5334

5435
## Tech stack
5536

@@ -58,11 +39,13 @@ About:
5839
| Framework | Next.js 14 (App Router) |
5940
| Fonts | UnifrakturMaguntia, Courier Prime, Inter |
6041
| Hosting | Vercel |
61-
| Storage | Upstash Redis (usage counters and recent burials) |
42+
| Storage | Upstash Redis (counters + recent burials) |
6243
| Data | GitHub public API |
6344

6445
## Getting started
6546

47+
Prerequisites: Node 18+
48+
6649
```bash
6750
git clone https://github.com/dotsystemsdevs/commitmentissues.git
6851
cd commitmentissues
@@ -74,13 +57,26 @@ Open [http://localhost:3000](http://localhost:3000).
7457

7558
### Environment
7659

77-
Optional: add a GitHub token to raise API rate limits.
60+
Add a GitHub token to raise API rate limits (optional but recommended):
7861

7962
```env
8063
GITHUB_TOKEN=ghp_yourtoken
8164
```
8265

83-
Create a token under GitHub **Settings -> Developer settings -> Personal access tokens**. Fine-grained tokens work if you limit scope to what this app needs; classic tokens are also fine for local dev.
66+
Generate one at **GitHub → Settings → Developer settings → Personal access tokens**. Fine-grained or classic tokens both work.
67+
68+
> **Note:** The Recently Buried feed requires Upstash Redis (`KV_REST_API_URL` + `KV_REST_API_TOKEN`). Without it, the feed is hidden and the buried counter falls back to the historical baseline.
69+
70+
## How we pronounce repos dead
71+
72+
| Step | What happens |
73+
|------|----------------|
74+
| Input | You submit a public GitHub URL |
75+
| Data | The app fetches public metadata via the GitHub API |
76+
| Score | A death index and narrative are computed in `src/lib/scoring.ts` |
77+
| Output | Certificate rendered on-screen, exportable as PNG |
78+
79+
Hall of Shame entries are hand-curated; Recently Buried reflects real usage.
8480

8581
## Testing
8682

@@ -98,56 +94,53 @@ npm test
9894

9995
```text
10096
src/
101-
+-- app/
102-
¦ +-- page.tsx
103-
¦ +-- about/
104-
¦ +-- terms/
105-
¦ +-- api/
106-
¦ +-- repo/
107-
¦ +-- stats/
108-
¦ +-- recent/
109-
+-- components/
110-
¦ +-- CertificateCard.tsx
111-
¦ +-- Leaderboard.tsx
112-
¦ +-- SearchForm.tsx
113-
¦ +-- LoadingState.tsx
114-
+-- lib/
115-
+-- scoring.ts
116-
+-- rateLimit.ts
117-
+-- recentStore.ts
118-
+-- types.ts
97+
├── app/
98+
├── page.tsx
99+
├── about/
100+
└── api/
101+
├── repo/
102+
├── stats/
103+
└── recent/
104+
├── components/
105+
│ ├── CertificateCard.tsx
106+
├── Leaderboard.tsx
107+
├── SearchForm.tsx
108+
└── LoadingState.tsx
109+
└── lib/
110+
├── scoring.ts
111+
├── rateLimit.ts
112+
├── recentStore.ts
113+
└── types.ts
114+
extension/ ← Chrome extension (MV3, load unpacked)
119115
```
120116

121-
Scoring logic lives in `src/lib/scoring.ts` so it stays easy to test and change.
122-
123-
## Docs
124-
125-
- Release notes: `docs/releases/`
126-
- Screenshots: `docs/screenshots/`
127-
- Repository conventions: `docs/repository-conventions.md`
128-
129-
## License
130-
131-
MIT - see repository license file.
132-
133-
Built by [Dot Systems](https://github.com/dotsystemsdevs).
134-
135117
## Chrome extension (MVP)
136118

137-
A local MV3 extension is included under `extension/`.
119+
A MV3 extension lives under `extension/`. It injects a tombstone badge on GitHub repo pages and links to the full certificate.
138120

139121
### Load unpacked in Chrome
140122

141123
1. Open `chrome://extensions/`
142124
2. Enable **Developer mode**
143-
3. Click **Load unpacked**
144-
4. Select the repository folder `extension/`
125+
3. Click **Load unpacked** and select the `extension/` subfolder
145126

146127
### Test flow
147128

148-
1. Open a GitHub repo root page such as `https://github.com/vercel/next.js`
129+
1. Open a GitHub repo page (e.g. `https://github.com/vercel/next.js`)
149130
2. Verify a tombstone badge appears near the repo header
150131
3. Click the badge to open the full certificate on `commitmentissues.dev`
151-
4. Navigate to another repo without full reload; verify no duplicate badge appears
132+
4. Navigate to another repo without a full reload; verify no duplicate badge appears
152133

153134
If the API is rate-limited or unavailable, the badge falls back to `Reaper busy`.
135+
136+
## Docs
137+
138+
- Release notes: `docs/releases/`
139+
- Screenshots: `docs/screenshots/`
140+
- Repository conventions: `docs/repository-conventions.md`
141+
142+
## License
143+
144+
MIT — see repository license file.
145+
146+
Built by [Dot Systems](https://github.com/dotsystemsdevs).

src/app/about/page.tsx

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default function AboutPage() {
8282
</p>
8383
{coffee ? (
8484
<a
85-
className="coffee-btn"
85+
className="coffee-btn-fixed"
8686
href="https://buymeacoffee.com/commitmentissues"
8787
target="_blank"
8888
rel="noopener noreferrer"
@@ -91,20 +91,19 @@ export default function AboutPage() {
9191
alignItems: 'center',
9292
justifyContent: 'center',
9393
marginTop: '12px',
94-
minHeight: '42px',
95-
padding: '0 14px',
96-
border: '1px solid #0a0a0a',
94+
padding: '7px 12px',
95+
border: '1.5px solid #1a1a1a',
9796
background: '#f6f6f6',
98-
color: '#1f1f1f',
97+
color: '#1a1a1a',
9998
textDecoration: 'none',
100-
fontFamily: `var(--font-courier), monospace`,
99+
fontFamily: `var(--font-dm), -apple-system, sans-serif`,
101100
fontSize: '12px',
102-
fontWeight: 700,
103-
letterSpacing: '0.05em',
104-
textTransform: 'uppercase',
101+
fontWeight: 600,
102+
letterSpacing: '0.01em',
103+
whiteSpace: 'nowrap',
105104
}}
106105
>
107-
Keep the server alive →
106+
☕ Don&apos;t let us die too
108107
</a>
109108
) : null}
110109
</div>

0 commit comments

Comments
 (0)