diff --git a/packages/email-renderer/package.json b/packages/email-renderer/package.json index 5c7cca90..9f3f2712 100644 --- a/packages/email-renderer/package.json +++ b/packages/email-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/email-renderer", - "version": "0.1.17", + "version": "0.1.18", "type": "module", "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.", "exports": { diff --git a/packages/email-renderer/src/blocks.ts b/packages/email-renderer/src/blocks.ts index 232cbb1b..090b02e9 100644 --- a/packages/email-renderer/src/blocks.ts +++ b/packages/email-renderer/src/blocks.ts @@ -204,7 +204,7 @@ export const columnsBlock = defineBlock({ node, ), ampEmail: ({ node, slots }) => - emailCell(`${slots.columns}
`, node), + emailCell(`${slots.columns}
`, node), mjml: ({ slots }) => slots.columns, }, textRenderer: ({ slots }) => slots.columns, @@ -234,7 +234,7 @@ export const columnBlock = defineBlock({ emailHtml: ({ node, slots }) => `${slots.content}
`, ampEmail: ({ node, slots }) => - `${slots.content}
`, + `${slots.content}
`, mjml: ({ node, slots }) => `${slots.content}`, }, diff --git a/packages/email-renderer/src/email.ts b/packages/email-renderer/src/email.ts index 2c8df9c1..a26a86b4 100644 --- a/packages/email-renderer/src/email.ts +++ b/packages/email-renderer/src/email.ts @@ -81,7 +81,7 @@ const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") = }; const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => { const props = document.root.props as Record; - const css = `.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.email-bg{background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`; + const css = `@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.email-bg{background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`; return `${body}`; }; diff --git a/packages/email-renderer/test/email.test.ts b/packages/email-renderer/test/email.test.ts index ddbad1da..dcfe5790 100644 --- a/packages/email-renderer/test/email.test.ts +++ b/packages/email-renderer/test/email.test.ts @@ -62,13 +62,18 @@ describe("email renderer", () => { const draft=structuredClone(document); const content=draft.root.slots.content[0]!.slots.content; draft.root.slots.content[0]!.slots.content=[{id:"columns",type:"layout.columns",version:1,props:{},styles:{},slots:{columns:Array.from({length:count},(_,index)=>({id:`column-${index}`,type:"layout.column",version:1,props:{width:`${100/count}%`},styles:{},slots:{content:index===0?content:[]}}))}}]; - const result=await renderEmail(draft,{mjml:true}); + const result=await renderEmail(draft,{mjml:true,amp:true}); expect(result.ok).toBe(true); if(!result.ok)continue; const mjml=result.value.exports!.mjml!; expect(mjml.match(/ {