From 67e991dd4ed68d60cb388c2823072dffc998a3a2 Mon Sep 17 00:00:00 2001 From: dot Date: Sun, 29 Mar 2026 11:12:46 +0200 Subject: [PATCH] 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 --- README.md | 129 ++++++++++------------ src/app/about/page.tsx | 19 ++-- src/components/CertificateCard.tsx | 172 +++++++---------------------- 3 files changed, 111 insertions(+), 209 deletions(-) diff --git a/README.md b/README.md index 5fefffd..6ed377a 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,13 @@ # Commitment Issues -Official death certificates for abandoned GitHub repositories. +Your abandoned repos deserve a proper funeral. **Live:** [commitmentissues.dev](https://commitmentissues.dev) ![MIT License](https://img.shields.io/github/license/dotsystemsdevs/commitmentissues?style=flat-square) ![Vercel Deploy](https://img.shields.io/badge/deployed%20on-Vercel-black?style=flat-square&logo=vercel) -## What is Commitment Issues? - -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. - -## Features - -- **Certificate of Death** - A4-style layout with cause, last words, repo age, and derived stats -- **Exports** - Multiple aspect ratios (feed, square, story-style) for common social platforms -- **Mobile share** - Native share uses a tall story-friendly format on small screens to reduce bad crops -- **Hall of Shame** - Curated leaderboard of famously abandoned repositories -- **Recently Buried** - Live feed of the latest public burials (repo, cause, score, time) - -## How scoring works (high level) - -| Step | What happens | -|------|----------------| -| Input | You provide a public repo URL | -| Data | The app reads public metadata from the GitHub API | -| Score | A death score and narrative (cause, last words) are computed in `src/lib/scoring.ts` | -| Output | You get an on-screen certificate and optional image exports | - -Hall of Shame entries are curated for recognizable repos and fast first paint; Recently Buried reflects real recent usage. +Paste a public GitHub URL. Get a shareable **Certificate of Death** — cause of death, last words, repo age, exportable graphics. No account required. ## Screenshots @@ -44,12 +23,14 @@ About: ![About page screenshot](docs/screenshots/about.png) -## Privacy +## Features -- No login required -- Only public GitHub data is used -- Recently Buried stores recent public burial entries (repo, cause, score, timestamp) -- Anonymous aggregate analytics may be used for product metrics +- **Certificate of Death** — A4-style layout with cause, last words, repo age, and derived stats +- **Exports** — Multiple aspect ratios (feed, square, story-style) for Instagram, X, Facebook +- **Mobile share** — Native share sheet on mobile with story-friendly format +- **Hall of Shame** — Curated leaderboard of famously abandoned repos +- **Recently Buried** — Live feed of the latest public burials +- **Chrome extension** — Tombstone badge injected on any GitHub repo page (MVP) ## Tech stack @@ -58,11 +39,13 @@ About: | Framework | Next.js 14 (App Router) | | Fonts | UnifrakturMaguntia, Courier Prime, Inter | | Hosting | Vercel | -| Storage | Upstash Redis (usage counters and recent burials) | +| Storage | Upstash Redis (counters + recent burials) | | Data | GitHub public API | ## Getting started +Prerequisites: Node 18+ + ```bash git clone https://github.com/dotsystemsdevs/commitmentissues.git cd commitmentissues @@ -74,13 +57,26 @@ Open [http://localhost:3000](http://localhost:3000). ### Environment -Optional: add a GitHub token to raise API rate limits. +Add a GitHub token to raise API rate limits (optional but recommended): ```env GITHUB_TOKEN=ghp_yourtoken ``` -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. +Generate one at **GitHub → Settings → Developer settings → Personal access tokens**. Fine-grained or classic tokens both work. + +> **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. + +## How we pronounce repos dead + +| Step | What happens | +|------|----------------| +| Input | You submit a public GitHub URL | +| Data | The app fetches public metadata via the GitHub API | +| Score | A death index and narrative are computed in `src/lib/scoring.ts` | +| Output | Certificate rendered on-screen, exportable as PNG | + +Hall of Shame entries are hand-curated; Recently Buried reflects real usage. ## Testing @@ -98,56 +94,53 @@ npm test ```text src/ -+-- app/ - +-- page.tsx - +-- about/ - +-- terms/ - +-- api/ - +-- repo/ - +-- stats/ - +-- recent/ -+-- components/ - +-- CertificateCard.tsx - +-- Leaderboard.tsx - +-- SearchForm.tsx - +-- LoadingState.tsx -+-- lib/ - +-- scoring.ts - +-- rateLimit.ts - +-- recentStore.ts - +-- types.ts +├── app/ +│ ├── page.tsx +│ ├── about/ +│ └── api/ +│ ├── repo/ +│ ├── stats/ +│ └── recent/ +├── components/ +│ ├── CertificateCard.tsx +│ ├── Leaderboard.tsx +│ ├── SearchForm.tsx +│ └── LoadingState.tsx +└── lib/ + ├── scoring.ts + ├── rateLimit.ts + ├── recentStore.ts + └── types.ts +extension/ ← Chrome extension (MV3, load unpacked) ``` -Scoring logic lives in `src/lib/scoring.ts` so it stays easy to test and change. - -## Docs - -- Release notes: `docs/releases/` -- Screenshots: `docs/screenshots/` -- Repository conventions: `docs/repository-conventions.md` - -## License - -MIT - see repository license file. - -Built by [Dot Systems](https://github.com/dotsystemsdevs). - ## Chrome extension (MVP) -A local MV3 extension is included under `extension/`. +A MV3 extension lives under `extension/`. It injects a tombstone badge on GitHub repo pages and links to the full certificate. ### Load unpacked in Chrome 1. Open `chrome://extensions/` 2. Enable **Developer mode** -3. Click **Load unpacked** -4. Select the repository folder `extension/` +3. Click **Load unpacked** and select the `extension/` subfolder ### Test flow -1. Open a GitHub repo root page such as `https://github.com/vercel/next.js` +1. Open a GitHub repo page (e.g. `https://github.com/vercel/next.js`) 2. Verify a tombstone badge appears near the repo header 3. Click the badge to open the full certificate on `commitmentissues.dev` -4. Navigate to another repo without full reload; verify no duplicate badge appears +4. Navigate to another repo without a full reload; verify no duplicate badge appears If the API is rate-limited or unavailable, the badge falls back to `Reaper busy`. + +## Docs + +- Release notes: `docs/releases/` +- Screenshots: `docs/screenshots/` +- Repository conventions: `docs/repository-conventions.md` + +## License + +MIT — see repository license file. + +Built by [Dot Systems](https://github.com/dotsystemsdevs). diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 0e0c361..c627587 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -82,7 +82,7 @@ export default function AboutPage() {

{coffee ? ( - Keep the server alive → + ☕ Don't let us die too ) : null} diff --git a/src/components/CertificateCard.tsx b/src/components/CertificateCard.tsx index d393023..ecd56d4 100644 --- a/src/components/CertificateCard.tsx +++ b/src/components/CertificateCard.tsx @@ -394,169 +394,91 @@ export default function CertificateCard({ cert, onReset }: Props) { @@ -586,26 +508,14 @@ export default function CertificateCard({ cert, onReset }: Props) {