feat(site): Context Overflow-inspired makeover with robot art

[kolatts]

What changed

Full visual makeover of the GitHub Pages site in the Context Overflow art direction, plus content-pipeline fixes. Closes #296.

Design system

• Charcoal #1e1e20 / cream #f2ead9 / signal-gold #d9b84f palette, Fraunces 900 display type, sticker-style buttons (thick cream outline, hard offset shadow), halftone grain, rubber-stamp section eyebrows
• Dark theme only — the light theme and toggle are removed (DarkModeToggle.astro deleted, color-scheme: dark)
• Gray section divider lines removed everywhere; vertical rhythm tightened (~⅓ less section padding; homepage 5055px → 4424px tall)
• pncli wordmark + favicons recolored to the new palette (pixel-exact hue remap, letterforms unchanged)

Robot art & effects

• New illustrations generated in the Context Overflow sticker style, using the original robot art as edit references: MUNDANE dumping a filing drawer on a buried developer ("Cut through the red tape" band), a new sticker-style hero (developer in a paper mountain split by a gold beam), and a MAVERICK badge anchoring a new callout + footer link to Context Overflow as a resource for learning agentic engineering
• All art is true-transparency RGBA (edge-connected flood-fill background removal) so it composites seamlessly on the page grain
• Animated four-point sparkles (hero + subtle ambient layers in six sections), breathing beam glow, rising motes, and scroll parallax at varied depths — reduced-motion aware, transform-only, overflow-free at 390px, zero console errors

Content

• Root NOTICE restored as source of truth: the full 21-clause compliance notice is back in the actual NOTICE file (ships in repo + npm); /notice renders it at build time via raw import; Pages workflow redeploys on NOTICE changes
• Getting-started now leads with pncli skills marketplace setup / sync and a provenance explainer (pncli-origin.json, pull-and-skip behavior) — every claim verified against src/services/skills/commands.ts
• Parse-script fixes: markdown stripped from changelog summaries, blockquotes render properly, --flags as code spans (smartypants disabled), strict semver ordering on all changelog surfaces
• Commands parser now reconstructs nested command paths: fixes 5 previously-wrong Checkmarx names, adds Dynatrace/ServiceNow/Contrast groups (160 → 198 commands, 19 services)
• Service grid: Jira/Confluence/Azure DevOps bumped to beta; GitHub + Dynatrace added at basic; IBM UDeploy removed from all public surfaces (commented skip-lists for easy re-add; CLI and distributed skill untouched)
• Feedback community card renamed Beyond Boring → Context Overflow

Screenshots

Mobile (390px)

Reviewer notes

• Verified via repeated playwright passes (every page, mobile width, reduced-motion, console) — final rounds passed 17/17 + 4/4 checks with zero defects
• Root npm run typecheck / lint / test all pass (404/404); site/ npm run build passes (40 pages)
• The 5 changed Checkmarx command names in the reference were already wrong before this PR (parser emitted duplicated flat names); they now match the real CLI
• Historical changelog entries intentionally still mention UDeploy/Beyond Boring
• Effects are dependency-free (inline SVG/CSS + one small shared parallax.ts)

🤖 Generated with Claude Code

[claude]

Claude finished @kolatts's task in 4m 37s —— View job

---

PR Review: feat(site): Context Overflow-inspired makeover with robot art

• Clean up previous Claude comments
• Read PR diff and key changed files
• Review design/CSS changes
• Review content pipeline scripts
• Review Astro component changes
• Check for bugs, security, and edge cases
• Post summary and inline comments

---

Summary

Clean, well-executed makeover. The parallax runtime, animation system, and content pipeline fixes are all solid. No blocking issues. A few minor items worth flagging below.

---

Findings

parallax.ts — view-mode centering (correct, but worth documenting)

The view-mode algorithm at site/src/scripts/parallax.ts:29-31:

const center = rect.top + rect.height / 2 - item.last;
delta = (center - vh / 2) * item.speed;

Subtracting item.last correctly "un-transforms" the painted rect to get the natural center before computing the new delta. The steady-state proof holds: if scroll doesn't change, rect.top shifts by the same amount item.last shifts, keeping center stable. This is correct.

notice.astro — set:html XSS safety

The escapeHtml helper in site/src/pages/notice.astro correctly escapes &, <, > before the content is wrapped in <span> tags with compile-time color constants. set:html is safe here. The NOTICE-as-raw-import pattern is also a good way to guarantee the page and the file stay in sync.

sortChangelogEntries — semver comparator

site/src/lib/changelog.ts — the numeric split-compare is correct and handles 1.10.0 > 1.9.0 properly, which date-sorting doesn't. One unguarded edge: if a version string ever carries a pre-release suffix like 1.2.0-beta, Number('0-beta') → NaN and the comparator silently misbehaves. Not a current issue since the changelog uses strict X.Y.Z, but worth a one-liner guard if pre-release tags are ever adopted.

parse-commands.mjs — COMMAND_RE global regex with matchAll

COMMAND_RE is defined at module scope with the /g flag and reused in both Pass 1 and Pass 2 via matchAll. JS spec has matchAll copy the regex internally, so lastIndex is never mutated on the shared COMMAND_RE. Safe.

smartypants: false — global, not changelog-scoped

The markdown: { smartypants: false } in site/astro.config.mjs is the right fix for --output-file → em dash in changelog bodies, but it applies globally. Skill docs, getting-started prose, and any future MDX content lose smart quotes and proper em dashes. Not a showstopper, but worth knowing the tradeoff — if it becomes annoying, remark-smartypants can be configured per-collection.

Token naming inversion

global.css swaps the semantic intent of cream and ink to avoid touching every utility class:

--color-cream: #1e1e20;   /* now charcoal */
--color-ink: #f2ead9;     /* now paper */

The comment explains it well. Just make sure whoever touches the design tokens next reads it before wondering why bg-cream is charcoal.

Nit: rel inconsistency on external links

Discord link in Footer.astro uses rel="noopener noreferrer". The Context Overflow links in index.astro and Footer.astro use only rel="noopener". Neither is wrong for a friendly outbound link, but picking one convention and applying it consistently would remove a future "why is this different?" question.

---

No blocking issues. The animation system is clean, accessible, and dependency-free. The content pipeline fixes are correct. Good to merge.

[claude]

Clean, well-executed makeover. The parallax runtime, animation system, and content pipeline fixes are all solid.

A few minor items called out in my comment (smartypants global scope, token naming inversion, rel consistency), but nothing blocking. The set:html in notice.astro is safe given the escapeHtml pass, the parallax view-mode centering is mathematically correct, and the semver comparator handles the multi-digit case properly.

Good to ship.