shadowdao
53c40f856f
Five of six items from user feedback (Contact Form email delivery split into a focused, live-tested follow-up): - Social Links: add Spotify + Twitch (FA 4.7.0 already ships both glyphs). - Features Grid: per-feature icon/image toggle (upload + URL) and an optional button (text + url); render, settings, and HTML export updated, backward compatible with existing icon-only features. - Header: seed the default header with a Navbar (logo + Home/About/Services/ Contact) so new sites open with an editable menu-with-links instead of an empty header zone. Adds a vitest guard that the seed deserializes and exports a real <nav>. - Canvas: slim the empty header/footer placeholder from a padded band to a thin hint line so an empty zone no longer reads as a stray spacer. Design spec: docs/superpowers/specs/2026-07-06-site-builder-feedback-batch-design.md Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
4.0 KiB
Markdown
76 lines
4.0 KiB
Markdown
# Site Builder — feedback batch (2026-07-06)
|
|
|
|
Six items from user feedback on the Craft.js site builder (`/workspace/site-builder/craft/`).
|
|
Scope decisions were made with the user before writing this spec. Each item is
|
|
independently shippable.
|
|
|
|
## 1 & 2 — Spotify + Twitch social links
|
|
**File:** `craft/src/components/basic/SocialLinks.tsx`
|
|
Add `spotify → { icon: 'fa-spotify', label: 'Spotify' }` and `twitch → { icon:
|
|
'fa-twitch', label: 'Twitch' }` to `platformIcons` + `platformLabels`. The "Add
|
|
Platform" dropdown, editor render, and `toHtml` pick them up automatically.
|
|
Font Awesome 4.7.0 (loaded in `craft/index.html`) already ships both glyphs — no
|
|
CDN change. **Twitch live-status indicator is explicitly deferred** (needs a
|
|
Twitch app Client-ID + published-site JS) — see Follow-ups.
|
|
|
|
## 3 — Features: image option + optional button (structured, no canvas rewrite)
|
|
**File:** `craft/src/components/sections/FeaturesGrid.tsx`
|
|
Extend `FeatureItem`:
|
|
```ts
|
|
mediaType?: 'icon' | 'image'; // default 'icon'
|
|
image?: string; imageAlt?: string;
|
|
buttonText?: string; buttonUrl?: string;
|
|
```
|
|
- Per-feature settings gain an icon/image toggle. Image mode = upload + URL input,
|
|
reusing the `uploadToWhp(file)` helper pattern from `Navbar.tsx`/`ImageBlock.tsx`.
|
|
- Optional button fields (text + url); render a button under the description when
|
|
`buttonText` is set.
|
|
- Editor render + `toHtml` updated: `<img>` when `mediaType==='image'`, else the
|
|
glyph; button block when present. Backward compatible (missing `mediaType`
|
|
falls back to icon).
|
|
|
|
## 4 & 6 — Menu links in the header (seed a real default header)
|
|
**Files:** `craft/src/state/PageContext.tsx` (default header craftState), minor
|
|
`craft/src/panels/left/PagesPanel.tsx` hint.
|
|
Root cause of "no obvious way to add links to the menu": the default header
|
|
(`DEFAULT_HEADER` craftState) is an **empty `Container`** — new sites open with a
|
|
blank header and nothing to edit. Fix: seed the default header with a `Navbar`
|
|
(logo + page links + CTA) so every new site has an editable menu out of the box.
|
|
Add a one-line hint in the header-edit empty state pointing at the Navbar's Links
|
|
section. No new component.
|
|
|
|
## 5 — "Spacer" gap between page and header
|
|
**File:** `craft/src/components/layout/HeaderZone.tsx` (+ header default from #4/6)
|
|
Same root cause: the empty header zone's `minHeight` renders as a blank band that
|
|
reads as a stray spacer. Seeding real header content (item 4/6) removes it in the
|
|
common case. Additionally collapse the empty-state min-height so a deliberately
|
|
empty header leaves no gap. **Reproduce first** to confirm there is not also a
|
|
literal stray `Spacer` node before finalizing.
|
|
|
|
## 7 — Contact Form email delivery
|
|
**Files:** `craft/src/components/forms/ContactForm.tsx`,
|
|
`whp/web-files/api/site-builder.php` (publish/deploy path), self-contained
|
|
`contact-handler.php` dropped into the site docroot at publish.
|
|
- Add a **"Send submissions to" recipient email** field.
|
|
- Published sites live on the customer docroot (not the panel), so the working
|
|
form needs a handler at the site. At publish/deploy time, if any page contains
|
|
a ContactForm, write a self-contained `contact-handler.php` into the docroot
|
|
with the recipient stored server-side (sidecar config, kept out of client HTML
|
|
to avoid harvesting).
|
|
- `toHtml` emits `action="contact-handler.php"`, a hidden honeypot field, and a
|
|
thank-you redirect. Handler validates + sends via PHP `mail()`.
|
|
- SMTP hardening via the existing mailer noted as a Follow-up.
|
|
|
|
## Build & deploy
|
|
Frontend: `cd craft && npm run build` (runs `tsc && vite build`). Deploy is the
|
|
standard WHP release pipeline (copy `dist/` into the whp repo → build-release →
|
|
download-update); **not** auto-deployed here — customer-facing UI, deploy is a
|
|
separate authorized step.
|
|
|
|
## Follow-ups (not in this batch)
|
|
- Twitch live-status badge (Twitch Helix + published-site JS + Client-ID config).
|
|
- ContactForm SMTP delivery via the WHP mailer instead of PHP `mail()`.
|
|
|
|
## Build order
|
|
1&2 (trivial) → 3 → 4/5/6 (shared header work) → 7 (largest, touches deploy path).
|