Wix-style section picker + demo content seed + project card SVG fix#8
Wix-style section picker + demo content seed + project card SVG fix#8
Conversation
…tom CSS Co-authored-by: Aedankerr <56336929+Aedankerr@users.noreply.github.com>
|
@copilot show me the new ui preview |
Here's the full UI tour: Sidebar — Pages / Site / Tools groups, "Website Builder" subtitle on the logo: Add Section picker — inline, no modal: Hero section inline editor — always expanded, visibility toggle, Save per section, remove button: CV Profiles — save current CV as a named snapshot, import a JSON as a profile (file not stored on server), load/switch/set-as-default: Custom CSS — any valid CSS, injected server-side into the public CV page on every request: |
Co-authored-by: Aedankerr <56336929+Aedankerr@users.noreply.github.com>
…eviews - Replace abstract shape picker with 2-column grid of large visual cards - Each card shows a CSS-transform-scaled (scale(0.35)) realistic render of the actual section layout: Hero gradient banner, Projects card grid with tech tags, Timeline with dots and entries, Contact icon list - Hover overlay reveals '+ Add' CTA button (exact Wix pattern) - Scale factor extracted to --picker-scale CSS custom property (DRY) - Preview outer wrappers extracted to .prev-hero/projects/timeline/contact CSS classes Co-authored-by: Aedankerr <56336929+Aedankerr@users.noreply.github.com>
…G icon sizing in project cards
- src/server.js: on fresh install (blockCount=0), seed realistic developer-portfolio
content into all four default pages:
· Home — Hero + 2-item experience timeline + contact links
· Projects — Hero + 6-project grid (Logship, FormKit Pro, PocketCV, Dispatch,
Inkdrop Theme Pack, OSS Contributions) with tech-stack tags & links
· CV — Hero + 3-item work-experience timeline + 1-item education timeline
· Contacts — Contact block (email, GitHub, LinkedIn, website)
- public-readonly/site.html: add missing w-3.5, h-3.5, w-8, h-8 CSS utility classes
that caused the external-link SVG icon inside project cards to render at full viewport
size instead of 0.875 rem
Co-authored-by: Aedankerr <56336929+Aedankerr@users.noreply.github.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 04c6da9657
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| projects.push({ | ||
| name: row.querySelector('.ipj-name')?.value || '', | ||
| link: row.querySelector('.ipj-link')?.value || '', | ||
| description: row.querySelector('.ipj-desc')?.value || '', | ||
| tech_stack: (row.querySelector('.ipj-tech')?.value || '').split(',').map(s => s.trim()).filter(Boolean), | ||
| }); |
There was a problem hiding this comment.
Preserve project images when saving projects grid
Saving a projects_grid section now serializes each project without an image field, so any existing project images are silently dropped on the next save (even if the user only edits text). This is user-visible data loss because the public renderer relies on p.image to show project thumbnails and falls back to placeholders when the field disappears.
Useful? React with 👍 / 👎.
| // Inject custom CSS | ||
| const customCss = getCustomCss(); | ||
| if (customCss) html = html.replace('</head>', `<style id="custom-css">${customCss}</style></head>`); |
There was a problem hiding this comment.
Wire custom CSS injection into active public routes
The new custom-CSS injection is implemented inside servePublicIndex, but the public app still serves /, /projects, and /contacts via direct res.sendFile(...) handlers, so these pages never pass through this injection path. In practice, saved CSS only affects routes that use serveDatasetPage (for example /v/:slug), leaving the main public site unchanged.
Useful? React with 👍 / 👎.
| const blockCount = db.prepare('SELECT COUNT(*) as n FROM blocks').get().n; | ||
| if (blockCount === 0) { |
There was a problem hiding this comment.
Restrict demo seeding to first-run initialization
The startup seed runs whenever blocks is empty, not just on a fresh install. If an existing user intentionally removes all sections to keep pages blank, the next restart repopulates all default pages with demo content, unexpectedly reintroducing data they deleted.
Useful? React with 👍 / 👎.





The section type picker was four unstyled text buttons with no visual indication of what each section looks like, and all pages were empty on a fresh install.
Section picker → Wix-style visual cards
Replaced the button strip with a 2-column grid of large preview cards. Each card renders a full-fidelity HTML mockup of the section layout scaled down via CSS transform — the same technique Wix uses internally. Hovering reveals a dark overlay with an
+ AddCTA.Demo content seeded on first startup
All four default pages are now pre-populated on a fresh install (
blockCount === 0). Content models a complete developer portfolio (Alex Rivera) across Home, Projects, CV, and Contacts. Guard ensures existing data is never overwritten.Fix: oversized SVG icons in project cards (
site.html)w-3.5,h-3.5,w-8,h-8were absent from the page's self-contained CSS, causing the external-link icon in "View Project" to render at full viewport width.Home — Hero + experience timeline + contact links
Projects — Hero + 6-card grid with tech tags + "View Project" links
CV — Hero + work experience + education timelines
Contacts — Clean contact icon grid
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.