[{"data":1,"prerenderedAt":2547},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":203,"body":318,"description":2541,"extension":2542,"meta":2543,"navigation":14,"order":32,"path":202,"section":197,"seo":2544,"sidebar":14,"stem":2545,"toc":14,"__hash__":2546},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro.md",{"type":319,"value":320,"toc":2522},"minimark",[321,325,338,342,345,369,373,378,389,446,450,457,657,664,668,675,790,794,800,1003,1006,1012,1027,1044,1047,1051,1064,1078,1082,1089,1092,1103,1117,1122,1262,1266,1277,1711,1715,1718,1877,1881,1884,2321,2325,2332,2505,2508,2512,2515,2518],[322,323,203],"h1",{"id":324},"astro",[326,327,328,329,333,334,337],"p",{},"Maizzle plugs into Astro as a Vite plugin: edit, preview, and build email templates inside your existing project. Run ",[330,331,332],"code",{},"astro dev"," and Maizzle starts a sibling dev server with its preview UI; run ",[330,335,336],{},"astro build"," and emails compile to HTML next to your site.",[339,340,227],"h2",{"id":341},"installation",[326,343,344],{},"Install Maizzle in your Astro project:",[346,347,352],"pre",{"className":348,"code":349,"language":350,"meta":351,"style":351},"language-bash shiki shiki-themes laserwave","npm install @maizzle\u002Fframework\n","bash","",[330,353,354],{"__ignoreMap":351},[355,356,358,362,366],"span",{"class":357,"line":18},"line",[355,359,361],{"class":360},"sZNF3","npm",[355,363,365],{"class":364},"sXiT_"," install",[355,367,368],{"class":364}," @maizzle\u002Fframework\n",[339,370,372],{"id":371},"setup","Setup",[374,375,377],"h3",{"id":376},"project-structure","Project structure",[326,379,380,381,384,385,388],{},"Create an ",[330,382,383],{},"emails"," directory inside ",[330,386,387],{},"src"," for your email templates:",[346,390,396],{"className":391,"code":392,"filename":393,"highlights":394,"language":395,"meta":351,"style":351},"language-text shiki shiki-themes laserwave","├── src\u002F\n│   ├── emails\u002F\n│   │   └── welcome.vue\n│   ├── pages\u002F\n│   ├── components\u002F\n│   └── layouts\u002F\n├── astro.config.mjs\n├── tsconfig.json\n└── package.json\n","your-astro-app",[13,32],"text",[330,397,398,403,410,416,421,426,431,436,441],{"__ignoreMap":351},[355,399,400],{"class":357,"line":18},[355,401,402],{},"├── src\u002F\n",[355,404,407],{"class":405,"line":13},[357,406],"highlight",[355,408,409],{},"│   ├── emails\u002F\n",[355,411,413],{"class":412,"line":32},[357,406],[355,414,415],{},"│   │   └── welcome.vue\n",[355,417,418],{"class":357,"line":27},[355,419,420],{},"│   ├── pages\u002F\n",[355,422,423],{"class":357,"line":52},[355,424,425],{},"│   ├── components\u002F\n",[355,427,428],{"class":357,"line":128},[355,429,430],{},"│   └── layouts\u002F\n",[355,432,433],{"class":357,"line":124},[355,434,435],{},"├── astro.config.mjs\n",[355,437,438],{"class":357,"line":48},[355,439,440],{},"├── tsconfig.json\n",[355,442,443],{"class":357,"line":23},[355,444,445],{},"└── package.json\n",[374,447,449],{"id":448},"astro-config","Astro config",[326,451,452,453,456],{},"Register the Maizzle Vite plugin in your ",[330,454,455],{},"astro.config.mjs",":",[346,458,462],{"className":459,"code":460,"filename":455,"language":461,"meta":351,"style":351},"language-js shiki shiki-themes laserwave has-diff","import { defineConfig } from 'astro\u002Fconfig'\nimport { maizzle } from '@maizzle\u002Fframework' \u002F\u002F [!code ++]\n\nexport default defineConfig({\n  vite: {\n    plugins: [\n      maizzle({ \u002F\u002F [!code ++]\n        root: 'src\u002Femails', \u002F\u002F [!code ++]\n        content: ['**\u002F*.vue'], \u002F\u002F [!code ++]\n        output: { \u002F\u002F [!code ++]\n          path: 'dist\u002Femails', \u002F\u002F [!code ++]\n        }, \u002F\u002F [!code ++]\n      }), \u002F\u002F [!code ++]\n    ]\n  }\n})\n","js",[330,463,464,493,517,522,535,545,555,564,582,603,613,630,636,642,647,652],{"__ignoreMap":351},[355,465,466,470,474,478,481,484,487,490],{"class":357,"line":18},[355,467,469],{"class":468},"s0ZPN","import",[355,471,473],{"class":472},"sGGKt"," {",[355,475,477],{"class":476},"sU-n2"," defineConfig",[355,479,480],{"class":472}," }",[355,482,483],{"class":468}," from",[355,485,486],{"class":472}," '",[355,488,489],{"class":364},"astro\u002Fconfig",[355,491,492],{"class":472},"'\n",[355,494,498,500,502,505,507,509,511,514],{"class":495,"line":13},[357,496,497],"diff","add",[355,499,469],{"class":468},[355,501,473],{"class":472},[355,503,504],{"class":476}," maizzle",[355,506,480],{"class":472},[355,508,483],{"class":468},[355,510,486],{"class":472},[355,512,513],{"class":364},"@maizzle\u002Fframework",[355,515,516],{"class":472},"'",[355,518,519],{"class":357,"line":32},[355,520,521],{"emptyLinePlaceholder":14},"\n",[355,523,524,527,530,532],{"class":357,"line":27},[355,525,526],{"class":468},"export",[355,528,529],{"class":468}," default",[355,531,477],{"class":360},[355,533,534],{"class":472},"({\n",[355,536,537,540,542],{"class":357,"line":52},[355,538,539],{"class":468},"  vite",[355,541,456],{"class":472},[355,543,544],{"class":472}," {\n",[355,546,547,550,552],{"class":357,"line":128},[355,548,549],{"class":468},"    plugins",[355,551,456],{"class":472},[355,553,554],{"class":472}," [\n",[355,556,558,561],{"class":557,"line":124},[357,496,497],[355,559,560],{"class":360},"      maizzle",[355,562,563],{"class":472},"({",[355,565,567,570,572,574,577,579],{"class":566,"line":48},[357,496,497],[355,568,569],{"class":468},"        root",[355,571,456],{"class":472},[355,573,486],{"class":472},[355,575,576],{"class":364},"src\u002Femails",[355,578,516],{"class":472},[355,580,581],{"class":472},",",[355,583,585,588,590,593,595,598,600],{"class":584,"line":23},[357,496,497],[355,586,587],{"class":468},"        content",[355,589,456],{"class":472},[355,591,592],{"class":472}," [",[355,594,516],{"class":472},[355,596,597],{"class":364},"**\u002F*.vue",[355,599,516],{"class":472},[355,601,602],{"class":472},"],",[355,604,606,609,611],{"class":605,"line":140},[357,496,497],[355,607,608],{"class":468},"        output",[355,610,456],{"class":472},[355,612,473],{"class":472},[355,614,616,619,621,623,626,628],{"class":615,"line":56},[357,496,497],[355,617,618],{"class":468},"          path",[355,620,456],{"class":472},[355,622,486],{"class":472},[355,624,625],{"class":364},"dist\u002Femails",[355,627,516],{"class":472},[355,629,581],{"class":472},[355,631,633],{"class":632,"line":80},[357,496,497],[355,634,635],{"class":472},"        },",[355,637,639],{"class":638,"line":36},[357,496,497],[355,640,641],{"class":472},"      }),",[355,643,644],{"class":357,"line":73},[355,645,646],{"class":472},"    ]\n",[355,648,649],{"class":357,"line":132},[355,650,651],{"class":472},"  }\n",[355,653,654],{"class":357,"line":66},[355,655,656],{"class":472},"})\n",[326,658,659,660,663],{},"See ",[661,662,173],"a",{"href":172}," for all available options.",[374,665,667],{"id":666},"typescript","TypeScript",[326,669,670,671,674],{},"Add the Maizzle type declarations to your ",[330,672,673],{},"tsconfig.json",", these will be generated automatically when you run the dev server for the first time:",[346,676,680],{"className":677,"code":678,"filename":673,"language":679,"meta":351,"style":351},"language-json shiki shiki-themes laserwave has-diff","{\n  \"extends\": \"astro\u002Ftsconfigs\u002Fstrict\",\n  \"include\": [\n    \".astro\u002Ftypes.d.ts\",\n    \"**\u002F*\",\n    \"**\u002F.maizzle\u002F**\u002F*.d.ts\" \u002F\u002F [!code ++]\n  ],\n  \"exclude\": [\"dist\"]\n}\n","json",[330,681,682,687,711,724,736,747,757,762,785],{"__ignoreMap":351},[355,683,684],{"class":357,"line":18},[355,685,686],{"class":472},"{\n",[355,688,689,692,695,698,700,703,706,708],{"class":357,"line":13},[355,690,691],{"class":472},"  \"",[355,693,694],{"class":468},"extends",[355,696,697],{"class":472},"\"",[355,699,456],{"class":472},[355,701,702],{"class":472}," \"",[355,704,705],{"class":364},"astro\u002Ftsconfigs\u002Fstrict",[355,707,697],{"class":472},[355,709,710],{"class":472},",\n",[355,712,713,715,718,720,722],{"class":357,"line":32},[355,714,691],{"class":472},[355,716,717],{"class":468},"include",[355,719,697],{"class":472},[355,721,456],{"class":472},[355,723,554],{"class":472},[355,725,726,729,732,734],{"class":357,"line":27},[355,727,728],{"class":472},"    \"",[355,730,731],{"class":364},".astro\u002Ftypes.d.ts",[355,733,697],{"class":472},[355,735,710],{"class":472},[355,737,738,740,743,745],{"class":357,"line":52},[355,739,728],{"class":472},[355,741,742],{"class":364},"**\u002F*",[355,744,697],{"class":472},[355,746,710],{"class":472},[355,748,750,752,755],{"class":749,"line":128},[357,496,497],[355,751,728],{"class":472},[355,753,754],{"class":364},"**\u002F.maizzle\u002F**\u002F*.d.ts",[355,756,697],{"class":472},[355,758,759],{"class":357,"line":124},[355,760,761],{"class":472},"  ],\n",[355,763,764,766,769,771,773,775,777,780,782],{"class":357,"line":48},[355,765,691],{"class":472},[355,767,768],{"class":468},"exclude",[355,770,697],{"class":472},[355,772,456],{"class":472},[355,774,592],{"class":472},[355,776,697],{"class":472},[355,778,779],{"class":364},"dist",[355,781,697],{"class":472},[355,783,784],{"class":472},"]\n",[355,786,787],{"class":357,"line":23},[355,788,789],{"class":472},"}\n",[339,791,793],{"id":792},"usage","Usage",[326,795,796,797,799],{},"Create an email template in your ",[330,798,576],{}," directory:",[346,801,806],{"className":802,"code":803,"filename":804,"language":805,"meta":351,"style":351},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  const name = 'World'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading class=\"text-2xl\">Hello, {{ name }}!\u003C\u002FHeading>\n      \u003CButton\n        href=\"https:\u002F\u002Fexample.com\"\n        class=\"bg-slate-950 hover:bg-slate-800\"\n      >Get Started\u003C\u002FButton>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n","src\u002Femails\u002Fwelcome.vue","vue",[330,807,808,823,843,852,856,865,874,896,927,934,949,963,977,986,995],{"__ignoreMap":351},[355,809,810,813,817,820],{"class":357,"line":18},[355,811,812],{"class":472},"\u003C",[355,814,816],{"class":815},"sb4Pa","script",[355,818,819],{"class":360}," setup",[355,821,822],{"class":472},">\n",[355,824,825,829,833,836,838,841],{"class":357,"line":13},[355,826,828],{"class":827},"sIihq","  const",[355,830,832],{"class":831},"skd8d"," name",[355,834,835],{"class":815}," =",[355,837,486],{"class":472},[355,839,840],{"class":364},"World",[355,842,492],{"class":472},[355,844,845,848,850],{"class":357,"line":32},[355,846,847],{"class":472},"\u003C\u002F",[355,849,816],{"class":815},[355,851,822],{"class":472},[355,853,854],{"class":357,"line":27},[355,855,521],{"emptyLinePlaceholder":14},[355,857,858,860,863],{"class":357,"line":52},[355,859,812],{"class":472},[355,861,862],{"class":815},"template",[355,864,822],{"class":472},[355,866,867,870,872],{"class":357,"line":128},[355,868,869],{"class":472},"  \u003C",[355,871,76],{"class":815},[355,873,822],{"class":472},[355,875,876,879,881,884,887,889,892,894],{"class":357,"line":124},[355,877,878],{"class":472},"    \u003C",[355,880,51],{"class":815},[355,882,883],{"class":360}," class",[355,885,886],{"class":472},"=",[355,888,697],{"class":472},[355,890,891],{"class":364},"max-w-xl",[355,893,697],{"class":472},[355,895,822],{"class":472},[355,897,898,901,903,905,907,909,912,914,917,921,923,925],{"class":357,"line":48},[355,899,900],{"class":472},"      \u003C",[355,902,62],{"class":815},[355,904,883],{"class":360},[355,906,886],{"class":472},[355,908,697],{"class":472},[355,910,911],{"class":364},"text-2xl",[355,913,697],{"class":472},[355,915,916],{"class":472},">",[355,918,920],{"class":919},"sLaUg","Hello, {{ name }}!",[355,922,847],{"class":472},[355,924,62],{"class":815},[355,926,822],{"class":472},[355,928,929,931],{"class":357,"line":23},[355,930,900],{"class":472},[355,932,933],{"class":815},"Button\n",[355,935,936,939,941,943,946],{"class":357,"line":140},[355,937,938],{"class":360},"        href",[355,940,886],{"class":472},[355,942,697],{"class":472},[355,944,945],{"class":364},"https:\u002F\u002Fexample.com",[355,947,948],{"class":472},"\"\n",[355,950,951,954,956,958,961],{"class":357,"line":56},[355,952,953],{"class":360},"        class",[355,955,886],{"class":472},[355,957,697],{"class":472},[355,959,960],{"class":364},"bg-slate-950 hover:bg-slate-800",[355,962,948],{"class":472},[355,964,965,968,971,973,975],{"class":357,"line":80},[355,966,967],{"class":472},"      >",[355,969,970],{"class":919},"Get Started",[355,972,847],{"class":472},[355,974,35],{"class":815},[355,976,822],{"class":472},[355,978,979,982,984],{"class":357,"line":36},[355,980,981],{"class":472},"    \u003C\u002F",[355,983,51],{"class":815},[355,985,822],{"class":472},[355,987,988,991,993],{"class":357,"line":73},[355,989,990],{"class":472},"  \u003C\u002F",[355,992,76],{"class":815},[355,994,822],{"class":472},[355,996,997,999,1001],{"class":357,"line":132},[355,998,847],{"class":472},[355,1000,862],{"class":815},[355,1002,822],{"class":472},[374,1004,174],{"id":1005},"development",[326,1007,1008,1009,1011],{},"Run ",[330,1010,332],{}," as usual:",[346,1013,1015],{"className":348,"code":1014,"language":350,"meta":351,"style":351},"npm run dev\n",[330,1016,1017],{"__ignoreMap":351},[355,1018,1019,1021,1024],{"class":357,"line":18},[355,1020,361],{"class":360},[355,1022,1023],{"class":364}," run",[355,1025,1026],{"class":364}," dev\n",[1028,1029,1030,1038],"ul",{},[1031,1032,1033,1034,1037],"li",{},"Your Astro site runs on its default port (typically ",[330,1035,1036],{},"4321",")",[1031,1039,1040,1041,1037],{},"The Maizzle email preview UI runs on the port you configured (default ",[330,1042,1043],{},"3000",[326,1045,1046],{},"Changes to email templates are automatically reflected in the Maizzle preview UI.",[374,1048,1050],{"id":1049},"production-build","Production build",[326,1052,1053,1054,1056,1057,1060,1061,1063],{},"When you run ",[330,1055,336],{},", Maizzle compiles your email templates to static HTML files and outputs them to the configured ",[330,1058,1059],{},"output.path",", which in our example is ",[330,1062,625],{},".",[346,1065,1067],{"className":348,"code":1066,"language":350,"meta":351,"style":351},"npm run build\n",[330,1068,1069],{"__ignoreMap":351},[355,1070,1071,1073,1075],{"class":357,"line":18},[355,1072,361],{"class":360},[355,1074,1023],{"class":364},[355,1076,1077],{"class":364}," build\n",[339,1079,1081],{"id":1080},"server-api","Server API",[326,1083,1084,1085,1088],{},"You can render email templates on-demand using Maizzle's ",[330,1086,1087],{},"render"," function in an Astro server endpoint. This is useful when you need to render emails dynamically, for example with user data from a database.",[326,1090,1091],{},"Since Astro is a static site builder by default, you need to add a server adapter and opt out of prerendering for your API routes.",[326,1093,1094,1095,1102],{},"Install the Node adapter (or whichever ",[661,1096,1101],{"href":1097,"rel":1098,"target":1100},"https:\u002F\u002Fdocs.astro.build\u002Fen\u002Fguides\u002Fon-demand-rendering\u002F#server-adapters",[1099],"nofollow","_blank","adapter"," matches your deploy target):",[346,1104,1106],{"className":348,"code":1105,"language":350,"meta":351,"style":351},"npm install @astrojs\u002Fnode\n",[330,1107,1108],{"__ignoreMap":351},[355,1109,1110,1112,1114],{"class":357,"line":18},[355,1111,361],{"class":360},[355,1113,365],{"class":364},[355,1115,1116],{"class":364}," @astrojs\u002Fnode\n",[326,1118,1119,1120,456],{},"Then add it to your ",[330,1121,455],{},[346,1123,1125],{"className":459,"code":1124,"filename":455,"language":461,"meta":351,"style":351},"import { defineConfig } from 'astro\u002Fconfig'\nimport node from '@astrojs\u002Fnode' \u002F\u002F [!code ++]\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  adapter: node({ mode: 'standalone' }), \u002F\u002F [!code ++]\n  vite: {\n    plugins: [\n      maizzle({ \u002F* ... *\u002F }),\n    ]\n  }\n})\n",[330,1126,1127,1145,1162,1180,1184,1194,1221,1229,1237,1250,1254,1258],{"__ignoreMap":351},[355,1128,1129,1131,1133,1135,1137,1139,1141,1143],{"class":357,"line":18},[355,1130,469],{"class":468},[355,1132,473],{"class":472},[355,1134,477],{"class":476},[355,1136,480],{"class":472},[355,1138,483],{"class":468},[355,1140,486],{"class":472},[355,1142,489],{"class":364},[355,1144,492],{"class":472},[355,1146,1148,1150,1153,1155,1157,1160],{"class":1147,"line":13},[357,496,497],[355,1149,469],{"class":468},[355,1151,1152],{"class":476}," node",[355,1154,483],{"class":468},[355,1156,486],{"class":472},[355,1158,1159],{"class":364},"@astrojs\u002Fnode",[355,1161,516],{"class":472},[355,1163,1164,1166,1168,1170,1172,1174,1176,1178],{"class":357,"line":32},[355,1165,469],{"class":468},[355,1167,473],{"class":472},[355,1169,504],{"class":476},[355,1171,480],{"class":472},[355,1173,483],{"class":468},[355,1175,486],{"class":472},[355,1177,513],{"class":364},[355,1179,492],{"class":472},[355,1181,1182],{"class":357,"line":27},[355,1183,521],{"emptyLinePlaceholder":14},[355,1185,1186,1188,1190,1192],{"class":357,"line":52},[355,1187,526],{"class":468},[355,1189,529],{"class":468},[355,1191,477],{"class":360},[355,1193,534],{"class":472},[355,1195,1197,1200,1202,1204,1206,1209,1211,1213,1216,1218],{"class":1196,"line":128},[357,496,497],[355,1198,1199],{"class":468},"  adapter",[355,1201,456],{"class":472},[355,1203,1152],{"class":360},[355,1205,563],{"class":472},[355,1207,1208],{"class":468}," mode",[355,1210,456],{"class":472},[355,1212,486],{"class":472},[355,1214,1215],{"class":364},"standalone",[355,1217,516],{"class":472},[355,1219,1220],{"class":472}," }),",[355,1222,1223,1225,1227],{"class":357,"line":124},[355,1224,539],{"class":468},[355,1226,456],{"class":472},[355,1228,544],{"class":472},[355,1230,1231,1233,1235],{"class":357,"line":48},[355,1232,549],{"class":468},[355,1234,456],{"class":472},[355,1236,554],{"class":472},[355,1238,1239,1241,1243,1247],{"class":357,"line":23},[355,1240,560],{"class":360},[355,1242,563],{"class":472},[355,1244,1246],{"class":1245},"sVsQ9"," \u002F* ... *\u002F",[355,1248,1249],{"class":472}," }),\n",[355,1251,1252],{"class":357,"line":140},[355,1253,646],{"class":472},[355,1255,1256],{"class":357,"line":56},[355,1257,651],{"class":472},[355,1259,1260],{"class":357,"line":80},[355,1261,656],{"class":472},[374,1263,1265],{"id":1264},"api-route","API route",[326,1267,1268,1269,1272,1273,1276],{},"Create a ",[330,1270,1271],{},"src\u002Fpages\u002Fapi\u002Frender.ts"," server endpoint that reads and renders an email template. Use ",[330,1274,1275],{},"prerender = false"," to ensure the route is server-rendered:",[1278,1279,1280,1506],"code-tabs",{},[1281,1282,1284],"code-tab",{"label":1283},"File path",[346,1285,1289],{"className":1286,"code":1287,"filename":1271,"language":1288,"meta":351,"style":351},"language-ts shiki shiki-themes laserwave","import type { APIRoute } from 'astro'\nimport { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport const prerender = false\n\nexport const POST: APIRoute = async () => {\n  const { html } = await render(resolve('src\u002Femails\u002Fwelcome.vue'))\n\n  return new Response(JSON.stringify({ html }), {\n    headers: { 'Content-Type': 'application\u002Fjson' },\n  })\n}\n","ts",[330,1290,1291,1313,1333,1352,1356,1371,1375,1401,1436,1440,1469,1497,1502],{"__ignoreMap":351},[355,1292,1293,1295,1298,1300,1303,1305,1307,1309,1311],{"class":357,"line":18},[355,1294,469],{"class":468},[355,1296,1297],{"class":468}," type",[355,1299,473],{"class":472},[355,1301,1302],{"class":476}," APIRoute",[355,1304,480],{"class":472},[355,1306,483],{"class":468},[355,1308,486],{"class":472},[355,1310,324],{"class":364},[355,1312,492],{"class":472},[355,1314,1315,1317,1319,1322,1324,1326,1328,1331],{"class":357,"line":13},[355,1316,469],{"class":468},[355,1318,473],{"class":472},[355,1320,1321],{"class":476}," resolve",[355,1323,480],{"class":472},[355,1325,483],{"class":468},[355,1327,486],{"class":472},[355,1329,1330],{"class":364},"node:path",[355,1332,492],{"class":472},[355,1334,1335,1337,1339,1342,1344,1346,1348,1350],{"class":357,"line":32},[355,1336,469],{"class":468},[355,1338,473],{"class":472},[355,1340,1341],{"class":476}," render",[355,1343,480],{"class":472},[355,1345,483],{"class":468},[355,1347,486],{"class":472},[355,1349,513],{"class":364},[355,1351,492],{"class":472},[355,1353,1354],{"class":357,"line":27},[355,1355,521],{"emptyLinePlaceholder":14},[355,1357,1358,1360,1363,1366,1368],{"class":357,"line":52},[355,1359,526],{"class":468},[355,1361,1362],{"class":827}," const",[355,1364,1365],{"class":476}," prerender",[355,1367,835],{"class":815},[355,1369,1370],{"class":831}," false\n",[355,1372,1373],{"class":357,"line":128},[355,1374,521],{"emptyLinePlaceholder":14},[355,1376,1377,1379,1381,1384,1386,1388,1390,1393,1396,1399],{"class":357,"line":124},[355,1378,526],{"class":468},[355,1380,1362],{"class":827},[355,1382,1383],{"class":360}," POST",[355,1385,456],{"class":815},[355,1387,1302],{"class":815},[355,1389,835],{"class":815},[355,1391,1392],{"class":919}," async ",[355,1394,1395],{"class":472},"()",[355,1397,1398],{"class":815}," =>",[355,1400,544],{"class":472},[355,1402,1403,1405,1407,1410,1412,1414,1417,1419,1422,1425,1427,1429,1431,1433],{"class":357,"line":48},[355,1404,828],{"class":827},[355,1406,473],{"class":472},[355,1408,1409],{"class":476}," html",[355,1411,480],{"class":472},[355,1413,835],{"class":815},[355,1415,1416],{"class":468}," await",[355,1418,1341],{"class":360},[355,1420,1421],{"class":472},"(",[355,1423,1424],{"class":360},"resolve",[355,1426,1421],{"class":472},[355,1428,516],{"class":472},[355,1430,804],{"class":364},[355,1432,516],{"class":472},[355,1434,1435],{"class":472},"))\n",[355,1437,1438],{"class":357,"line":23},[355,1439,521],{"emptyLinePlaceholder":14},[355,1441,1442,1445,1448,1451,1453,1456,1458,1461,1463,1465,1467],{"class":357,"line":140},[355,1443,1444],{"class":468},"  return",[355,1446,1447],{"class":827}," new",[355,1449,1450],{"class":360}," Response",[355,1452,1421],{"class":472},[355,1454,1455],{"class":476},"JSON",[355,1457,1063],{"class":815},[355,1459,1460],{"class":360},"stringify",[355,1462,563],{"class":472},[355,1464,1409],{"class":476},[355,1466,1220],{"class":472},[355,1468,544],{"class":472},[355,1470,1471,1474,1476,1478,1480,1483,1485,1487,1489,1492,1494],{"class":357,"line":56},[355,1472,1473],{"class":919},"    headers",[355,1475,456],{"class":472},[355,1477,473],{"class":472},[355,1479,486],{"class":472},[355,1481,1482],{"class":364},"Content-Type",[355,1484,516],{"class":472},[355,1486,456],{"class":472},[355,1488,486],{"class":472},[355,1490,1491],{"class":364},"application\u002Fjson",[355,1493,516],{"class":472},[355,1495,1496],{"class":472}," },\n",[355,1498,1499],{"class":357,"line":80},[355,1500,1501],{"class":472},"  })\n",[355,1503,1504],{"class":357,"line":36},[355,1505,789],{"class":472},[1281,1507,1509],{"label":1508},"SFC string",[346,1510,1512],{"className":1286,"code":1511,"filename":1271,"language":1288,"meta":351,"style":351},"import type { APIRoute } from 'astro'\nimport { render } from '@maizzle\u002Fframework'\n\nexport const prerender = false\n\nexport const POST: APIRoute = async ({ request }) => {\n  const { template } = await request.json()\n\n  const { html } = await render(template)\n\n  return new Response(JSON.stringify({ html }), {\n    headers: { 'Content-Type': 'application\u002Fjson' },\n  })\n}\n",[330,1513,1514,1534,1552,1556,1568,1572,1600,1624,1628,1651,1655,1679,1703,1707],{"__ignoreMap":351},[355,1515,1516,1518,1520,1522,1524,1526,1528,1530,1532],{"class":357,"line":18},[355,1517,469],{"class":468},[355,1519,1297],{"class":468},[355,1521,473],{"class":472},[355,1523,1302],{"class":476},[355,1525,480],{"class":472},[355,1527,483],{"class":468},[355,1529,486],{"class":472},[355,1531,324],{"class":364},[355,1533,492],{"class":472},[355,1535,1536,1538,1540,1542,1544,1546,1548,1550],{"class":357,"line":13},[355,1537,469],{"class":468},[355,1539,473],{"class":472},[355,1541,1341],{"class":476},[355,1543,480],{"class":472},[355,1545,483],{"class":468},[355,1547,486],{"class":472},[355,1549,513],{"class":364},[355,1551,492],{"class":472},[355,1553,1554],{"class":357,"line":32},[355,1555,521],{"emptyLinePlaceholder":14},[355,1557,1558,1560,1562,1564,1566],{"class":357,"line":27},[355,1559,526],{"class":468},[355,1561,1362],{"class":827},[355,1563,1365],{"class":476},[355,1565,835],{"class":815},[355,1567,1370],{"class":831},[355,1569,1570],{"class":357,"line":52},[355,1571,521],{"emptyLinePlaceholder":14},[355,1573,1574,1576,1578,1580,1582,1584,1586,1588,1590,1593,1596,1598],{"class":357,"line":128},[355,1575,526],{"class":468},[355,1577,1362],{"class":827},[355,1579,1383],{"class":360},[355,1581,456],{"class":815},[355,1583,1302],{"class":815},[355,1585,835],{"class":815},[355,1587,1392],{"class":919},[355,1589,563],{"class":472},[355,1591,1592],{"class":476}," request",[355,1594,1595],{"class":472}," })",[355,1597,1398],{"class":815},[355,1599,544],{"class":472},[355,1601,1602,1604,1606,1609,1611,1613,1615,1617,1619,1621],{"class":357,"line":124},[355,1603,828],{"class":827},[355,1605,473],{"class":472},[355,1607,1608],{"class":476}," template",[355,1610,480],{"class":472},[355,1612,835],{"class":815},[355,1614,1416],{"class":468},[355,1616,1592],{"class":476},[355,1618,1063],{"class":815},[355,1620,679],{"class":360},[355,1622,1623],{"class":472},"()\n",[355,1625,1626],{"class":357,"line":48},[355,1627,521],{"emptyLinePlaceholder":14},[355,1629,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648],{"class":357,"line":23},[355,1631,828],{"class":827},[355,1633,473],{"class":472},[355,1635,1409],{"class":476},[355,1637,480],{"class":472},[355,1639,835],{"class":815},[355,1641,1416],{"class":468},[355,1643,1341],{"class":360},[355,1645,1421],{"class":472},[355,1647,862],{"class":476},[355,1649,1650],{"class":472},")\n",[355,1652,1653],{"class":357,"line":140},[355,1654,521],{"emptyLinePlaceholder":14},[355,1656,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677],{"class":357,"line":56},[355,1658,1444],{"class":468},[355,1660,1447],{"class":827},[355,1662,1450],{"class":360},[355,1664,1421],{"class":472},[355,1666,1455],{"class":476},[355,1668,1063],{"class":815},[355,1670,1460],{"class":360},[355,1672,563],{"class":472},[355,1674,1409],{"class":476},[355,1676,1220],{"class":472},[355,1678,544],{"class":472},[355,1680,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701],{"class":357,"line":80},[355,1682,1473],{"class":919},[355,1684,456],{"class":472},[355,1686,473],{"class":472},[355,1688,486],{"class":472},[355,1690,1482],{"class":364},[355,1692,516],{"class":472},[355,1694,456],{"class":472},[355,1696,486],{"class":472},[355,1698,1491],{"class":364},[355,1700,516],{"class":472},[355,1702,1496],{"class":472},[355,1704,1705],{"class":357,"line":36},[355,1706,1501],{"class":472},[355,1708,1709],{"class":357,"line":73},[355,1710,789],{"class":472},[374,1712,1714],{"id":1713},"displaying-the-result","Displaying the result",[326,1716,1717],{},"Display it on a page:",[346,1719,1724],{"className":1720,"code":1721,"filename":1722,"language":1723,"meta":351,"style":351},"language-html shiki shiki-themes laserwave","\u003Ciframe id=\"preview\" style=\"width: 100%; height: 100vh; border: none;\">\u003C\u002Fiframe>\n\n\u003Cscript>\n  const res = await fetch('\u002Fapi\u002Frender', { method: 'POST' })\n  const { html } = await res.json()\n  document.getElementById('preview').srcdoc = html\n\u003C\u002Fscript>\n","pages\u002Fpreview.astro","html",[330,1725,1726,1764,1768,1776,1818,1840,1869],{"__ignoreMap":351},[355,1727,1728,1730,1733,1736,1738,1740,1743,1745,1748,1750,1752,1755,1757,1760,1762],{"class":357,"line":18},[355,1729,812],{"class":472},[355,1731,1732],{"class":815},"iframe",[355,1734,1735],{"class":360}," id",[355,1737,886],{"class":472},[355,1739,697],{"class":472},[355,1741,1742],{"class":364},"preview",[355,1744,697],{"class":472},[355,1746,1747],{"class":360}," style",[355,1749,886],{"class":472},[355,1751,697],{"class":472},[355,1753,1754],{"class":364},"width: 100%; height: 100vh; border: none;",[355,1756,697],{"class":472},[355,1758,1759],{"class":472},">\u003C\u002F",[355,1761,1732],{"class":815},[355,1763,822],{"class":472},[355,1765,1766],{"class":357,"line":13},[355,1767,521],{"emptyLinePlaceholder":14},[355,1769,1770,1772,1774],{"class":357,"line":32},[355,1771,812],{"class":472},[355,1773,816],{"class":815},[355,1775,822],{"class":472},[355,1777,1778,1780,1783,1785,1787,1790,1792,1794,1797,1799,1801,1803,1806,1808,1810,1813,1815],{"class":357,"line":27},[355,1779,828],{"class":827},[355,1781,1782],{"class":831}," res",[355,1784,835],{"class":815},[355,1786,1416],{"class":468},[355,1788,1789],{"class":360}," fetch",[355,1791,1421],{"class":472},[355,1793,516],{"class":472},[355,1795,1796],{"class":364},"\u002Fapi\u002Frender",[355,1798,516],{"class":472},[355,1800,581],{"class":472},[355,1802,473],{"class":472},[355,1804,1805],{"class":468}," method",[355,1807,456],{"class":472},[355,1809,486],{"class":472},[355,1811,1812],{"class":364},"POST",[355,1814,516],{"class":472},[355,1816,1817],{"class":472}," })\n",[355,1819,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838],{"class":357,"line":52},[355,1821,828],{"class":827},[355,1823,473],{"class":472},[355,1825,1409],{"class":831},[355,1827,480],{"class":472},[355,1829,835],{"class":815},[355,1831,1416],{"class":468},[355,1833,1782],{"class":476},[355,1835,1063],{"class":472},[355,1837,679],{"class":360},[355,1839,1623],{"class":472},[355,1841,1842,1845,1847,1850,1852,1854,1856,1858,1861,1864,1866],{"class":357,"line":128},[355,1843,1844],{"class":476},"  document",[355,1846,1063],{"class":472},[355,1848,1849],{"class":360},"getElementById",[355,1851,1421],{"class":472},[355,1853,516],{"class":472},[355,1855,1742],{"class":364},[355,1857,516],{"class":472},[355,1859,1860],{"class":472},").",[355,1862,1863],{"class":468},"srcdoc",[355,1865,835],{"class":815},[355,1867,1868],{"class":476}," html\n",[355,1870,1871,1873,1875],{"class":357,"line":124},[355,1872,847],{"class":472},[355,1874,816],{"class":815},[355,1876,822],{"class":472},[374,1878,1880],{"id":1879},"sending-emails","Sending emails",[326,1882,1883],{},"You can use the rendered HTML to send emails directly from a server endpoint. Here's an example using Nodemailer:",[346,1885,1888],{"className":1286,"code":1886,"filename":1887,"language":1288,"meta":351,"style":351},"import type { APIRoute } from 'astro'\nimport { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport { createTransport } from 'nodemailer'\n\nexport const prerender = false\n\nconst transporter = createTransport({\n  host: 'smtp.example.com',\n  port: 587,\n  auth: {\n    user: import.meta.env.SMTP_USER,\n    pass: import.meta.env.SMTP_PASS,\n  },\n})\n\nexport const POST: APIRoute = async ({ request }) => {\n  const { to } = await request.json()\n\n  const { html } = await render(resolve('src\u002Femails\u002Fwelcome.vue'))\n\n  await transporter.sendMail({\n    from: 'no-reply@example.com',\n    to,\n    subject: 'Welcome!',\n    html,\n  })\n\n  return new Response(JSON.stringify({ success: true }), {\n    headers: { 'Content-Type': 'application\u002Fjson' },\n  })\n}\n","src\u002Fpages\u002Fapi\u002Fsend.ts",[330,1889,1890,1910,1928,1946,1966,1970,1982,1986,2000,2016,2029,2038,2065,2089,2094,2098,2102,2128,2151,2155,2185,2189,2203,2219,2226,2243,2250,2254,2258,2288,2312,2316],{"__ignoreMap":351},[355,1891,1892,1894,1896,1898,1900,1902,1904,1906,1908],{"class":357,"line":18},[355,1893,469],{"class":468},[355,1895,1297],{"class":468},[355,1897,473],{"class":472},[355,1899,1302],{"class":476},[355,1901,480],{"class":472},[355,1903,483],{"class":468},[355,1905,486],{"class":472},[355,1907,324],{"class":364},[355,1909,492],{"class":472},[355,1911,1912,1914,1916,1918,1920,1922,1924,1926],{"class":357,"line":13},[355,1913,469],{"class":468},[355,1915,473],{"class":472},[355,1917,1321],{"class":476},[355,1919,480],{"class":472},[355,1921,483],{"class":468},[355,1923,486],{"class":472},[355,1925,1330],{"class":364},[355,1927,492],{"class":472},[355,1929,1930,1932,1934,1936,1938,1940,1942,1944],{"class":357,"line":32},[355,1931,469],{"class":468},[355,1933,473],{"class":472},[355,1935,1341],{"class":476},[355,1937,480],{"class":472},[355,1939,483],{"class":468},[355,1941,486],{"class":472},[355,1943,513],{"class":364},[355,1945,492],{"class":472},[355,1947,1948,1950,1952,1955,1957,1959,1961,1964],{"class":357,"line":27},[355,1949,469],{"class":468},[355,1951,473],{"class":472},[355,1953,1954],{"class":476}," createTransport",[355,1956,480],{"class":472},[355,1958,483],{"class":468},[355,1960,486],{"class":472},[355,1962,1963],{"class":364},"nodemailer",[355,1965,492],{"class":472},[355,1967,1968],{"class":357,"line":52},[355,1969,521],{"emptyLinePlaceholder":14},[355,1971,1972,1974,1976,1978,1980],{"class":357,"line":128},[355,1973,526],{"class":468},[355,1975,1362],{"class":827},[355,1977,1365],{"class":476},[355,1979,835],{"class":815},[355,1981,1370],{"class":831},[355,1983,1984],{"class":357,"line":124},[355,1985,521],{"emptyLinePlaceholder":14},[355,1987,1988,1991,1994,1996,1998],{"class":357,"line":48},[355,1989,1990],{"class":827},"const",[355,1992,1993],{"class":476}," transporter",[355,1995,835],{"class":815},[355,1997,1954],{"class":360},[355,1999,534],{"class":472},[355,2001,2002,2005,2007,2009,2012,2014],{"class":357,"line":23},[355,2003,2004],{"class":919},"  host",[355,2006,456],{"class":472},[355,2008,486],{"class":472},[355,2010,2011],{"class":364},"smtp.example.com",[355,2013,516],{"class":472},[355,2015,710],{"class":472},[355,2017,2018,2021,2023,2027],{"class":357,"line":140},[355,2019,2020],{"class":919},"  port",[355,2022,456],{"class":472},[355,2024,2026],{"class":2025},"s0EtI"," 587",[355,2028,710],{"class":472},[355,2030,2031,2034,2036],{"class":357,"line":56},[355,2032,2033],{"class":919},"  auth",[355,2035,456],{"class":472},[355,2037,544],{"class":472},[355,2039,2040,2043,2045,2048,2050,2053,2055,2058,2060,2063],{"class":357,"line":80},[355,2041,2042],{"class":919},"    user",[355,2044,456],{"class":472},[355,2046,2047],{"class":468}," import",[355,2049,1063],{"class":815},[355,2051,2052],{"class":919},"meta",[355,2054,1063],{"class":815},[355,2056,2057],{"class":476},"env",[355,2059,1063],{"class":815},[355,2061,2062],{"class":476},"SMTP_USER",[355,2064,710],{"class":472},[355,2066,2067,2070,2072,2074,2076,2078,2080,2082,2084,2087],{"class":357,"line":36},[355,2068,2069],{"class":919},"    pass",[355,2071,456],{"class":472},[355,2073,2047],{"class":468},[355,2075,1063],{"class":815},[355,2077,2052],{"class":919},[355,2079,1063],{"class":815},[355,2081,2057],{"class":476},[355,2083,1063],{"class":815},[355,2085,2086],{"class":476},"SMTP_PASS",[355,2088,710],{"class":472},[355,2090,2091],{"class":357,"line":73},[355,2092,2093],{"class":472},"  },\n",[355,2095,2096],{"class":357,"line":132},[355,2097,656],{"class":472},[355,2099,2100],{"class":357,"line":66},[355,2101,521],{"emptyLinePlaceholder":14},[355,2103,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126],{"class":357,"line":112},[355,2105,526],{"class":468},[355,2107,1362],{"class":827},[355,2109,1383],{"class":360},[355,2111,456],{"class":815},[355,2113,1302],{"class":815},[355,2115,835],{"class":815},[355,2117,1392],{"class":919},[355,2119,563],{"class":472},[355,2121,1592],{"class":476},[355,2123,1595],{"class":472},[355,2125,1398],{"class":815},[355,2127,544],{"class":472},[355,2129,2130,2132,2134,2137,2139,2141,2143,2145,2147,2149],{"class":357,"line":40},[355,2131,828],{"class":827},[355,2133,473],{"class":472},[355,2135,2136],{"class":476}," to",[355,2138,480],{"class":472},[355,2140,835],{"class":815},[355,2142,1416],{"class":468},[355,2144,1592],{"class":476},[355,2146,1063],{"class":815},[355,2148,679],{"class":360},[355,2150,1623],{"class":472},[355,2152,2153],{"class":357,"line":44},[355,2154,521],{"emptyLinePlaceholder":14},[355,2156,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181,2183],{"class":357,"line":84},[355,2158,828],{"class":827},[355,2160,473],{"class":472},[355,2162,1409],{"class":476},[355,2164,480],{"class":472},[355,2166,835],{"class":815},[355,2168,1416],{"class":468},[355,2170,1341],{"class":360},[355,2172,1421],{"class":472},[355,2174,1424],{"class":360},[355,2176,1421],{"class":472},[355,2178,516],{"class":472},[355,2180,804],{"class":364},[355,2182,516],{"class":472},[355,2184,1435],{"class":472},[355,2186,2187],{"class":357,"line":96},[355,2188,521],{"emptyLinePlaceholder":14},[355,2190,2191,2194,2196,2198,2201],{"class":357,"line":88},[355,2192,2193],{"class":468},"  await",[355,2195,1993],{"class":476},[355,2197,1063],{"class":815},[355,2199,2200],{"class":360},"sendMail",[355,2202,534],{"class":472},[355,2204,2205,2208,2210,2212,2215,2217],{"class":357,"line":100},[355,2206,2207],{"class":919},"    from",[355,2209,456],{"class":472},[355,2211,486],{"class":472},[355,2213,2214],{"class":364},"no-reply@example.com",[355,2216,516],{"class":472},[355,2218,710],{"class":472},[355,2220,2221,2224],{"class":357,"line":144},[355,2222,2223],{"class":476},"    to",[355,2225,710],{"class":472},[355,2227,2229,2232,2234,2236,2239,2241],{"class":357,"line":2228},25,[355,2230,2231],{"class":919},"    subject",[355,2233,456],{"class":472},[355,2235,486],{"class":472},[355,2237,2238],{"class":364},"Welcome!",[355,2240,516],{"class":472},[355,2242,710],{"class":472},[355,2244,2245,2248],{"class":357,"line":92},[355,2246,2247],{"class":476},"    html",[355,2249,710],{"class":472},[355,2251,2252],{"class":357,"line":148},[355,2253,1501],{"class":472},[355,2255,2256],{"class":357,"line":120},[355,2257,521],{"emptyLinePlaceholder":14},[355,2259,2260,2262,2264,2266,2268,2270,2272,2274,2276,2279,2281,2284,2286],{"class":357,"line":136},[355,2261,1444],{"class":468},[355,2263,1447],{"class":827},[355,2265,1450],{"class":360},[355,2267,1421],{"class":472},[355,2269,1455],{"class":476},[355,2271,1063],{"class":815},[355,2273,1460],{"class":360},[355,2275,563],{"class":472},[355,2277,2278],{"class":919}," success",[355,2280,456],{"class":472},[355,2282,2283],{"class":831}," true",[355,2285,1220],{"class":472},[355,2287,544],{"class":472},[355,2289,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310],{"class":357,"line":116},[355,2291,1473],{"class":919},[355,2293,456],{"class":472},[355,2295,473],{"class":472},[355,2297,486],{"class":472},[355,2299,1482],{"class":364},[355,2301,516],{"class":472},[355,2303,456],{"class":472},[355,2305,486],{"class":472},[355,2307,1491],{"class":364},[355,2309,516],{"class":472},[355,2311,1496],{"class":472},[355,2313,2314],{"class":357,"line":108},[355,2315,1501],{"class":472},[355,2317,2319],{"class":357,"line":2318},32,[355,2320,789],{"class":472},[339,2322,2324],{"id":2323},"static-assets","Static assets",[326,2326,2327,2328,2331],{},"To include images or other static files with your emails, configure the ",[330,2329,2330],{},"static"," option:",[346,2333,2335],{"className":459,"code":2334,"filename":455,"language":461,"meta":351,"style":351},"import { defineConfig } from 'astro\u002Fconfig'\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  vite: {\n    plugins: [\n      maizzle({\n        content: ['.\u002Fsrc\u002Femails\u002F**\u002F*.vue'],\n        output: {\n          path: 'dist\u002Femails',\n        },\n        static: { \u002F\u002F [!code ++]\n          source: ['src\u002Femails\u002Fimages'], \u002F\u002F [!code ++]\n        }, \u002F\u002F [!code ++]\n      }),\n    ]\n  }\n})\n",[330,2336,2337,2355,2373,2377,2387,2395,2403,2409,2427,2435,2449,2454,2464,2483,2488,2493,2497,2501],{"__ignoreMap":351},[355,2338,2339,2341,2343,2345,2347,2349,2351,2353],{"class":357,"line":18},[355,2340,469],{"class":468},[355,2342,473],{"class":472},[355,2344,477],{"class":476},[355,2346,480],{"class":472},[355,2348,483],{"class":468},[355,2350,486],{"class":472},[355,2352,489],{"class":364},[355,2354,492],{"class":472},[355,2356,2357,2359,2361,2363,2365,2367,2369,2371],{"class":357,"line":13},[355,2358,469],{"class":468},[355,2360,473],{"class":472},[355,2362,504],{"class":476},[355,2364,480],{"class":472},[355,2366,483],{"class":468},[355,2368,486],{"class":472},[355,2370,513],{"class":364},[355,2372,492],{"class":472},[355,2374,2375],{"class":357,"line":32},[355,2376,521],{"emptyLinePlaceholder":14},[355,2378,2379,2381,2383,2385],{"class":357,"line":27},[355,2380,526],{"class":468},[355,2382,529],{"class":468},[355,2384,477],{"class":360},[355,2386,534],{"class":472},[355,2388,2389,2391,2393],{"class":357,"line":52},[355,2390,539],{"class":468},[355,2392,456],{"class":472},[355,2394,544],{"class":472},[355,2396,2397,2399,2401],{"class":357,"line":128},[355,2398,549],{"class":468},[355,2400,456],{"class":472},[355,2402,554],{"class":472},[355,2404,2405,2407],{"class":357,"line":124},[355,2406,560],{"class":360},[355,2408,534],{"class":472},[355,2410,2411,2413,2415,2417,2419,2422,2424],{"class":357,"line":48},[355,2412,587],{"class":468},[355,2414,456],{"class":472},[355,2416,592],{"class":472},[355,2418,516],{"class":472},[355,2420,2421],{"class":364},".\u002Fsrc\u002Femails\u002F**\u002F*.vue",[355,2423,516],{"class":472},[355,2425,2426],{"class":472},"],\n",[355,2428,2429,2431,2433],{"class":357,"line":23},[355,2430,608],{"class":468},[355,2432,456],{"class":472},[355,2434,544],{"class":472},[355,2436,2437,2439,2441,2443,2445,2447],{"class":357,"line":140},[355,2438,618],{"class":468},[355,2440,456],{"class":472},[355,2442,486],{"class":472},[355,2444,625],{"class":364},[355,2446,516],{"class":472},[355,2448,710],{"class":472},[355,2450,2451],{"class":357,"line":56},[355,2452,2453],{"class":472},"        },\n",[355,2455,2457,2460,2462],{"class":2456,"line":80},[357,496,497],[355,2458,2459],{"class":468},"        static",[355,2461,456],{"class":472},[355,2463,473],{"class":472},[355,2465,2467,2470,2472,2474,2476,2479,2481],{"class":2466,"line":36},[357,496,497],[355,2468,2469],{"class":468},"          source",[355,2471,456],{"class":472},[355,2473,592],{"class":472},[355,2475,516],{"class":472},[355,2477,2478],{"class":364},"src\u002Femails\u002Fimages",[355,2480,516],{"class":472},[355,2482,602],{"class":472},[355,2484,2486],{"class":2485,"line":73},[357,496,497],[355,2487,635],{"class":472},[355,2489,2490],{"class":357,"line":132},[355,2491,2492],{"class":472},"      }),\n",[355,2494,2495],{"class":357,"line":66},[355,2496,646],{"class":472},[355,2498,2499],{"class":357,"line":112},[355,2500,651],{"class":472},[355,2502,2503],{"class":357,"line":40},[355,2504,656],{"class":472},[326,2506,2507],{},"Static files are copied to the output directory during production builds.",[339,2509,2511],{"id":2510},"other-frameworks","Other frameworks",[326,2513,2514],{},"Not using Astro? Check out the other framework guides:",[2516,2517],"framework-guides",{":exclude":324},[2519,2520,2521],"style",{},"html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}",{"title":351,"searchDepth":13,"depth":13,"links":2523},[2524,2525,2530,2534,2539,2540],{"id":341,"depth":13,"text":227},{"id":371,"depth":13,"text":372,"children":2526},[2527,2528,2529],{"id":376,"depth":32,"text":377},{"id":448,"depth":32,"text":449},{"id":666,"depth":32,"text":667},{"id":792,"depth":13,"text":793,"children":2531},[2532,2533],{"id":1005,"depth":32,"text":174},{"id":1049,"depth":32,"text":1050},{"id":1080,"depth":13,"text":1081,"children":2535},[2536,2537,2538],{"id":1264,"depth":32,"text":1265},{"id":1713,"depth":32,"text":1714},{"id":1879,"depth":32,"text":1880},{"id":2323,"depth":13,"text":2324},{"id":2510,"depth":13,"text":2511},"How to use Maizzle with Astro to build email templates alongside your web application.","md",{},{"title":203,"description":2541},"docs\u002Finstallation\u002Fframeworks\u002Fastro","rS49Wr7hhg2GGslnsT60aPa0sB8sscjHV3kJsVfslKs",1781015475524]