From 528e1cf15509aeb0186ae09bb0ed109d9b049742 Mon Sep 17 00:00:00 2001 From: Peter Amiri Date: Tue, 14 Apr 2026 16:24:51 -0700 Subject: [PATCH] feat(view): redesign congratulations page for v4.0 Replace static welcome text with dashboard-style page showing runtime info (engine, database, environment), CLI detection with platform-aware install instructions (Homebrew/Chocolatey), quick-start action cards, and v4.0 feature highlights grid. Co-Authored-By: Claude Opus 4.6 (1M context) --- .gitignore | 1 + ...026-04-14-congratulations-page-redesign.md | 463 ++++++++++++++++++ ...026-04-14-congratulations-page-redesign.md | 123 +++++ .../wheels/public/views/congratulations.cfm | 428 ++++++++++++++-- 4 files changed, 968 insertions(+), 47 deletions(-) create mode 100644 docs/superpowers/plans/2026-04-14-congratulations-page-redesign.md create mode 100644 docs/superpowers/specs/2026-04-14-congratulations-page-redesign.md diff --git a/.gitignore b/.gitignore index 22075ab686..f98dc085ea 100644 --- a/.gitignore +++ b/.gitignore @@ -37,6 +37,7 @@ test-output/ .grove/ .claude/settings.local.json .DS_Store +.superpowers/ # Playwright /test-results/ diff --git a/docs/superpowers/plans/2026-04-14-congratulations-page-redesign.md b/docs/superpowers/plans/2026-04-14-congratulations-page-redesign.md new file mode 100644 index 0000000000..9d3b80e9a4 --- /dev/null +++ b/docs/superpowers/plans/2026-04-14-congratulations-page-redesign.md @@ -0,0 +1,463 @@ +# Congratulations Page Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Replace the static congratulations page with a modern dashboard showing runtime info, CLI detection with install instructions, quick-start action cards, and v4.0 feature highlights. + +**Architecture:** Single-file rewrite of `vendor/wheels/public/views/congratulations.cfm`. All styling uses existing `--w-*` CSS custom properties from the Catppuccin theme in `_header.cfm`. No new files, no new dependencies. + +**Tech Stack:** CFML (cfm template), CSS Grid, vanilla JavaScript (~10 lines for tab switching) + +**Spec:** `docs/superpowers/specs/2026-04-14-congratulations-page-redesign.md` + +**Mockup:** `.superpowers/brainstorm/78539-1776200777/content/hero-layout-v3.html` + +--- + +### Task 1: Rewrite congratulations.cfm + +**Files:** +- Modify: `vendor/wheels/public/views/congratulations.cfm` (full rewrite, lines 1-63) + +The current file is 63 lines. The new version replaces everything between the `_header.cfm` and `_footer.cfm` includes. + +**Key CFML references the template needs:** +- `get("version")` — returns version string like `"4.0.0"` +- `application.$wheels.serverName` — `"Lucee"`, `"Adobe ColdFusion"`, or `"BoxLang"` +- `application.$wheels.serverVersion` — e.g. `"7.0.1.65"` +- `application.wheels.dataSourceName` — datasource name string +- `get("environment")` — `"development"`, `"production"`, etc. +- `server.os.name` — OS detection for CLI install tab pre-selection +- `FileExists(ExpandPath("/cli/lucli/Module.cfc"))` — CLI detection +- `pageHeader()` is available from `helpers.cfm` but we are NOT using it (the hero replaces it) + +- [ ] **Step 1: Write the new congratulations.cfm** + +Replace the entire contents of `vendor/wheels/public/views/congratulations.cfm` with: + +```cfm + + + + // Runtime info + local.wheelsVersion = get("version"); + local.engineName = application.$wheels.serverName; + local.engineVersion = ListFirst(application.$wheels.serverVersion, "."); + if (ListLen(application.$wheels.serverVersion, ".") > 1) { + local.engineVersion &= "." & ListGetAt(application.$wheels.serverVersion, 2, "."); + } + local.dbName = application.wheels.dataSourceName; + local.environment = get("environment"); + + // CLI detection + local.hasCLI = FileExists(ExpandPath("/cli/lucli/Module.cfc")); + + // OS detection for install tab pre-selection + local.osName = server.os.name; + local.isMac = FindNoCase("Mac", local.osName) || FindNoCase("Darwin", local.osName); + local.isWindows = FindNoCase("Windows", local.osName); + // Default to Linux if neither Mac nor Windows + + + + +
+ + +
+
W H E E L S
+
#local.wheelsVersion#
+
+ + Running successfully +
+
+ #local.engineName# #local.engineVersion# + #local.dbName# + #local.environment# +
+
+ + + +
+ + Wheels CLI detected +
+ +
+
+ +

Install the Wheels CLI

+
+

The Wheels CLI gives you generators, migrations, testing, and a local dev server. The commands below require it.

+
+ + + +
+
+ >$ + choco install wheelsbrew install wheels-dev/tap/wheels +
+
+ + + +
+
+
+ +
+

Generate a Scaffold

+

Create your first model, controller, and views

+
wheels g scaffold Post title content:text
+
+
+
+ +
+

Migrate Database

+

Run pending migrations to set up your schema

+
wheels dbmigrate latest
+
+
+
+ +
+

Run Tests

+

Verify your installation is working correctly

+
wheels test run
+
+
+ + +
What's New in 4.0
+
+
+ New +

Package System

+

First-party modules in vendor/ replace legacy plugins

+
+
+ New +

Middleware

+

CORS, CSP, rate limiting, security headers

+
+
+ New +

DI Container

+

Dependency injection with request scoping

+
+
+ New +

Query Builder

+

Fluent, injection-safe chainable queries

+
+
+ New +

Background Jobs

+

Async processing with retries and backoff

+
+
+ Upgraded +

Wheels CLI

+

Zero-Docker local dev, generators, and console

+
+
+ + +
+
+ Documentation + Community + GitHub +
+
+ Change this page → config/routes.cfm +
+
+ +
+ + + + + + +``` + +- [ ] **Step 2: Verify the page renders** + +Start the server if not running, then load the congratulations page: + +```bash +curl -s "http://localhost:8080/?reload=true&password=wheels" > /dev/null +curl -s -o /dev/null -w "%{http_code}" "http://localhost:8080/" +``` + +Expected: HTTP 200. Open in browser to visually verify: +- Hero shows version, engine, database, environment +- CLI banner or CLI-detected line displays correctly +- Three action cards render in a row +- Six feature tiles render in a 3x2 grid +- Footer links and route hint display + +- [ ] **Step 3: Commit** + +```bash +git add vendor/wheels/public/views/congratulations.cfm +git commit -m "feat(view): redesign congratulations page for v4.0 + +Replace static welcome text with dashboard-style page showing runtime +info, CLI detection with install instructions, quick-start action +cards, and v4.0 feature highlights." +``` diff --git a/docs/superpowers/specs/2026-04-14-congratulations-page-redesign.md b/docs/superpowers/specs/2026-04-14-congratulations-page-redesign.md new file mode 100644 index 0000000000..0046b26d48 --- /dev/null +++ b/docs/superpowers/specs/2026-04-14-congratulations-page-redesign.md @@ -0,0 +1,123 @@ +# Congratulations Page Redesign (A+C Hybrid) + +## Summary + +Replace the static, text-heavy congratulations page (`vendor/wheels/public/views/congratulations.cfm`) with a modern dashboard-style welcome page that shows runtime info, detects CLI availability, provides actionable quick-start commands, and highlights v4.0 features. + +## File Changed + +`vendor/wheels/public/views/congratulations.cfm` — single file rewrite. Uses existing layout wrapper (`_header.cfm` / `_footer.cfm`) and Catppuccin dark theme CSS variables already defined in `_header.cfm`. + +## Design + +### Section 1: Hero + +Centered brand moment with dynamic runtime information. + +``` +W H E E L S (spaced uppercase, subtle color) +4.0.0 (large, accent-colored version number) +[✓ Running successfully] (green pill badge) +● Lucee 7.0.1 ● SQLite ● Development (environment dots) +``` + +Data sources: + +| Data | Source | +|------|--------| +| Version | `get("version")` | +| Engine | `application.$wheels.serverName` & `application.$wheels.serverVersion` | +| Database | `application.wheels.dataSourceName` | +| Environment | `get("environment")` | + +### Section 2: CLI Detection + Install Banner + +**Detection:** Check for `cli/lucli/Module.cfc` in the project root: + +```cfm + +``` + +**CLI not detected** — yellow-bordered banner with tabbed install commands. OS auto-detection via `server.os.name` pre-selects the active tab: + +| OS match | Pre-selected tab | Command | +|----------|-----------------|---------| +| Contains "Mac" or "Darwin" | macOS | `brew install wheels-dev/tap/wheels` | +| Contains "Linux" | Linux | `brew install wheels-dev/tap/wheels` | +| Contains "Windows" | Windows | `choco install wheels` | + +All three tabs always visible; only the default selection changes. Banner text: "The Wheels CLI gives you generators, migrations, testing, and a local dev server. The commands below require it." + +**CLI detected** — subtle one-line confirmation: "✓ Wheels CLI detected" in muted text. + +### Section 3: Action Cards + +Three cards in a `repeat(3, 1fr)` CSS grid: + +| Card | Title | Description | Command | +|------|-------|-------------|---------| +| 1 | Generate a Scaffold | Create your first model, controller, and views | `wheels g scaffold Post title content:text` | +| 2 | Migrate Database | Run pending migrations to set up your schema | `wheels dbmigrate latest` | +| 3 | Run Tests | Verify your installation is working correctly | `wheels test run` | + +Each card has an SVG icon, title, description, and a monospace command block. + +### Section 4: Feature Grid + +Six tiles in a `repeat(3, 1fr)` CSS grid, each with a tag and description: + +| Feature | Tag | Description | +|---------|-----|-------------| +| Package System | New | First-party modules in vendor/ replace legacy plugins | +| Middleware | New | CORS, CSP, rate limiting, security headers | +| DI Container | New | Dependency injection with request scoping | +| Query Builder | New | Fluent, injection-safe chainable queries | +| Background Jobs | New | Async processing with retries and backoff | +| Wheels CLI | Upgraded | Zero-Docker local dev, generators, and console | + +Tags use existing theme colors: green for "New", blue for "Upgraded". + +### Section 5: Footer + +Single flex row: +- **Left:** Documentation, Community, GitHub links +- **Right:** "Change this page → `config/routes.cfm`" + +Links: +- Documentation → `https://wheels.dev` +- Community → `https://github.com/wheels-dev/wheels/discussions` +- GitHub → `https://github.com/wheels-dev/wheels` + +## What Gets Removed + +Everything from the current page: +- "Congratulations!" h1 and subtitle +- "Welcome to the wonderful world of Wheels" prose +- Hardcoded `3.1.0` documentation URLs +- "Hello World" tutorial link +- "How to Make this Message Go Away" numbered instructions +- `Wheels.dev` product name reference (now "Wheels") +- Font Awesome icon dependency (`fa fa-check-circle`) + +## Styling Approach + +No new CSS files or external dependencies. A scoped ` + +
- #pageHeader("Congratulations!")# + +
+
W H E E L S
+
#local.wheelsVersion#
+
+ + Running successfully +
+
+ #local.engineName# #local.engineVersion# + #local.dbName# + #local.environment# +
+
-

- - - You have successfully installed version #get("version")# of Wheels.dev - -
- Welcome to the wonderful world of Wheels. We hope you will enjoy it! Now start coding... -

+ + +
+ + Wheels CLI detected +
+ +
+
+ +

Install the Wheels CLI

+
+

The Wheels CLI gives you generators, migrations, testing, and a local dev server. The commands below require it.

+
+ + + +
+
+ >$ + choco install wheelsbrew install wheels-dev/tap/wheels +
+
+ -

Now What?

-

Now that you have a working installation of Wheels, you may be wondering what to do next. Here are some suggestions.

+ +
+
+
+ +
+

Generate a Scaffold

+

Create your first model, controller, and views

+
wheels g scaffold Post title content:text
+
+
+
+ +
+

Migrate Database

+

Run pending migrations to set up your schema

+
wheels dbmigrate latest
+
+
+
+ +
+

Run Tests

+

Verify your installation is working correctly

+
wheels test run
+
+
-
-
- View and code along with our - "Hello World" tutorial. + +
What's New in 4.0
+
+
+ New +

Package System

+

First-party modules in vendor/ replace legacy plugins

+
+
+ New +

Middleware

+

CORS, CSP, rate limiting, security headers

+
+
+ New +

DI Container

+

Dependency injection with request scoping

+
+
+ New +

Query Builder

+

Fluent, injection-safe chainable queries

-
- Have a look at the rest of our documentation. +
+ New +

Background Jobs

+

Async processing with retries and backoff

-
- Say "Hello!" to everyone in the Wheels community. +
+ Upgraded +

Wheels CLI

+

Zero-Docker local dev, generators, and console

-
Build the next killer website on the World Wide Web...
-

- Good Luck! -

- -

How to Make this Message Go Away

-

- Want to have another page load when your application loads this URL? You can configure your own home route. -

-
    -
  1. - Open the routes configuration file at /config/routes.cfm. -
    2. -
  2. - You will see a line similar to this for a route named root: - 
    -				.root(to="wheels####wheels", method="get")
-
    -
    3. -
  3. - Simply change the to - parameter to specify a controller####action - of your choosing. -
    4. -
  4. Reload your Wheels application.
    5. -
+ +
+
+ Documentation + Community + GitHub +
+
+ Change this page → config/routes.cfm +
+
+ +
+ +