gigafibre-fsm

louis/gigafibre-fsm

Fork 0

Commit Graph

Author	SHA1	Message	Date
louispaulb	0fb9089f4e	fix(campaigns/templates): center logos via nested-table pattern The native-block imageBlock factory was emitting img tags wrapped only by a td with text-align:center. That doesn't actually center the image because text-align only affects inline content, and the img has display:block. The result: top header logo and dark-footer logo were left-aligned despite the textAlign:"center" prop on the block. Fix: wrap each img in an inner <table align="<textAlign>"> exactly the way MJML/Litmus/Mailchimp do it. This is the canonical email-client pattern that works in Outlook 2007-2019 (which ignores margin:0 auto on inline tables but respects table align attributes). Also: the AI converter dumped the entire dark footer band into a SINGLE htmlBlock with malformed table markup (a stray </td> outside its row). Split into proper image + text native blocks so: 1. The logo inherits the new centered nested-table pattern 2. The URL+copyright text is now individually editable in Unlayer 3. The {{year}} placeholder is in a text block where it belongs And one AI hallucination correction: the converter assigned textAlign:"left" to the top header logo (probably because the surrounding column had align="left" in the MJML output). Original design intent was centered — fixed in the spec. Verified live: both logos (140px top, 120px footer) now render with align="center" on their nested wrapper table. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-01 18:45:30 -04:00
louispaulb	0fd1e9f6b5	feat(campaigns/templates): Gemini-powered HTML→native converter Scales the native-block migration from "one template per manual spec" to "any compiled .html template, one CLI command, ~5 seconds, ~$0.001 per template" via Gemini Flash semantic interpretation. Pipeline (ai-convert-to-native.js): 1. Read existing compiled .html 2. Send inner body to Gemini Flash with a tight JSON schema (block.type ∈ text/image/button/divider/html, plus type-specific fields like fontSize/color/padding/href). 3. AI returns { preheader, ariaLabel, blocks: [...] } 4. Deterministic emit of a templates-spec/<name>-native.js file — no AI-touched markup goes into the final compiled output. 5. Validation: every {{var}} in source MUST survive into the spec; warn loudly if any are dropped (the AI occasionally omits minor placeholders like {{year}} in the copyright line). Why deterministic emit matters: Gemini understands SEMANTICS reliably ("this paragraph is the greeting, this div is the CTA, this span is a chip") but hallucinates DETAILS when generating final HTML. Splitting the responsibilities means the AI only outputs structured JSON describing the layout, and build-native-template.js produces the bytes shipped to recipients. First conversion: gift-email-fr → gift-email-fr-native - 15 blocks identified by Gemini in 3006 tokens (Flash, ~5s). - 4 row groups: view-in-browser, white card (intro/chips/CTA/ footer copy), contact info, dark footer band. - 7 text + 1 image + 1 button + 6 html blocks (chips, multi-logo strip, brand-logo card, expiry section stay as raw HTML — correct, those have no native equivalent). - HTML payload: 19,664 bytes vs original 39,913 bytes — -51%. - One AI omission caught by the new sanity check: {{year}} was stripped from the © line in the dark footer. Hand-patched in the generated spec. Re-running with stricter prompt should reduce that occurrence rate. Hub preview endpoint now defaults vars.year to current year (matches the test-send endpoint that already did this), so the sample render shows "© 2026 TARGO Communications" instead of "© TARGO ...". 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-01 18:29:15 -04:00

Author

SHA1

Message

Date

louispaulb

0fb9089f4e

fix(campaigns/templates): center logos via nested-table pattern

The native-block imageBlock factory was emitting img tags wrapped only
by a td with text-align:center. That doesn't actually center the image
because text-align only affects inline content, and the img has
display:block. The result: top header logo and dark-footer logo were
left-aligned despite the textAlign:"center" prop on the block.

Fix: wrap each img in an inner <table align="<textAlign>"> exactly the
way MJML/Litmus/Mailchimp do it. This is the canonical email-client
pattern that works in Outlook 2007-2019 (which ignores margin:0 auto
on inline tables but respects table align attributes).

Also: the AI converter dumped the entire dark footer band into a
SINGLE htmlBlock with malformed table markup (a stray </td> outside
its row). Split into proper image + text native blocks so:
  1. The logo inherits the new centered nested-table pattern
  2. The URL+copyright text is now individually editable in Unlayer
  3. The {{year}} placeholder is in a text block where it belongs

And one AI hallucination correction: the converter assigned
textAlign:"left" to the top header logo (probably because the
surrounding column had align="left" in the MJML output). Original
design intent was centered — fixed in the spec.

Verified live: both logos (140px top, 120px footer) now render with
align="center" on their nested wrapper table.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-06-01 18:45:30 -04:00

louispaulb

0fd1e9f6b5

feat(campaigns/templates): Gemini-powered HTML→native converter

Scales the native-block migration from "one template per manual spec"
to "any compiled .html template, one CLI command, ~5 seconds, ~$0.001
per template" via Gemini Flash semantic interpretation.

Pipeline (ai-convert-to-native.js):
  1. Read existing compiled .html
  2. Send inner body to Gemini Flash with a tight JSON schema
     (block.type ∈ text/image/button/divider/html, plus type-specific
     fields like fontSize/color/padding/href).
  3. AI returns { preheader, ariaLabel, blocks: [...] }
  4. Deterministic emit of a templates-spec/<name>-native.js file —
     no AI-touched markup goes into the final compiled output.
  5. Validation: every {{var}} in source MUST survive into the spec;
     warn loudly if any are dropped (the AI occasionally omits minor
     placeholders like {{year}} in the copyright line).

Why deterministic emit matters:
  Gemini understands SEMANTICS reliably ("this paragraph is the
  greeting, this div is the CTA, this span is a chip") but
  hallucinates DETAILS when generating final HTML. Splitting the
  responsibilities means the AI only outputs structured JSON
  describing the layout, and build-native-template.js produces the
  bytes shipped to recipients.

First conversion: gift-email-fr → gift-email-fr-native
  - 15 blocks identified by Gemini in 3006 tokens (Flash, ~5s).
  - 4 row groups: view-in-browser, white card (intro/chips/CTA/
    footer copy), contact info, dark footer band.
  - 7 text + 1 image + 1 button + 6 html blocks (chips, multi-logo
    strip, brand-logo card, expiry section stay as raw HTML —
    correct, those have no native equivalent).
  - HTML payload: 19,664 bytes vs original 39,913 bytes — **-51%**.
  - One AI omission caught by the new sanity check: {{year}} was
    stripped from the © line in the dark footer. Hand-patched in the
    generated spec. Re-running with stricter prompt should reduce
    that occurrence rate.

Hub preview endpoint now defaults vars.year to current year (matches
the test-send endpoint that already did this), so the sample render
shows "© 2026 TARGO Communications" instead of "©  TARGO ...".

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-06-01 18:29:15 -04:00

2 Commits