Skip to content

feat: responsive preview HTML sidecar alongside XML export - #157

Open
samuelpatak-png wants to merge 1 commit into
mergeos-bounties:masterfrom
samuelpatak-png:feat/responsive-preview-sidecar-78
Open

feat: responsive preview HTML sidecar alongside XML export#157
samuelpatak-png wants to merge 1 commit into
mergeos-bounties:masterfrom
samuelpatak-png:feat/responsive-preview-sidecar-78

Conversation

@samuelpatak-png

Copy link
Copy Markdown

Summary

  • Emit a responsive *.preview.html sidecar next to every SDK/CLI XML export for local browser checks
  • Preview shows Mobile (375), Tablet (768), and Desktop (1100) frames with real theme colors/fonts/layout and correct iframe widths for @media simulation
  • Add export helpers (write_theme_with_preview, write_preview_sidecar) plus regression tests and screenshot evidence under docs/screenshots/

Fixes #78

Screenshots / evidence

  • docs/screenshots/issue-78-preview-sidecar.html — review wrapper
  • docs/screenshots/portfolio-issue78.preview.html — generated sidecar
  • docs/screenshots/portfolio-issue78.xml — companion XML
  • docs/screenshots/README-issue-78.md — how to reproduce

Open the HTML files in any browser to view the breakpoint frames.

Test plan

  • pytest -q → 113 passed, 3 skipped
  • ruff check on new/changed export + sdk modules
  • CLI gen html prints Preview path and writes *.preview.html
  • Triple QA review (3 passes) — see PR comment / description below

3-pass QA results

Pass 1: Found iframe display widths ≠ breakpoint widths (media queries wrong on tablet/desktop). Fixed with transform-scaled iframes at true 375/768/1100 layout widths.

Pass 2: Hardened CSS color/font injection (red;body{display:none} etc. rejected). XSS escaping for title/nav/paragraphs verified. Nested output dirs OK.

Pass 3: Full suite green; Typer CLI smoke confirms Preview line + sidecar file; portfolio colors flow through; sidebar layout precedence correct. No remaining issues.

Made with Cursor

Write theme.preview.html next to generated XML with Mobile/Tablet/Desktop
frames so themes can be checked locally in a browser before Blogger import.

Fixes mergeos-bounties#78

Co-authored-by: Cursor <cursoragent@cursor.com>
@laurentketterle-hub

Copy link
Copy Markdown

QA Verification — BloggerEasy#157

PR: feat: responsive preview HTML sidecar alongside XML export
Author: @samuelpatak-png | SHA: 3a91b78

CI: no checks

  • No checks

Tests

✅ no tests

Evidence

| Screenshots | ❌ |
| Video/GIF | ❌ |
| Logs | ✅ |

Verdict: ⚠️ EVIDENCE MISSING

Auto-verified via PR Verify Tool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[100 MRG] Feature: responsive preview HTML sidecar

3 participants