html-ad-generator-mcp
Version:
MCP server for generating HTML ad templates from JSON input for Google Ads, Meta Ads, and Moment Science
55 lines • 5.46 kB
JavaScript
import { readFileSync } from 'fs';
import { join, dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
export function processMomentScienceTemplate(input) {
// Read the base template
const templatePath = join(__dirname, '../../templates/moment-science-base.html');
let html = readFileSync(templatePath, 'utf-8');
const content = input.content;
// Create JavaScript data for variants
const variants = {
headlines: content.headline,
descriptions: content.description,
short_headlines: content.short_headline,
short_descriptions: content.short_description,
positive_ctas: content.positive_cta,
negative_ctas: content.negative_cta
};
// Calculate the maximum number of variants
const maxVariants = Math.min(content.headline.length, content.description.length, content.positive_cta.length, content.negative_cta.length);
// Generate dynamic stepper HTML based on actual number of variants
const stepperHtml = Array.from({ length: maxVariants }, (_, index) => `<div class="adpx_stepper-wrapper"><div class="stepper-item ${index === 0 ? 'completed' : ''}"><div class="step-counter">${index + 1}</div></div></div>`).join('');
// Replace the static stepper with dynamic stepper
html = html.replace(/<div class="adpx_stepper-wrapper"><div class="stepper-item completed"><div class="step-counter">1<\/div><\/div><\/div>\s*<div class="adpx_stepper-wrapper"><div class="stepper-item completed"><div class="step-counter">2<\/div><\/div><\/div>\s*<div class="adpx_stepper-wrapper"><div class="stepper-item completed"><div class="step-counter">3<\/div><\/div><\/div>\s*<div class="adpx_stepper-wrapper"><div class="stepper-item completed"><div class="step-counter">4<\/div><\/div><\/div>\s*<div class="adpx_stepper-wrapper"><div class="stepper-item completed"><div class="step-counter">5<\/div><\/div><\/div>/g, stepperHtml);
// Replace the first variant as default
html = html.replace(/MS_HEADLINE_PLACEHOLDER/g, escapeHtml(content.headline[0]));
html = html.replace(/MS_DESCRIPTION_PLACEHOLDER/g, escapeHtml(content.description[0]));
html = html.replace(/MS_POSITIVE_CTA_PLACEHOLDER/g, escapeHtml(content.positive_cta[0]));
html = html.replace(/MS_NEGATIVE_CTA_PLACEHOLDER/g, escapeHtml(content.negative_cta[0]));
// Replace image URL if provided, otherwise use a placeholder
const imageUrl = content.imageUrl || 'https://via.placeholder.com/130x130?text=Ad+Image';
html = html.replace(/MS_IMAGE_URL_PLACEHOLDER/g, escapeHtml(imageUrl));
// Add optimized JavaScript for variant switching
const variantScript = `
const variants=${JSON.stringify(variants)},maxVariants=${maxVariants};let currentVariant=0;
function switchVariant(variantIndex){if(variantIndex>=0&&variantIndex<maxVariants){currentVariant=variantIndex;document.getElementById('adpx_Heading').textContent=variants.headlines[variantIndex];document.getElementById('adpx_Body').textContent=variants.descriptions[variantIndex];document.getElementById('adpx_left-cta').textContent=variants.positive_ctas[variantIndex];document.getElementById('adpx_right-cta').textContent=variants.negative_ctas[variantIndex];updateStepperButtons(variantIndex);}}
function updateStepperButtons(activeIndex){document.querySelectorAll('.stepper-item').forEach((item,index)=>{if(index<maxVariants){item.classList.toggle('completed',index===activeIndex);}});}
document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.stepper-item').forEach((item,index)=>{if(index<maxVariants){item.style.cursor='pointer';item.addEventListener('click',()=>switchVariant(index));}});const leftChevron=document.getElementById('adpx_left-chevron'),rightChevron=document.getElementById('adpx_right-chevron');if(leftChevron){leftChevron.style.cursor='pointer';leftChevron.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();switchVariant(currentVariant>0?currentVariant-1:maxVariants-1);});const leftArrow=document.getElementById('adpx_left-arrow');if(leftArrow){leftArrow.style.cursor='pointer';leftArrow.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();switchVariant(currentVariant>0?currentVariant-1:maxVariants-1);});}}if(rightChevron){rightChevron.style.cursor='pointer';rightChevron.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();switchVariant(currentVariant<maxVariants-1?currentVariant+1:0);});const rightArrow=document.getElementById('adpx_right-arrow');if(rightArrow){rightArrow.style.cursor='pointer';rightArrow.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();switchVariant(currentVariant<maxVariants-1?currentVariant+1:0);});}}updateStepperButtons(0);});
document.addEventListener('keydown',function(e){if(e.key==='ArrowLeft'){switchVariant(currentVariant>0?currentVariant-1:maxVariants-1);}else if(e.key==='ArrowRight'){switchVariant(currentVariant<maxVariants-1?currentVariant+1:0);}});
`;
// Insert the variant script before the closing </script> tag
html = html.replace(/(\s*<\/script>\s*<\/body>)/, `${variantScript}\n$1`);
return html;
}
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
//# sourceMappingURL=moment-science.js.map