Custom Email Document Structure

Build a function that compiles MJML email templates using a custom HTML document structure. The custom structure should add specific meta tags and tracking elements that are not present in the default MJML output.

Requirements

Your function should:

1. Accept an MJML template string and compile it to HTML
2. Replace the default HTML document structure with a custom one that includes:
   • A custom viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
   • An analytics tracking pixel before the email content: <img src="https://track.example.com/pixel.gif" width="1" height="1" />
   • Custom Open Graph meta tags: og:title and og:type set to "email"
3. Preserve all MJML features including fonts, media queries, styles, and the email preview text
4. Properly handle the language (lang) and text direction (dir) attributes from the MJML input

Test Cases

• Compiles a basic MJML template with the custom viewport meta tag @test

• Includes the tracking pixel image before the email content @test

• Adds Open Graph meta tags to the document head @test

@generates

API

/**
 * Compiles MJML templates with a custom HTML document structure.
 *
 * @param {string} mjmlTemplate - The MJML template string to compile
 * @returns {Object} Object containing the compiled HTML string in the 'html' property
 */
function compileWithCustomStructure(mjmlTemplate) {
  // IMPLEMENTATION HERE
}

module.exports = {
  compileWithCustomStructure
};

Dependencies { .dependencies }

mjml { .dependency }

Provides MJML to HTML compilation support.