codechovui.dev — Ecosystem Frontpage

Visual frontpage for the *.codechovui.dev software and self-hosting ecosystem (blog.codechovui.dev, *.products.codechovui.dev).

Built with Astro (output: 'static') + Yarn 2+ (Berry) + design-taste-frontend WebGL shaders (bayer-dither, grain-gradient, silk-folds), node-and-line routing diagrams, live browser RTT health checks, hybrid WordPress REST/RSS blog sync, and instant VI | EN bilingual support.

See PLAN.md for full architectural details and visual design specifications.

---

Quickstart (Yarn 2+ on PC)

corepack enable         # Ensures Yarn Berry (v4) from packageManager is active
yarn install
yarn skills:restore     # Optional: restores .agents/skills from skills-lock.json via yarn dlx
yarn dev                # Starts Astro dev server at http://localhost:4321

Open http://localhost:4321 (Vietnamese default), http://localhost:4321/projects/ (full *.products showcase directory), or http://localhost:4321/en/ & http://localhost:4321/en/projects/ (English routes).

---

Adding a Project (SHOWCASE_PROJECTS)

All showcased projects live in src/data/projects.ts under SHOWCASE_PROJECTS (which also auto-populates ECOSYSTEM_NODES for the Hero router, Live Status matrix, and yarn project:ping).

# Interactive wizard:
yarn project:add

# Non-interactive CLI:
yarn project:add \
  --id notes \
  --subdomain notes.products.codechovui.dev \
  --kind web-app \
  --live \
  --featured \
  --stack nextjs,react,typescript,docker,traefik-proxy

To use a real screenshot instead of the built-in UI preview window, drop an image into public/images/projects/<slug>.webp and pass --screenshot /images/projects/<slug>.webp (or set preview: { type: 'screenshot', src: '/images/projects/<slug>.webp', alt: { vi: '...', en: '...' } }).

---

Available Yarn Scripts

Development & Production Build

Command	Description
yarn dev	Start Astro dev server locally (localhost:4321)
yarn dev:host	Expose dev server on LAN (0.0.0.0:4321) for mobile testing
yarn build	Build static site into dist/
yarn build:full	Sync live blog snapshot -> build dist/ -> verify all static assets
yarn preview	Serve dist/ locally
yarn clean	Remove dist/, .astro/, and shots/

Ecosystem & Content Management (*.codechovui.dev)

Command	Description
yarn project:add	Interactive CLI wizard to register a new *.products.codechovui.dev app into src/data/projects.ts
yarn project:ping	Terminal health-check table probing all live *.codechovui.dev nodes (--all includes standby slots)
yarn sync:blog	Pull latest articles from blog.codechovui.dev/wp-json/wp/v2/posts into src/data/blog-snapshot.json (supports --poll, --interval <sec>)
yarn sync:blog:poll	Continuously poll WordPress REST API (default every 60s) and auto-sync on changes
yarn skills:restore	Reinstall .agents/skills from skills-lock.json using yarn dlx

Verification & Visual Quality Gates

Command	Description
yarn verify	Pre-build check: verifies core files, local SVG icons, i18n parity (vi/en), and blog snapshot
yarn verify:dist	Post-build check: validates dist/ routes, asset links, and zero placeholder residue
yarn icons:scan	Scan built HTML and fetch any newly referenced full-color SVG icons locally
yarn taste:static	Run non-browser static copy & moment checks (copy-lint + moments check)
yarn taste:layout	Headless Chrome layout check across 1440x900, 1024x768, 820x1180, 768x1024, 390x844
yarn taste:consistency	Full system rhythm, edge alignment & contrast check
yarn taste:perf	Audit image weights, CLS, and WebGL context count (\le 4)
yarn taste:shoot	Capture 1440px screenshot and auto-update public/share.jpg OpenGraph card
yarn taste:all	Run static lint + layout + perf suite end-to-end