fix: replace all hardcoded hex colors with CSS theme variables
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:
1 parent
ea75d68b1a
commit
be923cb432
18 files changed
+149
-105
No files matched your search
+26
-28
@@ -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
|
||||
@@ -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)
|
||||
Reference in new issue
Block a user