Newsletter Layout Builder

Build a function that generates MJML email templates for a multi-section newsletter layout.

Requirements

Create a function buildNewsletterTemplate(data) that accepts configuration data and returns a complete MJML template string. The newsletter should include:

1. Hero Header: A hero section with a background image, title, and subtitle
2. Content Sections: Multiple content blocks with text articles, call-to-action buttons, images, and dividers
3. Social Footer: Social media links and copyright text

The function must generate valid MJML markup using the standard component library.

Input Format

{
  hero: {
    backgroundImage: "https://example.com/hero.jpg",
    title: "Monthly Newsletter",
    subtitle: "December 2025 Edition"
  },
  sections: [
    {
      type: "article",
      heading: "Feature Story",
      content: "Lorem ipsum dolor sit amet..."
    },
    {
      type: "cta",
      text: "Read More",
      href: "https://example.com/article"
    },
    {
      type: "image",
      src: "https://example.com/image.jpg",
      alt: "Feature image"
    },
    {
      type: "divider"
    }
  ],
  social: [
    { network: "facebook", href: "https://facebook.com/example" },
    { network: "twitter", href: "https://twitter.com/example" }
  ],
  copyright: "© 2025 Example Corp"
}

Output Format

The function should return a valid MJML string that can be compiled to HTML using mjml2html().

Test Cases

• Given a configuration with a hero, 2 article sections, 1 CTA, and a social footer, the function returns valid MJML that includes mj-hero, mj-text, mj-button, and mj-social components @test

• Given a configuration with an image section, the function returns MJML with an mj-image component that has proper src and alt attributes @test

• Given a configuration with a divider in the sections array, the function returns MJML that includes an mj-divider component @test

• The generated MJML uses proper structure with mj-body, mj-section, and mj-column components for layout @test

Implementation

@generates

API

/**
 * Builds an MJML newsletter template from configuration data
 * @param {Object} data - Configuration object with hero, navigation, sections, social, and copyright
 * @returns {string} Complete MJML template string
 */
function buildNewsletterTemplate(data) {
  // Implementation
}

module.exports = { buildNewsletterTemplate };

Dependencies { .dependencies }

mjml { .dependency }

Provides the email markup language and component system for building responsive email templates.

The function should generate MJML markup that uses standard components including:

• Layout components: mj-body, mj-section, mj-column
• Content components: mj-text, mj-button, mj-image, mj-divider
• Interactive components: mj-hero, mj-social

@satisfied-by