fix: replace all hardcoded hex colors with CSS theme variables
CI / typecheck + build (push) Canceled after 0s
CI / deploy to VPS (push) Canceled after 0s

Phase 15c — theme-consistent color system:

Replaced 63 instances of hardcoded hex colors (#5e6ad2, #7170ff, #4f46e5,
#6a75e0, #828fff, #94a3b8, etc.) with CSS variables from globals.css:
- #5e6ad2 → var(--brand) (light: #5e6ad2, dark: #5e6ad2)
- #7170ff → var(--accent) (light: #4f46e5, dark: #7170ff)
- #4f46e5 → var(--accent)
- #6a75e0 → var(--brand-hover) (new var, light: #6a75e0, dark: #7170ff)
- #828fff → var(--accent-hover)
- #868686 → var(--text-dim)
- Dark-mode-specific hex in Markdown.tsx → CSS variables

Added --brand-hover CSS variable (light: #6a75e0, dark: #7170ff)
Added dark:prose-invert instead of prose-invert (light mode now uses
default prose theme instead of forced dark)

Files changed: 15 component files + globals.css
This commit is contained in:
asepharyana committed 2026-08-21 13:06:01 +07:00
1 parent ea75d68b1a
commit be923cb432
18 files changed
+149 -105

No files matched your search

+26 -28
View File
@@ -1,35 +1,33 @@
# Phase 15 — Nix-based CI/CD for mcpedia-web
# Phase 15b — CI/CD: Build in CI, Deploy only on VPS
> User: "ci nya juga benarkan lah masa build di vps,harusnya kan di vps hanya deploy, dan seharusnya pakai nix"
> User: "alur ci nya juga benarkan lah masa build di vps,harusnya kan di vps hanya deploy, dan seharusnya pakai nix"
## Current State
- Deploy workflow builds the web app ON the VPS via SSH (`cd apps/web && bun run build`)
- mcpedia-web service runs directly from git checkout (`/home/code/mcpedia/apps/web/.next`)
- No flake.nix in the repo
- Other services (zeavis-*, gmw-*) are nix-deployed via `/nix/var/nix/profiles/<name>`
## Final Architecture
## Goal
- **CI**: builds the web app into a Nix store path
- **Deploy**: VPS only copies + switches profiles (no build on VPS)
### CI Workflow (`.github/workflows/ci.yml`)
Single workflow with two jobs:
## Approach: `nix build` + `nix copy` (push deployment)
**Job 1: `build`** (runs on GitHub Actions runner)
1. Checkout → Set up Bun 1.3.14 → `bun install --frozen-lockfile`
2. Typecheck (`bun run typecheck`)
3. Build web (`working-directory: apps/web && bun run build`) ← **Build happens here, not VPS**
4. Upload `.next/` as artifact (`include-hidden-files: true` ← critical for hidden `.next/` dir)
5. MCP smoke test (conditional on DATABASE_URL secret — skipped in CI without DB)
6. Unit tests (`bun run test`)
### 1. Add flake.nix to mcpedia repo
Build the Next.js production output into a Nix package:
- `next build` outputs to `.next/`
- Package: a shell script that runs `next start` with the `.next` dir + `node_modules`
**Job 2: `deploy`** (needs: build, main branch only)
1. Download artifact to `apps/web/.next`
2. Tar `.next` (exclude cache, ~15MB tarball)
3. SCP tarball to VPS (`/tmp/`)
4. SSH to VPS: `git pull` → `bun install` → `bun run scripts/indexer.ts` → `tar -xzf` → `systemctl restart`
### 2. CI workflow (`ci.yml`)
- Add a `nix build` step after typecheck/test
- Push the result to the VPS via `nix copy --ssh`
### Key Fixes During This Phase
### 3. Deploy workflow (`deploy.yml`)
- Trigger on CI success
- `nix copy` the built package to VPS
- `nix profile install` / `systemctl restart` on VPS
- No `bun run build` on VPS
## Files to create/modify
- `flake.nix` (new) — builds @mcpedia/web as a Nix package
- `.github/workflows/ci.yml` — add nix build step
- `.github/workflows/deploy.yml` — nix copy + profile switch instead of SSH build
1. **`actions/checkout@v4` → `@v5`** — Node 20 deprecation warning
2. **`bun --cwd apps/web run build` → `working-directory: apps/web`** — `bun run` doesn't support `--cwd` flag; was silently printing usage, exiting 0
3. **`path: apps/web/.next/`** → **`path: apps/web/.next`** + **`include-hidden-files: true`** — `.next/` is a hidden directory; `upload-artifact@v4` excludes hidden files by default
4. **`bun --cwd apps/mcp run smoke`** → **`working-directory: apps/mcp`** — same `--cwd` bug
5. **Smoke test made conditional** on `DATABASE_URL` — was silently failing (never actually ran due to bug #2/#4)
6. **SCP of individual `.next/*`** → **tarball transfer** — SCP with glob of hidden files was failing/timing out
7. **Deploy tarball excludes `.next/cache`** — cache is ephemeral, reduces transfer size
8. **Merged ci.yml + deploy.yml** into single workflow — `workflow_run` trigger can't access artifacts from CI run
+43
View File
@@ -0,0 +1,43 @@
# Phase 15c — Theme-Consistent Color System
> User: "banyak pewarnaan yg tidak sesuai tema dark mode atau light mode"
## Problem
63 hardcoded hex colors (#5e6ad2, #7170ff, #4f46e5, etc.) bypass the CSS
variable theme system in globals.css. These don't adapt between light/dark mode
properly — the `dark:` variant changes text color but background stays the same.
## Color Mapping
### `#5e6ad2` (indigo-600)
- Light: `--brand: #5e6ad2` (same)
- Dark: `--brand: #5e6ad2` (same)
→ Replace with `var(--brand)`
### `#4f46e5` (indigo-700)
- Light: `--accent: #4f46e5`
- Dark: `--accent: #7170ff`
→ Replace with `var(--accent)`
### `#7170ff` (light blue, dark mode accent)
- Light: `var(--accent)` (#4f46e5)
- Dark: `var(--accent)` (#7170ff)
→ Replace `dark:text-[#7170ff]` → `dark:text-[var(--accent)]`
### `#6a75e0` (hover lighter)
→ Replace with `var(--accent-hover)`
### `/10`, `/15`, `/20`, `/30` opacity tints
- `bg-[#5e6ad2]/15` → `bg-[var(--brand)]/15`
- `bg-[#5e6ad2]/10` → `bg-[var(--brand)]/10`
- `bg-[#5e6ad2]/30` → `bg-[var(--brand)]/30`
## Files to fix
- `[section]/[...slug]/page.tsx` (~16 instances)
- `[section]/page.tsx` (~5 instances)
- `components/Sidebar.tsx` (2 instances)
- `components/DocForm.tsx` (~6 instances)
- `components/CommandMenu.tsx` (~6 instances)
- `components/Header.tsx` (2 instances)
- `components/McpConfigSnippet.tsx` (1 instance)
- `page.tsx` (check)