diff --git a/.agents/skills/monitor-ci/SKILL.md b/.agents/skills/monitor-ci/SKILL.md index 48b71bf..c90f544 100644 --- a/.agents/skills/monitor-ci/SKILL.md +++ b/.agents/skills/monitor-ci/SKILL.md @@ -111,7 +111,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.agents/skills/monitor-ci/scripts/ci-poll-decide.mjs b/.agents/skills/monitor-ci/scripts/ci-poll-decide.mjs index 04db237..43529b0 100644 --- a/.agents/skills/monitor-ci/scripts/ci-poll-decide.mjs +++ b/.agents/skills/monitor-ci/scripts/ci-poll-decide.mjs @@ -106,7 +106,7 @@ function categorizeTasks() { } function backoff(count) { - const delays = [60, 90, 120]; + const delays = [60, 90, 120, 180]; return delays[Math.min(count, delays.length - 1)]; } @@ -145,7 +145,7 @@ function isNewCipe() { // 3. still waiting → wait (waiting_for_cipe) // NORMAL MODE: // 4. polling timeout → done (polling_timeout) -// 5. circuit breaker (5 polls) → done (circuit_breaker) +// 5. circuit breaker (13 polls) → done (circuit_breaker) // 6. CI succeeded → done (ci_success) // 7. CI canceled → done (cipe_canceled) // 8. CI timed out → done (cipe_timed_out) @@ -177,7 +177,7 @@ function classify() { // --- Guards --- if (isTimedOut()) return { action: 'done', code: 'polling_timeout' }; - if (noProgressCount >= 5) return { action: 'done', code: 'circuit_breaker' }; + if (noProgressCount >= 13) return { action: 'done', code: 'circuit_breaker' }; // --- Terminal CI states --- if (cipeStatus === 'SUCCEEDED') return { action: 'done', code: 'ci_success' }; @@ -267,7 +267,7 @@ const messages = { // guards polling_timeout: () => 'Polling timeout exceeded.', - circuit_breaker: () => 'No progress after 5 consecutive polls. Stopping.', + circuit_breaker: () => 'No progress after 13 consecutive polls. Stopping.', // terminal ci_success: () => 'CI passed successfully!', diff --git a/.codex/config.toml b/.codex/config.toml index 3e29e64..a8e81ce 100644 --- a/.codex/config.toml +++ b/.codex/config.toml @@ -1,12 +1,10 @@ +[mcp_servers.nx-mcp] +command = "npx" +args = [ "nx", "mcp", "--minimal" ] -mcp_servers.nx-mcp.command = 'npx' -mcp_servers.nx-mcp.args = [ - 'nx', - 'mcp', - '--minimal', -] -features.multi_agent = true +[features] +multi_agent = true [agents.ci-monitor-subagent] -description = 'CI helper for /monitor-ci. Fetches CI status, retrieves fix details, or updates self-healing fixes. Executes one MCP tool call and returns the result.' -config_file = 'agents/ci-monitor-subagent.toml' +description = "CI helper for /monitor-ci. Fetches CI status, retrieves fix details, or updates self-healing fixes. Executes one MCP tool call and returns the result." +config_file = "agents/ci-monitor-subagent.toml" diff --git a/.gemini/commands/monitor-ci.toml b/.gemini/commands/monitor-ci.toml index d818806..321275b 100644 --- a/.gemini/commands/monitor-ci.toml +++ b/.gemini/commands/monitor-ci.toml @@ -108,7 +108,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.gemini/skills/link-workspace-packages/skill.md b/.gemini/skills/link-workspace-packages/skill.md deleted file mode 100644 index de13134..0000000 --- a/.gemini/skills/link-workspace-packages/skill.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -name: link-workspace-packages -description: 'Link workspace packages in monorepos (npm, yarn, pnpm, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager''s workspace commands to fix actual linking.' ---- - -# Link Workspace Packages - -Add dependencies between packages in a monorepo. All package managers support workspaces but with different syntax. - -## Detect Package Manager - -Check whether there's a `packageManager` field in the root-level `package.json`. - -Alternatively check lockfile in repo root: - -- `pnpm-lock.yaml` → pnpm -- `yarn.lock` → yarn -- `bun.lock` / `bun.lockb` → bun -- `package-lock.json` → npm - -## Workflow - -1. Identify consumer package (the one importing) -2. Identify provider package(s) (being imported) -3. Add dependency using package manager's workspace syntax -4. Verify symlinks created in consumer's `node_modules/` - ---- - -## pnpm - -Uses `workspace:` protocol - symlinks only created when explicitly declared. - -```bash -# From consumer directory -pnpm add @org/ui --workspace - -# Or with --filter from anywhere -pnpm add @org/ui --filter @org/app --workspace -``` - -Result in `package.json`: - -```json -{ "dependencies": { "@org/ui": "workspace:*" } } -``` - ---- - -## yarn (v2+/berry) - -Also uses `workspace:` protocol. - -```bash -yarn workspace @org/app add @org/ui -``` - -Result in `package.json`: - -```json -{ "dependencies": { "@org/ui": "workspace:^" } } -``` - ---- - -## npm - -No `workspace:` protocol. npm auto-symlinks workspace packages. - -```bash -npm install @org/ui --workspace @org/app -``` - -Result in `package.json`: - -```json -{ "dependencies": { "@org/ui": "*" } } -``` - -npm resolves to local workspace automatically during install. - ---- - -## bun - -Supports `workspace:` protocol (pnpm-compatible). - -```bash -cd packages/app && bun add @org/ui -``` - -Result in `package.json`: - -```json -{ "dependencies": { "@org/ui": "workspace:*" } } -``` - ---- - -## Examples - -**Example 1: pnpm - link ui lib to app** - -```bash -pnpm add @org/ui --filter @org/app --workspace -``` - -**Example 2: npm - link multiple packages** - -```bash -npm install @org/data-access @org/ui --workspace @org/dashboard -``` - -**Example 3: Debug "Cannot find module"** - -1. Check if dependency is declared in consumer's `package.json` -2. If not, add it using appropriate command above -3. Run install (`pnpm install`, `npm install`, etc.) - -## Notes - -- Symlinks appear in `/node_modules/@org/` -- **Hoisting differs by manager:** - - npm/bun: hoist shared deps to root `node_modules` - - pnpm: no hoisting (strict isolation, prevents phantom deps) - - yarn berry: uses Plug'n'Play by default (no `node_modules`) -- Root `package.json` should have `"private": true` to prevent accidental publish diff --git a/.gemini/skills/monitor-ci/skill.md b/.gemini/skills/monitor-ci/skill.md deleted file mode 100644 index d99174b..0000000 --- a/.gemini/skills/monitor-ci/skill.md +++ /dev/null @@ -1,650 +0,0 @@ ---- -name: monitor-ci -description: Monitor Nx Cloud CI pipeline and handle self-healing fixes. USE WHEN user says "monitor ci", "watch ci", "ci monitor", "watch ci for this branch", "track ci", "check ci status", wants to track CI status, or needs help with self-healing CI fixes. ALWAYS USE THIS SKILL instead of native CI provider tools (gh, glab, etc.) for CI monitoring. ---- - -# Monitor CI Command - -You are the orchestrator for monitoring Nx Cloud CI pipeline executions and handling self-healing fixes. You spawn the `ci-monitor-subagent` subagent to poll CI status and make decisions based on the results. - -## Context - -- **Current Branch:** !`git branch --show-current` -- **Current Commit:** !`git rev-parse --short HEAD` -- **Remote Status:** !`git status -sb | head -1` - -## User Instructions - -$ARGUMENTS - -**Important:** If user provides specific instructions, respect them over default behaviors described below. - -## Configuration Defaults - -| Setting | Default | Description | -| ------------------------- | ------------- | ------------------------------------------------------------------------- | -| `--max-cycles` | 10 | Maximum **agent-initiated** CI Attempt cycles before timeout | -| `--timeout` | 120 | Maximum duration in minutes | -| `--verbosity` | medium | Output level: minimal, medium, verbose | -| `--branch` | (auto-detect) | Branch to monitor | -| `--subagent-timeout` | 30 | Subagent polling timeout in minutes | -| `--fresh` | false | Ignore previous context, start fresh | -| `--auto-fix-workflow` | false | Attempt common fixes for pre-CI-Attempt failures (e.g., lockfile updates) | -| `--new-cipe-timeout` | 10 | Minutes to wait for new CI Attempt after action | -| `--local-verify-attempts` | 3 | Max local verification + enhance cycles before pushing to CI | - -Parse any overrides from `$ARGUMENTS` and merge with defaults. - -## Nx Cloud Connection Check - -**CRITICAL**: Before starting the monitoring loop, verify the workspace is connected to Nx Cloud. - -### Step 0: Verify Nx Cloud Connection - -1. **Check `nx.json`** at workspace root for `nxCloudId` or `nxCloudAccessToken` -2. **If `nx.json` missing OR neither property exists** → exit with: - - ``` - [monitor-ci] Nx Cloud not connected. Unlock 70% faster CI and auto-fix broken PRs with https://nx.dev/nx-cloud - ``` - -3. **If connected** → continue to main loop - -## Anti-Patterns (NEVER DO) - -**CRITICAL**: The following behaviors are strictly prohibited: - -| Anti-Pattern | Why It's Bad | -| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -| Using CI provider CLIs with `--watch` flags (e.g., `gh pr checks --watch`, `glab ci status -w`) | Bypasses Nx Cloud self-healing entirely | -| Writing custom CI polling scripts | Unreliable, pollutes context, no self-healing | -| Cancelling CI workflows/pipelines | Destructive, loses CI progress | -| Running CI checks on main agent | Wastes main agent context tokens | -| Independently analyzing/fixing CI failures while subagent polls | Races with self-healing, causes duplicate fixes and confused state | - -**If this skill fails to activate**, the fallback is: - -1. Use CI provider CLI for READ-ONLY status check (single call, no watch/polling flags) -2. Immediately delegate to this skill with gathered context -3. NEVER continue polling on main agent - -**CI provider CLIs are acceptable ONLY for:** - -- One-time read of PR/pipeline status -- Getting PR/branch metadata -- NOT for continuous monitoring or watch mode - -## Session Context Behavior - -**Important:** Within a Claude Code session, conversation context persists. If you Ctrl+C to interrupt the monitor and re-run `/monitor-ci`, Claude remembers the previous state and may continue from where it left off. - -- **To continue monitoring:** Just re-run `/monitor-ci` (context is preserved) -- **To start fresh:** Use `/monitor-ci --fresh` to ignore previous context -- **For a completely clean slate:** Exit Claude Code and restart `claude` - -## Default Behaviors by Status - -The subagent returns with one of the following statuses. This table defines the **default behavior** for each status. User instructions can override any of these. - -| Status | Default Behavior | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ci_success` | Exit with success. Log "CI passed successfully!" | -| `fix_auto_applying` | Fix will be auto-applied by self-healing. Do NOT call MCP. Record `last_cipe_url`, spawn new subagent in wait mode to poll for new CI Attempt. | -| `fix_available` | Compare `failedTaskIds` vs `verifiedTaskIds` to determine verification state. See **Fix Available Decision Logic** section below. | -| `fix_failed` | Self-healing failed to generate fix. Attempt local fix based on `taskOutputSummary`. If successful → commit, push, loop. If not → exit with failure. | -| `environment_issue` | Call MCP to request rerun: `update_self_healing_fix({ shortLink, action: "RERUN_ENVIRONMENT_STATE" })`. New CI Attempt spawns automatically. Loop to poll for new CI Attempt. | -| `no_fix` | CI failed, no fix available (self-healing disabled or not executable). Attempt local fix if possible. Otherwise exit with failure. | -| `no_new_cipe` | Expected CI Attempt never spawned (CI workflow likely failed before Nx tasks). Report to user, attempt common fixes if configured, or exit with guidance. | -| `polling_timeout` | Subagent polling timeout reached. Exit with timeout. | -| `cipe_canceled` | CI Attempt was canceled. Exit with canceled status. | -| `cipe_timed_out` | CI Attempt timed out. Exit with timeout status. | -| `cipe_no_tasks` | CI Attempt exists but failed with no task data (likely infrastructure issue). Retry once with empty commit. If retry fails, exit with failure and guidance. | -| `error` | Increment `no_progress_count`. If >= 3 → exit with circuit breaker. Otherwise wait 60s and loop. | - -### Fix Available Decision Logic - -When subagent returns `fix_available`, main agent compares `failedTaskIds` vs `verifiedTaskIds`: - -#### Step 1: Categorize Tasks - -1. **Verified tasks** = tasks in both `failedTaskIds` AND `verifiedTaskIds` -2. **Unverified tasks** = tasks in `failedTaskIds` but NOT in `verifiedTaskIds` -3. **E2E tasks** = unverified tasks where target contains "e2e" (task format: `:` or `::`) -4. **Verifiable tasks** = unverified tasks that are NOT e2e - -#### Step 2: Determine Path - -| Condition | Path | -| --------------------------------------- | ---------------------------------------- | -| No unverified tasks (all verified) | Apply via MCP | -| Unverified tasks exist, but ALL are e2e | Apply via MCP (treat as verified enough) | -| Verifiable tasks exist | Local verification flow | - -#### Step 3a: Apply via MCP (fully/e2e-only verified) - -- Call `update_self_healing_fix({ shortLink, action: "APPLY" })` -- Record `last_cipe_url`, spawn subagent in wait mode - -#### Step 3b: Local Verification Flow - -When verifiable (non-e2e) unverified tasks exist: - -1. **Detect package manager:** - - `pnpm-lock.yaml` exists → `pnpm nx` - - `yarn.lock` exists → `yarn nx` - - Otherwise → `npx nx` - -2. **Run verifiable tasks in parallel:** - - Spawn `general` subagents to run each task concurrently - - Each subagent runs: ` nx run ` - - Collect pass/fail results from all subagents - -3. **Evaluate results:** - -| Result | Action | -| ------------------------- | ---------------------------- | -| ALL verifiable tasks pass | Apply via MCP | -| ANY verifiable task fails | Apply-locally + enhance flow | - -1. **Apply-locally + enhance flow:** - - Run `nx-cloud apply-locally ` - - Enhance the code to fix failing tasks - - Run failing tasks again to verify fix - - If still failing → increment `local_verify_count`, loop back to enhance - - If passing → commit and push, record `expected_commit_sha`, spawn subagent in wait mode - -2. **Track attempts** (wraps step 4): - - Increment `local_verify_count` after each enhance cycle - - If `local_verify_count >= local_verify_attempts` (default: 3): - - Get code in commit-able state - - Commit and push with message indicating local verification failed - - Report to user: - - ``` - [monitor-ci] Local verification failed after attempts. Pushed to CI for final validation. Failed: - ``` - - - Record `expected_commit_sha`, spawn subagent in wait mode (let CI be final judge) - -#### Commit Message Format - -```bash -git commit -m "fix(): - -Failed tasks: , -Local verification: passed|enhanced|failed-pushing-to-ci" -``` - -**Git Safety**: Only stage and commit files that were modified as part of the fix. Users may have concurrent local changes (local publish, WIP features, config tweaks) that must NOT be committed. NEVER use `git add -A` or `git add .` — always stage specific files by name. - -### Unverified Fix Flow (No Verification Attempted) - -When `verificationStatus` is `FAILED`, `NOT_EXECUTABLE`, or fix has `couldAutoApplyTasks != true` with no verification: - -- Analyze fix content (`suggestedFix`, `suggestedFixReasoning`, `taskOutputSummary`) -- If fix looks correct → apply via MCP -- If fix needs enhancement → use Apply Locally + Enhance Flow above -- If fix is wrong → reject via MCP, fix from scratch, commit, push - -### Auto-Apply Eligibility - -The `couldAutoApplyTasks` field indicates whether the fix is eligible for automatic application: - -- **`true`**: Fix is eligible for auto-apply. Subagent keeps polling while verification is in progress. Returns `fix_auto_applying` when verified, or `fix_available` if verification fails. -- **`false`** or **`null`**: Fix requires manual action (apply via MCP, apply locally, or reject) - -**Key point**: When subagent returns `fix_auto_applying`, do NOT call MCP to apply - self-healing handles it. Just spawn a new subagent in wait mode. No local git operations (no commit, no push). - -### Accidental Local Fix Recovery - -If you find yourself with uncommitted local changes from your own fix attempt when the subagent returns (e.g., you accidentally analyzed/fixed the failure while the subagent was polling): - -1. **Compare your local changes with the self-healing fix** (`suggestedFix` / `suggestedFixDescription`) -2. **If identical or substantially similar** → discard only the files you modified (`git checkout -- ...`), then apply via MCP instead. Self-healing's pipeline is the preferred path. Do NOT discard unrelated user changes. -3. **If meaningfully different** (your fix addresses something self-healing missed) → proceed with the Apply Locally + Enhance Flow - -Self-healing fixes go through proper CI verification. Always prefer the self-healing path when fixes overlap. - -### Apply vs Reject vs Apply Locally - -- **Apply via MCP**: Calls `update_self_healing_fix({ shortLink, action: "APPLY" })`. Self-healing agent applies the fix in CI and a new CI Attempt spawns automatically. No local git operations needed. -- **Apply Locally**: Runs `nx-cloud apply-locally `. Applies the patch to your local working directory and sets state to `APPLIED_LOCALLY`. Use this when you want to enhance the fix before pushing. -- **Reject via MCP**: Calls `update_self_healing_fix({ shortLink, action: "REJECT" })`. Marks fix as rejected. Use only when the fix is completely wrong and you'll fix from scratch. - -### Apply Locally + Enhance Flow - -When the fix needs enhancement (use `nx-cloud apply-locally`, NOT reject): - -1. Apply the patch locally: `nx-cloud apply-locally ` (this also updates state to `APPLIED_LOCALLY`) -2. Make additional changes as needed -3. Stage only the files you modified: `git add ...` -4. Commit and push: - - ```bash - git commit -m "fix: resolve " - git push origin $(git branch --show-current) - ``` - -5. Loop to poll for new CI Attempt - -### Reject + Fix From Scratch Flow - -When the fix is completely wrong: - -1. Call MCP to reject: `update_self_healing_fix({ shortLink, action: "REJECT" })` -2. Fix the issue from scratch locally -3. Stage only the files you modified: `git add ...` -4. Commit and push: - - ```bash - git commit -m "fix: resolve " - git push origin $(git branch --show-current) - ``` - -5. Loop to poll for new CI Attempt - -### Environment Issue Handling - -When `failureClassification == 'ENVIRONMENT_STATE'`: - -1. Call MCP to request rerun: `update_self_healing_fix({ shortLink, action: "RERUN_ENVIRONMENT_STATE" })` -2. New CI Attempt spawns automatically (no local git operations needed) -3. Loop to poll for new CI Attempt with `previousCipeUrl` set - -### No-New-CI-Attempt Handling - -When `status == 'no_new_cipe'`: - -This means the expected CI Attempt was never created - CI likely failed before Nx tasks could run. - -1. **Report to user:** - - ``` - [monitor-ci] No CI attempt for after 10 min. Check CI provider for pre-Nx failures (install, checkout, auth). Last CI attempt: - ``` - -2. **If user configured auto-fix attempts** (e.g., `--auto-fix-workflow`): - - Detect package manager: check for `pnpm-lock.yaml`, `yarn.lock`, `package-lock.json` - - Run install to update lockfile: - - ```bash - pnpm install # or npm install / yarn install - ``` - - - If lockfile changed: - - ```bash - git add pnpm-lock.yaml # or appropriate lockfile - git commit -m "chore: update lockfile" - git push origin $(git branch --show-current) - ``` - - - Record new commit SHA, loop to poll with `expectedCommitSha` - -3. **Otherwise:** Exit with `no_new_cipe` status, providing guidance for user to investigate - -### CI-Attempt-No-Tasks Handling - -When `status == 'cipe_no_tasks'`: - -This means the CI Attempt was created but no Nx tasks were recorded before it failed. Common causes: - -- CI timeout before tasks could run -- Critical infrastructure error -- Memory/resource exhaustion -- Network issues connecting to Nx Cloud - -1. **Report to user:** - - ``` - [monitor-ci] CI failed but no Nx tasks were recorded. - [monitor-ci] CI Attempt URL: - [monitor-ci] - [monitor-ci] This usually indicates an infrastructure issue. Attempting retry... - ``` - -2. **Create empty commit to retry CI:** - - ```bash - git commit --allow-empty -m "chore: retry ci [monitor-ci]" - git push origin $(git branch --show-current) - ``` - -3. **Record `expected_commit_sha`, spawn subagent in wait mode** - -4. **If retry also returns `cipe_no_tasks`:** - - Exit with failure - - Provide guidance: - - ``` - [monitor-ci] Retry failed. Please check: - [monitor-ci] 1. Nx Cloud UI: - [monitor-ci] 2. CI provider logs (GitHub Actions, GitLab CI, etc.) - [monitor-ci] 3. CI job timeout settings - [monitor-ci] 4. Memory/resource limits - ``` - -## Exit Conditions - -Exit the monitoring loop when ANY of these conditions are met: - -| Condition | Exit Type | -| ------------------------------------------------------------ | ---------------------- | -| CI passes (`cipeStatus == 'SUCCEEDED'`) | Success | -| Max agent-initiated cycles reached (after user declines ext) | Timeout | -| Max duration reached | Timeout | -| 3 consecutive no-progress iterations | Circuit breaker | -| No fix available and local fix not possible | Failure | -| No new CI Attempt and auto-fix not configured | Pre-CI-Attempt failure | -| User cancels | Cancelled | - -## Main Loop - -### Step 1: Initialize Tracking - -``` -cycle_count = 0 # Only incremented for agent-initiated cycles (counted against --max-cycles) -start_time = now() -no_progress_count = 0 -local_verify_count = 0 -last_state = null -last_cipe_url = null -expected_commit_sha = null -agent_triggered = false # Set true after monitor takes an action that triggers new CI Attempt -``` - -### Step 2: Spawn Subagent and Monitor Output - -Spawn the `ci-monitor-subagent` subagent to poll CI status. **Run in background** so you can actively monitor and relay its output to the user. - -**Fresh start (first spawn, no expected CI Attempt):** - -``` -Task( - agent: "ci-monitor-subagent", - run_in_background: true, - prompt: "Monitor CI for branch ''. - Subagent timeout: minutes. - New-CI-Attempt timeout: minutes. - Verbosity: ." -) -``` - -**After action that triggers new CI Attempt (wait mode):** - -``` -Task( - agent: "ci-monitor-subagent", - run_in_background: true, - prompt: "Monitor CI for branch ''. - Subagent timeout: minutes. - New-CI-Attempt timeout: minutes. - Verbosity: . - - WAIT MODE: A new CI Attempt should spawn. Ignore old CI Attempt until new one appears. - Expected commit SHA: - Previous CI Attempt URL: " -) -``` - -### Step 2a: Active Output Monitoring (CRITICAL) - -**The subagent's text output is NOT visible to users when running in background.** You MUST actively monitor and relay its output. Do NOT passively wait for completion. - -After spawning the background subagent, enter a monitoring loop: - -1. **Every 60 seconds**, check the subagent output using `TaskOutput(task_id, block=false)` -2. **Parse new lines** since your last check — look for `[ci-monitor]` and `⚡` prefixed lines -3. **Relay to user** based on verbosity: - - `minimal`: Only relay `⚡` critical transition lines - - `medium`: Relay all `[ci-monitor]` status lines - - `verbose`: Relay all subagent output -4. **Continue** until `TaskOutput` returns a completed status -5. When complete, proceed to Step 3 with the final subagent response - -**Example monitoring loop output:** - -``` -[monitor-ci] Checking subagent status... (elapsed: 1m) -[monitor-ci] CI: IN_PROGRESS | Self-healing: NOT_STARTED - -[monitor-ci] Checking subagent status... (elapsed: 3m) -[monitor-ci] CI: FAILED | Self-healing: IN_PROGRESS -[monitor-ci] ⚡ CI failed — self-healing fix generation started - -[monitor-ci] Checking subagent status... (elapsed: 5m) -[monitor-ci] CI: FAILED | Self-healing: COMPLETED | Verification: IN_PROGRESS -[monitor-ci] ⚡ Self-healing fix generated — verification started -``` - -**NEVER do this:** - -- Spawn subagent and passively say "Waiting for results..." -- Check once and say "Still working, I'll wait" -- Only show output when the subagent finishes -- Independently analyze CI failures, read task output, or attempt fixes while subagent is polling - -**While the subagent is polling, your ONLY job is to relay its output.** Do not read CI task output, diagnose failures, generate fixes, modify code, or run tasks locally. All fix decisions happen in Step 3 AFTER the subagent returns with a status. Self-healing may already be working on a fix — independent local analysis races with it and causes duplicate/conflicting fixes. - -### Step 3: Handle Subagent Response - -When subagent returns: - -1. Check the returned status -2. Look up default behavior in the table above -3. Check if user instructions override the default -4. Execute the appropriate action -5. **If action expects new CI Attempt**, update tracking (see Step 3a) -6. If action results in looping, go to Step 2 - -### Step 3a: Track State for New-CI-Attempt Detection - -After actions that should trigger a new CI Attempt, record state before looping: - -| Action | What to Track | Subagent Mode | -| ----------------------------------- | --------------------------------------------- | ------------- | -| Fix auto-applying | `last_cipe_url = current cipeUrl` | Wait mode | -| Apply via MCP | `last_cipe_url = current cipeUrl` | Wait mode | -| Apply locally + push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | -| Reject + fix + push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | -| Fix failed + local fix + push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | -| No fix + local fix + push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | -| Environment rerun | `last_cipe_url = current cipeUrl` | Wait mode | -| No-new-CI-Attempt + auto-fix + push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | -| CI Attempt no tasks + retry push | `expected_commit_sha = $(git rev-parse HEAD)` | Wait mode | - -**CRITICAL**: When passing `expectedCommitSha` or `last_cipe_url` to the subagent, it enters **wait mode**: - -- Subagent will **completely ignore** the old/stale CI Attempt -- Subagent will only wait for new CI Attempt to appear -- Subagent will NOT return to main agent with stale CI Attempt data -- Once new CI Attempt detected, subagent switches to normal polling - -**Why wait mode matters for context preservation**: Stale CI Attempt data can be very large (task output summaries, suggested fix patches, reasoning). If subagent returns this to main agent, it pollutes main agent's context with useless data since we already processed that CI Attempt. Wait mode keeps stale data in the subagent, never sending it to main agent. - -### Step 4: Cycle Classification and Progress Tracking - -#### Cycle Classification - -Not all cycles are equal. Only count cycles the monitor itself triggered toward `--max-cycles`: - -1. **After subagent returns**, check `agent_triggered`: - - `agent_triggered == true` → this cycle was triggered by the monitor → `cycle_count++` - - `agent_triggered == false` → this cycle was human-initiated or a first observation → do NOT increment `cycle_count` -2. **Reset** `agent_triggered = false` -3. **After Step 3a** (when the monitor takes an action that triggers a new CI Attempt) → set `agent_triggered = true` - -**How detection works**: Step 3a is only called when the monitor explicitly pushes code, applies a fix via MCP, or triggers an environment rerun. If a human pushes on their own, the subagent detects a new CI Attempt but the monitor never went through Step 3a, so `agent_triggered` remains `false`. - -**When a human-initiated cycle is detected**, log it: - -``` -[monitor-ci] New CI Attempt detected (human-initiated push). Monitoring without incrementing cycle count. (agent cycles: N/max-cycles) -``` - -#### Approaching Limit Gate - -When `cycle_count >= max_cycles - 2`, pause and ask the user before continuing: - -``` -[monitor-ci] Approaching cycle limit (cycle_count/max_cycles agent-initiated cycles used). -[monitor-ci] How would you like to proceed? - 1. Continue with 5 more cycles - 2. Continue with 10 more cycles - 3. Stop monitoring -``` - -Increase `max_cycles` by the user's choice and continue. - -#### Progress Tracking - -After each action: - -- If state changed significantly → reset `no_progress_count = 0` -- If state unchanged → `no_progress_count++` -- On new CI attempt detected → reset `local_verify_count = 0` - -## Status Reporting - -Based on verbosity level: - -| Level | What to Report | -| --------- | -------------------------------------------------------------------------- | -| `minimal` | Only final result (success/failure/timeout) | -| `medium` | State changes + periodic updates ("Cycle N \| Elapsed: Xm \| Status: ...") | -| `verbose` | All of medium + full subagent responses, git outputs, MCP responses | - -## User Instruction Examples - -Users can override default behaviors: - -| Instruction | Effect | -| ------------------------------------------------ | --------------------------------------------------- | -| "never auto-apply" | Always prompt before applying any fix | -| "always ask before git push" | Prompt before each push | -| "reject any fix for e2e tasks" | Auto-reject if `failedTaskIds` contains e2e | -| "apply all fixes regardless of verification" | Skip verification check, apply everything | -| "if confidence < 70, reject" | Check confidence field before applying | -| "run 'nx affected -t typecheck' before applying" | Add local verification step | -| "auto-fix workflow failures" | Attempt lockfile updates on pre-CI-Attempt failures | -| "wait 45 min for new CI Attempt" | Override new-CI-Attempt timeout (default: 10 min) | - -## Error Handling - -| Error | Action | -| ------------------------------ | ------------------------------------------------------------------------------------- | -| Git rebase conflict | Report to user, exit | -| `nx-cloud apply-locally` fails | Report to user, attempt manual patch or exit | -| MCP tool error | Retry once, if fails report to user | -| Subagent spawn failure | Retry once, if fails exit with error | -| No new CI Attempt detected | If `--auto-fix-workflow`, try lockfile update; otherwise report to user with guidance | -| Lockfile auto-fix fails | Report to user, exit with guidance to check CI logs | - -## Example Session - -### Example 1: Normal Flow with Self-Healing (medium verbosity) - -``` -[monitor-ci] Starting CI monitor for branch 'feature/add-auth' -[monitor-ci] Config: max-cycles=5, timeout=120m, verbosity=medium - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 1m) -[monitor-ci] CI: IN_PROGRESS | Self-healing: NOT_STARTED -[monitor-ci] Checking subagent status... (elapsed: 3m) -[monitor-ci] CI: FAILED | Self-healing: IN_PROGRESS -[monitor-ci] ⚡ CI failed — self-healing fix generation started -[monitor-ci] Checking subagent status... (elapsed: 5m) -[monitor-ci] CI: FAILED | Self-healing: COMPLETED | Verification: COMPLETED - -[monitor-ci] Fix available! Verification: COMPLETED -[monitor-ci] Applying fix via MCP... -[monitor-ci] Fix applied in CI. Waiting for new CI attempt... - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 7m) -[monitor-ci] ⚡ New CI Attempt detected! -[monitor-ci] Checking subagent status... (elapsed: 8m) -[monitor-ci] CI: SUCCEEDED - -[monitor-ci] CI passed successfully! - -[monitor-ci] Summary: - - Agent cycles: 1/5 - - Total time: 12m 34s - - Fixes applied: 1 - - Result: SUCCESS -``` - -### Example 2: Pre-CI Failure (medium verbosity) - -``` -[monitor-ci] Starting CI monitor for branch 'feature/add-products' -[monitor-ci] Config: max-cycles=5, timeout=120m, auto-fix-workflow=true - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 2m) -[monitor-ci] CI: FAILED | Self-healing: COMPLETED - -[monitor-ci] Fix available! Applying locally, enhancing, and pushing... -[monitor-ci] Committed: abc1234 - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 6m) -[monitor-ci] Waiting for new CI Attempt... (expected SHA: abc1234) -[monitor-ci] Checking subagent status... (elapsed: 12m) -[monitor-ci] ⚠️ CI Attempt timeout (10 min). Status: no_new_cipe - -[monitor-ci] --auto-fix-workflow enabled. Attempting lockfile update... -[monitor-ci] Lockfile updated. Committed: def5678 - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 16m) -[monitor-ci] ⚡ New CI Attempt detected! -[monitor-ci] Checking subagent status... (elapsed: 18m) -[monitor-ci] CI: SUCCEEDED - -[monitor-ci] CI passed successfully! - -[monitor-ci] Summary: - - Agent cycles: 3/5 - - Total time: 22m 15s - - Fixes applied: 1 (self-healing) + 1 (lockfile) - - Result: SUCCESS -``` - -### Example 3: Human-in-the-Loop (user pushes during monitoring) - -``` -[monitor-ci] Starting CI monitor for branch 'feature/refactor-api' -[monitor-ci] Config: max-cycles=5, timeout=120m, verbosity=medium - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 4m) -[monitor-ci] CI: FAILED | Self-healing: COMPLETED - -[monitor-ci] Fix available! Applying fix via MCP... (agent cycles: 0/5) -[monitor-ci] Fix applied in CI. Waiting for new CI attempt... - -[monitor-ci] Spawning subagent to poll CI status... -[monitor-ci] Checking subagent status... (elapsed: 8m) -[monitor-ci] ⚡ New CI Attempt detected! -[monitor-ci] CI: FAILED | Self-healing: COMPLETED - -[monitor-ci] Agent-initiated cycle. (agent cycles: 1/5) -[monitor-ci] Fix available! Applying locally and enhancing... -[monitor-ci] Committed: abc1234 - -[monitor-ci] Spawning subagent to poll CI status... - ... (user pushes their own changes to the branch while monitor waits) ... -[monitor-ci] Checking subagent status... (elapsed: 12m) -[monitor-ci] ⚡ New CI Attempt detected! -[monitor-ci] CI: FAILED | Self-healing: IN_PROGRESS - -[monitor-ci] New CI Attempt detected (human-initiated push). Monitoring without incrementing cycle count. (agent cycles: 2/5) -[monitor-ci] Checking subagent status... (elapsed: 16m) -[monitor-ci] CI: FAILED | Self-healing: COMPLETED - -[monitor-ci] Fix available! Applying via MCP... (agent cycles: 2/5) - ... (continues, human cycles don't eat into the budget) ... -``` diff --git a/.gemini/skills/nx-generate/skill.md b/.gemini/skills/nx-generate/skill.md deleted file mode 100644 index af7ba80..0000000 --- a/.gemini/skills/nx-generate/skill.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -name: nx-generate -description: Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally. ---- - -# Run Nx Generator - -Nx generators are powerful tools that scaffold projects, make automated code migrations or automate repetitive tasks in a monorepo. They ensure consistency across the codebase and reduce boilerplate work. - -This skill applies when the user wants to: - -- Create new projects like libraries or applications -- Scaffold features or boilerplate code -- Run workspace-specific or custom generators -- Do anything else that an nx generator exists for - -## Key Principles - -1. **Always use `--no-interactive`** - Prevents prompts that would hang execution -2. **Read the generator source code** - The schema alone is not enough; understand what the generator actually does -3. **Match existing repo patterns** - Study similar artifacts in the repo and follow their conventions -4. **Verify with lint/test/build/typecheck etc.** - Generated code must pass verification. The listed targets are just an example, use what's appropriate for this workspace. - -## Steps - -### 1. Discover Available Generators - -Use the Nx CLI to discover available generators: - -- List all generators for a plugin: `npx nx list @nx/react` -- View available plugins: `npx nx list` - -This includes plugin generators (e.g., `@nx/react:library`) and local workspace generators. - -### 2. Match Generator to User Request - -Identify which generator(s) could fulfill the user's needs. Consider what artifact type they want, which framework is relevant, and any specific generator names mentioned. - -**IMPORTANT**: When both a local workspace generator and an external plugin generator could satisfy the request, **always prefer the local workspace generator**. Local generators are customized for the specific repo's patterns. - -If no suitable generator exists, you can stop using this skill. However, the burden of proof is high—carefully consider all available generators before deciding none apply. - -### 3. Get Generator Options - -Use the `--help` flag to understand available options: - -```bash -npx nx g @nx/react:library --help -``` - -Pay attention to required options, defaults that might need overriding, and options relevant to the user's request. - -### Library Buildability - -**Default to non-buildable libraries** unless there's a specific reason for buildable. - -| Type | When to use | Generator flags | -| --------------------------- | ----------------------------------------------------------------- | ----------------------------------- | -| **Non-buildable** (default) | Internal monorepo libs consumed by apps | No `--bundler` flag | -| **Buildable** | Publishing to npm, cross-repo sharing, stable libs for cache hits | `--bundler=vite` or `--bundler=swc` | - -Non-buildable libs: - -- Export `.ts`/`.tsx` source directly -- Consumer's bundler compiles them -- Faster dev experience, less config - -Buildable libs: - -- Have their own build target -- Useful for stable libs that rarely change (cache hits) -- Required for npm publishing - -**If unclear, ask the user:** "Should this library be buildable (own build step, better caching) or non-buildable (source consumed directly, simpler setup)?" - -### 4. Read Generator Source Code - -**This step is critical.** The schema alone does not tell you everything. Reading the source code helps you: - -- Know exactly what files will be created/modified and where -- Understand side effects (updating configs, installing deps, etc.) -- Identify behaviors and options not obvious from the schema -- Understand how options interact with each other - -To find generator source code: - -- For plugin generators: Use `node -e "console.log(require.resolve('@nx//generators.json'));"` to find the generators.json, then locate the source from there -- If that fails, read directly from `node_modules//generators.json` -- For local generators: Typically in `tools/generators/` or a local plugin directory. Search the repo for the generator name. - -After reading the source, reconsider: Is this the right generator? If not, go back to step 2. - -> **⚠️ `--directory` flag behavior can be misleading.** -> It should specify the full path of the generated library or component, not the parent path that it will be generated in. -> -> ```bash -> # ✅ Correct - directory is the full path for the library -> nx g @nx/react:library --directory=libs/my-lib -> # generates libs/my-lib/package.json and more -> -> # ❌ Wrong - this will create files at libs and libs/src/... -> nx g @nx/react:library --name=my-lib --directory=libs -> # generates libs/package.json and more -> ``` - -### 5. Examine Existing Patterns - -Before generating, examine the target area of the codebase: - -- Look at similar existing artifacts (other libraries, applications, etc.) -- Identify naming conventions, file structures, and configuration patterns -- Note which test runners, build tools, and linters are used -- Configure the generator to match these patterns - -### 6. Dry-Run to Verify File Placement - -**Always run with `--dry-run` first** to verify files will be created in the correct location: - -```bash -npx nx g @nx/react:library --name=my-lib --dry-run --no-interactive -``` - -Review the output carefully. If files would be created in the wrong location, adjust your options based on what you learned from the generator source code. - -Note: Some generators don't support dry-run (e.g., if they install npm packages). If dry-run fails for this reason, proceed to running the generator for real. - -### 7. Run the Generator - -Execute the generator: - -```bash -nx generate --no-interactive -``` - -> **Tip:** New packages often need workspace dependencies wired up (e.g., importing shared types, being consumed by apps). The `link-workspace-packages` skill can help add these correctly. - -### 8. Modify Generated Code (If Needed) - -Generators provide a starting point. Modify the output as needed to: - -- Add or modify functionality as requested -- Adjust imports, exports, or configurations -- Integrate with existing code patterns - -**Important:** If you replace or delete generated test files (e.g., `*.spec.ts`), either write meaningful replacement tests or remove the `test` target from the project configuration. Empty test suites will cause `nx test` to fail. - -### 9. Format and Verify - -Format all generated/modified files: - -```bash -nx format --fix -``` - -This example is for built-in nx formatting with prettier. There might be other formatting tools for this workspace, use these when appropriate. - -Then verify the generated code works. Keep in mind that the changes you make with a generator or subsequent modifications might impact various projects so it's usually not enough to only run targets for the artifact you just created. - -```bash -# these targets are just an example! -nx run-many -t build,lint,test,typecheck -``` - -These targets are common examples used across many workspaces. You should do research into other targets available for this workspace and its projects. CI configuration is usually a good guide for what the critical targets are that have to pass. - -If verification fails with manageable issues (a few lint errors, minor type issues), fix them. If issues are extensive, attempt obvious fixes first, then escalate to the user with details about what was generated, what's failing, and what you've attempted. diff --git a/.gemini/skills/nx-plugins/skill.md b/.gemini/skills/nx-plugins/skill.md deleted file mode 100644 index 89223c7..0000000 --- a/.gemini/skills/nx-plugins/skill.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -name: nx-plugins -description: Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace. ---- - -## Finding and Installing new plugins - -- List plugins: `pnpm nx list` -- Install plugins `pnpm nx add `. Example: `pnpm nx add @nx/react`. diff --git a/.gemini/skills/nx-run-tasks/skill.md b/.gemini/skills/nx-run-tasks/skill.md deleted file mode 100644 index 7f1263a..0000000 --- a/.gemini/skills/nx-run-tasks/skill.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -name: nx-run-tasks -description: Helps with running tasks in an Nx workspace. USE WHEN the user wants to execute build, test, lint, serve, or run any other tasks defined in the workspace. ---- - -You can run tasks with Nx in the following way. - -Keep in mind that you might have to prefix things with npx/pnpx/yarn if the user doesn't have nx installed globally. Look at the package.json or lockfile to determine which package manager is in use. - -For more details on any command, run it with `--help` (e.g. `nx run-many --help`, `nx affected --help`). - -## Understand which tasks can be run - -You can check those via `nx show project --json`, for example `nx show project myapp --json`. It contains a `targets` section which has information about targets that can be run. You can also just look at the `package.json` scripts or `project.json` targets, but you might miss out on inferred tasks by Nx plugins. - -## Run a single task - -``` -nx run : -``` - -where `project` is the project name defined in `package.json` or `project.json` (if present). - -## Run multiple tasks - -``` -nx run-many -t build test lint typecheck -``` - -You can pass a `-p` flag to filter to specific projects, otherwise it runs on all projects. You can also use `--exclude` to exclude projects, and `--parallel` to control the number of parallel processes (default is 3). - -Examples: - -- `nx run-many -t test -p proj1 proj2` — test specific projects -- `nx run-many -t test --projects=*-app --exclude=excluded-app` — test projects matching a pattern -- `nx run-many -t test --projects=tag:api-*` — test projects by tag - -## Run tasks for affected projects - -Use `nx affected` to only run tasks on projects that have been changed and projects that depend on changed projects. This is especially useful in CI and for large workspaces. - -``` -nx affected -t build test lint -``` - -By default it compares against the base branch. You can customize this: - -- `nx affected -t test --base=main --head=HEAD` — compare against a specific base and head -- `nx affected -t test --files=libs/mylib/src/index.ts` — specify changed files directly - -## Useful flags - -These flags work with `run`, `run-many`, and `affected`: - -- `--skipNxCache` — rerun tasks even when results are cached -- `--verbose` — print additional information such as stack traces -- `--nxBail` — stop execution after the first failed task -- `--configuration=` — use a specific configuration (e.g. `production`) diff --git a/.gemini/skills/nx-workspace/references/AFFECTED.md b/.gemini/skills/nx-workspace/references/AFFECTED.md deleted file mode 100644 index e30f18f..0000000 --- a/.gemini/skills/nx-workspace/references/AFFECTED.md +++ /dev/null @@ -1,27 +0,0 @@ -## Affected Projects - -Find projects affected by changes in the current branch. - -```bash -# Affected since base branch (auto-detected) -nx show projects --affected - -# Affected with explicit base -nx show projects --affected --base=main -nx show projects --affected --base=origin/main - -# Affected between two commits -nx show projects --affected --base=abc123 --head=def456 - -# Affected apps only -nx show projects --affected --type app - -# Affected excluding e2e projects -nx show projects --affected --exclude="*-e2e" - -# Affected by uncommitted changes -nx show projects --affected --uncommitted - -# Affected by untracked files -nx show projects --affected --untracked -``` diff --git a/.gemini/skills/nx-workspace/skill.md b/.gemini/skills/nx-workspace/skill.md deleted file mode 100644 index 9fc229e..0000000 --- a/.gemini/skills/nx-workspace/skill.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -name: nx-workspace -description: "Explore and understand Nx workspaces. USE WHEN answering questions about the workspace, projects, or tasks. ALSO USE WHEN an nx command fails or you need to check available targets/configuration before running a task. EXAMPLES: 'What projects are in this workspace?', 'How is project X configured?', 'What depends on library Y?', 'What targets can I run?', 'Cannot find configuration for task', 'debug nx task failure'." ---- - -# Nx Workspace Exploration - -This skill provides read-only exploration of Nx workspaces. Use it to understand workspace structure, project configuration, available targets, and dependencies. - -Keep in mind that you might have to prefix commands with `npx`/`pnpx`/`yarn` if nx isn't installed globally. Check the lockfile to determine the package manager in use. - -## Listing Projects - -Use `nx show projects` to list projects in the workspace. - -The project filtering syntax (`-p`/`--projects`) works across many Nx commands including `nx run-many`, `nx release`, `nx show projects`, and more. Filters support explicit names, glob patterns, tag references (e.g. `tag:name`), directories, and negation (e.g. `!project-name`). - -```bash -# List all projects -nx show projects - -# Filter by pattern (glob) -nx show projects --projects "apps/*" -nx show projects --projects "shared-*" - -# Filter by tag -nx show projects --projects "tag:publishable" -nx show projects -p 'tag:publishable,!tag:internal' - -# Filter by target (projects that have a specific target) -nx show projects --withTarget build - -# Combine filters -nx show projects --type lib --withTarget test -nx show projects --affected --exclude="*-e2e" -nx show projects -p "tag:scope:client,packages/*" - -# Negate patterns -nx show projects -p '!tag:private' -nx show projects -p '!*-e2e' - -# Output as JSON -nx show projects --json -``` - -## Project Configuration - -Use `nx show project --json` to get the full resolved configuration for a project. - -**Important**: Do NOT read `project.json` directly - it only contains partial configuration. The `nx show project --json` command returns the full resolved config including inferred targets from plugins. - -You can read the full project schema at `node_modules/nx/schemas/project-schema.json` to understand nx project configuration options. - -```bash -# Get full project configuration -nx show project my-app --json - -# Extract specific parts from the JSON -nx show project my-app --json | jq '.targets' -nx show project my-app --json | jq '.targets.build' -nx show project my-app --json | jq '.targets | keys' - - -# Check project metadata -nx show project my-app --json | jq '{name, root, sourceRoot, projectType, tags}' -``` - -## Target Information - -Targets define what tasks can be run on a project. - -```bash -# List all targets for a project -nx show project my-app --json | jq '.targets | keys' - -# Get full target configuration -nx show project my-app --json | jq '.targets.build' - -# Check target executor/command -nx show project my-app --json | jq '.targets.build.executor' -nx show project my-app --json | jq '.targets.build.command' - -# View target options -nx show project my-app --json | jq '.targets.build.options' - -# Check target inputs/outputs (for caching) -nx show project my-app --json | jq '.targets.build.inputs' -nx show project my-app --json | jq '.targets.build.outputs' - -# Find projects with a specific target -nx show projects --withTarget serve -nx show projects --withTarget e2e -``` - -## Workspace Configuration - -Read `nx.json` directly for workspace-level configuration. -You can read the full project schema at `node_modules/nx/schemas/nx-schema.json` to understand nx project configuration options. - -```bash -# Read the full nx.json -cat nx.json - -# Or use jq for specific sections -cat nx.json | jq '.targetDefaults' -cat nx.json | jq '.namedInputs' -cat nx.json | jq '.plugins' -cat nx.json | jq '.generators' -``` - -Key nx.json sections: - -- `targetDefaults` - Default configuration applied to all targets of a given name -- `namedInputs` - Reusable input definitions for caching -- `plugins` - Nx plugins and their configuration -- ...and much more, read the schema or nx.json for details - -## Affected Projects - -If the user is asking about affected projects, read the [affected projects reference](references/AFFECTED.md) for detailed commands and examples. - -## Common Exploration Patterns - -### "What's in this workspace?" - -```bash -nx show projects -nx show projects --type app -nx show projects --type lib -``` - -### "How do I build/test/lint project X?" - -```bash -nx show project X --json | jq '.targets | keys' -nx show project X --json | jq '.targets.build' -``` - -### "What depends on library Y?" - -```bash -# Use the project graph to find dependents -nx graph --print | jq '.graph.dependencies | to_entries[] | select(.value[].target == "Y") | .key' -``` - -## Programmatic Answers - -When processing nx CLI results, use command-line tools to compute the answer programmatically rather than counting or parsing output manually. Always use `--json` flags to get structured output that can be processed with `jq`, `grep`, or other tools you have installed locally. - -### Listing Projects - -```bash -nx show projects --json -``` - -Example output: - -```json -["my-app", "my-app-e2e", "shared-ui", "shared-utils", "api"] -``` - -Common operations: - -```bash -# Count projects -nx show projects --json | jq 'length' - -# Filter by pattern -nx show projects --json | jq '.[] | select(startswith("shared-"))' - -# Get affected projects as array -nx show projects --affected --json | jq '.' -``` - -### Project Details - -```bash -nx show project my-app --json -``` - -Example output: - -```json -{ - "root": "apps/my-app", - "name": "my-app", - "sourceRoot": "apps/my-app/src", - "projectType": "application", - "tags": ["type:app", "scope:client"], - "targets": { - "build": { - "executor": "@nx/vite:build", - "options": { "outputPath": "dist/apps/my-app" } - }, - "serve": { - "executor": "@nx/vite:dev-server", - "options": { "buildTarget": "my-app:build" } - }, - "test": { - "executor": "@nx/vite:test", - "options": {} - } - }, - "implicitDependencies": [] -} -``` - -Common operations: - -```bash -# Get target names -nx show project my-app --json | jq '.targets | keys' - -# Get specific target config -nx show project my-app --json | jq '.targets.build' - -# Get tags -nx show project my-app --json | jq '.tags' - -# Get project root -nx show project my-app --json | jq -r '.root' -``` - -### Project Graph - -```bash -nx graph --print -``` - -Example output: - -```json -{ - "graph": { - "nodes": { - "my-app": { - "name": "my-app", - "type": "app", - "data": { "root": "apps/my-app", "tags": ["type:app"] } - }, - "shared-ui": { - "name": "shared-ui", - "type": "lib", - "data": { "root": "libs/shared-ui", "tags": ["type:ui"] } - } - }, - "dependencies": { - "my-app": [{ "source": "my-app", "target": "shared-ui", "type": "static" }], - "shared-ui": [] - } - } -} -``` - -Common operations: - -```bash -# Get all project names from graph -nx graph --print | jq '.graph.nodes | keys' - -# Find dependencies of a project -nx graph --print | jq '.graph.dependencies["my-app"]' - -# Find projects that depend on a library -nx graph --print | jq '.graph.dependencies | to_entries[] | select(.value[].target == "shared-ui") | .key' -``` - -## Troubleshooting - -### "Cannot find configuration for task X:target" - -```bash -# Check what targets exist on the project -nx show project X --json | jq '.targets | keys' - -# Check if any projects have that target -nx show projects --withTarget target -``` - -### "The workspace is out of sync" - -```bash -nx sync -nx reset # if sync doesn't fix stale cache -``` diff --git a/.github/prompts/monitor-ci.prompt.md b/.github/prompts/monitor-ci.prompt.md index 005369a..204b470 100644 --- a/.github/prompts/monitor-ci.prompt.md +++ b/.github/prompts/monitor-ci.prompt.md @@ -111,7 +111,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.github/skills/monitor-ci/SKILL.md b/.github/skills/monitor-ci/SKILL.md index 48b71bf..c90f544 100644 --- a/.github/skills/monitor-ci/SKILL.md +++ b/.github/skills/monitor-ci/SKILL.md @@ -111,7 +111,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.github/skills/monitor-ci/scripts/ci-poll-decide.mjs b/.github/skills/monitor-ci/scripts/ci-poll-decide.mjs index 04db237..43529b0 100644 --- a/.github/skills/monitor-ci/scripts/ci-poll-decide.mjs +++ b/.github/skills/monitor-ci/scripts/ci-poll-decide.mjs @@ -106,7 +106,7 @@ function categorizeTasks() { } function backoff(count) { - const delays = [60, 90, 120]; + const delays = [60, 90, 120, 180]; return delays[Math.min(count, delays.length - 1)]; } @@ -145,7 +145,7 @@ function isNewCipe() { // 3. still waiting → wait (waiting_for_cipe) // NORMAL MODE: // 4. polling timeout → done (polling_timeout) -// 5. circuit breaker (5 polls) → done (circuit_breaker) +// 5. circuit breaker (13 polls) → done (circuit_breaker) // 6. CI succeeded → done (ci_success) // 7. CI canceled → done (cipe_canceled) // 8. CI timed out → done (cipe_timed_out) @@ -177,7 +177,7 @@ function classify() { // --- Guards --- if (isTimedOut()) return { action: 'done', code: 'polling_timeout' }; - if (noProgressCount >= 5) return { action: 'done', code: 'circuit_breaker' }; + if (noProgressCount >= 13) return { action: 'done', code: 'circuit_breaker' }; // --- Terminal CI states --- if (cipeStatus === 'SUCCEEDED') return { action: 'done', code: 'ci_success' }; @@ -267,7 +267,7 @@ const messages = { // guards polling_timeout: () => 'Polling timeout exceeded.', - circuit_breaker: () => 'No progress after 5 consecutive polls. Stopping.', + circuit_breaker: () => 'No progress after 13 consecutive polls. Stopping.', // terminal ci_success: () => 'CI passed successfully!', diff --git a/.opencode/commands/monitor-ci.md b/.opencode/commands/monitor-ci.md index 3f7d140..ddf31b5 100644 --- a/.opencode/commands/monitor-ci.md +++ b/.opencode/commands/monitor-ci.md @@ -111,7 +111,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.opencode/skills/monitor-ci/SKILL.md b/.opencode/skills/monitor-ci/SKILL.md index 48b71bf..c90f544 100644 --- a/.opencode/skills/monitor-ci/SKILL.md +++ b/.opencode/skills/monitor-ci/SKILL.md @@ -111,7 +111,7 @@ The decision script returns one of the following statuses. This table defines th | `cipe_canceled` | Exit, CI was canceled | | `cipe_timed_out` | Exit, CI timed out | | `polling_timeout` | Exit, polling timeout reached | -| `circuit_breaker` | Exit, no progress after 5 consecutive polls | +| `circuit_breaker` | Exit, no progress after 13 consecutive polls | | `environment_rerun_cap` | Exit, environment reruns exhausted | | `fix_auto_applying` | Self-healing is handling it — just record `last_cipe_url`, enter wait mode. No MCP call or local git ops needed. | | `error` | Wait 60s and loop | diff --git a/.opencode/skills/monitor-ci/scripts/ci-poll-decide.mjs b/.opencode/skills/monitor-ci/scripts/ci-poll-decide.mjs index 04db237..43529b0 100644 --- a/.opencode/skills/monitor-ci/scripts/ci-poll-decide.mjs +++ b/.opencode/skills/monitor-ci/scripts/ci-poll-decide.mjs @@ -106,7 +106,7 @@ function categorizeTasks() { } function backoff(count) { - const delays = [60, 90, 120]; + const delays = [60, 90, 120, 180]; return delays[Math.min(count, delays.length - 1)]; } @@ -145,7 +145,7 @@ function isNewCipe() { // 3. still waiting → wait (waiting_for_cipe) // NORMAL MODE: // 4. polling timeout → done (polling_timeout) -// 5. circuit breaker (5 polls) → done (circuit_breaker) +// 5. circuit breaker (13 polls) → done (circuit_breaker) // 6. CI succeeded → done (ci_success) // 7. CI canceled → done (cipe_canceled) // 8. CI timed out → done (cipe_timed_out) @@ -177,7 +177,7 @@ function classify() { // --- Guards --- if (isTimedOut()) return { action: 'done', code: 'polling_timeout' }; - if (noProgressCount >= 5) return { action: 'done', code: 'circuit_breaker' }; + if (noProgressCount >= 13) return { action: 'done', code: 'circuit_breaker' }; // --- Terminal CI states --- if (cipeStatus === 'SUCCEEDED') return { action: 'done', code: 'ci_success' }; @@ -267,7 +267,7 @@ const messages = { // guards polling_timeout: () => 'Polling timeout exceeded.', - circuit_breaker: () => 'No progress after 5 consecutive polls. Stopping.', + circuit_breaker: () => 'No progress after 13 consecutive polls. Stopping.', // terminal ci_success: () => 'CI passed successfully!', diff --git a/apps/app-e2e/eslint.config.mjs b/apps/app-e2e/eslint.config.mjs new file mode 100644 index 0000000..2fd849c --- /dev/null +++ b/apps/app-e2e/eslint.config.mjs @@ -0,0 +1,13 @@ +import playwright from 'eslint-plugin-playwright'; + +import baseConfig from '../../eslint.config.mjs'; + +export default [ + playwright.configs['flat/recommended'], + ...baseConfig, + { + files: ['**/*.ts', '**/*.js'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/apps/app-e2e/playwright.config.ts b/apps/app-e2e/playwright.config.ts new file mode 100644 index 0000000..1f3889b --- /dev/null +++ b/apps/app-e2e/playwright.config.ts @@ -0,0 +1,68 @@ +import { defineConfig, devices } from '@playwright/test'; +import { nxE2EPreset } from '@nx/playwright/preset'; +import { workspaceRoot } from '@nx/devkit'; + +// For CI, you may want to set BASE_URL to the deployed application. +const baseURL = process.env['BASE_URL'] || 'http://localhost:4200'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + ...nxE2EPreset(__filename, { testDir: './src' }), + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + baseURL, + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + /* Run your local dev server before starting the tests */ + webServer: { + command: 'pnpm exec nx run app:serve', + url: 'http://localhost:4200', + reuseExistingServer: true, + cwd: workspaceRoot, + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + // Uncomment for mobile browsers support + /* { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, */ + + // Uncomment for branded browsers + /* { + name: 'Microsoft Edge', + use: { ...devices['Desktop Edge'], channel: 'msedge' }, + }, + { + name: 'Google Chrome', + use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + } */ + ], +}); diff --git a/apps/app-e2e/project.json b/apps/app-e2e/project.json new file mode 100644 index 0000000..6a98485 --- /dev/null +++ b/apps/app-e2e/project.json @@ -0,0 +1,9 @@ +{ + "name": "app-e2e", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "sourceRoot": "apps/app-e2e/src", + "implicitDependencies": ["app"], + "// targets": "to see all targets run: nx show project app-e2e --web", + "targets": {} +} diff --git a/apps/app-e2e/src/example.spec.ts b/apps/app-e2e/src/example.spec.ts new file mode 100644 index 0000000..fa8f1f3 --- /dev/null +++ b/apps/app-e2e/src/example.spec.ts @@ -0,0 +1,8 @@ +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('/'); + + // Expect h1 to contain a substring. + expect(await page.locator('h1').innerText()).toContain('Welcome'); +}); diff --git a/apps/app-e2e/tsconfig.json b/apps/app-e2e/tsconfig.json new file mode 100644 index 0000000..0b670c6 --- /dev/null +++ b/apps/app-e2e/tsconfig.json @@ -0,0 +1,24 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "allowJs": true, + "outDir": "../../dist/out-tsc", + "sourceMap": false, + "module": "commonjs", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "include": [ + "**/*.ts", + "**/*.js", + "playwright.config.ts", + "src/**/*.spec.ts", + "src/**/*.spec.js", + "src/**/*.test.ts", + "src/**/*.test.js", + "src/**/*.d.ts" + ] +} diff --git a/apps/app/eslint.config.mjs b/apps/app/eslint.config.mjs new file mode 100644 index 0000000..bcdb9bf --- /dev/null +++ b/apps/app/eslint.config.mjs @@ -0,0 +1,35 @@ +import nx from '@nx/eslint-plugin'; + +import baseConfig from '../../eslint.config.mjs'; + +export default [ + ...nx.configs['flat/angular'], + ...nx.configs['flat/angular-template'], + ...baseConfig, + { + files: ['**/*.ts'], + rules: { + '@angular-eslint/directive-selector': [ + 'error', + { + type: 'attribute', + prefix: 'app', + style: 'camelCase', + }, + ], + '@angular-eslint/component-selector': [ + 'error', + { + type: 'element', + prefix: 'app', + style: 'kebab-case', + }, + ], + }, + }, + { + files: ['**/*.html'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/apps/app/project.json b/apps/app/project.json new file mode 100644 index 0000000..27eab1b --- /dev/null +++ b/apps/app/project.json @@ -0,0 +1,80 @@ +{ + "name": "app", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "prefix": "app", + "sourceRoot": "apps/app/src", + "tags": [], + "targets": { + "build": { + "executor": "@angular/build:application", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "dist/apps/app", + "browser": "apps/app/src/main.ts", + "tsConfig": "apps/app/tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "apps/app/public" + } + ], + "styles": ["apps/app/src/styles.css"], + "server": "apps/app/src/main.server.ts", + "ssr": { + "entry": "apps/app/src/server.ts" + }, + "outputMode": "server" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kb", + "maximumError": "8kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "continuous": true, + "executor": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "app:build:production" + }, + "development": { + "buildTarget": "app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "lint": { + "executor": "@nx/eslint:lint" + }, + "serve-static": { + "continuous": true, + "executor": "@nx/web:file-server", + "options": { + "buildTarget": "app:build", + "port": 4200, + "staticFilePath": "dist/apps/app/browser", + "spa": true + } + } + } +} diff --git a/apps/app/public/favicon.ico b/apps/app/public/favicon.ico new file mode 100644 index 0000000..317ebcb Binary files /dev/null and b/apps/app/public/favicon.ico differ diff --git a/apps/app/public/social-image-previews/en/contact.html b/apps/app/public/social-image-previews/en/contact.html new file mode 100644 index 0000000..922c60f --- /dev/null +++ b/apps/app/public/social-image-previews/en/contact.html @@ -0,0 +1,173 @@ + + + + + + Initialize connection. + + + +
+
+
+

VISOMI.DEV / CONTACT

+

Initialize connection.

+

Architecture consulting, technical leadership, and high-impact product collaboration.

+

Direct line for architecture, advisory, and product collaboration.

+
+ + Start the conversation +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/en/home.html b/apps/app/public/social-image-previews/en/home.html new file mode 100644 index 0000000..173eac0 --- /dev/null +++ b/apps/app/public/social-image-previews/en/home.html @@ -0,0 +1,173 @@ + + + + + + Architecting software that ships and scales. + + + +
+
+
+

VISOMI.DEV / HOME

+

Architecting software that ships and scales.

+

Senior full-stack engineering, reusable architecture, and AI-enabled workflows.

+

Senior engineering for products that need clear foundations and durable systems.

+
+ + Explore the portfolio +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/en/journey.html b/apps/app/public/social-image-previews/en/journey.html new file mode 100644 index 0000000..fe411bc --- /dev/null +++ b/apps/app/public/social-image-previews/en/journey.html @@ -0,0 +1,173 @@ + + + + + + Engineering across scale, teams, and platforms. + + + +
+
+
+

VISOMI.DEV / JOURNEY

+

Engineering across scale, teams, and platforms.

+

A career timeline across fintech, internal platforms, product systems, and technical leadership.

+

Work across fintech and internal platforms, guided by the architecture behind each system.

+
+ + See the timeline +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/en/projects.html b/apps/app/public/social-image-previews/en/projects.html new file mode 100644 index 0000000..58aa2af --- /dev/null +++ b/apps/app/public/social-image-previews/en/projects.html @@ -0,0 +1,173 @@ + + + + + + Selected projects under real delivery constraints. + + + +
+
+
+

VISOMI.DEV / PROJECTS

+

Selected projects under real delivery constraints.

+

Case studies across fintech, SaaS, internal tools, and scalable product architecture.

+

Editorial case studies shaped by delivery constraints, interface choices, and practical system…

+
+ + Open the case studies +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/en/resume.html b/apps/app/public/social-image-previews/en/resume.html new file mode 100644 index 0000000..b363cdf --- /dev/null +++ b/apps/app/public/social-image-previews/en/resume.html @@ -0,0 +1,173 @@ + + + + + + Resume and experience snapshot. + + + +
+
+
+

VISOMI.DEV / RESUME

+

Resume and experience snapshot.

+

Experience, leadership, systems thinking, and delivery across multiple product stages.

+

A focused snapshot of roles, leadership, and engineering depth across multiple product stages.

+
+ + Review the resume +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/es/contact.html b/apps/app/public/social-image-previews/es/contact.html new file mode 100644 index 0000000..5cc6aff --- /dev/null +++ b/apps/app/public/social-image-previews/es/contact.html @@ -0,0 +1,173 @@ + + + + + + Iniciemos la conexion. + + + +
+
+
+

VISOMI.DEV / CONTACTO

+

Iniciemos la conexion.

+

Arquitectura de software, liderazgo tecnico y colaboracion en productos con impacto real.

+

Un canal directo para conversar sobre arquitectura, producto y decisiones tecnicas clave.

+
+ + Conversemos +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/es/home.html b/apps/app/public/social-image-previews/es/home.html new file mode 100644 index 0000000..1297eba --- /dev/null +++ b/apps/app/public/social-image-previews/es/home.html @@ -0,0 +1,173 @@ + + + + + + Software listo para producir impacto y escalar. + + + +
+
+
+

VISOMI.DEV / INICIO

+

Software listo para producir impacto y escalar.

+

Ingenieria full-stack senior, arquitectura reutilizable y flujos de trabajo potenciados por IA.

+

Ingenieria senior para productos que necesitan bases solidas, claridad tecnica y sistemas durad…

+
+ + Explorar portafolio +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/es/journey.html b/apps/app/public/social-image-previews/es/journey.html new file mode 100644 index 0000000..5eaac5e --- /dev/null +++ b/apps/app/public/social-image-previews/es/journey.html @@ -0,0 +1,173 @@ + + + + + + Trayectoria en escala, equipos y plataformas. + + + +
+
+
+

VISOMI.DEV / TRAYECTORIA

+

Trayectoria en escala, equipos y plataformas.

+

Una trayectoria entre fintech, plataformas internas, sistemas de producto y liderazgo tecnico.

+

Un recorrido entre fintech y plataformas internas, guiado por decisiones de arquitectura con co…

+
+ + Ver trayectoria +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/es/projects.html b/apps/app/public/social-image-previews/es/projects.html new file mode 100644 index 0000000..520d444 --- /dev/null +++ b/apps/app/public/social-image-previews/es/projects.html @@ -0,0 +1,173 @@ + + + + + + Proyectos con restricciones reales de entrega. + + + +
+
+
+

VISOMI.DEV / PROYECTOS

+

Proyectos con restricciones reales de entrega.

+

Casos de estudio sobre fintech, SaaS, herramientas internas y arquitectura de producto escalable.

+

Casos de estudio construidos desde restricciones reales, decisiones de interfaz y diseno de sis…

+
+ + Ver casos de estudio +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/public/social-image-previews/es/resume.html b/apps/app/public/social-image-previews/es/resume.html new file mode 100644 index 0000000..0080460 --- /dev/null +++ b/apps/app/public/social-image-previews/es/resume.html @@ -0,0 +1,173 @@ + + + + + + Resumen de experiencia profesional. + + + +
+
+
+

VISOMI.DEV / EXPERIENCIA

+

Resumen de experiencia profesional.

+

Experiencia, liderazgo, vision sistemica y ejecucion en distintas etapas de producto.

+

Una vista clara de experiencia, liderazgo y criterio tecnico en distintas etapas de producto.

+
+ + Ver experiencia +
+
+
+ +
+ + \ No newline at end of file diff --git a/apps/app/src/app/app.config.server.ts b/apps/app/src/app/app.config.server.ts new file mode 100644 index 0000000..8817a54 --- /dev/null +++ b/apps/app/src/app/app.config.server.ts @@ -0,0 +1,11 @@ +import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; +import { provideServerRendering, withRoutes } from '@angular/ssr'; + +import { appConfig } from './app.config'; +import { serverRoutes } from './app.routes.server'; + +const serverConfig: ApplicationConfig = { + providers: [provideServerRendering(withRoutes(serverRoutes))], +}; + +export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/apps/app/src/app/app.config.ts b/apps/app/src/app/app.config.ts new file mode 100644 index 0000000..2fdc767 --- /dev/null +++ b/apps/app/src/app/app.config.ts @@ -0,0 +1,13 @@ +import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core'; +import { provideRouter } from '@angular/router'; +import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; + +import { appRoutes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideClientHydration(withEventReplay()), + provideBrowserGlobalErrorListeners(), + provideRouter(appRoutes), + ], +}; diff --git a/apps/app/src/app/app.css b/apps/app/src/app/app.css new file mode 100644 index 0000000..8aaea5e --- /dev/null +++ b/apps/app/src/app/app.css @@ -0,0 +1,106 @@ +.app-shell { + display: block; + min-height: 100vh; + background: + radial-gradient(circle at top left, rgba(56, 189, 248, 0.1), transparent 26%), + linear-gradient(180deg, #020617 0%, #0f172a 100%); + color: #e2e8f0; +} + +.page { + width: min(1440px, calc(100% - 32px)); + margin: 0 auto; + padding: 32px 0 48px; +} + +.hero { + margin-bottom: 32px; +} + +.eyebrow { + margin: 0 0 12px; + color: #93c5fd; + font-size: 0.85rem; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; +} + +h1 { + margin: 0; + max-width: 12ch; + font-size: clamp(2.5rem, 5vw, 4.75rem); + line-height: 0.95; + letter-spacing: -0.04em; +} + +.lede { + max-width: 72ch; + margin: 16px 0 0; + color: #cbd5e1; + font-size: 1rem; + line-height: 1.6; +} + +.grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); +} + +.card { + border: 1px solid rgba(148, 163, 184, 0.18); + border-radius: 24px; + background: rgba(15, 23, 42, 0.82); + box-shadow: 0 24px 64px rgba(2, 6, 23, 0.32); + overflow: hidden; +} + +.card-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 18px 20px; + border-bottom: 1px solid rgba(148, 163, 184, 0.12); +} + +.card-header h2 { + margin: 0; + font-size: 1rem; + font-weight: 700; +} + +.card-header a { + color: #7dd3fc; + font-size: 0.95rem; + text-decoration: none; +} + +.card-header a:hover { + text-decoration: underline; +} + +iframe { + width: 100%; + aspect-ratio: 1200 / 630; + display: block; + border: 0; + background: #020617; +} + +@media (max-width: 640px) { + .page { + width: min(100% - 20px, 1440px); + padding-top: 20px; + } + + .grid { + grid-template-columns: 1fr; + } + + .card-header { + align-items: flex-start; + flex-direction: column; + } +} diff --git a/apps/app/src/app/app.html b/apps/app/src/app/app.html new file mode 100644 index 0000000..c080437 --- /dev/null +++ b/apps/app/src/app/app.html @@ -0,0 +1,20 @@ +
+
+

Social Image Previews

+

Debug the HTML cards before turning them into PNGs.

+

{{ previewIntro }}

+
+ +
+ @for (card of previewCards; track card.id) { + + } +
+
diff --git a/apps/app/src/app/app.routes.server.ts b/apps/app/src/app/app.routes.server.ts new file mode 100644 index 0000000..28c14c5 --- /dev/null +++ b/apps/app/src/app/app.routes.server.ts @@ -0,0 +1,8 @@ +import { RenderMode, ServerRoute } from '@angular/ssr'; + +export const serverRoutes: ServerRoute[] = [ + { + path: '**', + renderMode: RenderMode.Prerender, + }, +]; diff --git a/apps/app/src/app/app.routes.ts b/apps/app/src/app/app.routes.ts new file mode 100644 index 0000000..8762dfe --- /dev/null +++ b/apps/app/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Route } from '@angular/router'; + +export const appRoutes: Route[] = []; diff --git a/apps/app/src/app/app.spec.ts b/apps/app/src/app/app.spec.ts new file mode 100644 index 0000000..8f49c73 --- /dev/null +++ b/apps/app/src/app/app.spec.ts @@ -0,0 +1,18 @@ +import { TestBed } from '@angular/core/testing'; + +import { App } from './app'; + +describe('App', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [App], + }).compileComponents(); + }); + + it('should render the preview heading', async () => { + const fixture = TestBed.createComponent(App); + await fixture.whenStable(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Debug the HTML cards before turning them into PNGs.'); + }); +}); diff --git a/apps/app/src/app/app.ts b/apps/app/src/app/app.ts new file mode 100644 index 0000000..f32df6f --- /dev/null +++ b/apps/app/src/app/app.ts @@ -0,0 +1,102 @@ +import { Component, inject } from '@angular/core'; +import { DomSanitizer, type SafeResourceUrl } from '@angular/platform-browser'; + +type PreviewCard = { + href: string; + id: string; + iframeTitle: string; + label: string; + src: SafeResourceUrl; +}; + +@Component({ + host: { + class: 'app-shell', + }, + selector: 'app-root', + templateUrl: './app.html', + styleUrl: './app.css', +}) +export class App { + private readonly sanitizer = inject(DomSanitizer); + + readonly previewIntro = + 'These iframes render the HTML social-card template directly, so you can debug spacing, copy, and layout before generating PNGs.'; + + readonly previewCards: readonly PreviewCard[] = [ + { + id: 'en-home', + href: '/social-image-previews/en/home.html', + iframeTitle: 'English home social image preview', + label: 'English / Home', + src: this.createPreviewUrl('/social-image-previews/en/home.html'), + }, + { + id: 'en-journey', + href: '/social-image-previews/en/journey.html', + iframeTitle: 'English journey social image preview', + label: 'English / Journey', + src: this.createPreviewUrl('/social-image-previews/en/journey.html'), + }, + { + id: 'en-projects', + href: '/social-image-previews/en/projects.html', + iframeTitle: 'English projects social image preview', + label: 'English / Projects', + src: this.createPreviewUrl('/social-image-previews/en/projects.html'), + }, + { + id: 'en-resume', + href: '/social-image-previews/en/resume.html', + iframeTitle: 'English resume social image preview', + label: 'English / Resume', + src: this.createPreviewUrl('/social-image-previews/en/resume.html'), + }, + { + id: 'en-contact', + href: '/social-image-previews/en/contact.html', + iframeTitle: 'English contact social image preview', + label: 'English / Contact', + src: this.createPreviewUrl('/social-image-previews/en/contact.html'), + }, + { + id: 'es-home', + href: '/social-image-previews/es/home.html', + iframeTitle: 'Spanish home social image preview', + label: 'Spanish / Inicio', + src: this.createPreviewUrl('/social-image-previews/es/home.html'), + }, + { + id: 'es-journey', + href: '/social-image-previews/es/journey.html', + iframeTitle: 'Spanish journey social image preview', + label: 'Spanish / Trayectoria', + src: this.createPreviewUrl('/social-image-previews/es/journey.html'), + }, + { + id: 'es-projects', + href: '/social-image-previews/es/projects.html', + iframeTitle: 'Spanish projects social image preview', + label: 'Spanish / Proyectos', + src: this.createPreviewUrl('/social-image-previews/es/projects.html'), + }, + { + id: 'es-resume', + href: '/social-image-previews/es/resume.html', + iframeTitle: 'Spanish resume social image preview', + label: 'Spanish / Experiencia', + src: this.createPreviewUrl('/social-image-previews/es/resume.html'), + }, + { + id: 'es-contact', + href: '/social-image-previews/es/contact.html', + iframeTitle: 'Spanish contact social image preview', + label: 'Spanish / Contacto', + src: this.createPreviewUrl('/social-image-previews/es/contact.html'), + }, + ]; + + private createPreviewUrl(path: string) { + return this.sanitizer.bypassSecurityTrustResourceUrl(path); + } +} diff --git a/apps/app/src/app/nx-welcome.ts b/apps/app/src/app/nx-welcome.ts new file mode 100644 index 0000000..900c36e --- /dev/null +++ b/apps/app/src/app/nx-welcome.ts @@ -0,0 +1,823 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-nx-welcome', + imports: [CommonModule], + template: ` + + + + +
+
+ +
+

+ Hello there, + Welcome app 👋 +

+
+ +
+
+

+ + + + You're up and running +

+ What's next? +
+
+ + + +
+
+ +
+
+ + + + + + + Nx is open source + Love Nx? Give us a star! + + +
+ +
+ +
+

Next steps

+

Here are some things you can do with Nx:

+
+ + + + + Build, test and lint your app + + 
# Build
+nx build 
+# Test
+nx test 
+# Lint
+nx lint 
+# Run them together!
+nx run-many -t build test lint
+
+
+ + + + + View project details + + 
nx show project app
+
+ +
+ + + + + View interactive project graph + + 
nx graph
+
+ +
+ + + + + Add UI library + + 
# Generate UI lib
+nx g @nx/angular:lib ui
+# Add a component
+nx g @nx/angular:component ui/src/lib/button
+
+
+

+ Carefully crafted with + + + +

+
+
+ `, + styles: [], + encapsulation: ViewEncapsulation.None, +}) +export class NxWelcome {} diff --git a/apps/app/src/index.html b/apps/app/src/index.html new file mode 100644 index 0000000..e29d774 --- /dev/null +++ b/apps/app/src/index.html @@ -0,0 +1,13 @@ + + + + + app + + + + + + + + diff --git a/apps/app/src/main.server.ts b/apps/app/src/main.server.ts new file mode 100644 index 0000000..82ad775 --- /dev/null +++ b/apps/app/src/main.server.ts @@ -0,0 +1,8 @@ +import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser'; + +import { App } from './app/app'; +import { config } from './app/app.config.server'; + +const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context); + +export default bootstrap; diff --git a/apps/app/src/main.ts b/apps/app/src/main.ts new file mode 100644 index 0000000..a4c92d0 --- /dev/null +++ b/apps/app/src/main.ts @@ -0,0 +1,6 @@ +import { bootstrapApplication } from '@angular/platform-browser'; + +import { appConfig } from './app/app.config'; +import { App } from './app/app'; + +bootstrapApplication(App, appConfig).catch((err) => console.error(err)); diff --git a/apps/app/src/server.ts b/apps/app/src/server.ts new file mode 100644 index 0000000..e1785bc --- /dev/null +++ b/apps/app/src/server.ts @@ -0,0 +1,65 @@ +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; +import express from 'express'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); + +const app = express(); +const angularApp = new AngularNodeAppEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * ``` + */ + +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.use((req, res, next) => { + angularApp + .handle(req) + .then((response) => (response ? writeResponseToNodeResponse(response, res) : next())) + .catch(next); +}); + +/** + * Start the server if this module is the main entry point, or it is ran via PM2. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url) || process.env['pm_id']) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(`Node Express server listening on http://localhost:${port}`); + }); +} + +/** + * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions. + */ +export const reqHandler = createNodeRequestHandler(app); diff --git a/apps/app/src/styles.css b/apps/app/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/apps/app/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/apps/app/src/test-setup.ts b/apps/app/src/test-setup.ts new file mode 100644 index 0000000..17b7965 --- /dev/null +++ b/apps/app/src/test-setup.ts @@ -0,0 +1,5 @@ +import '@angular/compiler'; +import '@analogjs/vitest-angular/setup-snapshots'; +import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed'; + +setupTestBed(); diff --git a/apps/app/tsconfig.app.json b/apps/app/tsconfig.app.json new file mode 100644 index 0000000..04c0b83 --- /dev/null +++ b/apps/app/tsconfig.app.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["node"] + }, + "include": ["src/**/*.ts"], + "exclude": [ + "src/**/*.spec.ts", + "src/**/*.test.ts", + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/test-setup.ts" + ] +} diff --git a/apps/app/tsconfig.json b/apps/app/tsconfig.json new file mode 100644 index 0000000..bb7614f --- /dev/null +++ b/apps/app/tsconfig.json @@ -0,0 +1,31 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "isolatedModules": true, + "target": "es2022", + "moduleResolution": "bundler", + "emitDecoratorMetadata": false, + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/apps/app/tsconfig.spec.json b/apps/app/tsconfig.spec.json new file mode 100644 index 0000000..fc61345 --- /dev/null +++ b/apps/app/tsconfig.spec.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"] + }, + "include": [ + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ], + "files": ["src/test-setup.ts"] +} diff --git a/apps/app/vite.config.mts b/apps/app/vite.config.mts new file mode 100644 index 0000000..a727e5e --- /dev/null +++ b/apps/app/vite.config.mts @@ -0,0 +1,28 @@ +/// +import { defineConfig } from 'vite'; +import angular from '@analogjs/vite-plugin-angular'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; + +export default defineConfig(() => ({ + root: __dirname, + cacheDir: '../../node_modules/.vite/apps/app', + plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])], + // Uncomment this if you are using workers. + // worker: { + // plugins: () => [ nxViteTsPaths() ], + // }, + test: { + name: 'app', + watch: false, + globals: true, + environment: 'jsdom', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + setupFiles: ['src/test-setup.ts'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/apps/app', + provider: 'v8' as const, + }, + }, +})); diff --git a/apps/server/src/main.ts b/apps/server/src/main.ts index 4cd7957..9d8d10e 100644 --- a/apps/server/src/main.ts +++ b/apps/server/src/main.ts @@ -13,11 +13,6 @@ type AstroMiddlewareModule = { handler?: (req: Request, res: Response, next: NextFunction) => Promise | void; }; -const supportedSocialImageLocales = new Set(['en', 'es']); -const supportedSocialImagePages = new Set(['contact', 'home', 'journey', 'projects', 'resume']); - -const readRouteParam = (value: string | string[] | undefined) => (typeof value === 'string' ? value : null); - const host = process.env.HOST ?? '0.0.0.0'; const port = process.env.PORT ? Number(process.env.PORT) : 8080; @@ -88,18 +83,6 @@ const bootstrap = async () => { app.use('/images/seo', socialImageRuntime.staticMiddleware); } - app.get('/og/:locale/:page/', (req: Request, res: Response, next: NextFunction) => { - const locale = readRouteParam(req.params['locale']); - const page = readRouteParam(req.params['page']); - - if (!locale || !page || !supportedSocialImageLocales.has(locale) || !supportedSocialImagePages.has(page)) { - next(); - return; - } - - res.redirect(301, `/images/seo/${locale}/${page}.png`); - }); - app.use('/api', apiApp); app.use( express.static(astroClientFolder, { diff --git a/apps/website/public/images/seo/en/contact.png b/apps/website/public/images/seo/en/contact.png index c0098ef..81a3ddf 100644 Binary files a/apps/website/public/images/seo/en/contact.png and b/apps/website/public/images/seo/en/contact.png differ diff --git a/apps/website/public/images/seo/en/home.png b/apps/website/public/images/seo/en/home.png index 048a9a9..1df1b87 100644 Binary files a/apps/website/public/images/seo/en/home.png and b/apps/website/public/images/seo/en/home.png differ diff --git a/apps/website/public/images/seo/en/journey.png b/apps/website/public/images/seo/en/journey.png index fa71c9a..8a48beb 100644 Binary files a/apps/website/public/images/seo/en/journey.png and b/apps/website/public/images/seo/en/journey.png differ diff --git a/apps/website/public/images/seo/en/projects.png b/apps/website/public/images/seo/en/projects.png index 99d8d9c..f046b94 100644 Binary files a/apps/website/public/images/seo/en/projects.png and b/apps/website/public/images/seo/en/projects.png differ diff --git a/apps/website/public/images/seo/en/resume.png b/apps/website/public/images/seo/en/resume.png index 26209d7..a199e34 100644 Binary files a/apps/website/public/images/seo/en/resume.png and b/apps/website/public/images/seo/en/resume.png differ diff --git a/apps/website/public/images/seo/es/contact.png b/apps/website/public/images/seo/es/contact.png index 86cd58e..325ec8c 100644 Binary files a/apps/website/public/images/seo/es/contact.png and b/apps/website/public/images/seo/es/contact.png differ diff --git a/apps/website/public/images/seo/es/home.png b/apps/website/public/images/seo/es/home.png index cb8b1cf..1a2afb7 100644 Binary files a/apps/website/public/images/seo/es/home.png and b/apps/website/public/images/seo/es/home.png differ diff --git a/apps/website/public/images/seo/es/journey.png b/apps/website/public/images/seo/es/journey.png index 477ff68..32ba33e 100644 Binary files a/apps/website/public/images/seo/es/journey.png and b/apps/website/public/images/seo/es/journey.png differ diff --git a/apps/website/public/images/seo/es/projects.png b/apps/website/public/images/seo/es/projects.png index d4e22ea..d6ab2b8 100644 Binary files a/apps/website/public/images/seo/es/projects.png and b/apps/website/public/images/seo/es/projects.png differ diff --git a/apps/website/public/images/seo/es/resume.png b/apps/website/public/images/seo/es/resume.png index 37f5a78..c94a9f1 100644 Binary files a/apps/website/public/images/seo/es/resume.png and b/apps/website/public/images/seo/es/resume.png differ diff --git a/apps/website/src/content/og-content.ts b/apps/website/src/content/og-content.ts deleted file mode 100644 index 4dfd545..0000000 --- a/apps/website/src/content/og-content.ts +++ /dev/null @@ -1,107 +0,0 @@ -import type { Locale, PageId } from '../i18n/translations'; - -type OgContent = { - accent: string; - cta: string; - eyebrow: string; - highlights: string[]; - subtitle: string; - title: string; -}; - -const ogContentByPage: Record> = { - contact: { - en: { - accent: 'Direct line for architecture, advisory, and product collaboration.', - cta: 'Start the conversation', - eyebrow: 'VISOMI.DEV / CONTACT', - highlights: ['Architecture consulting', 'Technical leadership', 'Fast response'], - subtitle: 'Architecture consulting, technical leadership, and high-impact product collaboration.', - title: 'Initialize connection.', - }, - es: { - accent: 'Canal directo para arquitectura, advisory y colaboracion de producto.', - cta: 'Iniciar conversacion', - eyebrow: 'VISOMI.DEV / CONTACTO', - highlights: ['Consultoria tecnica', 'Liderazgo', 'Respuesta rapida'], - subtitle: 'Consultoria de arquitectura, liderazgo tecnico y colaboracion en productos de alto impacto.', - title: 'Iniciemos la conexion.', - }, - }, - home: { - en: { - accent: 'Senior engineering for products that need clear foundations and durable systems.', - cta: 'Explore the portfolio', - eyebrow: 'VISOMI.DEV / HOME', - highlights: ['Scalable platforms', 'AI workflows', 'Technical leadership'], - subtitle: 'Senior full-stack engineering, reusable architecture, and AI-enabled workflows.', - title: 'Architecting software that ships and scales.', - }, - es: { - accent: 'Ingenieria senior para productos que necesitan bases claras y sistemas duraderos.', - cta: 'Explorar portafolio', - eyebrow: 'VISOMI.DEV / INICIO', - highlights: ['Plataformas escalables', 'Flujos con IA', 'Liderazgo tecnico'], - subtitle: 'Ingenieria full-stack senior, arquitectura reutilizable y flujos de trabajo potenciados por IA.', - title: 'Software pensado para salir a produccion y escalar.', - }, - }, - journey: { - en: { - accent: 'From fintech to internal platforms, with the architecture decisions behind the work.', - cta: 'See the timeline', - eyebrow: 'VISOMI.DEV / JOURNEY', - highlights: ['Fintech', 'Internal platforms', 'Leadership'], - subtitle: 'A career timeline across fintech, internal platforms, product systems, and technical leadership.', - title: 'Engineering journey through scale, teams, and platforms.', - }, - es: { - accent: 'De fintech a plataformas internas, con las decisiones de arquitectura detras del trabajo.', - cta: 'Ver la linea de tiempo', - eyebrow: 'VISOMI.DEV / TRAYECTORIA', - highlights: ['Fintech', 'Plataformas internas', 'Liderazgo'], - subtitle: 'Una linea de tiempo entre fintech, plataformas internas, sistemas de producto y liderazgo tecnico.', - title: 'Trayectoria en escala, equipos y plataformas.', - }, - }, - projects: { - en: { - accent: 'Editorial case studies covering delivery constraints, interface decisions, and system design.', - cta: 'Open the case studies', - eyebrow: 'VISOMI.DEV / PROJECTS', - highlights: ['Fintech', 'SaaS', 'Product architecture'], - subtitle: 'Case studies across fintech, SaaS, internal tools, and scalable product architecture.', - title: 'Selected projects built with real delivery constraints.', - }, - es: { - accent: 'Casos de estudio editoriales con restricciones reales, decisiones de interfaz y diseno de sistemas.', - cta: 'Abrir casos de estudio', - eyebrow: 'VISOMI.DEV / PROYECTOS', - highlights: ['Fintech', 'SaaS', 'Arquitectura de producto'], - subtitle: 'Casos de estudio en fintech, SaaS, herramientas internas y arquitectura de producto escalable.', - title: 'Proyectos seleccionados construidos con restricciones reales de entrega.', - }, - }, - resume: { - en: { - accent: 'A focused snapshot of roles, leadership, and engineering depth across multiple product stages.', - cta: 'Review the resume', - eyebrow: 'VISOMI.DEV / RESUME', - highlights: ['Experience', 'Leadership', 'Systems thinking'], - subtitle: 'Experience, leadership, systems thinking, and delivery across multiple product stages.', - title: 'Resume and experience snapshot.', - }, - es: { - accent: 'Un resumen claro de experiencia, liderazgo y profundidad tecnica en distintas etapas de producto.', - cta: 'Revisar curriculum', - eyebrow: 'VISOMI.DEV / CURRICULUM', - highlights: ['Experiencia', 'Liderazgo', 'Pensamiento sistemico'], - subtitle: 'Experiencia, liderazgo, pensamiento sistemico y ejecucion a traves de multiples etapas de producto.', - title: 'Resumen de experiencia profesional.', - }, - }, -}; - -const getOgContent = (page: PageId, locale: Locale) => ogContentByPage[page][locale]; - -export { getOgContent }; diff --git a/apps/website/src/pages/og/[locale]/[page].astro b/apps/website/src/pages/og/[locale]/[page].astro deleted file mode 100644 index 03c8170..0000000 --- a/apps/website/src/pages/og/[locale]/[page].astro +++ /dev/null @@ -1,311 +0,0 @@ ---- -export const prerender = true; - -import { getOgContent } from '../../../content/og-content'; -import type { Locale, PageId } from '../../../i18n/translations'; - -type OgViewModel = { - accent: string; - cta: string; - eyebrow: string; - highlights: string[]; - subtitle: string; - title: string; -}; - -type Params = { - locale: Locale; - page: PageId; -}; - -export const getStaticPaths = () => - (['en', 'es'] as const satisfies readonly Locale[]).flatMap((locale) => - (['home', 'journey', 'projects', 'resume', 'contact'] as const satisfies readonly PageId[]).map( - (page) => ({ params: { locale, page } } satisfies { params: Params }), - ), - ); - -const { locale, page } = Astro.params as Params; -const content = getOgContent(page, locale) as OgViewModel; -const accent = content.accent; -const cta = content.cta; -const eyebrow = content.eyebrow; -const highlights: string[] = content.highlights; -const subtitle = content.subtitle; -const title = content.title; ---- - - - - - - - {content.title} - - - -
-
-
-

{eyebrow}

-

{title}

-

{subtitle}

-

{accent}

-
- - {cta} -
-
- -
- - visomi.dev - engineering portfolio -
-
- - -
- - diff --git a/apps/worker/src/social-images/template.spec.ts b/apps/worker/src/social-images/template.spec.ts index 660686b..c326ad8 100644 --- a/apps/worker/src/social-images/template.spec.ts +++ b/apps/worker/src/social-images/template.spec.ts @@ -1,4 +1,4 @@ -import { normalizeSocialImageCard, renderSocialImageHtml } from '@visomi.dev/shared-social-images'; +import { normalizeSocialImageCard, renderSocialImageHtml } from '@visomi.dev/shared-social-images'; describe('renderSocialImageHtml', () => { it('renders a standalone HTML document for a social image card', () => { @@ -16,8 +16,8 @@ describe('renderSocialImageHtml', () => { ); expect(html).toContain(''); - expect(html).toContain('1200×630'); - expect(html).toContain('VISOMI.DEV'); + expect(html).toContain('preview state'); + expect(html).toContain('highlights'); expect(html).toContain('Scalable platforms'); }); }); diff --git a/libs/shared/social-images/src/content.ts b/libs/shared/social-images/src/content.ts index bd20b9a..c764ac8 100644 --- a/libs/shared/social-images/src/content.ts +++ b/libs/shared/social-images/src/content.ts @@ -20,11 +20,11 @@ const socialImageContentByPage: Record { const normalizeSocialImageCard = (card: SocialImageCardInput): SocialImageCardModel => ({ ...card, accent: clampText(card.accent, 96), - brandLabel: 'VISOMI.DEV', cta: clampText(card.cta, 26), - footerLabel: card.locale === 'es' ? 'ingenieria de software' : 'software engineering', highlights: card.highlights.map((highlight) => clampText(highlight, 28)).slice(0, 3), previewLabel: card.locale === 'es' ? 'vista previa' : 'preview state', subtitle: clampText(card.subtitle, 140), title: clampText(card.title, 72), - toneLabel: card.locale === 'es' ? 'claro, tecnico y enfocado' : 'clear, technical, focused', }); export { SOCIAL_IMAGE_RULES, normalizeSocialImageCard }; diff --git a/libs/shared/social-images/src/template.ts b/libs/shared/social-images/src/template.ts index 262af0b..7f0fe72 100644 --- a/libs/shared/social-images/src/template.ts +++ b/libs/shared/social-images/src/template.ts @@ -13,6 +13,7 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { const highlightsMarkup = card.highlights .map((highlight) => `${escapeHtml(highlight)}`) .join(''); + const highlightsLabel = card.locale === 'es' ? 'claves' : 'highlights'; return ` @@ -48,8 +49,8 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { .frame { display: grid; - grid-template-columns: 1.18fr 0.82fr; - gap: 34px; + grid-template-columns: 1.28fr 0.72fr; + gap: 24px; width: 100%; height: 100%; padding: 52px; @@ -63,7 +64,12 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { .content { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + width: 100%; + } + + .content-main { + width: 100%; } .eyebrow { @@ -77,28 +83,28 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { .title { margin: 0; - max-width: 11ch; - font-size: 76px; + font-size: 68px; font-weight: 800; - line-height: 0.94; + line-height: 0.96; letter-spacing: -0.06em; text-wrap: balance; + width: 100%; } .subtitle { margin: 24px 0 0; - max-width: 28ch; color: rgba(226, 232, 240, 0.9); - font-size: 28px; - line-height: 1.28; + font-size: 26px; + line-height: 1.3; + width: 100%; } .accent { margin: 18px 0 0; - max-width: 32ch; color: rgba(191, 219, 254, 0.82); - font-size: 20px; - line-height: 1.42; + font-size: 19px; + line-height: 1.4; + width: 100%; } .cta { @@ -118,8 +124,7 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { text-transform: uppercase; } - .cta-dot, - .brand-dot { + .cta-dot { border-radius: 999px; background: linear-gradient(135deg, #38bdf8, #22c55e); } @@ -130,27 +135,11 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { box-shadow: 0 0 24px rgba(56, 189, 248, 0.45); } - .footer { - display: flex; - align-items: center; - gap: 14px; - color: rgba(191, 219, 254, 0.92); - font-size: 18px; - font-weight: 700; - letter-spacing: 0.16em; - text-transform: uppercase; - } - - .brand-dot { - width: 10px; - height: 10px; - box-shadow: 0 0 24px rgba(34, 197, 94, 0.42); - } - .panel { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + gap: 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.56)); @@ -160,12 +149,11 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { .panel-top { display: grid; - gap: 16px; + gap: 0; } .panel-header, - .stack-item, - .metric { + .panel-section { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(15, 23, 42, 0.56); @@ -190,8 +178,7 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { background: rgba(148, 163, 184, 0.5); } - .label, - .metric-label { + .label { color: rgba(148, 163, 184, 0.96); font-size: 13px; font-weight: 700; @@ -199,22 +186,12 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { text-transform: uppercase; } - .stack { + .panel-section { display: grid; - gap: 14px; - } - - .stack-item { + gap: 16px; padding: 18px; } - .stack-item strong { - display: block; - margin-top: 10px; - font-size: 24px; - line-height: 1.2; - } - .highlights { display: flex; flex-wrap: wrap; @@ -232,29 +209,12 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { letter-spacing: 0.08em; text-transform: uppercase; } - - .metrics { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 14px; - } - - .metric { - padding: 18px; - } - - .metric-value { - margin-top: 10px; - font-size: 30px; - font-weight: 800; - letter-spacing: -0.04em; - }
-
+

${escapeHtml(card.eyebrow)}

${escapeHtml(card.title)}

${escapeHtml(card.subtitle)}

@@ -264,12 +224,6 @@ const renderSocialImageHtml = (card: SocialImageCardModel) => { ${escapeHtml(card.cta)}
- -
- - ${escapeHtml(card.brandLabel)} - ${escapeHtml(card.footerLabel)} -
diff --git a/libs/shared/social-images/src/types.ts b/libs/shared/social-images/src/types.ts index da11fe2..17adae8 100644 --- a/libs/shared/social-images/src/types.ts +++ b/libs/shared/social-images/src/types.ts @@ -28,14 +28,11 @@ type SocialImageCardInput = { type SocialImageCardModel = SocialImageCardInput & { accent: string; - brandLabel: string; cta: string; - footerLabel: string; highlights: string[]; previewLabel: string; subtitle: string; title: string; - toneLabel: string; }; type GeneratePageSocialImageJob = { diff --git a/package.json b/package.json index 532f957..92330fa 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@nx/vitest": "22.6.3", "@nx/web": "22.6.3", "@nx/workspace": "22.6.3", + "@oxc-project/runtime": "^0.115.0", "@playwright/test": "^1.59.0", "@primeng/mcp": "^21.1.5", "@schematics/angular": "21.2.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e1c355..0519946 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -180,6 +180,9 @@ importers: '@nx/workspace': specifier: 22.6.3 version: 22.6.3(@swc-node/register@1.11.1(@swc/core@1.15.21(@swc/helpers@0.5.20))(@swc/types@0.1.25)(typescript@6.0.2))(@swc/core@1.15.21(@swc/helpers@0.5.20)) + '@oxc-project/runtime': + specifier: ^0.115.0 + version: 0.115.0 '@playwright/test': specifier: ^1.59.0 version: 1.59.0 @@ -3516,6 +3519,10 @@ packages: '@oslojs/encoding@1.1.0': resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==} + '@oxc-project/runtime@0.115.0': + resolution: {integrity: sha512-Rg8Wlt5dCbXhQnsXPrkOjL1DTSvXLgb2R/KYfnf1/K+R0k6UMLEmbQXPM+kwrWqSmWA2t0B1EtHy2/3zikQpvQ==} + engines: {node: ^20.19.0 || >=22.12.0} + '@oxc-project/types@0.113.0': resolution: {integrity: sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==} @@ -15440,6 +15447,8 @@ snapshots: '@oslojs/encoding@1.1.0': {} + '@oxc-project/runtime@0.115.0': {} + '@oxc-project/types@0.113.0': {} '@oxc-resolver/binding-android-arm-eabi@11.18.0': diff --git a/scripts/generate-social-images.mjs b/scripts/generate-social-images.mjs index 7d2396d..23bface 100644 --- a/scripts/generate-social-images.mjs +++ b/scripts/generate-social-images.mjs @@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url'; import puppeteer from 'puppeteer-core'; const __dirname = dirname(fileURLToPath(import.meta.url)); -const rootDir = resolve(__dirname, '..', '..'); +const rootDir = resolve(__dirname, '..'); const tmpDir = resolve(rootDir, 'tmp', 'og-images'); const SOCIAL_IMAGE_WIDTH = 1200; @@ -25,11 +25,11 @@ const socialImageContentByPage = { title: 'Initialize connection.', }, es: { - accent: 'Canal directo para arquitectura, advisory y colaboracion de producto.', - cta: 'Iniciar conversacion', + accent: 'Un canal directo para conversar sobre arquitectura, producto y decisiones tecnicas clave.', + cta: 'Conversemos', eyebrow: 'VISOMI.DEV / CONTACTO', - highlights: ['Consultoria tecnica', 'Liderazgo', 'Respuesta rapida'], - subtitle: 'Consultoria de arquitectura, liderazgo tecnico y colaboracion en productos de alto impacto.', + highlights: ['Arquitectura de software', 'Liderazgo tecnico', 'Respuesta agil'], + subtitle: 'Arquitectura de software, liderazgo tecnico y colaboracion en productos con impacto real.', title: 'Iniciemos la conexion.', }, }, @@ -43,48 +43,48 @@ const socialImageContentByPage = { title: 'Architecting software that ships and scales.', }, es: { - accent: 'Ingenieria senior para productos que necesitan bases claras y sistemas duraderos.', + accent: 'Ingenieria senior para productos que necesitan bases solidas, claridad tecnica y sistemas duraderos.', cta: 'Explorar portafolio', eyebrow: 'VISOMI.DEV / INICIO', - highlights: ['Plataformas escalables', 'Flujos con IA', 'Liderazgo tecnico'], + highlights: ['Plataformas escalables', 'Flujos con IA', 'Direccion tecnica'], subtitle: 'Ingenieria full-stack senior, arquitectura reutilizable y flujos de trabajo potenciados por IA.', - title: 'Software pensado para salir a produccion y escalar.', + title: 'Software listo para producir impacto y escalar.', }, }, journey: { en: { - accent: 'From fintech to internal platforms, with the architecture decisions behind the work.', + accent: 'Work across fintech and internal platforms, guided by the architecture behind each system.', cta: 'See the timeline', eyebrow: 'VISOMI.DEV / JOURNEY', highlights: ['Fintech', 'Internal platforms', 'Leadership'], subtitle: 'A career timeline across fintech, internal platforms, product systems, and technical leadership.', - title: 'Engineering journey through scale, teams, and platforms.', + title: 'Engineering across scale, teams, and platforms.', }, es: { - accent: 'De fintech a plataformas internas, con las decisiones de arquitectura detras del trabajo.', - cta: 'Ver la linea de tiempo', + accent: 'Un recorrido entre fintech y plataformas internas, guiado por decisiones de arquitectura con contexto.', + cta: 'Ver trayectoria', eyebrow: 'VISOMI.DEV / TRAYECTORIA', - highlights: ['Fintech', 'Plataformas internas', 'Liderazgo'], - subtitle: 'Una linea de tiempo entre fintech, plataformas internas, sistemas de producto y liderazgo tecnico.', + highlights: ['Fintech', 'Plataformas internas', 'Liderazgo tecnico'], + subtitle: 'Una trayectoria entre fintech, plataformas internas, sistemas de producto y liderazgo tecnico.', title: 'Trayectoria en escala, equipos y plataformas.', }, }, projects: { en: { - accent: 'Editorial case studies covering delivery constraints, interface decisions, and system design.', + accent: 'Editorial case studies shaped by delivery constraints, interface choices, and practical system design.', cta: 'Open the case studies', eyebrow: 'VISOMI.DEV / PROJECTS', highlights: ['Fintech', 'SaaS', 'Product architecture'], subtitle: 'Case studies across fintech, SaaS, internal tools, and scalable product architecture.', - title: 'Selected projects built with real delivery constraints.', + title: 'Selected projects under real delivery constraints.', }, es: { - accent: 'Casos de estudio editoriales con restricciones reales, decisiones de interfaz y diseno de sistemas.', - cta: 'Abrir casos de estudio', + accent: 'Casos de estudio construidos desde restricciones reales, decisiones de interfaz y diseno de sistemas.', + cta: 'Ver casos de estudio', eyebrow: 'VISOMI.DEV / PROYECTOS', highlights: ['Fintech', 'SaaS', 'Arquitectura de producto'], - subtitle: 'Casos de estudio en fintech, SaaS, herramientas internas y arquitectura de producto escalable.', - title: 'Proyectos seleccionados construidos con restricciones reales de entrega.', + subtitle: 'Casos de estudio sobre fintech, SaaS, herramientas internas y arquitectura de producto escalable.', + title: 'Proyectos con restricciones reales de entrega.', }, }, resume: { @@ -97,11 +97,11 @@ const socialImageContentByPage = { title: 'Resume and experience snapshot.', }, es: { - accent: 'Un resumen claro de experiencia, liderazgo y profundidad tecnica en distintas etapas de producto.', - cta: 'Revisar curriculum', - eyebrow: 'VISOMI.DEV / CURRICULUM', - highlights: ['Experiencia', 'Liderazgo', 'Pensamiento sistemico'], - subtitle: 'Experiencia, liderazgo, pensamiento sistemico y ejecucion a traves de multiples etapas de producto.', + accent: 'Una vista clara de experiencia, liderazgo y criterio tecnico en distintas etapas de producto.', + cta: 'Ver experiencia', + eyebrow: 'VISOMI.DEV / EXPERIENCIA', + highlights: ['Experiencia', 'Liderazgo', 'Vision sistemica'], + subtitle: 'Experiencia, liderazgo, vision sistemica y ejecucion en distintas etapas de producto.', title: 'Resumen de experiencia profesional.', }, }, @@ -115,17 +115,14 @@ const clampText = (value, maxLength) => { const normalizeCard = (card, page, locale) => ({ accent: clampText(card.accent, 96), - brandLabel: 'VISOMI.DEV', cta: clampText(card.cta, 26), eyebrow: card.eyebrow, - footerLabel: locale === 'es' ? 'ingenieria de software' : 'software engineering', highlights: card.highlights.map((h) => clampText(h, 28)).slice(0, 3), locale, page, previewLabel: locale === 'es' ? 'vista previa' : 'preview state', subtitle: clampText(card.subtitle, 140), title: clampText(card.title, 72), - toneLabel: locale === 'es' ? 'claro, tecnico y enfocado' : 'clear, technical, focused', }); const escapeHtml = (value) => @@ -138,6 +135,7 @@ const escapeHtml = (value) => const renderHtml = (card) => { const highlightsMarkup = card.highlights.map((h) => `${escapeHtml(h)}`).join(''); + const highlightsLabel = card.locale === 'es' ? 'claves' : 'highlights'; return ` @@ -166,8 +164,8 @@ const renderHtml = (card) => { } .frame { display: grid; - grid-template-columns: 1.18fr 0.82fr; - gap: 34px; + grid-template-columns: 1.28fr 0.72fr; + gap: 24px; width: 100%; height: 100%; padding: 52px; @@ -176,7 +174,11 @@ const renderHtml = (card) => { .content { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + width: 100%; + } + .content-main { + width: 100%; } .eyebrow { margin: 0 0 18px; @@ -188,26 +190,26 @@ const renderHtml = (card) => { } .title { margin: 0; - max-width: 11ch; - font-size: 76px; + font-size: 68px; font-weight: 800; - line-height: 0.94; + line-height: 0.96; letter-spacing: -0.06em; text-wrap: balance; + width: 100%; } .subtitle { margin: 24px 0 0; - max-width: 28ch; color: rgba(226, 232, 240, 0.9); - font-size: 28px; - line-height: 1.28; + font-size: 26px; + line-height: 1.3; + width: 100%; } .accent { margin: 18px 0 0; - max-width: 32ch; color: rgba(191, 219, 254, 0.82); - font-size: 20px; - line-height: 1.42; + font-size: 19px; + line-height: 1.4; + width: 100%; } .cta { display: inline-flex; @@ -225,31 +227,21 @@ const renderHtml = (card) => { letter-spacing: 0.08em; text-transform: uppercase; } - .cta-dot, .brand-dot { border-radius: 999px; background: linear-gradient(135deg, #38bdf8, #22c55e); } + .cta-dot { border-radius: 999px; background: linear-gradient(135deg, #38bdf8, #22c55e); } .cta-dot { width: 12px; height: 12px; box-shadow: 0 0 24px rgba(56, 189, 248, 0.45); } - .footer { - display: flex; - align-items: center; - gap: 14px; - color: rgba(191, 219, 254, 0.92); - font-size: 18px; - font-weight: 700; - letter-spacing: 0.16em; - text-transform: uppercase; - } - .brand-dot { width: 10px; height: 10px; box-shadow: 0 0 24px rgba(34, 197, 94, 0.42); } .panel { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; + gap: 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.56)); padding: 26px; box-shadow: 0 28px 72px rgba(2, 6, 23, 0.42); } - .panel-top { display: grid; gap: 16px; } - .panel-header, .stack-item, .metric { + .panel-top { display: grid; gap: 0; } + .panel-header, .panel-section { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(15, 23, 42, 0.56); @@ -267,16 +259,14 @@ const renderHtml = (card) => { border-radius: 999px; background: rgba(148, 163, 184, 0.5); } - .label, .metric-label { + .label { color: rgba(148, 163, 184, 0.96); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } - .stack { display: grid; gap: 14px; } - .stack-item { padding: 18px; } - .stack-item strong { display: block; margin-top: 10px; font-size: 24px; line-height: 1.2; } + .panel-section { display: grid; gap: 16px; padding: 18px; } .highlights { display: flex; flex-wrap: wrap; gap: 12px; } .chip { border: 1px solid rgba(255, 255, 255, 0.14); @@ -289,15 +279,12 @@ const renderHtml = (card) => { letter-spacing: 0.08em; text-transform: uppercase; } - .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } - .metric { padding: 18px; } - .metric-value { margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
-
+

${escapeHtml(card.eyebrow)}

${escapeHtml(card.title)}

${escapeHtml(card.subtitle)}

@@ -307,11 +294,6 @@ const renderHtml = (card) => { ${escapeHtml(card.cta)}
-
- - ${escapeHtml(card.brandLabel)} - ${escapeHtml(card.footerLabel)} -
@@ -383,9 +348,15 @@ const generateImages = async () => { const outPath = resolve(outDir, `${page}.png`); const publicDir = resolve(rootDir, 'apps', 'website', 'public', 'images', 'seo', locale); const publicPath = resolve(publicDir, `${page}.png`); + const distDir = resolve(rootDir, 'dist', 'apps', 'website', 'client', 'images', 'seo', locale); + const distPath = resolve(distDir, `${page}.png`); + const previewDir = resolve(rootDir, 'apps', 'app', 'public', 'social-image-previews', locale); + const previewPath = resolve(previewDir, `${page}.html`); await mkdir(outDir, { recursive: true }); await mkdir(publicDir, { recursive: true }); + await mkdir(distDir, { recursive: true }); + await mkdir(previewDir, { recursive: true }); const page2 = await browser.newPage(); try { @@ -396,7 +367,9 @@ const generateImages = async () => { await page2.close(); } + await writeFile(previewPath, html, 'utf8'); await copyFile(outPath, publicPath); + await copyFile(outPath, distPath); count++; console.log(`[ generate ] ${locale}/${page} -> ${publicPath}`); }