[{"data":1,"prerenderedAt":11886},["ShallowReactive",2],{"features-collection":3,"guides-collection":103,"code-config":11365,"code-environment":11521,"code-template":11676},[4],{"id":5,"extension":6,"items":7,"meta":100,"stem":101,"__hash__":102},"features/data/features.json","json",[8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96],{"title":9,"path":10,"description":11},"Tailwind CSS","/docs/tailwindcss","Quickly style HTML emails with CSS utility classes. Move faster by avoiding context switching and never leaving your HTML.",{"title":13,"path":14,"description":15},"Starters","/starters","Free, open source Tailwind CSS email templates built with Maizzle. Simply clone a repository and start building your emails.",{"title":17,"path":18,"description":19},"BYOHTML™","/docs/introduction#byohtml","Write your own HTML markup and style it with Tailwind CSS. You don't have to learn custom tags or attributes.",{"title":21,"path":22,"description":23},"Build Environments","/docs/environments","Distinct configurations for any number of build scenarios, from local development to production-ready email templates.",{"title":25,"path":26,"description":27},"Transformers","/docs/transformers","HTML email-specific optimizations, customizable globally or for each template through Front Matter.",{"title":29,"path":30,"description":31},"Events","/docs/events","Run your own JavaScript code at key steps in the build process, for even greater customization and control.",{"title":33,"path":34,"description":35},"Dev Server","/docs/configuration/server","Develop locally with a live preview server that updates super fast as you make changes to your emails.",{"title":37,"path":38,"description":39},"Configured in JavaScript","/docs/introduction#configure-it-out","Maizzle is configured in JavaScript, so you can even \u003Ccode class=\"bg-slate-50 px-1.5 py-0.5 border border-slate-200 rounded-md text-sm\">import()\u003C/code> packages or fetch template data from an API.",{"title":41,"path":42,"description":43},"Powerful Templating","/docs/templates","Maizzle uses PostHTML enhanced with custom plugins, giving you powerful templating tools.",{"title":45,"path":46,"description":47},"Markdown","/docs/markdown","You can use GitHub Flavored Markdown in your templates. And it's fully configurable, even through Front Matter.",{"title":49,"path":50,"description":51},"CLI Tool","/docs/cli","Quickly scaffold a new project from any Maizzle Starter, develop locally, and then build your emails for production.",{"title":53,"path":54,"description":55},"APIs","/docs/api","Use Maizzle or its Transformers in your application and compile or process your HTML emails.",{"title":57,"path":58,"description":59},"Front Matter","/docs/templates#front-matter","Define custom data or override any configuration options right from a template, with Front Matter variables.",{"title":61,"path":62,"description":63},"CSS Inlining","/docs/transformers/inline-css","Automatic, configurable, email-optimized CSS inlining. Enabled by default when building for production.",{"title":65,"path":66,"description":67},"Minify","/docs/transformers/minify","Email-safe code minification that can help make your production HTML emails weigh less and avoid clipping.",{"title":69,"path":70,"description":71},"Prettify","/docs/transformers/prettify","Need to send an HTML email to a human for review? Maizzle can pretty-print the markup, making it more readable.",{"title":73,"path":74,"description":75},"Uglify Classes","/docs/transformers/purge-css#uglify","Rewrite CSS class names to be as short as possible, so your production emails are even lighter!",{"title":77,"path":78,"description":79},"CDN friendly","/docs/transformers/base-url","Already using a \u003Cabbr title=\"Content Delivery Network\">CDN\u003C/abbr>? Define a base path or URL and Maizzle will prepend it to your media sources.",{"title":81,"path":82,"description":83},"URL Parameters","/docs/transformers/url-parameters","Use Front Matter to add URL parameters to links in your templates - they will all be appended automatically.",{"title":85,"path":86,"description":87},"Custom Fonts","/docs/examples/google-fonts","Easily pull in Google Fonts or any other custom web fonts, then use them through Tailwind CSS utility classes.",{"title":89,"path":90,"description":91},"Plaintext Versions","/docs/plaintext","Optionally generate optimized plaintext versions from your HTML emails. Or have your \u003Cabbr title=\"Email Service Provider\">ESP\u003C/abbr> do it. Your call.",{"title":93,"path":94,"description":95},"Build System","/docs/introduction#build-system","Simple and fast Node.js build system that takes care of all the transformations necessary for HTML emails.",{"title":97,"path":98,"description":99},"⚡4email","/guides/amp-email","Code interactive AMP emails, with realtime information and inline actions. Use our AMP Starter or code your own.",{},"data/features","fv4IlTZyrIiwm0jYWZagnxgIVeR0fCw9d29e-j6i7bo",[104,3602,6534,7531,8723,10374],{"id":105,"title":106,"body":107,"date":3593,"description":3594,"extension":3595,"meta":3596,"navigation":395,"path":3597,"seo":3598,"sitemap":3599,"stem":3600,"__hash__":3601},"guides/guides/mailchimp-package.md","Automating Mailchimp template zip packaging with Maizzle",{"type":108,"value":109,"toc":3579},"minimark",[110,114,118,121,129,139,144,147,150,193,196,256,260,263,278,285,288,291,296,303,351,354,358,365,372,804,821,825,828,831,844,851,1003,1018,1022,1025,1030,2128,2131,2173,2177,2186,2189,2207,2211,2222,2227,2492,2496,2499,2506,2510,3469,3473,3483,3486,3550,3556,3560,3575],[111,112,106],"h1",{"id":113},"automating-mailchimp-template-zip-packaging-with-maizzle",[115,116,117],"p",{},"If you've ever built custom email templates to be used in Mailchimp, you know that one way to upload them to a campaign is to create a .zip archive that includes the HTML file and all its images.",[115,119,120],{},"And if you've done this for many templates, you also know that it can be a tedious process.",[115,122,123,124,128],{},"In this guide, you'll learn how to use Maizzle's ",[125,126,127],"a",{"href":30},"events"," to automatically package your templates and their images into a zip archive that can be uploaded to Mailchimp.",[115,130,131,132,138],{},"If you want to dive right in, check out the ",[125,133,137],{"href":134,"rel":135},"https://github.com/maizzle/starter-mailchimp",[136],"nofollow","Mailchimp Starter",".",[140,141,143],"h2",{"id":142},"requirements","Requirements",[115,145,146],{},"Mailchimp requires that the zip archive contains the HTML file and all its images in the same folder.",[115,148,149],{},"For example:",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-html shiki shiki-themes tailwind-css tailwind-css","template.zip\n├── index.html\n├── image1.jpg\n├── image2.jpg\n└── image3.jpg\n","html","",[158,159,160,169,175,181,187],"code",{"__ignoreMap":156},[161,162,165],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sfCc6","template.zip\n",[161,170,172],{"class":163,"line":171},2,[161,173,174],{"class":167},"├── index.html\n",[161,176,178],{"class":163,"line":177},3,[161,179,180],{"class":167},"├── image1.jpg\n",[161,182,184],{"class":163,"line":183},4,[161,185,186],{"class":167},"├── image2.jpg\n",[161,188,190],{"class":163,"line":189},5,[161,191,192],{"class":167},"└── image3.jpg\n",[115,194,195],{},"With this in mind, we must also make sure that the images are referenced correctly in the HTML file. In order for an image to be uploaded to Mailchimp's servers, it must be referenced using a relative path:",[151,197,201],{"className":198,"code":199,"highlights":200,"language":155,"meta":156,"style":156},"language-html shiki shiki-themes tailwind-css tailwind-css has-diff","  \u003Cimg src=\"https://some-cdn.com/image1.jpg\"> \u003C!-- [!code --] -->\n  \u003Cimg src=\"image1.jpg\"> \u003C!-- [!code ++] -->\n",[171],[158,202,203,234],{"__ignoreMap":156},[161,204,208,212,216,220,223,226,229,231],{"class":205,"line":164},[163,206,207],"diff","remove",[161,209,211],{"class":210},"soJEP","  \u003C",[161,213,215],{"class":214},"sizJ4","img",[161,217,219],{"class":218},"sQMLp"," src",[161,221,222],{"class":210},"=",[161,224,225],{"class":218},"\"",[161,227,228],{"class":167},"https://some-cdn.com/image1.jpg",[161,230,225],{"class":218},[161,232,233],{"class":210},">",[161,235,239,241,243,245,247,249,252,254],{"class":236,"line":171},[163,237,206,238],"highlight","add",[161,240,211],{"class":210},[161,242,215],{"class":214},[161,244,219],{"class":218},[161,246,222],{"class":210},[161,248,225],{"class":218},[161,250,251],{"class":167},"image1.jpg",[161,253,225],{"class":218},[161,255,233],{"class":210},[140,257,259],{"id":258},"project-setup","Project setup",[115,261,262],{},"We're starting from scratch, so let's scaffold a new project using the Official Starter:",[151,264,268],{"className":265,"code":266,"language":267,"meta":156,"style":156},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh",[158,269,270],{"__ignoreMap":156},[161,271,272,275],{"class":163,"line":164},[161,273,274],{"class":214},"npx",[161,276,277],{"class":167}," create-maizzle\n",[115,279,280,281,284],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[158,282,283],{},"./mailchimp-project",", and select the Default Starter.",[115,286,287],{},"Choose Yes when prompted to Install dependencies.",[115,289,290],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[292,293,295],"h3",{"id":294},"structure","Structure",[115,297,298,299,302],{},"We'll be organizing our templates into folders inside ",[158,300,301],{},"templates",":",[151,304,306],{"className":153,"code":305,"language":155,"meta":156,"style":156},"src\n└── templates\n    └── template-1\n        ├── index.html\n        ├── image1.jpg\n        ├── image2.jpg\n        └── image3.jpg\n    └── ...\n",[158,307,308,313,318,323,328,333,339,345],{"__ignoreMap":156},[161,309,310],{"class":163,"line":164},[161,311,312],{"class":167},"src\n",[161,314,315],{"class":163,"line":171},[161,316,317],{"class":167},"└── templates\n",[161,319,320],{"class":163,"line":177},[161,321,322],{"class":167},"    └── template-1\n",[161,324,325],{"class":163,"line":183},[161,326,327],{"class":167},"        ├── index.html\n",[161,329,330],{"class":163,"line":189},[161,331,332],{"class":167},"        ├── image1.jpg\n",[161,334,336],{"class":163,"line":335},6,[161,337,338],{"class":167},"        ├── image2.jpg\n",[161,340,342],{"class":163,"line":341},7,[161,343,344],{"class":167},"        └── image3.jpg\n",[161,346,348],{"class":163,"line":347},8,[161,349,350],{"class":167},"    └── ...\n",[115,352,353],{},"This will not only make it easier to create the .zip archive, but this way we can also easily add and reference images in the HTML.",[140,355,357],{"id":356},"create-a-template","Create a template",[115,359,360,361,364],{},"For this written guide, we'll be using a simplified template with a few images. See the ",[125,362,137],{"href":134,"rel":363},[136]," for a more extensive example.",[115,366,367,368,371],{},"Create ",[158,369,370],{},"emails/template-1/index.html"," and paste in the following code:",[151,373,375],{"className":153,"code":374,"filename":370,"language":155,"meta":156,"style":156},"---\ntitle: \"Example template 1\"\n---\n\n\u003Cx-main>\n  \u003C!-- Condition needed in order to see global images when developing locally -->\n  \u003Cif condition=\"page.env === 'local'\">\n    \u003Cimg src=\"/images/insignia.png\" width=\"70\" alt=\"Maizzle\">\n  \u003C/if>\n  \u003Celse>\n    \u003Cimg src=\"insignia.png\" width=\"70\" alt=\"Maizzle\">\n  \u003C/else>\n\n  \u003Ch1>\n    Hello,\n  \u003C/h1>\n\n  \u003Cp>\n    As you might know, lorem ipsum dolor sit amet...\n  \u003C/p>\n\n  \u003Cdiv>\n    \u003Cimg src=\"maizzle.png\" width=\"456\" alt=\"Maizzle cover image\">\n  \u003C/div>\n\n  \u003Cp>\n    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat.\n  \u003C/p>\n\n  \u003Cdiv>\n    \u003Cimg src=\"tailwindcss.jpg\" width=\"456\" alt=\"Tailwind CSS cover image\">\n  \u003C/div>\n\n  \u003Cp>\n    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat, suscipit sapiente non minus necessitatibus vero hic.\n  \u003C/p>\n\u003C/x-main>\n",[158,376,377,382,387,391,397,408,414,435,479,489,499,539,548,553,562,568,577,582,591,597,606,611,621,663,672,677,686,692,701,706,715,756,765,770,779,785,794],{"__ignoreMap":156},[161,378,379],{"class":163,"line":164},[161,380,381],{"class":167},"---\n",[161,383,384],{"class":163,"line":171},[161,385,386],{"class":167},"title: \"Example template 1\"\n",[161,388,389],{"class":163,"line":177},[161,390,381],{"class":167},[161,392,393],{"class":163,"line":183},[161,394,396],{"emptyLinePlaceholder":395},true,"\n",[161,398,399,402,405],{"class":163,"line":189},[161,400,401],{"class":210},"\u003C",[161,403,404],{"class":214},"x-main",[161,406,407],{"class":210},">\n",[161,409,410],{"class":163,"line":335},[161,411,413],{"class":412},"smVoC","  \u003C!-- Condition needed in order to see global images when developing locally -->\n",[161,415,416,418,421,424,426,428,431,433],{"class":163,"line":341},[161,417,211],{"class":210},[161,419,420],{"class":214},"if",[161,422,423],{"class":218}," condition",[161,425,222],{"class":210},[161,427,225],{"class":218},[161,429,430],{"class":167},"page.env === 'local'",[161,432,225],{"class":218},[161,434,407],{"class":210},[161,436,437,440,442,444,446,448,451,453,456,458,460,463,465,468,470,472,475,477],{"class":163,"line":347},[161,438,439],{"class":210},"    \u003C",[161,441,215],{"class":214},[161,443,219],{"class":218},[161,445,222],{"class":210},[161,447,225],{"class":218},[161,449,450],{"class":167},"/images/insignia.png",[161,452,225],{"class":218},[161,454,455],{"class":218}," width",[161,457,222],{"class":210},[161,459,225],{"class":218},[161,461,462],{"class":167},"70",[161,464,225],{"class":218},[161,466,467],{"class":218}," alt",[161,469,222],{"class":210},[161,471,225],{"class":218},[161,473,474],{"class":167},"Maizzle",[161,476,225],{"class":218},[161,478,407],{"class":210},[161,480,482,485,487],{"class":163,"line":481},9,[161,483,484],{"class":210},"  \u003C/",[161,486,420],{"class":214},[161,488,407],{"class":210},[161,490,492,494,497],{"class":163,"line":491},10,[161,493,211],{"class":210},[161,495,496],{"class":214},"else",[161,498,407],{"class":210},[161,500,502,504,506,508,510,512,515,517,519,521,523,525,527,529,531,533,535,537],{"class":163,"line":501},11,[161,503,439],{"class":210},[161,505,215],{"class":214},[161,507,219],{"class":218},[161,509,222],{"class":210},[161,511,225],{"class":218},[161,513,514],{"class":167},"insignia.png",[161,516,225],{"class":218},[161,518,455],{"class":218},[161,520,222],{"class":210},[161,522,225],{"class":218},[161,524,462],{"class":167},[161,526,225],{"class":218},[161,528,467],{"class":218},[161,530,222],{"class":210},[161,532,225],{"class":218},[161,534,474],{"class":167},[161,536,225],{"class":218},[161,538,407],{"class":210},[161,540,542,544,546],{"class":163,"line":541},12,[161,543,484],{"class":210},[161,545,496],{"class":214},[161,547,407],{"class":210},[161,549,551],{"class":163,"line":550},13,[161,552,396],{"emptyLinePlaceholder":395},[161,554,556,558,560],{"class":163,"line":555},14,[161,557,211],{"class":210},[161,559,111],{"class":214},[161,561,407],{"class":210},[161,563,565],{"class":163,"line":564},15,[161,566,567],{"class":167},"    Hello,\n",[161,569,571,573,575],{"class":163,"line":570},16,[161,572,484],{"class":210},[161,574,111],{"class":214},[161,576,407],{"class":210},[161,578,580],{"class":163,"line":579},17,[161,581,396],{"emptyLinePlaceholder":395},[161,583,585,587,589],{"class":163,"line":584},18,[161,586,211],{"class":210},[161,588,115],{"class":214},[161,590,407],{"class":210},[161,592,594],{"class":163,"line":593},19,[161,595,596],{"class":167},"    As you might know, lorem ipsum dolor sit amet...\n",[161,598,600,602,604],{"class":163,"line":599},20,[161,601,484],{"class":210},[161,603,115],{"class":214},[161,605,407],{"class":210},[161,607,609],{"class":163,"line":608},21,[161,610,396],{"emptyLinePlaceholder":395},[161,612,614,616,619],{"class":163,"line":613},22,[161,615,211],{"class":210},[161,617,618],{"class":214},"div",[161,620,407],{"class":210},[161,622,624,626,628,630,632,634,637,639,641,643,645,648,650,652,654,656,659,661],{"class":163,"line":623},23,[161,625,439],{"class":210},[161,627,215],{"class":214},[161,629,219],{"class":218},[161,631,222],{"class":210},[161,633,225],{"class":218},[161,635,636],{"class":167},"maizzle.png",[161,638,225],{"class":218},[161,640,455],{"class":218},[161,642,222],{"class":210},[161,644,225],{"class":218},[161,646,647],{"class":167},"456",[161,649,225],{"class":218},[161,651,467],{"class":218},[161,653,222],{"class":210},[161,655,225],{"class":218},[161,657,658],{"class":167},"Maizzle cover image",[161,660,225],{"class":218},[161,662,407],{"class":210},[161,664,666,668,670],{"class":163,"line":665},24,[161,667,484],{"class":210},[161,669,618],{"class":214},[161,671,407],{"class":210},[161,673,675],{"class":163,"line":674},25,[161,676,396],{"emptyLinePlaceholder":395},[161,678,680,682,684],{"class":163,"line":679},26,[161,681,211],{"class":210},[161,683,115],{"class":214},[161,685,407],{"class":210},[161,687,689],{"class":163,"line":688},27,[161,690,691],{"class":167},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat.\n",[161,693,695,697,699],{"class":163,"line":694},28,[161,696,484],{"class":210},[161,698,115],{"class":214},[161,700,407],{"class":210},[161,702,704],{"class":163,"line":703},29,[161,705,396],{"emptyLinePlaceholder":395},[161,707,709,711,713],{"class":163,"line":708},30,[161,710,211],{"class":210},[161,712,618],{"class":214},[161,714,407],{"class":210},[161,716,718,720,722,724,726,728,731,733,735,737,739,741,743,745,747,749,752,754],{"class":163,"line":717},31,[161,719,439],{"class":210},[161,721,215],{"class":214},[161,723,219],{"class":218},[161,725,222],{"class":210},[161,727,225],{"class":218},[161,729,730],{"class":167},"tailwindcss.jpg",[161,732,225],{"class":218},[161,734,455],{"class":218},[161,736,222],{"class":210},[161,738,225],{"class":218},[161,740,647],{"class":167},[161,742,225],{"class":218},[161,744,467],{"class":218},[161,746,222],{"class":210},[161,748,225],{"class":218},[161,750,751],{"class":167},"Tailwind CSS cover image",[161,753,225],{"class":218},[161,755,407],{"class":210},[161,757,759,761,763],{"class":163,"line":758},32,[161,760,484],{"class":210},[161,762,618],{"class":214},[161,764,407],{"class":210},[161,766,768],{"class":163,"line":767},33,[161,769,396],{"emptyLinePlaceholder":395},[161,771,773,775,777],{"class":163,"line":772},34,[161,774,211],{"class":210},[161,776,115],{"class":214},[161,778,407],{"class":210},[161,780,782],{"class":163,"line":781},35,[161,783,784],{"class":167},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat, suscipit sapiente non minus necessitatibus vero hic.\n",[161,786,788,790,792],{"class":163,"line":787},36,[161,789,484],{"class":210},[161,791,115],{"class":214},[161,793,407],{"class":210},[161,795,797,800,802],{"class":163,"line":796},37,[161,798,799],{"class":210},"\u003C/",[161,801,404],{"class":214},[161,803,407],{"class":210},[115,805,806,807,813,814,820],{},"Make sure to save the ",[125,808,811],{"href":809,"rel":810},"https://maizzle.com/__og_image__/og.png",[136],[158,812,636],{}," and ",[125,815,818],{"href":816,"rel":817},"https://tailwindcss.com/_next/static/media/social-card-large.a6e71726.jpg",[136],[158,819,730],{}," images to the same folder.",[140,822,824],{"id":823},"production-config","Production config",[115,826,827],{},"This is where the magic happens.",[115,829,830],{},"Our strategy is as follows:",[832,833,834,838,841],"ul",{},[835,836,837],"li",{},"for each template, create a list of the images it uses",[835,839,840],{},"push that list along with some data about the template file to a queue",[835,842,843],{},"after all templates have been compiled, process the queue and create the .zip archives",[115,845,846,847,850],{},"For now, update your ",[158,848,849],{},"config.production.js"," to look like this:",[151,852,857],{"className":853,"code":854,"filename":849,"highlights":855,"language":856,"meta":156,"style":156},"language-js shiki shiki-themes tailwind-css tailwind-css","const queue = []\n\nexport default {\n  build: {\n    static: false,\n    output: {\n      path: 'dist',\n    },\n  },\n  css: {\n    inline: true,\n    purge: true,\n    shorthand: true,\n  },\n  prettify: true,\n",[164,189],"js",[158,858,859,875,879,891,900,914,923,935,940,945,954,966,977,988,992],{"__ignoreMap":156},[161,860,862,866,869,872],{"class":861,"line":164},[163,237],[161,863,865],{"class":864},"s8qYB","const",[161,867,868],{"class":167}," queue ",[161,870,222],{"class":871},"sVevU",[161,873,874],{"class":167}," []\n",[161,876,877],{"class":163,"line":171},[161,878,396],{"emptyLinePlaceholder":395},[161,880,881,884,887],{"class":163,"line":177},[161,882,883],{"class":214},"export",[161,885,886],{"class":214}," default",[161,888,890],{"class":889},"sprQ5"," {\n",[161,892,893,896,898],{"class":163,"line":183},[161,894,895],{"class":167},"  build",[161,897,302],{"class":889},[161,899,890],{"class":889},[161,901,903,906,908,911],{"class":902,"line":189},[163,237],[161,904,905],{"class":167},"    static",[161,907,302],{"class":889},[161,909,910],{"class":214}," false",[161,912,913],{"class":889},",\n",[161,915,916,919,921],{"class":163,"line":335},[161,917,918],{"class":167},"    output",[161,920,302],{"class":889},[161,922,890],{"class":889},[161,924,925,928,930,933],{"class":163,"line":341},[161,926,927],{"class":167},"      path",[161,929,302],{"class":889},[161,931,932],{"class":167}," 'dist'",[161,934,913],{"class":889},[161,936,937],{"class":163,"line":347},[161,938,939],{"class":889},"    },\n",[161,941,942],{"class":163,"line":481},[161,943,944],{"class":889},"  },\n",[161,946,947,950,952],{"class":163,"line":491},[161,948,949],{"class":167},"  css",[161,951,302],{"class":889},[161,953,890],{"class":889},[161,955,956,959,961,964],{"class":163,"line":501},[161,957,958],{"class":167},"    inline",[161,960,302],{"class":889},[161,962,963],{"class":214}," true",[161,965,913],{"class":889},[161,967,968,971,973,975],{"class":163,"line":541},[161,969,970],{"class":167},"    purge",[161,972,302],{"class":889},[161,974,963],{"class":214},[161,976,913],{"class":889},[161,978,979,982,984,986],{"class":163,"line":550},[161,980,981],{"class":167},"    shorthand",[161,983,302],{"class":889},[161,985,963],{"class":214},[161,987,913],{"class":889},[161,989,990],{"class":163,"line":555},[161,991,944],{"class":889},[161,993,994,997,999,1001],{"class":163,"line":564},[161,995,996],{"class":167},"  prettify",[161,998,302],{"class":889},[161,1000,963],{"class":214},[161,1002,913],{"class":889},[115,1004,1005,1006,1009,1010,1013,1014,1017],{},"We're setting ",[158,1007,1008],{},"static: false"," because we don't want Maizzle to copy the global ",[158,1011,1012],{},"images"," folder to the ",[158,1015,1016],{},"dist"," folder. We'll handle any global images ourselves.",[140,1019,1021],{"id":1020},"get-image-paths-from-html","Get image paths from HTML",[115,1023,1024],{},"We'll need a way of creating a list of images that are used in a template.",[115,1026,367,1027,371],{},[158,1028,1029],{},"utils/getImagePaths.js",[151,1031,1033],{"className":853,"code":1032,"filename":1029,"language":856,"meta":156,"style":156},"export default function htmlString() {\n  const imagePaths = []\n  const regexSrcAttribute = /src=[\"'](.*?)[\"']/gi\n  const regexBackgroundAttribute = /background=[\"'](.*?)[\"']/gi\n  const regexInlineBackgroundCSS = /background(-image)?:\\s?url\\(['\"](.*?)['\"]\\)/gi\n  const regexSrcsetAttribute = /srcset=[\"'](.*?)[\"']/gi\n  const regexPosterAttribute = /poster=[\"'](.*?)[\"']/gi\n  const regexStyleTag = /\u003Cstyle\\b[^>]*>(.*?)\u003C\\/style>/gi\n\n  // Extract image paths from src attributes\n  const srcMatches = htmlString.match(regexSrcAttribute)\n  if (srcMatches) {\n    srcMatches.forEach(match => {\n      const imagePath = match.replace(regexSrcAttribute, '$1')\n      imagePaths.push(imagePath)\n    })\n  }\n\n  // Extract image paths from background attributes\n  const backgroundMatches = htmlString.match(regexBackgroundAttribute)\n  if (backgroundMatches) {\n    backgroundMatches.forEach(match => {\n      const imagePath = match.replace(regexBackgroundAttribute, '$1')\n      imagePaths.push(imagePath)\n    })\n  }\n\n  // Extract image paths from inline background CSS\n  const inlineBackgroundMatches = htmlString.match(regexInlineBackgroundCSS)\n  if (inlineBackgroundMatches) {\n    inlineBackgroundMatches.forEach(match => {\n      const imagePath = match.replace(regexInlineBackgroundCSS, '$2')\n      imagePaths.push(imagePath)\n    })\n  }\n\n  // Extract image paths from srcset attributes\n  const srcsetMatches = htmlString.match(regexSrcsetAttribute)\n  if (srcsetMatches) {\n    srcsetMatches.forEach(match => {\n      const imagePath = match.replace(regexSrcsetAttribute, '$1')\n      // Split the srcset and add each image path individually\n      const imagePathsArray = imagePath.split(/\\s*,\\s*/)\n      imagePaths.push(...imagePathsArray)\n    })\n  }\n\n  // Extract image paths from poster attributes\n  const posterMatches = htmlString.match(regexPosterAttribute)\n  if (posterMatches) {\n    posterMatches.forEach(match => {\n      const imagePath = match.replace(regexPosterAttribute, '$1')\n      imagePaths.push(imagePath)\n    })\n  }\n\n  // Extract image paths from CSS inside \u003Cstyle> tags in the \u003Chead>\n  const styleTagMatches = htmlString.match(regexStyleTag)\n  if (styleTagMatches) {\n    styleTagMatches.forEach(styleTag => {\n      const cssMatches = styleTag.match(regexInlineBackgroundCSS)\n      if (cssMatches) {\n        cssMatches.forEach(match => {\n          const imagePath = match.replace(regexInlineBackgroundCSS, '$2')\n          imagePaths.push(imagePath)\n        })\n      }\n    })\n  }\n\n  return imagePaths\n}\n",[158,1034,1035,1053,1065,1103,1133,1190,1220,1250,1293,1297,1302,1326,1343,1362,1392,1409,1416,1421,1425,1430,1452,1465,1482,1506,1520,1526,1530,1534,1539,1561,1574,1591,1616,1630,1636,1640,1644,1649,1672,1686,1704,1729,1735,1768,1787,1794,1799,1804,1810,1833,1847,1865,1890,1905,1912,1917,1922,1928,1951,1965,1984,2007,2022,2040,2066,2082,2090,2096,2103,2108,2113,2122],{"__ignoreMap":156},[161,1036,1037,1039,1041,1044,1048,1051],{"class":163,"line":164},[161,1038,883],{"class":214},[161,1040,886],{"class":214},[161,1042,1043],{"class":864}," function",[161,1045,1047],{"class":1046},"s2ImL"," htmlString",[161,1049,1050],{"class":889},"()",[161,1052,890],{"class":889},[161,1054,1055,1058,1061,1063],{"class":163,"line":171},[161,1056,1057],{"class":864},"  const",[161,1059,1060],{"class":167}," imagePaths ",[161,1062,222],{"class":871},[161,1064,874],{"class":167},[161,1066,1067,1069,1072,1074,1077,1080,1083,1086,1089,1092,1094,1097,1100],{"class":163,"line":177},[161,1068,1057],{"class":864},[161,1070,1071],{"class":167}," regexSrcAttribute ",[161,1073,222],{"class":871},[161,1075,1076],{"class":167}," /src=",[161,1078,1079],{"class":889},"[",[161,1081,1082],{"class":214},"\"'",[161,1084,1085],{"class":889},"](",[161,1087,1088],{"class":214},".*?",[161,1090,1091],{"class":889},")[",[161,1093,1082],{"class":214},[161,1095,1096],{"class":889},"]",[161,1098,1099],{"class":167},"/",[161,1101,1102],{"class":214},"gi\n",[161,1104,1105,1107,1110,1112,1115,1117,1119,1121,1123,1125,1127,1129,1131],{"class":163,"line":183},[161,1106,1057],{"class":864},[161,1108,1109],{"class":167}," regexBackgroundAttribute ",[161,1111,222],{"class":871},[161,1113,1114],{"class":167}," /background=",[161,1116,1079],{"class":889},[161,1118,1082],{"class":214},[161,1120,1085],{"class":889},[161,1122,1088],{"class":214},[161,1124,1091],{"class":889},[161,1126,1082],{"class":214},[161,1128,1096],{"class":889},[161,1130,1099],{"class":167},[161,1132,1102],{"class":214},[161,1134,1135,1137,1140,1142,1145,1148,1151,1154,1157,1159,1162,1165,1168,1170,1173,1175,1177,1179,1181,1183,1186,1188],{"class":163,"line":189},[161,1136,1057],{"class":864},[161,1138,1139],{"class":167}," regexInlineBackgroundCSS ",[161,1141,222],{"class":871},[161,1143,1144],{"class":167}," /background",[161,1146,1147],{"class":889},"(",[161,1149,1150],{"class":167},"-image",[161,1152,1153],{"class":889},")",[161,1155,1156],{"class":214},"?",[161,1158,302],{"class":167},[161,1160,1161],{"class":214},"\\s?",[161,1163,1164],{"class":167},"url",[161,1166,1167],{"class":210},"\\(",[161,1169,1079],{"class":889},[161,1171,1172],{"class":214},"'\"",[161,1174,1085],{"class":889},[161,1176,1088],{"class":214},[161,1178,1091],{"class":889},[161,1180,1172],{"class":214},[161,1182,1096],{"class":889},[161,1184,1185],{"class":210},"\\)",[161,1187,1099],{"class":167},[161,1189,1102],{"class":214},[161,1191,1192,1194,1197,1199,1202,1204,1206,1208,1210,1212,1214,1216,1218],{"class":163,"line":335},[161,1193,1057],{"class":864},[161,1195,1196],{"class":167}," regexSrcsetAttribute ",[161,1198,222],{"class":871},[161,1200,1201],{"class":167}," /srcset=",[161,1203,1079],{"class":889},[161,1205,1082],{"class":214},[161,1207,1085],{"class":889},[161,1209,1088],{"class":214},[161,1211,1091],{"class":889},[161,1213,1082],{"class":214},[161,1215,1096],{"class":889},[161,1217,1099],{"class":167},[161,1219,1102],{"class":214},[161,1221,1222,1224,1227,1229,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":163,"line":341},[161,1223,1057],{"class":864},[161,1225,1226],{"class":167}," regexPosterAttribute ",[161,1228,222],{"class":871},[161,1230,1231],{"class":167}," /poster=",[161,1233,1079],{"class":889},[161,1235,1082],{"class":214},[161,1237,1085],{"class":889},[161,1239,1088],{"class":214},[161,1241,1091],{"class":889},[161,1243,1082],{"class":214},[161,1245,1096],{"class":889},[161,1247,1099],{"class":167},[161,1249,1102],{"class":214},[161,1251,1252,1254,1257,1259,1262,1265,1267,1270,1272,1275,1277,1279,1281,1283,1285,1288,1291],{"class":163,"line":347},[161,1253,1057],{"class":864},[161,1255,1256],{"class":167}," regexStyleTag ",[161,1258,222],{"class":871},[161,1260,1261],{"class":167}," /\u003Cstyle",[161,1263,1264],{"class":214},"\\b",[161,1266,1079],{"class":889},[161,1268,1269],{"class":214},"^>",[161,1271,1096],{"class":889},[161,1273,1274],{"class":214},"*",[161,1276,233],{"class":167},[161,1278,1147],{"class":889},[161,1280,1088],{"class":214},[161,1282,1153],{"class":889},[161,1284,401],{"class":167},[161,1286,1287],{"class":210},"\\/",[161,1289,1290],{"class":167},"style>/",[161,1292,1102],{"class":214},[161,1294,1295],{"class":163,"line":481},[161,1296,396],{"emptyLinePlaceholder":395},[161,1298,1299],{"class":163,"line":491},[161,1300,1301],{"class":412},"  // Extract image paths from src attributes\n",[161,1303,1304,1306,1309,1311,1313,1315,1318,1320,1323],{"class":163,"line":501},[161,1305,1057],{"class":864},[161,1307,1308],{"class":167}," srcMatches ",[161,1310,222],{"class":871},[161,1312,1047],{"class":864},[161,1314,138],{"class":889},[161,1316,1317],{"class":1046},"match",[161,1319,1147],{"class":167},[161,1321,1322],{"class":864},"regexSrcAttribute",[161,1324,1325],{"class":167},")\n",[161,1327,1328,1331,1334,1337,1340],{"class":163,"line":541},[161,1329,1330],{"class":214},"  if",[161,1332,1333],{"class":167}," (",[161,1335,1336],{"class":864},"srcMatches",[161,1338,1339],{"class":167},") ",[161,1341,1342],{"class":889},"{\n",[161,1344,1345,1348,1350,1353,1355,1357,1360],{"class":163,"line":550},[161,1346,1347],{"class":864},"    srcMatches",[161,1349,138],{"class":889},[161,1351,1352],{"class":1046},"forEach",[161,1354,1147],{"class":167},[161,1356,1317],{"class":864},[161,1358,1359],{"class":864}," =>",[161,1361,890],{"class":889},[161,1363,1364,1367,1370,1372,1375,1377,1380,1382,1384,1387,1390],{"class":163,"line":555},[161,1365,1366],{"class":864},"      const",[161,1368,1369],{"class":167}," imagePath ",[161,1371,222],{"class":871},[161,1373,1374],{"class":864}," match",[161,1376,138],{"class":889},[161,1378,1379],{"class":1046},"replace",[161,1381,1147],{"class":167},[161,1383,1322],{"class":864},[161,1385,1386],{"class":889},",",[161,1388,1389],{"class":167}," '$1'",[161,1391,1325],{"class":167},[161,1393,1394,1397,1399,1402,1404,1407],{"class":163,"line":564},[161,1395,1396],{"class":864},"      imagePaths",[161,1398,138],{"class":889},[161,1400,1401],{"class":1046},"push",[161,1403,1147],{"class":167},[161,1405,1406],{"class":864},"imagePath",[161,1408,1325],{"class":167},[161,1410,1411,1414],{"class":163,"line":570},[161,1412,1413],{"class":889},"    }",[161,1415,1325],{"class":167},[161,1417,1418],{"class":163,"line":579},[161,1419,1420],{"class":889},"  }\n",[161,1422,1423],{"class":163,"line":584},[161,1424,396],{"emptyLinePlaceholder":395},[161,1426,1427],{"class":163,"line":593},[161,1428,1429],{"class":412},"  // Extract image paths from background attributes\n",[161,1431,1432,1434,1437,1439,1441,1443,1445,1447,1450],{"class":163,"line":599},[161,1433,1057],{"class":864},[161,1435,1436],{"class":167}," backgroundMatches ",[161,1438,222],{"class":871},[161,1440,1047],{"class":864},[161,1442,138],{"class":889},[161,1444,1317],{"class":1046},[161,1446,1147],{"class":167},[161,1448,1449],{"class":864},"regexBackgroundAttribute",[161,1451,1325],{"class":167},[161,1453,1454,1456,1458,1461,1463],{"class":163,"line":608},[161,1455,1330],{"class":214},[161,1457,1333],{"class":167},[161,1459,1460],{"class":864},"backgroundMatches",[161,1462,1339],{"class":167},[161,1464,1342],{"class":889},[161,1466,1467,1470,1472,1474,1476,1478,1480],{"class":163,"line":613},[161,1468,1469],{"class":864},"    backgroundMatches",[161,1471,138],{"class":889},[161,1473,1352],{"class":1046},[161,1475,1147],{"class":167},[161,1477,1317],{"class":864},[161,1479,1359],{"class":864},[161,1481,890],{"class":889},[161,1483,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504],{"class":163,"line":623},[161,1485,1366],{"class":864},[161,1487,1369],{"class":167},[161,1489,222],{"class":871},[161,1491,1374],{"class":864},[161,1493,138],{"class":889},[161,1495,1379],{"class":1046},[161,1497,1147],{"class":167},[161,1499,1449],{"class":864},[161,1501,1386],{"class":889},[161,1503,1389],{"class":167},[161,1505,1325],{"class":167},[161,1507,1508,1510,1512,1514,1516,1518],{"class":163,"line":665},[161,1509,1396],{"class":864},[161,1511,138],{"class":889},[161,1513,1401],{"class":1046},[161,1515,1147],{"class":167},[161,1517,1406],{"class":864},[161,1519,1325],{"class":167},[161,1521,1522,1524],{"class":163,"line":674},[161,1523,1413],{"class":889},[161,1525,1325],{"class":167},[161,1527,1528],{"class":163,"line":679},[161,1529,1420],{"class":889},[161,1531,1532],{"class":163,"line":688},[161,1533,396],{"emptyLinePlaceholder":395},[161,1535,1536],{"class":163,"line":694},[161,1537,1538],{"class":412},"  // Extract image paths from inline background CSS\n",[161,1540,1541,1543,1546,1548,1550,1552,1554,1556,1559],{"class":163,"line":703},[161,1542,1057],{"class":864},[161,1544,1545],{"class":167}," inlineBackgroundMatches ",[161,1547,222],{"class":871},[161,1549,1047],{"class":864},[161,1551,138],{"class":889},[161,1553,1317],{"class":1046},[161,1555,1147],{"class":167},[161,1557,1558],{"class":864},"regexInlineBackgroundCSS",[161,1560,1325],{"class":167},[161,1562,1563,1565,1567,1570,1572],{"class":163,"line":708},[161,1564,1330],{"class":214},[161,1566,1333],{"class":167},[161,1568,1569],{"class":864},"inlineBackgroundMatches",[161,1571,1339],{"class":167},[161,1573,1342],{"class":889},[161,1575,1576,1579,1581,1583,1585,1587,1589],{"class":163,"line":717},[161,1577,1578],{"class":864},"    inlineBackgroundMatches",[161,1580,138],{"class":889},[161,1582,1352],{"class":1046},[161,1584,1147],{"class":167},[161,1586,1317],{"class":864},[161,1588,1359],{"class":864},[161,1590,890],{"class":889},[161,1592,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1614],{"class":163,"line":758},[161,1594,1366],{"class":864},[161,1596,1369],{"class":167},[161,1598,222],{"class":871},[161,1600,1374],{"class":864},[161,1602,138],{"class":889},[161,1604,1379],{"class":1046},[161,1606,1147],{"class":167},[161,1608,1558],{"class":864},[161,1610,1386],{"class":889},[161,1612,1613],{"class":167}," '$2'",[161,1615,1325],{"class":167},[161,1617,1618,1620,1622,1624,1626,1628],{"class":163,"line":767},[161,1619,1396],{"class":864},[161,1621,138],{"class":889},[161,1623,1401],{"class":1046},[161,1625,1147],{"class":167},[161,1627,1406],{"class":864},[161,1629,1325],{"class":167},[161,1631,1632,1634],{"class":163,"line":772},[161,1633,1413],{"class":889},[161,1635,1325],{"class":167},[161,1637,1638],{"class":163,"line":781},[161,1639,1420],{"class":889},[161,1641,1642],{"class":163,"line":787},[161,1643,396],{"emptyLinePlaceholder":395},[161,1645,1646],{"class":163,"line":796},[161,1647,1648],{"class":412},"  // Extract image paths from srcset attributes\n",[161,1650,1652,1654,1657,1659,1661,1663,1665,1667,1670],{"class":163,"line":1651},38,[161,1653,1057],{"class":864},[161,1655,1656],{"class":167}," srcsetMatches ",[161,1658,222],{"class":871},[161,1660,1047],{"class":864},[161,1662,138],{"class":889},[161,1664,1317],{"class":1046},[161,1666,1147],{"class":167},[161,1668,1669],{"class":864},"regexSrcsetAttribute",[161,1671,1325],{"class":167},[161,1673,1675,1677,1679,1682,1684],{"class":163,"line":1674},39,[161,1676,1330],{"class":214},[161,1678,1333],{"class":167},[161,1680,1681],{"class":864},"srcsetMatches",[161,1683,1339],{"class":167},[161,1685,1342],{"class":889},[161,1687,1689,1692,1694,1696,1698,1700,1702],{"class":163,"line":1688},40,[161,1690,1691],{"class":864},"    srcsetMatches",[161,1693,138],{"class":889},[161,1695,1352],{"class":1046},[161,1697,1147],{"class":167},[161,1699,1317],{"class":864},[161,1701,1359],{"class":864},[161,1703,890],{"class":889},[161,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727],{"class":163,"line":1706},41,[161,1708,1366],{"class":864},[161,1710,1369],{"class":167},[161,1712,222],{"class":871},[161,1714,1374],{"class":864},[161,1716,138],{"class":889},[161,1718,1379],{"class":1046},[161,1720,1147],{"class":167},[161,1722,1669],{"class":864},[161,1724,1386],{"class":889},[161,1726,1389],{"class":167},[161,1728,1325],{"class":167},[161,1730,1732],{"class":163,"line":1731},42,[161,1733,1734],{"class":412},"      // Split the srcset and add each image path individually\n",[161,1736,1738,1740,1743,1745,1748,1750,1753,1755,1757,1760,1762,1764,1766],{"class":163,"line":1737},43,[161,1739,1366],{"class":864},[161,1741,1742],{"class":167}," imagePathsArray ",[161,1744,222],{"class":871},[161,1746,1747],{"class":864}," imagePath",[161,1749,138],{"class":889},[161,1751,1752],{"class":1046},"split",[161,1754,1147],{"class":167},[161,1756,1099],{"class":167},[161,1758,1759],{"class":214},"\\s*",[161,1761,1386],{"class":167},[161,1763,1759],{"class":214},[161,1765,1099],{"class":167},[161,1767,1325],{"class":167},[161,1769,1771,1773,1775,1777,1779,1782,1785],{"class":163,"line":1770},44,[161,1772,1396],{"class":864},[161,1774,138],{"class":889},[161,1776,1401],{"class":1046},[161,1778,1147],{"class":167},[161,1780,1781],{"class":214},"...",[161,1783,1784],{"class":864},"imagePathsArray",[161,1786,1325],{"class":167},[161,1788,1790,1792],{"class":163,"line":1789},45,[161,1791,1413],{"class":889},[161,1793,1325],{"class":167},[161,1795,1797],{"class":163,"line":1796},46,[161,1798,1420],{"class":889},[161,1800,1802],{"class":163,"line":1801},47,[161,1803,396],{"emptyLinePlaceholder":395},[161,1805,1807],{"class":163,"line":1806},48,[161,1808,1809],{"class":412},"  // Extract image paths from poster attributes\n",[161,1811,1813,1815,1818,1820,1822,1824,1826,1828,1831],{"class":163,"line":1812},49,[161,1814,1057],{"class":864},[161,1816,1817],{"class":167}," posterMatches ",[161,1819,222],{"class":871},[161,1821,1047],{"class":864},[161,1823,138],{"class":889},[161,1825,1317],{"class":1046},[161,1827,1147],{"class":167},[161,1829,1830],{"class":864},"regexPosterAttribute",[161,1832,1325],{"class":167},[161,1834,1836,1838,1840,1843,1845],{"class":163,"line":1835},50,[161,1837,1330],{"class":214},[161,1839,1333],{"class":167},[161,1841,1842],{"class":864},"posterMatches",[161,1844,1339],{"class":167},[161,1846,1342],{"class":889},[161,1848,1850,1853,1855,1857,1859,1861,1863],{"class":163,"line":1849},51,[161,1851,1852],{"class":864},"    posterMatches",[161,1854,138],{"class":889},[161,1856,1352],{"class":1046},[161,1858,1147],{"class":167},[161,1860,1317],{"class":864},[161,1862,1359],{"class":864},[161,1864,890],{"class":889},[161,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888],{"class":163,"line":1867},52,[161,1869,1366],{"class":864},[161,1871,1369],{"class":167},[161,1873,222],{"class":871},[161,1875,1374],{"class":864},[161,1877,138],{"class":889},[161,1879,1379],{"class":1046},[161,1881,1147],{"class":167},[161,1883,1830],{"class":864},[161,1885,1386],{"class":889},[161,1887,1389],{"class":167},[161,1889,1325],{"class":167},[161,1891,1893,1895,1897,1899,1901,1903],{"class":163,"line":1892},53,[161,1894,1396],{"class":864},[161,1896,138],{"class":889},[161,1898,1401],{"class":1046},[161,1900,1147],{"class":167},[161,1902,1406],{"class":864},[161,1904,1325],{"class":167},[161,1906,1908,1910],{"class":163,"line":1907},54,[161,1909,1413],{"class":889},[161,1911,1325],{"class":167},[161,1913,1915],{"class":163,"line":1914},55,[161,1916,1420],{"class":889},[161,1918,1920],{"class":163,"line":1919},56,[161,1921,396],{"emptyLinePlaceholder":395},[161,1923,1925],{"class":163,"line":1924},57,[161,1926,1927],{"class":412},"  // Extract image paths from CSS inside \u003Cstyle> tags in the \u003Chead>\n",[161,1929,1931,1933,1936,1938,1940,1942,1944,1946,1949],{"class":163,"line":1930},58,[161,1932,1057],{"class":864},[161,1934,1935],{"class":167}," styleTagMatches ",[161,1937,222],{"class":871},[161,1939,1047],{"class":864},[161,1941,138],{"class":889},[161,1943,1317],{"class":1046},[161,1945,1147],{"class":167},[161,1947,1948],{"class":864},"regexStyleTag",[161,1950,1325],{"class":167},[161,1952,1954,1956,1958,1961,1963],{"class":163,"line":1953},59,[161,1955,1330],{"class":214},[161,1957,1333],{"class":167},[161,1959,1960],{"class":864},"styleTagMatches",[161,1962,1339],{"class":167},[161,1964,1342],{"class":889},[161,1966,1968,1971,1973,1975,1977,1980,1982],{"class":163,"line":1967},60,[161,1969,1970],{"class":864},"    styleTagMatches",[161,1972,138],{"class":889},[161,1974,1352],{"class":1046},[161,1976,1147],{"class":167},[161,1978,1979],{"class":864},"styleTag",[161,1981,1359],{"class":864},[161,1983,890],{"class":889},[161,1985,1987,1989,1992,1994,1997,1999,2001,2003,2005],{"class":163,"line":1986},61,[161,1988,1366],{"class":864},[161,1990,1991],{"class":167}," cssMatches ",[161,1993,222],{"class":871},[161,1995,1996],{"class":864}," styleTag",[161,1998,138],{"class":889},[161,2000,1317],{"class":1046},[161,2002,1147],{"class":167},[161,2004,1558],{"class":864},[161,2006,1325],{"class":167},[161,2008,2010,2013,2015,2018,2020],{"class":163,"line":2009},62,[161,2011,2012],{"class":214},"      if",[161,2014,1333],{"class":167},[161,2016,2017],{"class":864},"cssMatches",[161,2019,1339],{"class":167},[161,2021,1342],{"class":889},[161,2023,2025,2028,2030,2032,2034,2036,2038],{"class":163,"line":2024},63,[161,2026,2027],{"class":864},"        cssMatches",[161,2029,138],{"class":889},[161,2031,1352],{"class":1046},[161,2033,1147],{"class":167},[161,2035,1317],{"class":864},[161,2037,1359],{"class":864},[161,2039,890],{"class":889},[161,2041,2043,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064],{"class":163,"line":2042},64,[161,2044,2045],{"class":864},"          const",[161,2047,1369],{"class":167},[161,2049,222],{"class":871},[161,2051,1374],{"class":864},[161,2053,138],{"class":889},[161,2055,1379],{"class":1046},[161,2057,1147],{"class":167},[161,2059,1558],{"class":864},[161,2061,1386],{"class":889},[161,2063,1613],{"class":167},[161,2065,1325],{"class":167},[161,2067,2069,2072,2074,2076,2078,2080],{"class":163,"line":2068},65,[161,2070,2071],{"class":864},"          imagePaths",[161,2073,138],{"class":889},[161,2075,1401],{"class":1046},[161,2077,1147],{"class":167},[161,2079,1406],{"class":864},[161,2081,1325],{"class":167},[161,2083,2085,2088],{"class":163,"line":2084},66,[161,2086,2087],{"class":889},"        }",[161,2089,1325],{"class":167},[161,2091,2093],{"class":163,"line":2092},67,[161,2094,2095],{"class":889},"      }\n",[161,2097,2099,2101],{"class":163,"line":2098},68,[161,2100,1413],{"class":889},[161,2102,1325],{"class":167},[161,2104,2106],{"class":163,"line":2105},69,[161,2107,1420],{"class":889},[161,2109,2111],{"class":163,"line":2110},70,[161,2112,396],{"emptyLinePlaceholder":395},[161,2114,2116,2119],{"class":163,"line":2115},71,[161,2117,2118],{"class":214},"  return",[161,2120,2121],{"class":864}," imagePaths\n",[161,2123,2125],{"class":163,"line":2124},72,[161,2126,2127],{"class":889},"}\n",[115,2129,2130],{},"This will return an array of image paths extracted from the following:",[832,2132,2133,2139,2144,2149,2154,2164],{},[835,2134,2135,2138],{},[158,2136,2137],{},"src"," attributes",[835,2140,2141,2138],{},[158,2142,2143],{},"srcset",[835,2145,2146,2138],{},[158,2147,2148],{},"poster",[835,2150,2151,2138],{},[158,2152,2153],{},"background",[835,2155,2156,2157,2160,2161],{},"CSS inside ",[158,2158,2159],{},"\u003Cstyle>"," tags in the ",[158,2162,2163],{},"\u003Chead>",[835,2165,2166,2167,813,2169,2172],{},"inline ",[158,2168,2153],{},[158,2170,2171],{},"background-image"," CSS",[140,2174,2176],{"id":2175},"archiving-library","Archiving library",[115,2178,2179,2180,2185],{},"There are a few libraries that can create .zip archives, but we'll be using ",[125,2181,2184],{"href":2182,"rel":2183},"https://www.npmjs.com/package/archiver",[136],"archiver"," for this guide.",[115,2187,2188],{},"Install it now:",[151,2190,2194],{"className":2191,"code":2192,"language":2193,"meta":156,"style":156},"language-bash shiki shiki-themes tailwind-css tailwind-css","npm install archiver\n","bash",[158,2195,2196],{"__ignoreMap":156},[161,2197,2198,2201,2204],{"class":163,"line":164},[161,2199,2200],{"class":214},"npm",[161,2202,2203],{"class":167}," install",[161,2205,2206],{"class":167}," archiver\n",[140,2208,2210],{"id":2209},"add-to-the-queue","Add to the queue",[115,2212,2213,2214,2217,2218,2221],{},"Let's use the ",[158,2215,2216],{},"afterTransformers"," event to push information about each template and the images it uses to the ",[158,2219,2220],{},"queue"," variable that we defined earlier.",[115,2223,2224,2225,850],{},"Modify your ",[158,2226,849],{},[151,2228,2231],{"className":853,"code":2229,"filename":849,"highlights":2230,"language":856,"meta":156,"style":156},"import getImagePathsFromHTML from './utils/getImagePaths.js'\n\nconst queue = []\n\nexport default {\n  build: {\n    static: false,\n    output: {\n      path: 'dist',\n    },\n  },\n  css: {\n    inline: true,\n    purge: true,\n    shorthand: true,\n  },\n  prettify: true,\n  afterTransformers(html, config) {\n    // Get image paths from HTML\n    const imagePaths = getImagePathsFromHTML(html)\n\n    queue.push({\n      images: imagePaths,\n      ...config.build.current,\n    })\n\n    return html\n  },\n",[584,593,599,608,613,623,665,674,679,688,694,703],[158,2232,2233,2248,2252,2262,2266,2274,2282,2292,2300,2310,2314,2318,2326,2336,2346,2356,2360,2370,2389,2395,2413,2418,2432,2445,2466,2473,2478,2487],{"__ignoreMap":156},[161,2234,2235,2238,2242,2245],{"class":163,"line":164},[161,2236,2237],{"class":864},"import",[161,2239,2241],{"class":2240},"sO1gY"," getImagePathsFromHTML",[161,2243,2244],{"class":889}," from",[161,2246,2247],{"class":864}," './utils/getImagePaths.js'\n",[161,2249,2250],{"class":163,"line":171},[161,2251,396],{"emptyLinePlaceholder":395},[161,2253,2254,2256,2258,2260],{"class":163,"line":177},[161,2255,865],{"class":864},[161,2257,868],{"class":167},[161,2259,222],{"class":871},[161,2261,874],{"class":167},[161,2263,2264],{"class":163,"line":183},[161,2265,396],{"emptyLinePlaceholder":395},[161,2267,2268,2270,2272],{"class":163,"line":189},[161,2269,883],{"class":214},[161,2271,886],{"class":214},[161,2273,890],{"class":889},[161,2275,2276,2278,2280],{"class":163,"line":335},[161,2277,895],{"class":167},[161,2279,302],{"class":889},[161,2281,890],{"class":889},[161,2283,2284,2286,2288,2290],{"class":163,"line":341},[161,2285,905],{"class":167},[161,2287,302],{"class":889},[161,2289,910],{"class":214},[161,2291,913],{"class":889},[161,2293,2294,2296,2298],{"class":163,"line":347},[161,2295,918],{"class":167},[161,2297,302],{"class":889},[161,2299,890],{"class":889},[161,2301,2302,2304,2306,2308],{"class":163,"line":481},[161,2303,927],{"class":167},[161,2305,302],{"class":889},[161,2307,932],{"class":167},[161,2309,913],{"class":889},[161,2311,2312],{"class":163,"line":491},[161,2313,939],{"class":889},[161,2315,2316],{"class":163,"line":501},[161,2317,944],{"class":889},[161,2319,2320,2322,2324],{"class":163,"line":541},[161,2321,949],{"class":167},[161,2323,302],{"class":889},[161,2325,890],{"class":889},[161,2327,2328,2330,2332,2334],{"class":163,"line":550},[161,2329,958],{"class":167},[161,2331,302],{"class":889},[161,2333,963],{"class":214},[161,2335,913],{"class":889},[161,2337,2338,2340,2342,2344],{"class":163,"line":555},[161,2339,970],{"class":167},[161,2341,302],{"class":889},[161,2343,963],{"class":214},[161,2345,913],{"class":889},[161,2347,2348,2350,2352,2354],{"class":163,"line":564},[161,2349,981],{"class":167},[161,2351,302],{"class":889},[161,2353,963],{"class":214},[161,2355,913],{"class":889},[161,2357,2358],{"class":163,"line":570},[161,2359,944],{"class":889},[161,2361,2362,2364,2366,2368],{"class":163,"line":579},[161,2363,996],{"class":167},[161,2365,302],{"class":889},[161,2367,963],{"class":214},[161,2369,913],{"class":889},[161,2371,2373,2376,2378,2380,2382,2385,2387],{"class":2372,"line":584},[163,237],[161,2374,2375],{"class":1046},"  afterTransformers",[161,2377,1147],{"class":889},[161,2379,155],{"class":864},[161,2381,1386],{"class":889},[161,2383,2384],{"class":864}," config",[161,2386,1153],{"class":889},[161,2388,890],{"class":889},[161,2390,2392],{"class":2391,"line":593},[163,237],[161,2393,2394],{"class":412},"    // Get image paths from HTML\n",[161,2396,2398,2401,2403,2405,2407,2409,2411],{"class":2397,"line":599},[163,237],[161,2399,2400],{"class":864},"    const",[161,2402,1060],{"class":167},[161,2404,222],{"class":871},[161,2406,2241],{"class":1046},[161,2408,1147],{"class":167},[161,2410,155],{"class":864},[161,2412,1325],{"class":167},[161,2414,2416],{"class":2415,"line":608},[163,237],[161,2417,396],{"emptyLinePlaceholder":395},[161,2419,2421,2424,2426,2428,2430],{"class":2420,"line":613},[163,237],[161,2422,2423],{"class":864},"    queue",[161,2425,138],{"class":889},[161,2427,1401],{"class":1046},[161,2429,1147],{"class":167},[161,2431,1342],{"class":889},[161,2433,2435,2438,2440,2443],{"class":2434,"line":623},[163,237],[161,2436,2437],{"class":167},"      images",[161,2439,302],{"class":889},[161,2441,2442],{"class":864}," imagePaths",[161,2444,913],{"class":889},[161,2446,2448,2451,2454,2456,2459,2461,2464],{"class":2447,"line":665},[163,237],[161,2449,2450],{"class":214},"      ...",[161,2452,2453],{"class":864},"config",[161,2455,138],{"class":889},[161,2457,2458],{"class":864},"build",[161,2460,138],{"class":889},[161,2462,2463],{"class":864},"current",[161,2465,913],{"class":889},[161,2467,2469,2471],{"class":2468,"line":674},[163,237],[161,2470,1413],{"class":889},[161,2472,1325],{"class":167},[161,2474,2476],{"class":2475,"line":679},[163,237],[161,2477,396],{"emptyLinePlaceholder":395},[161,2479,2481,2484],{"class":2480,"line":688},[163,237],[161,2482,2483],{"class":214},"    return",[161,2485,2486],{"class":864}," html\n",[161,2488,2490],{"class":2489,"line":694},[163,237],[161,2491,944],{"class":889},[140,2493,2495],{"id":2494},"create-the-zip-archives","Create the .zip archives",[115,2497,2498],{},"We can now process the queue and create the .zip archive for each template.",[115,2500,2501,2502,2505],{},"We'll use the ",[158,2503,2504],{},"afterBuild"," event for this, which is triggered after all templates have been compiled.",[115,2507,2224,2508,850],{},[158,2509,849],{},[151,2511,2519],{"className":853,"code":2512,"filename":849,"highlights":2513,"language":856,"meta":156,"style":156},"import fs from 'node:fs'\nimport path from 'node:path'\nimport archiver from 'archiver'\nimport baseConfig from './config.js'\nimport getImagePathsFromHTML from './utils/getImagePaths.js'\n\nconst queue = []\n\nexport default {\n  build: {\n    static: false,\n    output: {\n      path: 'dist',\n    },\n  },\n  css: {\n    inline: true,\n    purge: true,\n    shorthand: true,\n  },\n  prettify: true,\n  afterTransformers(html, config) {\n    // Get image paths from HTML\n    const imagePaths = getImagePathsFromHTML(html)\n\n    queue.push({\n      images: imagePaths,\n      ...config.build.current,\n    })\n\n    return html\n  },\n  afterBuild() {\n    // Process each item in the queue\n    for (const {path: template, images} of queue) {\n      // Read template's directory\n      fs.readdir(template.dir, (err, files) => {\n        // Exit early if there's an error\n        if (err) throw err\n\n        // Create archive\n        const output = fs.createWriteStream(`${template.dir}/${template.name}.zip`)\n        const archive = archiver('zip', {\n          zlib: {\n            level: 9 // Sets the compression level\n          }\n        })\n\n        archive.on('error', function(err) {\n          throw err\n        })\n\n        // Pipe archive data to the file\n        archive.pipe(output)\n\n        // Add files from template's directory to archive\n        files.forEach(file => {\n          archive.file(`${template.dir}/${file}`, { name: file })\n        })\n\n        // Get a list of files found in `images` that have been used in the template\n        const assetsSource = baseConfig.build.templates.assets.source\n        const globalImages = fs.readdirSync(assetsSource)\n          .filter(file => images.includes(path.basename(file)))\n          .map(file => path.join(assetsSource, file))\n\n        // Add global images to archive\n        globalImages.forEach(image => {\n          archive.file(image, { name: path.basename(image) })\n        })\n\n        // Finalize the archive\n        archive.finalize()\n      })\n    }\n  },\n}\n",[164,171,177,183,767,772,781,787,796,1651,1674,1688,1706,1731,1737,1770,1789,1796,1801,1806,1812,1835,1849,1867,1892,1907,1914,1919,1924,1930,1953,1967,1986,2009,2024,2042,2068,2084,2092,2098,2105,2110,2115,2124,2514,2515,2516,2517,2518],73,74,75,76,77,[158,2520,2521,2534,2547,2560,2573,2583,2587,2597,2601,2609,2617,2627,2635,2645,2649,2653,2661,2671,2681,2691,2695,2705,2721,2725,2741,2745,2757,2767,2783,2789,2793,2799,2803,2813,2819,2858,2864,2903,2909,2927,2932,2938,2990,3011,3021,3035,3041,3048,3053,3081,3089,3096,3101,3107,3124,3129,3135,3154,3205,3212,3217,3223,3253,3277,3315,3347,3352,3358,3377,3414,3421,3426,3432,3445,3453,3459,3464],{"__ignoreMap":156},[161,2522,2524,2526,2529,2531],{"class":2523,"line":164},[163,237],[161,2525,2237],{"class":864},[161,2527,2528],{"class":2240}," fs",[161,2530,2244],{"class":889},[161,2532,2533],{"class":864}," 'node:fs'\n",[161,2535,2537,2539,2542,2544],{"class":2536,"line":171},[163,237],[161,2538,2237],{"class":864},[161,2540,2541],{"class":2240}," path",[161,2543,2244],{"class":889},[161,2545,2546],{"class":864}," 'node:path'\n",[161,2548,2550,2552,2555,2557],{"class":2549,"line":177},[163,237],[161,2551,2237],{"class":864},[161,2553,2554],{"class":2240}," archiver",[161,2556,2244],{"class":889},[161,2558,2559],{"class":864}," 'archiver'\n",[161,2561,2563,2565,2568,2570],{"class":2562,"line":183},[163,237],[161,2564,2237],{"class":864},[161,2566,2567],{"class":2240}," baseConfig",[161,2569,2244],{"class":889},[161,2571,2572],{"class":864}," './config.js'\n",[161,2574,2575,2577,2579,2581],{"class":163,"line":189},[161,2576,2237],{"class":864},[161,2578,2241],{"class":2240},[161,2580,2244],{"class":889},[161,2582,2247],{"class":864},[161,2584,2585],{"class":163,"line":335},[161,2586,396],{"emptyLinePlaceholder":395},[161,2588,2589,2591,2593,2595],{"class":163,"line":341},[161,2590,865],{"class":864},[161,2592,868],{"class":167},[161,2594,222],{"class":871},[161,2596,874],{"class":167},[161,2598,2599],{"class":163,"line":347},[161,2600,396],{"emptyLinePlaceholder":395},[161,2602,2603,2605,2607],{"class":163,"line":481},[161,2604,883],{"class":214},[161,2606,886],{"class":214},[161,2608,890],{"class":889},[161,2610,2611,2613,2615],{"class":163,"line":491},[161,2612,895],{"class":167},[161,2614,302],{"class":889},[161,2616,890],{"class":889},[161,2618,2619,2621,2623,2625],{"class":163,"line":501},[161,2620,905],{"class":167},[161,2622,302],{"class":889},[161,2624,910],{"class":214},[161,2626,913],{"class":889},[161,2628,2629,2631,2633],{"class":163,"line":541},[161,2630,918],{"class":167},[161,2632,302],{"class":889},[161,2634,890],{"class":889},[161,2636,2637,2639,2641,2643],{"class":163,"line":550},[161,2638,927],{"class":167},[161,2640,302],{"class":889},[161,2642,932],{"class":167},[161,2644,913],{"class":889},[161,2646,2647],{"class":163,"line":555},[161,2648,939],{"class":889},[161,2650,2651],{"class":163,"line":564},[161,2652,944],{"class":889},[161,2654,2655,2657,2659],{"class":163,"line":570},[161,2656,949],{"class":167},[161,2658,302],{"class":889},[161,2660,890],{"class":889},[161,2662,2663,2665,2667,2669],{"class":163,"line":579},[161,2664,958],{"class":167},[161,2666,302],{"class":889},[161,2668,963],{"class":214},[161,2670,913],{"class":889},[161,2672,2673,2675,2677,2679],{"class":163,"line":584},[161,2674,970],{"class":167},[161,2676,302],{"class":889},[161,2678,963],{"class":214},[161,2680,913],{"class":889},[161,2682,2683,2685,2687,2689],{"class":163,"line":593},[161,2684,981],{"class":167},[161,2686,302],{"class":889},[161,2688,963],{"class":214},[161,2690,913],{"class":889},[161,2692,2693],{"class":163,"line":599},[161,2694,944],{"class":889},[161,2696,2697,2699,2701,2703],{"class":163,"line":608},[161,2698,996],{"class":167},[161,2700,302],{"class":889},[161,2702,963],{"class":214},[161,2704,913],{"class":889},[161,2706,2707,2709,2711,2713,2715,2717,2719],{"class":163,"line":613},[161,2708,2375],{"class":1046},[161,2710,1147],{"class":889},[161,2712,155],{"class":864},[161,2714,1386],{"class":889},[161,2716,2384],{"class":864},[161,2718,1153],{"class":889},[161,2720,890],{"class":889},[161,2722,2723],{"class":163,"line":623},[161,2724,2394],{"class":412},[161,2726,2727,2729,2731,2733,2735,2737,2739],{"class":163,"line":665},[161,2728,2400],{"class":864},[161,2730,1060],{"class":167},[161,2732,222],{"class":871},[161,2734,2241],{"class":1046},[161,2736,1147],{"class":167},[161,2738,155],{"class":864},[161,2740,1325],{"class":167},[161,2742,2743],{"class":163,"line":674},[161,2744,396],{"emptyLinePlaceholder":395},[161,2746,2747,2749,2751,2753,2755],{"class":163,"line":679},[161,2748,2423],{"class":864},[161,2750,138],{"class":889},[161,2752,1401],{"class":1046},[161,2754,1147],{"class":167},[161,2756,1342],{"class":889},[161,2758,2759,2761,2763,2765],{"class":163,"line":688},[161,2760,2437],{"class":167},[161,2762,302],{"class":889},[161,2764,2442],{"class":864},[161,2766,913],{"class":889},[161,2768,2769,2771,2773,2775,2777,2779,2781],{"class":163,"line":694},[161,2770,2450],{"class":214},[161,2772,2453],{"class":864},[161,2774,138],{"class":889},[161,2776,2458],{"class":864},[161,2778,138],{"class":889},[161,2780,2463],{"class":864},[161,2782,913],{"class":889},[161,2784,2785,2787],{"class":163,"line":703},[161,2786,1413],{"class":889},[161,2788,1325],{"class":167},[161,2790,2791],{"class":163,"line":708},[161,2792,396],{"emptyLinePlaceholder":395},[161,2794,2795,2797],{"class":163,"line":717},[161,2796,2483],{"class":214},[161,2798,2486],{"class":864},[161,2800,2801],{"class":163,"line":758},[161,2802,944],{"class":889},[161,2804,2806,2809,2811],{"class":2805,"line":767},[163,237],[161,2807,2808],{"class":1046},"  afterBuild",[161,2810,1050],{"class":889},[161,2812,890],{"class":889},[161,2814,2816],{"class":2815,"line":772},[163,237],[161,2817,2818],{"class":412},"    // Process each item in the queue\n",[161,2820,2822,2825,2827,2829,2832,2835,2837,2840,2842,2845,2848,2851,2854,2856],{"class":2821,"line":781},[163,237],[161,2823,2824],{"class":214},"    for",[161,2826,1333],{"class":167},[161,2828,865],{"class":864},[161,2830,2831],{"class":889}," {",[161,2833,2834],{"class":864},"path",[161,2836,302],{"class":889},[161,2838,2839],{"class":167}," template",[161,2841,1386],{"class":889},[161,2843,2844],{"class":167}," images",[161,2846,2847],{"class":889},"}",[161,2849,2850],{"class":214}," of",[161,2852,2853],{"class":864}," queue",[161,2855,1339],{"class":167},[161,2857,1342],{"class":889},[161,2859,2861],{"class":2860,"line":787},[163,237],[161,2862,2863],{"class":412},"      // Read template's directory\n",[161,2865,2867,2870,2872,2875,2877,2880,2882,2885,2887,2889,2892,2894,2897,2899,2901],{"class":2866,"line":796},[163,237],[161,2868,2869],{"class":864},"      fs",[161,2871,138],{"class":889},[161,2873,2874],{"class":1046},"readdir",[161,2876,1147],{"class":167},[161,2878,2879],{"class":864},"template",[161,2881,138],{"class":889},[161,2883,2884],{"class":864},"dir",[161,2886,1386],{"class":889},[161,2888,1333],{"class":889},[161,2890,2891],{"class":864},"err",[161,2893,1386],{"class":889},[161,2895,2896],{"class":864}," files",[161,2898,1153],{"class":889},[161,2900,1359],{"class":864},[161,2902,890],{"class":889},[161,2904,2906],{"class":2905,"line":1651},[163,237],[161,2907,2908],{"class":412},"        // Exit early if there's an error\n",[161,2910,2912,2915,2917,2919,2921,2924],{"class":2911,"line":1674},[163,237],[161,2913,2914],{"class":214},"        if",[161,2916,1333],{"class":167},[161,2918,2891],{"class":864},[161,2920,1339],{"class":167},[161,2922,2923],{"class":214},"throw",[161,2925,2926],{"class":864}," err\n",[161,2928,2930],{"class":2929,"line":1688},[163,237],[161,2931,396],{"emptyLinePlaceholder":395},[161,2933,2935],{"class":2934,"line":1706},[163,237],[161,2936,2937],{"class":412},"        // Create archive\n",[161,2939,2941,2944,2947,2949,2951,2953,2956,2958,2961,2964,2966,2968,2970,2972,2974,2976,2978,2980,2983,2985,2988],{"class":2940,"line":1731},[163,237],[161,2942,2943],{"class":864},"        const",[161,2945,2946],{"class":167}," output ",[161,2948,222],{"class":871},[161,2950,2528],{"class":864},[161,2952,138],{"class":889},[161,2954,2955],{"class":1046},"createWriteStream",[161,2957,1147],{"class":167},[161,2959,2960],{"class":167},"`",[161,2962,2963],{"class":889},"${",[161,2965,2879],{"class":864},[161,2967,138],{"class":889},[161,2969,2884],{"class":864},[161,2971,2847],{"class":889},[161,2973,1099],{"class":167},[161,2975,2963],{"class":889},[161,2977,2879],{"class":864},[161,2979,138],{"class":889},[161,2981,2982],{"class":864},"name",[161,2984,2847],{"class":889},[161,2986,2987],{"class":167},".zip`",[161,2989,1325],{"class":167},[161,2991,2993,2995,2998,3000,3002,3004,3007,3009],{"class":2992,"line":1737},[163,237],[161,2994,2943],{"class":864},[161,2996,2997],{"class":167}," archive ",[161,2999,222],{"class":871},[161,3001,2554],{"class":1046},[161,3003,1147],{"class":167},[161,3005,3006],{"class":167},"'zip'",[161,3008,1386],{"class":889},[161,3010,890],{"class":889},[161,3012,3014,3017,3019],{"class":3013,"line":1770},[163,237],[161,3015,3016],{"class":167},"          zlib",[161,3018,302],{"class":889},[161,3020,890],{"class":889},[161,3022,3024,3027,3029,3032],{"class":3023,"line":1789},[163,237],[161,3025,3026],{"class":167},"            level",[161,3028,302],{"class":889},[161,3030,3031],{"class":167}," 9 ",[161,3033,3034],{"class":412},"// Sets the compression level\n",[161,3036,3038],{"class":3037,"line":1796},[163,237],[161,3039,3040],{"class":889},"          }\n",[161,3042,3044,3046],{"class":3043,"line":1801},[163,237],[161,3045,2087],{"class":889},[161,3047,1325],{"class":167},[161,3049,3051],{"class":3050,"line":1806},[163,237],[161,3052,396],{"emptyLinePlaceholder":395},[161,3054,3056,3059,3061,3064,3066,3069,3071,3073,3075,3077,3079],{"class":3055,"line":1812},[163,237],[161,3057,3058],{"class":864},"        archive",[161,3060,138],{"class":889},[161,3062,3063],{"class":1046},"on",[161,3065,1147],{"class":167},[161,3067,3068],{"class":167},"'error'",[161,3070,1386],{"class":889},[161,3072,1043],{"class":864},[161,3074,1147],{"class":889},[161,3076,2891],{"class":864},[161,3078,1153],{"class":889},[161,3080,890],{"class":889},[161,3082,3084,3087],{"class":3083,"line":1835},[163,237],[161,3085,3086],{"class":214},"          throw",[161,3088,2926],{"class":864},[161,3090,3092,3094],{"class":3091,"line":1849},[163,237],[161,3093,2087],{"class":889},[161,3095,1325],{"class":167},[161,3097,3099],{"class":3098,"line":1867},[163,237],[161,3100,396],{"emptyLinePlaceholder":395},[161,3102,3104],{"class":3103,"line":1892},[163,237],[161,3105,3106],{"class":412},"        // Pipe archive data to the file\n",[161,3108,3110,3112,3114,3117,3119,3122],{"class":3109,"line":1907},[163,237],[161,3111,3058],{"class":864},[161,3113,138],{"class":889},[161,3115,3116],{"class":1046},"pipe",[161,3118,1147],{"class":167},[161,3120,3121],{"class":864},"output",[161,3123,1325],{"class":167},[161,3125,3127],{"class":3126,"line":1914},[163,237],[161,3128,396],{"emptyLinePlaceholder":395},[161,3130,3132],{"class":3131,"line":1919},[163,237],[161,3133,3134],{"class":412},"        // Add files from template's directory to archive\n",[161,3136,3138,3141,3143,3145,3147,3150,3152],{"class":3137,"line":1924},[163,237],[161,3139,3140],{"class":864},"        files",[161,3142,138],{"class":889},[161,3144,1352],{"class":1046},[161,3146,1147],{"class":167},[161,3148,3149],{"class":864},"file",[161,3151,1359],{"class":864},[161,3153,890],{"class":889},[161,3155,3157,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3195,3197,3200,3203],{"class":3156,"line":1930},[163,237],[161,3158,3159],{"class":864},"          archive",[161,3161,138],{"class":889},[161,3163,3149],{"class":1046},[161,3165,1147],{"class":167},[161,3167,2960],{"class":167},[161,3169,2963],{"class":889},[161,3171,2879],{"class":864},[161,3173,138],{"class":889},[161,3175,2884],{"class":864},[161,3177,2847],{"class":889},[161,3179,1099],{"class":167},[161,3181,2963],{"class":889},[161,3183,3149],{"class":864},[161,3185,2847],{"class":889},[161,3187,2960],{"class":167},[161,3189,1386],{"class":889},[161,3191,2831],{"class":889},[161,3193,3194],{"class":167}," name",[161,3196,302],{"class":889},[161,3198,3199],{"class":864}," file",[161,3201,3202],{"class":889}," }",[161,3204,1325],{"class":167},[161,3206,3208,3210],{"class":3207,"line":1953},[163,237],[161,3209,2087],{"class":889},[161,3211,1325],{"class":167},[161,3213,3215],{"class":3214,"line":1967},[163,237],[161,3216,396],{"emptyLinePlaceholder":395},[161,3218,3220],{"class":3219,"line":1986},[163,237],[161,3221,3222],{"class":412},"        // Get a list of files found in `images` that have been used in the template\n",[161,3224,3226,3228,3231,3233,3235,3237,3239,3241,3243,3245,3248,3250],{"class":3225,"line":2009},[163,237],[161,3227,2943],{"class":864},[161,3229,3230],{"class":167}," assetsSource ",[161,3232,222],{"class":871},[161,3234,2567],{"class":864},[161,3236,138],{"class":889},[161,3238,2458],{"class":864},[161,3240,138],{"class":889},[161,3242,301],{"class":864},[161,3244,138],{"class":889},[161,3246,3247],{"class":864},"assets",[161,3249,138],{"class":889},[161,3251,3252],{"class":864},"source\n",[161,3254,3256,3258,3261,3263,3265,3267,3270,3272,3275],{"class":3255,"line":2024},[163,237],[161,3257,2943],{"class":864},[161,3259,3260],{"class":167}," globalImages ",[161,3262,222],{"class":871},[161,3264,2528],{"class":864},[161,3266,138],{"class":889},[161,3268,3269],{"class":1046},"readdirSync",[161,3271,1147],{"class":167},[161,3273,3274],{"class":864},"assetsSource",[161,3276,1325],{"class":167},[161,3278,3280,3283,3286,3288,3290,3292,3294,3296,3299,3301,3303,3305,3308,3310,3312],{"class":3279,"line":2042},[163,237],[161,3281,3282],{"class":889},"          .",[161,3284,3285],{"class":1046},"filter",[161,3287,1147],{"class":167},[161,3289,3149],{"class":864},[161,3291,1359],{"class":864},[161,3293,2844],{"class":864},[161,3295,138],{"class":889},[161,3297,3298],{"class":1046},"includes",[161,3300,1147],{"class":167},[161,3302,2834],{"class":864},[161,3304,138],{"class":889},[161,3306,3307],{"class":1046},"basename",[161,3309,1147],{"class":167},[161,3311,3149],{"class":864},[161,3313,3314],{"class":167},")))\n",[161,3316,3318,3320,3323,3325,3327,3329,3331,3333,3336,3338,3340,3342,3344],{"class":3317,"line":2068},[163,237],[161,3319,3282],{"class":889},[161,3321,3322],{"class":1046},"map",[161,3324,1147],{"class":167},[161,3326,3149],{"class":864},[161,3328,1359],{"class":864},[161,3330,2541],{"class":864},[161,3332,138],{"class":889},[161,3334,3335],{"class":1046},"join",[161,3337,1147],{"class":167},[161,3339,3274],{"class":864},[161,3341,1386],{"class":889},[161,3343,3199],{"class":864},[161,3345,3346],{"class":167},"))\n",[161,3348,3350],{"class":3349,"line":2084},[163,237],[161,3351,396],{"emptyLinePlaceholder":395},[161,3353,3355],{"class":3354,"line":2092},[163,237],[161,3356,3357],{"class":412},"        // Add global images to archive\n",[161,3359,3361,3364,3366,3368,3370,3373,3375],{"class":3360,"line":2098},[163,237],[161,3362,3363],{"class":864},"        globalImages",[161,3365,138],{"class":889},[161,3367,1352],{"class":1046},[161,3369,1147],{"class":167},[161,3371,3372],{"class":864},"image",[161,3374,1359],{"class":864},[161,3376,890],{"class":889},[161,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410,3412],{"class":3379,"line":2105},[163,237],[161,3381,3159],{"class":864},[161,3383,138],{"class":889},[161,3385,3149],{"class":1046},[161,3387,1147],{"class":167},[161,3389,3372],{"class":864},[161,3391,1386],{"class":889},[161,3393,2831],{"class":889},[161,3395,3194],{"class":167},[161,3397,302],{"class":889},[161,3399,2541],{"class":864},[161,3401,138],{"class":889},[161,3403,3307],{"class":1046},[161,3405,1147],{"class":167},[161,3407,3372],{"class":864},[161,3409,1339],{"class":167},[161,3411,2847],{"class":889},[161,3413,1325],{"class":167},[161,3415,3417,3419],{"class":3416,"line":2110},[163,237],[161,3418,2087],{"class":889},[161,3420,1325],{"class":167},[161,3422,3424],{"class":3423,"line":2115},[163,237],[161,3425,396],{"emptyLinePlaceholder":395},[161,3427,3429],{"class":3428,"line":2124},[163,237],[161,3430,3431],{"class":412},"        // Finalize the archive\n",[161,3433,3435,3437,3439,3442],{"class":3434,"line":2514},[163,237],[161,3436,3058],{"class":864},[161,3438,138],{"class":889},[161,3440,3441],{"class":1046},"finalize",[161,3443,3444],{"class":167},"()\n",[161,3446,3448,3451],{"class":3447,"line":2515},[163,237],[161,3449,3450],{"class":889},"      }",[161,3452,1325],{"class":167},[161,3454,3456],{"class":3455,"line":2516},[163,237],[161,3457,3458],{"class":889},"    }\n",[161,3460,3462],{"class":3461,"line":2517},[163,237],[161,3463,944],{"class":889},[161,3465,3467],{"class":3466,"line":2518},[163,237],[161,3468,2127],{"class":889},[140,3470,3472],{"id":3471},"build-the-templates","Build the templates",[115,3474,3475,3476,3479,3480,3482],{},"Running the ",[158,3477,3478],{},"npm run build"," command will now create a .zip archive for each template in the ",[158,3481,1016],{}," directory.",[115,3484,3485],{},"The archive file will have the same name as the template, so you'll see something like this:",[151,3487,3489],{"className":153,"code":3488,"language":155,"meta":156,"style":156},"build_production\n  └── template-1\n      ├── index.html\n      └── index.zip\n        ├── index.html\n        ├── insignia.png\n        ├── maizzle.png\n        ├── tailwindcss.jpg\n      ├── maizzle.png\n      ├── tailwindcss.jpg\n  └── template-2\n      └── ...\n",[158,3490,3491,3496,3501,3506,3511,3515,3520,3525,3530,3535,3540,3545],{"__ignoreMap":156},[161,3492,3493],{"class":163,"line":164},[161,3494,3495],{"class":167},"build_production\n",[161,3497,3498],{"class":163,"line":171},[161,3499,3500],{"class":167},"  └── template-1\n",[161,3502,3503],{"class":163,"line":177},[161,3504,3505],{"class":167},"      ├── index.html\n",[161,3507,3508],{"class":163,"line":183},[161,3509,3510],{"class":167},"      └── index.zip\n",[161,3512,3513],{"class":163,"line":189},[161,3514,327],{"class":167},[161,3516,3517],{"class":163,"line":335},[161,3518,3519],{"class":167},"        ├── insignia.png\n",[161,3521,3522],{"class":163,"line":341},[161,3523,3524],{"class":167},"        ├── maizzle.png\n",[161,3526,3527],{"class":163,"line":347},[161,3528,3529],{"class":167},"        ├── tailwindcss.jpg\n",[161,3531,3532],{"class":163,"line":481},[161,3533,3534],{"class":167},"      ├── maizzle.png\n",[161,3536,3537],{"class":163,"line":491},[161,3538,3539],{"class":167},"      ├── tailwindcss.jpg\n",[161,3541,3542],{"class":163,"line":501},[161,3543,3544],{"class":167},"  └── template-2\n",[161,3546,3547],{"class":163,"line":541},[161,3548,3549],{"class":167},"      └── ...\n",[115,3551,3552,3553,3555],{},"You'll notice that ",[158,3554,514],{}," has been added to both archives, even though none of the template folders include it.",[140,3557,3559],{"id":3558},"resources","Resources",[832,3561,3562,3569],{},[835,3563,3564,3568],{},[125,3565,3567],{"href":134,"rel":3566},[136],"GitHub repository"," for this guide",[835,3570,3571,3574],{},[125,3572,2184],{"href":2182,"rel":3573},[136]," library documentation",[3576,3577,3578],"style",{},"html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}",{"title":156,"searchDepth":171,"depth":171,"links":3580},[3581,3582,3585,3586,3587,3588,3589,3590,3591,3592],{"id":142,"depth":171,"text":143},{"id":258,"depth":171,"text":259,"children":3583},[3584],{"id":294,"depth":177,"text":295},{"id":356,"depth":171,"text":357},{"id":823,"depth":171,"text":824},{"id":1020,"depth":171,"text":1021},{"id":2175,"depth":171,"text":2176},{"id":2209,"depth":171,"text":2210},{"id":2494,"depth":171,"text":2495},{"id":3471,"depth":171,"text":3472},{"id":3558,"depth":171,"text":3559},"2023-08-04T00:00:00.000Z","Using events in Maizzle to automatically package email templates and their images into a zip archive that can be uploaded to Mailchimp.","md",{},"/guides/mailchimp-package",{"title":106,"description":3594},{"loc":3597},"guides/mailchimp-package","lzY8UUAxQhe7vs-UhaO5duXkSXapA1lgZrmC0rSkF0k",{"id":3603,"title":3604,"body":3605,"date":6526,"description":6527,"extension":3595,"meta":6528,"navigation":395,"path":6529,"seo":6530,"sitemap":6531,"stem":6532,"__hash__":6533},"guides/guides/markdown-emails.md","How to create an HTML email newsletter from Markdown files",{"type":108,"value":3606,"toc":6505},[3607,3610,3613,3616,3623,3625,3628,3638,3643,3645,3648,3650,3657,3685,3693,3700,3724,3728,3735,3738,4557,4561,4564,4581,4584,4601,4605,4608,4618,4667,4671,4685,4688,4699,4806,4809,4847,4859,4863,4870,4986,4992,5054,5059,5114,5117,5120,5126,5131,5214,5217,5254,5257,5260,5321,5325,5336,5339,5342,5346,5361,5364,5367,5381,5395,5645,5648,5652,5659,5706,5710,5713,5720,5817,5824,5827,5898,5902,5905,5976,5990,6079,6086,6172,6176,6179,6188,6200,6209,6349,6352,6393,6399,6403,6406,6413,6416,6422,6463,6479,6481,6502],[111,3608,3604],{"id":3609},"how-to-create-an-html-email-newsletter-from-markdown-files",[115,3611,3612],{},"In this tutorial, you'll learn how to create HTML emails from Markdown files in Maizzle.",[115,3614,3615],{},"You'll be able to compile Markdown files from a folder into responsive HTML emails, use components, expressions, and even style them with Tailwind CSS.",[115,3617,131,3618,138],{},[125,3619,3622],{"href":3620,"rel":3621},"https://github.com/maizzle/starter-markdown",[136],"Markdown Starter",[140,3624,259],{"id":258},[115,3626,3627],{},"Scaffold a new project using the Markdown Starter:",[151,3629,3630],{"className":265,"code":266,"language":267,"meta":156,"style":156},[158,3631,3632],{"__ignoreMap":156},[161,3633,3634,3636],{"class":163,"line":164},[161,3635,274],{"class":214},[161,3637,277],{"class":167},[115,3639,280,3640,284],{},[158,3641,3642],{},"./markdown-project",[115,3644,287],{},[115,3646,3647],{},"Once it finishes installing dependencies, open the project folder in your favorite code editor.",[292,3649,295],{"id":294},[115,3651,3652,3653,3656],{},"We'll be using the ",[158,3654,3655],{},"content"," folder to store our Markdown files:",[151,3658,3660],{"className":153,"code":3659,"language":155,"meta":156,"style":156},"src\n└── content\n    └── newsletter-1.md\n    └── newsletter-2.md\n    └── ...\n",[158,3661,3662,3666,3671,3676,3681],{"__ignoreMap":156},[161,3663,3664],{"class":163,"line":164},[161,3665,312],{"class":167},[161,3667,3668],{"class":163,"line":171},[161,3669,3670],{"class":167},"└── content\n",[161,3672,3673],{"class":163,"line":177},[161,3674,3675],{"class":167},"    └── newsletter-1.md\n",[161,3677,3678],{"class":163,"line":183},[161,3679,3680],{"class":167},"    └── newsletter-2.md\n",[161,3682,3683],{"class":163,"line":189},[161,3684,350],{"class":167},[3686,3687,3688,3689,3692],"alert",{},"\nYou can remove the \n",[158,3690,3691],{},"emails","\n directory, we won't need it.\n",[115,3694,3695,3696,3699],{},"Next, create ",[158,3697,3698],{},"content/newsletter-1.md"," and add some markdown to it:",[151,3701,3705],{"className":3702,"code":3703,"filename":3704,"language":3595,"meta":156,"style":156},"language-md shiki shiki-themes tailwind-css tailwind-css","# Hello world\n\nThis is the first newsletter.\n","newsletter-1.md",[158,3706,3707,3715,3719],{"__ignoreMap":156},[161,3708,3709,3712],{"class":163,"line":164},[161,3710,3711],{"class":210},"#",[161,3713,3714],{"class":214}," Hello world\n",[161,3716,3717],{"class":163,"line":171},[161,3718,396],{"emptyLinePlaceholder":395},[161,3720,3721],{"class":163,"line":177},[161,3722,3723],{"class":167},"This is the first newsletter.\n",[292,3725,3727],{"id":3726},"layout","Layout",[115,3729,3730,3731,3734],{},"Since we just want to write Markdown and not have to deal with any tables and such, we need to update ",[158,3732,3733],{},"layouts/main.html"," to contain the entire HTML boilerplate.",[115,3736,3737],{},"Replace its contents with the following:",[151,3739,3743],{"className":3740,"code":3741,"filename":3733,"language":3742,"meta":156,"style":156},"language-hbs shiki shiki-themes tailwind-css tailwind-css","\u003C!doctype {{{ page.doctype || 'html' }}}>\n\u003Chtml lang=\"{{ page.language || 'en' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n\u003Chead>\n  \u003Cmeta charset=\"{{ page.charset || 'utf-8' }}\">\n  \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Cmeta name=\"format-detection\" content=\"telephone=no, date=no, address=no, email=no, url=no\">\n  \u003C!--[if mso]>\n  \u003Cnoscript>\n    \u003Cxml>\n      \u003Co:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n        \u003Co:PixelsPerInch>96\u003C/o:PixelsPerInch>\n      \u003C/o:OfficeDocumentSettings>\n    \u003C/xml>\n  \u003C/noscript>\n  \u003Cstyle>\n    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n  \u003C/style>\n  \u003C![endif]-->\n  \u003Cif condition=\"page.title\">\n    \u003Ctitle>{{{ page.title }}}\u003C/title>\n  \u003C/if>\n  \u003Cstyle>\n    @tailwind utilities;\n    @tailwind components;\n  \u003C/style>\n  \u003Cstack name=\"head\" />\n\u003C/head>\n\u003Cbody class=\"m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || 'bg-slate-100' }}\">\n  \u003Cif condition=\"page.preheader\">\n    \u003Cdiv class=\"hidden\">\n      {{{ page.preheader }}}\n      \u003Ceach loop=\"item in Array.from(Array(150))\">͏ \u003C/each>\n    \u003C/div>\n  \u003C/if>\n\n  \u003Cdiv\n    align=\"center\"\n    role=\"article\"\n    aria-roledescription=\"email\"\n    lang=\"{{ page.language || 'en' }}\"\n    class=\"{{ page.bodyClass || 'bg-slate-100' }}\"\n    aria-label=\"{{{ page.title || '' }}}\"\n  >\n    \u003Ctable class=\"font-sans\">\n      \u003Ctr>\n        \u003Ctd class=\"w-[600px] max-w-full bg-white rounded-xl\">\n          \u003Ctable class=\"w-full\">\n            \u003Ctr>\n              \u003Ctd class=\"p-0 px-8 sm:px-4 text-base/6 text-slate-700\">\n                \u003Cyield />\n              \u003C/td>\n            \u003C/tr>\n          \u003C/table>\n        \u003C/td>\n      \u003C/tr>\n    \u003C/table>\n  \u003C/div>\n\u003C/body>\n\u003C/html>\n","hbs",[158,3744,3745,3757,3806,3815,3849,3868,3899,3929,3934,3939,3944,3949,3954,3959,3964,3969,3974,3979,3984,3989,4008,4031,4039,4047,4059,4068,4076,4098,4106,4141,4160,4179,4189,4221,4230,4238,4242,4249,4264,4278,4292,4317,4342,4364,4369,4389,4398,4419,4439,4448,4468,4480,4489,4498,4507,4516,4525,4533,4541,4549],{"__ignoreMap":156},[161,3746,3747,3751,3754],{"class":163,"line":164},[161,3748,3750],{"class":3749},"shy1k","\u003C!",[161,3752,3753],{"class":214},"doctype",[161,3755,3756],{"class":3749}," {{{ page.doctype || 'html' }}}>\n",[161,3758,3759,3761,3763,3766,3768,3770,3773,3776,3779,3782,3785,3787,3790,3792,3795,3797,3799,3802,3804],{"class":163,"line":171},[161,3760,401],{"class":210},[161,3762,155],{"class":214},[161,3764,3765],{"class":218}," lang",[161,3767,222],{"class":210},[161,3769,225],{"class":218},[161,3771,3772],{"class":167},"{{ ",[161,3774,3775],{"class":864},"page.language",[161,3777,3778],{"class":167}," || ",[161,3780,3781],{"class":218},"'",[161,3783,3784],{"class":167},"en",[161,3786,3781],{"class":218},[161,3788,3789],{"class":167}," }}",[161,3791,225],{"class":218},[161,3793,3794],{"class":218}," xmlns:v",[161,3796,222],{"class":210},[161,3798,225],{"class":218},[161,3800,3801],{"class":167},"urn:schemas-microsoft-com:vml",[161,3803,225],{"class":218},[161,3805,407],{"class":210},[161,3807,3808,3810,3813],{"class":163,"line":177},[161,3809,401],{"class":210},[161,3811,3812],{"class":214},"head",[161,3814,407],{"class":210},[161,3816,3817,3819,3822,3825,3827,3829,3831,3834,3836,3838,3841,3843,3845,3847],{"class":163,"line":183},[161,3818,211],{"class":210},[161,3820,3821],{"class":214},"meta",[161,3823,3824],{"class":218}," charset",[161,3826,222],{"class":210},[161,3828,225],{"class":218},[161,3830,3772],{"class":167},[161,3832,3833],{"class":864},"page.charset",[161,3835,3778],{"class":167},[161,3837,3781],{"class":218},[161,3839,3840],{"class":167},"utf-8",[161,3842,3781],{"class":218},[161,3844,3789],{"class":167},[161,3846,225],{"class":218},[161,3848,407],{"class":210},[161,3850,3851,3853,3855,3857,3859,3861,3864,3866],{"class":163,"line":189},[161,3852,211],{"class":210},[161,3854,3821],{"class":214},[161,3856,3194],{"class":218},[161,3858,222],{"class":210},[161,3860,225],{"class":218},[161,3862,3863],{"class":167},"x-apple-disable-message-reformatting",[161,3865,225],{"class":218},[161,3867,407],{"class":210},[161,3869,3870,3872,3874,3876,3878,3880,3883,3885,3888,3890,3892,3895,3897],{"class":163,"line":335},[161,3871,211],{"class":210},[161,3873,3821],{"class":214},[161,3875,3194],{"class":218},[161,3877,222],{"class":210},[161,3879,225],{"class":218},[161,3881,3882],{"class":167},"viewport",[161,3884,225],{"class":218},[161,3886,3887],{"class":218}," content",[161,3889,222],{"class":210},[161,3891,225],{"class":218},[161,3893,3894],{"class":167},"width=device-width, initial-scale=1",[161,3896,225],{"class":218},[161,3898,407],{"class":210},[161,3900,3901,3903,3905,3907,3909,3911,3914,3916,3918,3920,3922,3925,3927],{"class":163,"line":341},[161,3902,211],{"class":210},[161,3904,3821],{"class":214},[161,3906,3194],{"class":218},[161,3908,222],{"class":210},[161,3910,225],{"class":218},[161,3912,3913],{"class":167},"format-detection",[161,3915,225],{"class":218},[161,3917,3887],{"class":218},[161,3919,222],{"class":210},[161,3921,225],{"class":218},[161,3923,3924],{"class":167},"telephone=no, date=no, address=no, email=no, url=no",[161,3926,225],{"class":218},[161,3928,407],{"class":210},[161,3930,3931],{"class":163,"line":347},[161,3932,3933],{"class":412},"  \u003C!--[if mso]>\n",[161,3935,3936],{"class":163,"line":481},[161,3937,3938],{"class":412},"  \u003Cnoscript>\n",[161,3940,3941],{"class":163,"line":491},[161,3942,3943],{"class":412},"    \u003Cxml>\n",[161,3945,3946],{"class":163,"line":501},[161,3947,3948],{"class":412},"      \u003Co:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n",[161,3950,3951],{"class":163,"line":541},[161,3952,3953],{"class":412},"        \u003Co:PixelsPerInch>96\u003C/o:PixelsPerInch>\n",[161,3955,3956],{"class":163,"line":550},[161,3957,3958],{"class":412},"      \u003C/o:OfficeDocumentSettings>\n",[161,3960,3961],{"class":163,"line":555},[161,3962,3963],{"class":412},"    \u003C/xml>\n",[161,3965,3966],{"class":163,"line":564},[161,3967,3968],{"class":412},"  \u003C/noscript>\n",[161,3970,3971],{"class":163,"line":570},[161,3972,3973],{"class":412},"  \u003Cstyle>\n",[161,3975,3976],{"class":163,"line":579},[161,3977,3978],{"class":412},"    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n",[161,3980,3981],{"class":163,"line":584},[161,3982,3983],{"class":412},"  \u003C/style>\n",[161,3985,3986],{"class":163,"line":593},[161,3987,3988],{"class":412},"  \u003C![endif]-->\n",[161,3990,3991,3993,3995,3997,3999,4001,4004,4006],{"class":163,"line":599},[161,3992,211],{"class":210},[161,3994,420],{"class":214},[161,3996,423],{"class":218},[161,3998,222],{"class":210},[161,4000,225],{"class":218},[161,4002,4003],{"class":167},"page.title",[161,4005,225],{"class":218},[161,4007,407],{"class":210},[161,4009,4010,4012,4015,4017,4020,4022,4025,4027,4029],{"class":163,"line":608},[161,4011,439],{"class":210},[161,4013,4014],{"class":214},"title",[161,4016,233],{"class":210},[161,4018,4019],{"class":167},"{{{ ",[161,4021,4003],{"class":864},[161,4023,4024],{"class":167}," }}}",[161,4026,799],{"class":210},[161,4028,4014],{"class":214},[161,4030,407],{"class":210},[161,4032,4033,4035,4037],{"class":163,"line":613},[161,4034,484],{"class":210},[161,4036,420],{"class":214},[161,4038,407],{"class":210},[161,4040,4041,4043,4045],{"class":163,"line":623},[161,4042,211],{"class":210},[161,4044,3576],{"class":214},[161,4046,407],{"class":210},[161,4048,4049,4053,4056],{"class":163,"line":665},[161,4050,4052],{"class":4051},"sO3Gh","    @tailwind",[161,4054,4055],{"class":167}," utilities",[161,4057,4058],{"class":4051},";\n",[161,4060,4061,4063,4066],{"class":163,"line":674},[161,4062,4052],{"class":4051},[161,4064,4065],{"class":167}," components",[161,4067,4058],{"class":4051},[161,4069,4070,4072,4074],{"class":163,"line":679},[161,4071,484],{"class":210},[161,4073,3576],{"class":214},[161,4075,407],{"class":210},[161,4077,4078,4080,4083,4085,4087,4089,4091,4093,4096],{"class":163,"line":688},[161,4079,211],{"class":210},[161,4081,4082],{"class":214},"stack",[161,4084,3194],{"class":218},[161,4086,222],{"class":210},[161,4088,225],{"class":218},[161,4090,3812],{"class":167},[161,4092,225],{"class":218},[161,4094,4095],{"class":218}," /",[161,4097,407],{"class":210},[161,4099,4100,4102,4104],{"class":163,"line":694},[161,4101,799],{"class":210},[161,4103,3812],{"class":214},[161,4105,407],{"class":210},[161,4107,4108,4110,4113,4116,4118,4120,4123,4126,4128,4130,4133,4135,4137,4139],{"class":163,"line":703},[161,4109,401],{"class":210},[161,4111,4112],{"class":214},"body",[161,4114,4115],{"class":218}," class",[161,4117,222],{"class":210},[161,4119,225],{"class":218},[161,4121,4122],{"class":167},"m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ ",[161,4124,4125],{"class":864},"page.bodyClass",[161,4127,3778],{"class":167},[161,4129,3781],{"class":218},[161,4131,4132],{"class":167},"bg-slate-100",[161,4134,3781],{"class":218},[161,4136,3789],{"class":167},[161,4138,225],{"class":218},[161,4140,407],{"class":210},[161,4142,4143,4145,4147,4149,4151,4153,4156,4158],{"class":163,"line":708},[161,4144,211],{"class":210},[161,4146,420],{"class":214},[161,4148,423],{"class":218},[161,4150,222],{"class":210},[161,4152,225],{"class":218},[161,4154,4155],{"class":167},"page.preheader",[161,4157,225],{"class":218},[161,4159,407],{"class":210},[161,4161,4162,4164,4166,4168,4170,4172,4175,4177],{"class":163,"line":717},[161,4163,439],{"class":210},[161,4165,618],{"class":214},[161,4167,4115],{"class":218},[161,4169,222],{"class":210},[161,4171,225],{"class":218},[161,4173,4174],{"class":167},"hidden",[161,4176,225],{"class":218},[161,4178,407],{"class":210},[161,4180,4181,4184,4186],{"class":163,"line":758},[161,4182,4183],{"class":167},"      {{{ ",[161,4185,4155],{"class":864},[161,4187,4188],{"class":167}," }}}\n",[161,4190,4191,4194,4197,4200,4202,4204,4207,4209,4211,4214,4217,4219],{"class":163,"line":767},[161,4192,4193],{"class":210},"      \u003C",[161,4195,4196],{"class":214},"each",[161,4198,4199],{"class":218}," loop",[161,4201,222],{"class":210},[161,4203,225],{"class":218},[161,4205,4206],{"class":167},"item in Array.from(Array(150))",[161,4208,225],{"class":218},[161,4210,233],{"class":210},[161,4212,4213],{"class":214},"͏",[161,4215,4216],{"class":210}," \u003C/",[161,4218,4196],{"class":214},[161,4220,407],{"class":210},[161,4222,4223,4226,4228],{"class":163,"line":772},[161,4224,4225],{"class":210},"    \u003C/",[161,4227,618],{"class":214},[161,4229,407],{"class":210},[161,4231,4232,4234,4236],{"class":163,"line":781},[161,4233,484],{"class":210},[161,4235,420],{"class":214},[161,4237,407],{"class":210},[161,4239,4240],{"class":163,"line":787},[161,4241,396],{"emptyLinePlaceholder":395},[161,4243,4244,4246],{"class":163,"line":796},[161,4245,211],{"class":210},[161,4247,4248],{"class":214},"div\n",[161,4250,4251,4254,4256,4258,4261],{"class":163,"line":1651},[161,4252,4253],{"class":218},"    align",[161,4255,222],{"class":210},[161,4257,225],{"class":218},[161,4259,4260],{"class":167},"center",[161,4262,4263],{"class":218},"\"\n",[161,4265,4266,4269,4271,4273,4276],{"class":163,"line":1674},[161,4267,4268],{"class":218},"    role",[161,4270,222],{"class":210},[161,4272,225],{"class":218},[161,4274,4275],{"class":167},"article",[161,4277,4263],{"class":218},[161,4279,4280,4283,4285,4287,4290],{"class":163,"line":1688},[161,4281,4282],{"class":218},"    aria-roledescription",[161,4284,222],{"class":210},[161,4286,225],{"class":218},[161,4288,4289],{"class":167},"email",[161,4291,4263],{"class":218},[161,4293,4294,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315],{"class":163,"line":1706},[161,4295,4296],{"class":218},"    lang",[161,4298,222],{"class":210},[161,4300,225],{"class":218},[161,4302,3772],{"class":167},[161,4304,3775],{"class":864},[161,4306,3778],{"class":167},[161,4308,3781],{"class":218},[161,4310,3784],{"class":167},[161,4312,3781],{"class":218},[161,4314,3789],{"class":167},[161,4316,4263],{"class":218},[161,4318,4319,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340],{"class":163,"line":1731},[161,4320,4321],{"class":218},"    class",[161,4323,222],{"class":210},[161,4325,225],{"class":218},[161,4327,3772],{"class":167},[161,4329,4125],{"class":864},[161,4331,3778],{"class":167},[161,4333,3781],{"class":218},[161,4335,4132],{"class":167},[161,4337,3781],{"class":218},[161,4339,3789],{"class":167},[161,4341,4263],{"class":218},[161,4343,4344,4347,4349,4351,4353,4355,4357,4360,4362],{"class":163,"line":1737},[161,4345,4346],{"class":218},"    aria-label",[161,4348,222],{"class":210},[161,4350,225],{"class":218},[161,4352,4019],{"class":167},[161,4354,4003],{"class":864},[161,4356,3778],{"class":167},[161,4358,4359],{"class":218},"''",[161,4361,4024],{"class":167},[161,4363,4263],{"class":218},[161,4365,4366],{"class":163,"line":1770},[161,4367,4368],{"class":210},"  >\n",[161,4370,4371,4373,4376,4378,4380,4382,4385,4387],{"class":163,"line":1789},[161,4372,439],{"class":210},[161,4374,4375],{"class":214},"table",[161,4377,4115],{"class":218},[161,4379,222],{"class":210},[161,4381,225],{"class":218},[161,4383,4384],{"class":167},"font-sans",[161,4386,225],{"class":218},[161,4388,407],{"class":210},[161,4390,4391,4393,4396],{"class":163,"line":1796},[161,4392,4193],{"class":210},[161,4394,4395],{"class":214},"tr",[161,4397,407],{"class":210},[161,4399,4400,4403,4406,4408,4410,4412,4415,4417],{"class":163,"line":1801},[161,4401,4402],{"class":210},"        \u003C",[161,4404,4405],{"class":214},"td",[161,4407,4115],{"class":218},[161,4409,222],{"class":210},[161,4411,225],{"class":218},[161,4413,4414],{"class":167},"w-[600px] max-w-full bg-white rounded-xl",[161,4416,225],{"class":218},[161,4418,407],{"class":210},[161,4420,4421,4424,4426,4428,4430,4432,4435,4437],{"class":163,"line":1806},[161,4422,4423],{"class":210},"          \u003C",[161,4425,4375],{"class":214},[161,4427,4115],{"class":218},[161,4429,222],{"class":210},[161,4431,225],{"class":218},[161,4433,4434],{"class":167},"w-full",[161,4436,225],{"class":218},[161,4438,407],{"class":210},[161,4440,4441,4444,4446],{"class":163,"line":1812},[161,4442,4443],{"class":210},"            \u003C",[161,4445,4395],{"class":214},[161,4447,407],{"class":210},[161,4449,4450,4453,4455,4457,4459,4461,4464,4466],{"class":163,"line":1835},[161,4451,4452],{"class":210},"              \u003C",[161,4454,4405],{"class":214},[161,4456,4115],{"class":218},[161,4458,222],{"class":210},[161,4460,225],{"class":218},[161,4462,4463],{"class":167},"p-0 px-8 sm:px-4 text-base/6 text-slate-700",[161,4465,225],{"class":218},[161,4467,407],{"class":210},[161,4469,4470,4473,4476,4478],{"class":163,"line":1849},[161,4471,4472],{"class":210},"                \u003C",[161,4474,4475],{"class":214},"yield",[161,4477,4095],{"class":218},[161,4479,407],{"class":210},[161,4481,4482,4485,4487],{"class":163,"line":1867},[161,4483,4484],{"class":210},"              \u003C/",[161,4486,4405],{"class":214},[161,4488,407],{"class":210},[161,4490,4491,4494,4496],{"class":163,"line":1892},[161,4492,4493],{"class":210},"            \u003C/",[161,4495,4395],{"class":214},[161,4497,407],{"class":210},[161,4499,4500,4503,4505],{"class":163,"line":1907},[161,4501,4502],{"class":210},"          \u003C/",[161,4504,4375],{"class":214},[161,4506,407],{"class":210},[161,4508,4509,4512,4514],{"class":163,"line":1914},[161,4510,4511],{"class":210},"        \u003C/",[161,4513,4405],{"class":214},[161,4515,407],{"class":210},[161,4517,4518,4521,4523],{"class":163,"line":1919},[161,4519,4520],{"class":210},"      \u003C/",[161,4522,4395],{"class":214},[161,4524,407],{"class":210},[161,4526,4527,4529,4531],{"class":163,"line":1924},[161,4528,4225],{"class":210},[161,4530,4375],{"class":214},[161,4532,407],{"class":210},[161,4534,4535,4537,4539],{"class":163,"line":1930},[161,4536,484],{"class":210},[161,4538,618],{"class":214},[161,4540,407],{"class":210},[161,4542,4543,4545,4547],{"class":163,"line":1953},[161,4544,799],{"class":210},[161,4546,4112],{"class":214},[161,4548,407],{"class":210},[161,4550,4551,4553,4555],{"class":163,"line":1967},[161,4552,799],{"class":210},[161,4554,155],{"class":214},[161,4556,407],{"class":210},[292,4558,4560],{"id":4559},"dependencies","Dependencies",[115,4562,4563],{},"We'll need a couple of extra dependencies to parse the Markdown files:",[832,4565,4566,4575],{},[835,4567,4568,4571,4572,4574],{},[158,4569,4570],{},"front-matter"," to be able to use ",[125,4573,57],{"href":58}," in our Markdown files",[835,4576,4577,4580],{},[158,4578,4579],{},"markdown-it-attrs"," to be able to add Tailwind CSS classes right in Markdown",[115,4582,4583],{},"Let's install them:",[151,4585,4587],{"className":265,"code":4586,"language":267,"meta":156,"style":156},"npm install front-matter markdown-it-attrs\n",[158,4588,4589],{"__ignoreMap":156},[161,4590,4591,4593,4595,4598],{"class":163,"line":164},[161,4592,2200],{"class":214},[161,4594,2203],{"class":167},[161,4596,4597],{"class":167}," front-matter",[161,4599,4600],{"class":167}," markdown-it-attrs\n",[292,4602,4604],{"id":4603},"configjs","config.js",[115,4606,4607],{},"Since we're not using the default setup anymore, we need to tell Maizzle where to look for 'templates' to compile.",[115,4609,4610,4611,4614,4615,4617],{},"Update ",[158,4612,4613],{},"build.templates"," to use .md files from the ",[158,4616,3655],{}," folder:",[151,4619,4623],{"className":4620,"code":4621,"filename":4604,"highlights":4622,"language":856,"meta":156,"style":156},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  build: {\n    content: ['content/**/*.md'], // [!code ++]\n  },\n}\n",[177],[158,4624,4625,4633,4641,4659,4663],{"__ignoreMap":156},[161,4626,4627,4629,4631],{"class":163,"line":164},[161,4628,883],{"class":214},[161,4630,886],{"class":214},[161,4632,890],{"class":889},[161,4634,4635,4637,4639],{"class":163,"line":171},[161,4636,895],{"class":167},[161,4638,302],{"class":889},[161,4640,890],{"class":889},[161,4642,4644,4647,4649,4652,4655,4657],{"class":4643,"line":177},[163,237,206,238],[161,4645,4646],{"class":167},"    content",[161,4648,302],{"class":889},[161,4650,4651],{"class":167}," [",[161,4653,4654],{"class":167},"'content/**/*.md'",[161,4656,1096],{"class":167},[161,4658,1386],{"class":889},[161,4660,4661],{"class":163,"line":183},[161,4662,944],{"class":889},[161,4664,4665],{"class":163,"line":189},[161,4666,2127],{"class":889},[140,4668,4670],{"id":4669},"compile-markdown","Compile Markdown",[115,4672,4673,4674,4676,4677,4680,4681,4684],{},"If you run ",[158,4675,3478],{}," now, you'll notice the files output to ",[158,4678,4679],{},"build_production"," only include the raw, unparsed content of your Markdown files: they were not compiled to HTML, neither did they use our ",[158,4682,4683],{},"main.html"," layout.",[115,4686,4687],{},"Maizzle doesn't know what layout to use or that the content of our .md files is Markdown that needs parsing, so we need to instruct it to do that.",[115,4689,4690,4691,4698],{},"We can use the ",[125,4692,4694,4697],{"href":4693},"/docs/events#beforerender",[158,4695,4696],{},"beforeRender"," event"," for this:",[151,4700,4702],{"className":853,"code":4701,"filename":4604,"language":856,"meta":156,"style":156},"import fm from 'front-matter'\n\nexport default {\n  beforeRender(html) {\n    const { body } = fm(html)\n\n    return `\n      \u003Cx-main>\n        \u003Cmd>${body}\u003C/md>\n      \u003C/x-main>`\n  },\n}\n",[158,4703,4704,4716,4720,4728,4741,4763,4767,4774,4779,4793,4798,4802],{"__ignoreMap":156},[161,4705,4706,4708,4711,4713],{"class":163,"line":164},[161,4707,2237],{"class":864},[161,4709,4710],{"class":2240}," fm",[161,4712,2244],{"class":889},[161,4714,4715],{"class":864}," 'front-matter'\n",[161,4717,4718],{"class":163,"line":171},[161,4719,396],{"emptyLinePlaceholder":395},[161,4721,4722,4724,4726],{"class":163,"line":177},[161,4723,883],{"class":214},[161,4725,886],{"class":214},[161,4727,890],{"class":889},[161,4729,4730,4733,4735,4737,4739],{"class":163,"line":183},[161,4731,4732],{"class":1046},"  beforeRender",[161,4734,1147],{"class":889},[161,4736,155],{"class":864},[161,4738,1153],{"class":889},[161,4740,890],{"class":889},[161,4742,4743,4745,4747,4750,4752,4755,4757,4759,4761],{"class":163,"line":189},[161,4744,2400],{"class":864},[161,4746,2831],{"class":889},[161,4748,4749],{"class":167}," body ",[161,4751,2847],{"class":889},[161,4753,4754],{"class":871}," =",[161,4756,4710],{"class":1046},[161,4758,1147],{"class":167},[161,4760,155],{"class":864},[161,4762,1325],{"class":167},[161,4764,4765],{"class":163,"line":335},[161,4766,396],{"emptyLinePlaceholder":395},[161,4768,4769,4771],{"class":163,"line":341},[161,4770,2483],{"class":214},[161,4772,4773],{"class":167}," `\n",[161,4775,4776],{"class":163,"line":347},[161,4777,4778],{"class":167},"      \u003Cx-main>\n",[161,4780,4781,4784,4786,4788,4790],{"class":163,"line":481},[161,4782,4783],{"class":167},"        \u003Cmd>",[161,4785,2963],{"class":889},[161,4787,4112],{"class":864},[161,4789,2847],{"class":889},[161,4791,4792],{"class":167},"\u003C/md>\n",[161,4794,4795],{"class":163,"line":491},[161,4796,4797],{"class":167},"      \u003C/x-main>`\n",[161,4799,4800],{"class":163,"line":501},[161,4801,944],{"class":889},[161,4803,4804],{"class":163,"line":541},[161,4805,2127],{"class":889},[115,4807,4808],{},"Here's a step-by-step explanation of what's happening:",[4810,4811,4812,4818,4827],"ol",{},[835,4813,4814,4815,4817],{},"We're hooking into the ",[158,4816,4696],{}," event to alter the HTML before it's compiled.",[835,4819,4820,4821,4823,4824,4826],{},"We use ",[158,4822,4570],{}," to extract the Markdown content from the file into a ",[158,4825,4112],{}," variable. This ensures that we only parse Markdown content, and not the Front Matter too.",[835,4828,4829,4830,4832,4833,4836,4837,4840,4841,4844,4845,4684],{},"We're returning a string that includes the contents of the ",[158,4831,4112],{}," property wrapped in ",[158,4834,4835],{},"\u003Cmd>"," tags, so Maizzle can parse them as Markdown. See the ",[125,4838,4839],{"href":46},"Markdown documentation"," for more info on this tag. Finally, the ",[158,4842,4843],{},"\u003Cx-main>"," tag tells Maizzle to use our ",[158,4846,4683],{},[115,4848,4849,4850,4852,4853,4855,4856,4858],{},"Run ",[158,4851,3478],{}," again and you'll see that the files in the ",[158,4854,4679],{}," folder are now compiled to HTML using our ",[158,4857,4683],{}," layout 🥳",[140,4860,4862],{"id":4861},"styling","Styling",[115,4864,4865,4866,4869],{},"Let's create a ",[158,4867,4868],{},"css/markdown.css"," file so we can add some global styles for our Markdown content:",[151,4871,4875],{"className":4872,"code":4873,"filename":4868,"language":4874,"meta":156,"style":156},"language-css shiki shiki-themes tailwind-css tailwind-css","h1 {\n  @apply text-3xl leading-9;\n}\n\np {\n  @apply m-0 mb-8;\n}\n\nimg {\n  @apply max-w-full leading-full align-middle;\n  border: 0;\n}\n","css",[158,4876,4877,4883,4906,4910,4914,4920,4938,4942,4946,4952,4969,4982],{"__ignoreMap":156},[161,4878,4879,4881],{"class":163,"line":164},[161,4880,111],{"class":214},[161,4882,890],{"class":3749},[161,4884,4885,4888,4891,4894,4897,4900,4903],{"class":163,"line":171},[161,4886,4887],{"class":4051},"  @",[161,4889,4890],{"class":2240},"apply",[161,4892,4893],{"class":2240}," text-",[161,4895,4896],{"class":4051},"3",[161,4898,4899],{"class":2240},"xl",[161,4901,4902],{"class":2240}," leading-",[161,4904,4905],{"class":4051},"9;\n",[161,4907,4908],{"class":163,"line":177},[161,4909,2127],{"class":3749},[161,4911,4912],{"class":163,"line":183},[161,4913,396],{"emptyLinePlaceholder":395},[161,4915,4916,4918],{"class":163,"line":189},[161,4917,115],{"class":214},[161,4919,890],{"class":3749},[161,4921,4922,4924,4926,4929,4932,4935],{"class":163,"line":335},[161,4923,4887],{"class":4051},[161,4925,4890],{"class":2240},[161,4927,4928],{"class":2240}," m-",[161,4930,4931],{"class":4051},"0 ",[161,4933,4934],{"class":2240},"mb-",[161,4936,4937],{"class":4051},"8;\n",[161,4939,4940],{"class":163,"line":341},[161,4941,2127],{"class":3749},[161,4943,4944],{"class":163,"line":347},[161,4945,396],{"emptyLinePlaceholder":395},[161,4947,4948,4950],{"class":163,"line":481},[161,4949,215],{"class":214},[161,4951,890],{"class":3749},[161,4953,4954,4956,4958,4961,4964,4967],{"class":163,"line":491},[161,4955,4887],{"class":4051},[161,4957,4890],{"class":2240},[161,4959,4960],{"class":2240}," max-w-full",[161,4962,4963],{"class":2240}," leading-full",[161,4965,4966],{"class":2240}," align-middle",[161,4968,4058],{"class":4051},[161,4970,4971,4974,4977,4980],{"class":163,"line":501},[161,4972,4973],{"class":2240},"  border",[161,4975,4976],{"class":4051},": ",[161,4978,4979],{"class":167},"0",[161,4981,4058],{"class":4051},[161,4983,4984],{"class":163,"line":541},[161,4985,2127],{"class":3749},[115,4987,4988,4989,4991],{},"Make sure to import this file in the ",[158,4990,2159],{}," tag:",[151,4993,4995],{"className":153,"code":4994,"filename":3733,"language":155,"meta":156,"style":156},"\u003Cstyle>\n  @import \"css/markdown.css\";\n  @import 'tailwindcss/components';\n  @import 'tailwindcss/utilities';\n\u003C/style>\n",[158,4996,4997,5005,5019,5033,5046],{"__ignoreMap":156},[161,4998,4999,5001,5003],{"class":163,"line":164},[161,5000,401],{"class":210},[161,5002,3576],{"class":214},[161,5004,407],{"class":210},[161,5006,5007,5010,5013,5015,5017],{"class":163,"line":171},[161,5008,5009],{"class":4051},"  @import",[161,5011,5012],{"class":218}," \"",[161,5014,4868],{"class":167},[161,5016,225],{"class":218},[161,5018,4058],{"class":4051},[161,5020,5021,5023,5026,5029,5031],{"class":163,"line":177},[161,5022,5009],{"class":4051},[161,5024,5025],{"class":218}," '",[161,5027,5028],{"class":167},"tailwindcss/components",[161,5030,3781],{"class":218},[161,5032,4058],{"class":4051},[161,5034,5035,5037,5039,5042,5044],{"class":163,"line":183},[161,5036,5009],{"class":4051},[161,5038,5025],{"class":218},[161,5040,5041],{"class":167},"tailwindcss/utilities",[161,5043,3781],{"class":218},[161,5045,4058],{"class":4051},[161,5047,5048,5050,5052],{"class":163,"line":189},[161,5049,799],{"class":210},[161,5051,3576],{"class":214},[161,5053,407],{"class":210},[115,5055,4849,5056,5058],{},[158,5057,3478],{}," again and you'll see that the styles are now applied:",[151,5060,5065],{"className":198,"code":5061,"filename":5062,"highlights":5063,"language":155,"meta":5064,"style":156},"  \u003Ch1>Hello world\u003C/h1> \u003C!-- [!code --]-->\n  \u003Ch1 style=\"font-size: 30px; line-height: 36px;\">Hello world\u003C/h1> \u003C!-- [!code ++]-->\n","build_production/newsletter-1.html",[171],"no-copy",[158,5066,5067,5085],{"__ignoreMap":156},[161,5068,5070,5072,5074,5076,5079,5081,5083],{"class":5069,"line":164},[163,206,207],[161,5071,211],{"class":210},[161,5073,111],{"class":214},[161,5075,233],{"class":210},[161,5077,5078],{"class":167},"Hello world",[161,5080,799],{"class":210},[161,5082,111],{"class":214},[161,5084,233],{"class":210},[161,5086,5088,5090,5092,5095,5097,5099,5102,5104,5106,5108,5110,5112],{"class":5087,"line":171},[163,237,206,238],[161,5089,211],{"class":210},[161,5091,111],{"class":214},[161,5093,5094],{"class":218}," style",[161,5096,222],{"class":210},[161,5098,225],{"class":218},[161,5100,5101],{"class":167},"font-size: 30px; line-height: 36px;",[161,5103,225],{"class":218},[161,5105,233],{"class":210},[161,5107,5078],{"class":167},[161,5109,799],{"class":210},[161,5111,111],{"class":214},[161,5113,233],{"class":210},[292,5115,9],{"id":5116},"tailwind-css",[115,5118,5119],{},"We can also use Tailwind CSS classes directly in our Markdown files.",[115,5121,5122,5123,5125],{},"To do this, we'll use the ",[158,5124,4579],{}," plugin, which allows us to add attributes like class names to elements right when writing Markdown.",[115,5127,4610,5128,5130],{},[158,5129,4604],{}," to have Maizzle use the plugin:",[151,5132,5135],{"className":4620,"code":5133,"filename":4604,"highlights":5134,"language":856,"meta":156,"style":156},"import mdAttrs from 'markdown-it-attrs'\n\nexport default {\n  markdown: {\n    plugins: [\n      {\n        plugin: mdAttrs, // [!code ++]\n      }\n    ]\n  },\n}\n",[341],[158,5136,5137,5149,5153,5161,5170,5180,5185,5197,5201,5206,5210],{"__ignoreMap":156},[161,5138,5139,5141,5144,5146],{"class":163,"line":164},[161,5140,2237],{"class":864},[161,5142,5143],{"class":2240}," mdAttrs",[161,5145,2244],{"class":889},[161,5147,5148],{"class":864}," 'markdown-it-attrs'\n",[161,5150,5151],{"class":163,"line":171},[161,5152,396],{"emptyLinePlaceholder":395},[161,5154,5155,5157,5159],{"class":163,"line":177},[161,5156,883],{"class":214},[161,5158,886],{"class":214},[161,5160,890],{"class":889},[161,5162,5163,5166,5168],{"class":163,"line":183},[161,5164,5165],{"class":167},"  markdown",[161,5167,302],{"class":889},[161,5169,890],{"class":889},[161,5171,5172,5175,5177],{"class":163,"line":189},[161,5173,5174],{"class":167},"    plugins",[161,5176,302],{"class":889},[161,5178,5179],{"class":167}," [\n",[161,5181,5182],{"class":163,"line":335},[161,5183,5184],{"class":889},"      {\n",[161,5186,5188,5191,5193,5195],{"class":5187,"line":341},[163,237,206,238],[161,5189,5190],{"class":167},"        plugin",[161,5192,302],{"class":889},[161,5194,5143],{"class":864},[161,5196,1386],{"class":889},[161,5198,5199],{"class":163,"line":347},[161,5200,2095],{"class":889},[161,5202,5203],{"class":163,"line":481},[161,5204,5205],{"class":167},"    ]\n",[161,5207,5208],{"class":163,"line":491},[161,5209,944],{"class":889},[161,5211,5212],{"class":163,"line":501},[161,5213,2127],{"class":889},[115,5215,5216],{},"You can now add Tailwind CSS classes to your Markdown elements by adding them inside curly braces after the content:",[151,5218,5220],{"className":3702,"code":5219,"filename":3698,"language":3595,"meta":156,"style":156},"---\ntitle: \"Edition #1\"\n---\n\n# Hello world {.m-0 .mb-10 .text-slate-900}\n",[158,5221,5222,5226,5239,5243,5247],{"__ignoreMap":156},[161,5223,5224],{"class":163,"line":164},[161,5225,381],{"class":210},[161,5227,5228,5230,5232,5234,5237],{"class":163,"line":171},[161,5229,4014],{"class":214},[161,5231,302],{"class":210},[161,5233,5012],{"class":218},[161,5235,5236],{"class":167},"Edition #1",[161,5238,4263],{"class":218},[161,5240,5241],{"class":163,"line":177},[161,5242,381],{"class":210},[161,5244,5245],{"class":163,"line":183},[161,5246,396],{"emptyLinePlaceholder":395},[161,5248,5249,5251],{"class":163,"line":189},[161,5250,3711],{"class":210},[161,5252,5253],{"class":214}," Hello world {.m-0 .mb-10 .text-slate-900}\n",[115,5255,5256],{},"Notice how classes include the leading dot, and are separated by spaces.",[115,5258,5259],{},"Result:",[151,5261,5264],{"className":198,"code":5262,"filename":5062,"highlights":5263,"language":155,"meta":5064,"style":156},"  \u003Ch1 style=\"font-size: 30px; line-height: 36px;\">Hello world\u003C/h1> \u003C!-- [!code --]-->\n  \u003Ch1 style=\"font-size: 30px; line-height: 36px; margin: 0 0 40px; color: #0f172a\">Hello world\u003C/h1> \u003C!-- [!code ++]-->\n",[171],[158,5265,5266,5293],{"__ignoreMap":156},[161,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291],{"class":5268,"line":164},[163,206,207],[161,5270,211],{"class":210},[161,5272,111],{"class":214},[161,5274,5094],{"class":218},[161,5276,222],{"class":210},[161,5278,225],{"class":218},[161,5280,5101],{"class":167},[161,5282,225],{"class":218},[161,5284,233],{"class":210},[161,5286,5078],{"class":167},[161,5288,799],{"class":210},[161,5290,111],{"class":214},[161,5292,233],{"class":210},[161,5294,5296,5298,5300,5302,5304,5306,5309,5311,5313,5315,5317,5319],{"class":5295,"line":171},[163,237,206,238],[161,5297,211],{"class":210},[161,5299,111],{"class":214},[161,5301,5094],{"class":218},[161,5303,222],{"class":210},[161,5305,225],{"class":218},[161,5307,5308],{"class":167},"font-size: 30px; line-height: 36px; margin: 0 0 40px; color: #0f172a",[161,5310,225],{"class":218},[161,5312,233],{"class":210},[161,5314,5078],{"class":167},[161,5316,799],{"class":210},[161,5318,111],{"class":214},[161,5320,233],{"class":210},[292,5322,5324],{"id":5323},"tailwindcsstypography","@tailwindcss/typography",[115,5326,5327,5328,5332,5333,138],{},"Although it's the obvious choice for styling Markdown content with Tailwind, we don't recommend using ",[125,5329,5324],{"href":5330,"rel":5331},"https://tailwindcss.com/docs/typography-plugin",[136]," for Markdown ",[5334,5335,3691],"em",{},[115,5337,5338],{},"The plugin is great for the web, but it contains complex CSS selectors that are not fully supported by most email clients, and cannot be properly inlined either.",[115,5340,5341],{},"Feel free to experiment with it, but consider yourself warned.",[140,5343,5345],{"id":5344},"syntax-highlighting","Syntax highlighting",[115,5347,5348,5349,5354,5355,5360],{},"You can use syntax highlighters like ",[125,5350,5353],{"href":5351,"rel":5352},"https://shiki.matsu.io/",[136],"Shiki"," or ",[125,5356,5359],{"href":5357,"rel":5358},"https://prismjs.com/",[136],"Prism"," to add syntax highlighting to fenced code blocks in your markdown.",[115,5362,5363],{},"For example, here's how you'd use Shiki.",[115,5365,5366],{},"First, install the library:",[151,5368,5370],{"className":265,"code":5369,"language":267,"meta":156,"style":156},"npm install shiki\n",[158,5371,5372],{"__ignoreMap":156},[161,5373,5374,5376,5378],{"class":163,"line":164},[161,5375,2200],{"class":214},[161,5377,2203],{"class":167},[161,5379,5380],{"class":167}," shiki\n",[115,5382,5383,5384,5386,5387,5390,5391,5394],{},"Next, define a custom ",[158,5385,237],{}," method for ",[158,5388,5389],{},"markdown-it",". Add it in the ",[158,5392,5393],{},"beforeCreate"," event so that the highlighter is retrieved once, before templates are compiled:",[151,5396,5398],{"className":853,"code":5397,"filename":4604,"language":856,"meta":156,"style":156},"import { createHighlighter } from 'shiki'\n\nexport default {\n  async beforeCreate(config) {\n    const highlighter = await createHighlighter({\n      themes: ['nord'],\n      langs: ['html'],\n    })\n\n    config = Object.assign(config, {\n      markdown: {\n        markdownit: {\n          highlight: (code, lang) => {\n            lang = lang || 'html'\n            return highlighter.codeToHtml(code, { lang, theme: 'nord' })\n          }\n        }\n      }\n    })\n  },\n}\n",[158,5399,5400,5416,5420,5428,5444,5462,5478,5494,5500,5504,5527,5536,5545,5566,5581,5618,5622,5627,5631,5637,5641],{"__ignoreMap":156},[161,5401,5402,5404,5406,5409,5411,5413],{"class":163,"line":164},[161,5403,2237],{"class":864},[161,5405,2831],{"class":889},[161,5407,5408],{"class":2240}," createHighlighter",[161,5410,3202],{"class":889},[161,5412,2244],{"class":889},[161,5414,5415],{"class":864}," 'shiki'\n",[161,5417,5418],{"class":163,"line":171},[161,5419,396],{"emptyLinePlaceholder":395},[161,5421,5422,5424,5426],{"class":163,"line":177},[161,5423,883],{"class":214},[161,5425,886],{"class":214},[161,5427,890],{"class":889},[161,5429,5430,5433,5436,5438,5440,5442],{"class":163,"line":183},[161,5431,5432],{"class":864},"  async",[161,5434,5435],{"class":1046}," beforeCreate",[161,5437,1147],{"class":889},[161,5439,2453],{"class":864},[161,5441,1153],{"class":889},[161,5443,890],{"class":889},[161,5445,5446,5448,5451,5453,5456,5458,5460],{"class":163,"line":189},[161,5447,2400],{"class":864},[161,5449,5450],{"class":167}," highlighter ",[161,5452,222],{"class":871},[161,5454,5455],{"class":214}," await",[161,5457,5408],{"class":1046},[161,5459,1147],{"class":167},[161,5461,1342],{"class":889},[161,5463,5464,5467,5469,5471,5474,5476],{"class":163,"line":335},[161,5465,5466],{"class":167},"      themes",[161,5468,302],{"class":889},[161,5470,4651],{"class":167},[161,5472,5473],{"class":167},"'nord'",[161,5475,1096],{"class":167},[161,5477,913],{"class":889},[161,5479,5480,5483,5485,5487,5490,5492],{"class":163,"line":341},[161,5481,5482],{"class":167},"      langs",[161,5484,302],{"class":889},[161,5486,4651],{"class":167},[161,5488,5489],{"class":167},"'html'",[161,5491,1096],{"class":167},[161,5493,913],{"class":889},[161,5495,5496,5498],{"class":163,"line":347},[161,5497,1413],{"class":889},[161,5499,1325],{"class":167},[161,5501,5502],{"class":163,"line":481},[161,5503,396],{"emptyLinePlaceholder":395},[161,5505,5506,5509,5511,5514,5516,5519,5521,5523,5525],{"class":163,"line":491},[161,5507,5508],{"class":864},"    config",[161,5510,4754],{"class":871},[161,5512,5513],{"class":864}," Object",[161,5515,138],{"class":889},[161,5517,5518],{"class":1046},"assign",[161,5520,1147],{"class":167},[161,5522,2453],{"class":864},[161,5524,1386],{"class":889},[161,5526,890],{"class":889},[161,5528,5529,5532,5534],{"class":163,"line":501},[161,5530,5531],{"class":167},"      markdown",[161,5533,302],{"class":889},[161,5535,890],{"class":889},[161,5537,5538,5541,5543],{"class":163,"line":541},[161,5539,5540],{"class":167},"        markdownit",[161,5542,302],{"class":889},[161,5544,890],{"class":889},[161,5546,5547,5550,5552,5554,5556,5558,5560,5562,5564],{"class":163,"line":550},[161,5548,5549],{"class":1046},"          highlight",[161,5551,302],{"class":889},[161,5553,1333],{"class":889},[161,5555,158],{"class":864},[161,5557,1386],{"class":889},[161,5559,3765],{"class":864},[161,5561,1153],{"class":889},[161,5563,1359],{"class":864},[161,5565,890],{"class":889},[161,5567,5568,5571,5573,5575,5578],{"class":163,"line":555},[161,5569,5570],{"class":864},"            lang",[161,5572,4754],{"class":871},[161,5574,3765],{"class":864},[161,5576,5577],{"class":214}," ||",[161,5579,5580],{"class":167}," 'html'\n",[161,5582,5583,5586,5589,5591,5594,5596,5598,5600,5602,5604,5606,5609,5611,5614,5616],{"class":163,"line":564},[161,5584,5585],{"class":214},"            return",[161,5587,5588],{"class":864}," highlighter",[161,5590,138],{"class":889},[161,5592,5593],{"class":1046},"codeToHtml",[161,5595,1147],{"class":167},[161,5597,158],{"class":864},[161,5599,1386],{"class":889},[161,5601,2831],{"class":889},[161,5603,3765],{"class":864},[161,5605,1386],{"class":889},[161,5607,5608],{"class":167}," theme",[161,5610,302],{"class":889},[161,5612,5613],{"class":167}," 'nord'",[161,5615,3202],{"class":889},[161,5617,1325],{"class":167},[161,5619,5620],{"class":163,"line":570},[161,5621,3040],{"class":889},[161,5623,5624],{"class":163,"line":579},[161,5625,5626],{"class":889},"        }\n",[161,5628,5629],{"class":163,"line":584},[161,5630,2095],{"class":889},[161,5632,5633,5635],{"class":163,"line":593},[161,5634,1413],{"class":889},[161,5636,1325],{"class":167},[161,5638,5639],{"class":163,"line":599},[161,5640,944],{"class":889},[161,5642,5643],{"class":163,"line":608},[161,5644,2127],{"class":889},[115,5646,5647],{},"Now all your markdown code blocks will be highlighted with the Nord theme.",[140,5649,5651],{"id":5650},"expressions","Expressions",[115,5653,5654,5655,5658],{},"You can use ",[125,5656,5650],{"href":5657},"/docs/templates#expressions"," in Markdown files just as you would in any Maizzle template:",[151,5660,5662],{"className":3740,"code":5661,"filename":3698,"language":3742,"meta":156,"style":156},"---\ntitle: \"Edition #1\"\n---\n\n# {{ page.title }}\n\nThis is the first newsletter.\n",[158,5663,5664,5668,5680,5684,5688,5698,5702],{"__ignoreMap":156},[161,5665,5666],{"class":163,"line":164},[161,5667,381],{"class":167},[161,5669,5670,5672,5674,5676,5678],{"class":163,"line":171},[161,5671,4014],{"class":214},[161,5673,302],{"class":210},[161,5675,5012],{"class":218},[161,5677,5236],{"class":167},[161,5679,4263],{"class":218},[161,5681,5682],{"class":163,"line":177},[161,5683,381],{"class":167},[161,5685,5686],{"class":163,"line":183},[161,5687,396],{"emptyLinePlaceholder":395},[161,5689,5690,5693,5695],{"class":163,"line":189},[161,5691,5692],{"class":167},"# {{ ",[161,5694,4003],{"class":864},[161,5696,5697],{"class":167}," }}\n",[161,5699,5700],{"class":163,"line":335},[161,5701,396],{"emptyLinePlaceholder":395},[161,5703,5704],{"class":163,"line":341},[161,5705,3723],{"class":167},[140,5707,5709],{"id":5708},"components","Components",[115,5711,5712],{},"You can also import Maizzle components in your Markdown files.",[115,5714,5715,5716,5719],{},"For example, let's create an ",[158,5717,5718],{},"\u003Cx-alert>"," component:",[151,5721,5724],{"className":153,"code":5722,"filename":5723,"language":155,"meta":156,"style":156},"\u003Ctable class=\"w-full mb-8\">\n  \u003Ctr>\n    \u003Ctd\n      attributes\n      class=\"py-2 px-4 bg-blue-100 text-blue-600 rounded\"\n    >\n      \u003Cyield />\n    \u003C/td>\n  \u003C/tr>\n\u003C/table>\n","components/alert.html",[158,5725,5726,5745,5753,5760,5765,5779,5784,5793,5801,5809],{"__ignoreMap":156},[161,5727,5728,5730,5732,5734,5736,5738,5741,5743],{"class":163,"line":164},[161,5729,401],{"class":210},[161,5731,4375],{"class":214},[161,5733,4115],{"class":218},[161,5735,222],{"class":210},[161,5737,225],{"class":218},[161,5739,5740],{"class":167},"w-full mb-8",[161,5742,225],{"class":218},[161,5744,407],{"class":210},[161,5746,5747,5749,5751],{"class":163,"line":171},[161,5748,211],{"class":210},[161,5750,4395],{"class":214},[161,5752,407],{"class":210},[161,5754,5755,5757],{"class":163,"line":177},[161,5756,439],{"class":210},[161,5758,5759],{"class":214},"td\n",[161,5761,5762],{"class":163,"line":183},[161,5763,5764],{"class":218},"      attributes\n",[161,5766,5767,5770,5772,5774,5777],{"class":163,"line":189},[161,5768,5769],{"class":218},"      class",[161,5771,222],{"class":210},[161,5773,225],{"class":218},[161,5775,5776],{"class":167},"py-2 px-4 bg-blue-100 text-blue-600 rounded",[161,5778,4263],{"class":218},[161,5780,5781],{"class":163,"line":335},[161,5782,5783],{"class":210},"    >\n",[161,5785,5786,5788,5790],{"class":163,"line":341},[161,5787,4193],{"class":210},[161,5789,4475],{"class":214},[161,5791,5792],{"class":210}," />\n",[161,5794,5795,5797,5799],{"class":163,"line":347},[161,5796,4225],{"class":210},[161,5798,4405],{"class":214},[161,5800,407],{"class":210},[161,5802,5803,5805,5807],{"class":163,"line":481},[161,5804,484],{"class":210},[161,5806,4395],{"class":214},[161,5808,407],{"class":210},[161,5810,5811,5813,5815],{"class":163,"line":491},[161,5812,799],{"class":210},[161,5814,4375],{"class":214},[161,5816,407],{"class":210},[115,5818,5819,5820,5823],{},"Notice the ",[158,5821,5822],{},"attributes"," attribute - this indicates that any attributes passed to the component should be added to this element, instead of the root element.",[115,5825,5826],{},"We can use it like this:",[151,5828,5830],{"className":3740,"code":5829,"filename":3698,"language":3742,"meta":156,"style":156},"---\ntitle: \"Edition #1\"\n---\n\n# {{ page.title }}\n\nThis is the first newsletter.\n\n\u003Cx-alert>\n  Notice: this is an alert.\n\u003C/x-alert>\n",[158,5831,5832,5836,5848,5852,5856,5864,5868,5872,5876,5885,5890],{"__ignoreMap":156},[161,5833,5834],{"class":163,"line":164},[161,5835,381],{"class":167},[161,5837,5838,5840,5842,5844,5846],{"class":163,"line":171},[161,5839,4014],{"class":214},[161,5841,302],{"class":210},[161,5843,5012],{"class":218},[161,5845,5236],{"class":167},[161,5847,4263],{"class":218},[161,5849,5850],{"class":163,"line":177},[161,5851,381],{"class":167},[161,5853,5854],{"class":163,"line":183},[161,5855,396],{"emptyLinePlaceholder":395},[161,5857,5858,5860,5862],{"class":163,"line":189},[161,5859,5692],{"class":167},[161,5861,4003],{"class":864},[161,5863,5697],{"class":167},[161,5865,5866],{"class":163,"line":335},[161,5867,396],{"emptyLinePlaceholder":395},[161,5869,5870],{"class":163,"line":341},[161,5871,3723],{"class":167},[161,5873,5874],{"class":163,"line":347},[161,5875,396],{"emptyLinePlaceholder":395},[161,5877,5878,5880,5883],{"class":163,"line":481},[161,5879,401],{"class":210},[161,5881,5882],{"class":214},"x-alert",[161,5884,407],{"class":210},[161,5886,5887],{"class":163,"line":491},[161,5888,5889],{"class":167},"  Notice: this is an alert.\n",[161,5891,5892,5894,5896],{"class":163,"line":501},[161,5893,799],{"class":210},[161,5895,5882],{"class":214},[161,5897,407],{"class":210},[292,5899,5901],{"id":5900},"markdown-in-components","Markdown in components",[115,5903,5904],{},"To use Markdown inside a component, add an empty line before and after the content that you pass inside:",[151,5906,5908],{"className":3740,"code":5907,"filename":3698,"language":3742,"meta":156,"style":156},"---\ntitle: \"Edition #1\"\n---\n\n\u003Cx-alert>\n\n  # {{ page.title }}\n\n  This is the first newsletter.\n\n\u003C/x-alert>\n",[158,5909,5910,5914,5926,5930,5934,5942,5946,5955,5959,5964,5968],{"__ignoreMap":156},[161,5911,5912],{"class":163,"line":164},[161,5913,381],{"class":167},[161,5915,5916,5918,5920,5922,5924],{"class":163,"line":171},[161,5917,4014],{"class":214},[161,5919,302],{"class":210},[161,5921,5012],{"class":218},[161,5923,5236],{"class":167},[161,5925,4263],{"class":218},[161,5927,5928],{"class":163,"line":177},[161,5929,381],{"class":167},[161,5931,5932],{"class":163,"line":183},[161,5933,396],{"emptyLinePlaceholder":395},[161,5935,5936,5938,5940],{"class":163,"line":189},[161,5937,401],{"class":210},[161,5939,5882],{"class":214},[161,5941,407],{"class":210},[161,5943,5944],{"class":163,"line":335},[161,5945,396],{"emptyLinePlaceholder":395},[161,5947,5948,5951,5953],{"class":163,"line":341},[161,5949,5950],{"class":167},"  # {{ ",[161,5952,4003],{"class":864},[161,5954,5697],{"class":167},[161,5956,5957],{"class":163,"line":347},[161,5958,396],{"emptyLinePlaceholder":395},[161,5960,5961],{"class":163,"line":481},[161,5962,5963],{"class":167},"  This is the first newsletter.\n",[161,5965,5966],{"class":163,"line":491},[161,5967,396],{"emptyLinePlaceholder":395},[161,5969,5970,5972,5974],{"class":163,"line":501},[161,5971,799],{"class":210},[161,5973,5882],{"class":214},[161,5975,407],{"class":210},[115,5977,5978,5979,5981,5982,5985,5986,5989],{},"To prevent an issue with code indentation in ",[158,5980,5389],{}," that would result in ",[158,5983,5984],{},"\u003Cpre>"," tags being added to the rendered HTML, simply don't indent the closing tags after ",[158,5987,5988],{},"\u003Cyield />",". A bit of a workaround, but it works:",[151,5991,5993],{"className":153,"code":5992,"filename":5723,"language":155,"meta":156,"style":156},"\u003Ctable class=\"w-full mb-8\">\n  \u003Ctr>\n    \u003Ctd\n      attributes\n      class=\"py-2 px-4 bg-blue-100 text-blue-600 rounded\"\n    >\n      \u003Cyield />\n\u003C/td>\n\u003C/tr>\n\u003C/table>\n",[158,5994,5995,6013,6021,6027,6031,6043,6047,6055,6063,6071],{"__ignoreMap":156},[161,5996,5997,5999,6001,6003,6005,6007,6009,6011],{"class":163,"line":164},[161,5998,401],{"class":210},[161,6000,4375],{"class":214},[161,6002,4115],{"class":218},[161,6004,222],{"class":210},[161,6006,225],{"class":218},[161,6008,5740],{"class":167},[161,6010,225],{"class":218},[161,6012,407],{"class":210},[161,6014,6015,6017,6019],{"class":163,"line":171},[161,6016,211],{"class":210},[161,6018,4395],{"class":214},[161,6020,407],{"class":210},[161,6022,6023,6025],{"class":163,"line":177},[161,6024,439],{"class":210},[161,6026,5759],{"class":214},[161,6028,6029],{"class":163,"line":183},[161,6030,5764],{"class":218},[161,6032,6033,6035,6037,6039,6041],{"class":163,"line":189},[161,6034,5769],{"class":218},[161,6036,222],{"class":210},[161,6038,225],{"class":218},[161,6040,5776],{"class":167},[161,6042,4263],{"class":218},[161,6044,6045],{"class":163,"line":335},[161,6046,5783],{"class":210},[161,6048,6049,6051,6053],{"class":163,"line":341},[161,6050,4193],{"class":210},[161,6052,4475],{"class":214},[161,6054,5792],{"class":210},[161,6056,6057,6059,6061],{"class":163,"line":347},[161,6058,799],{"class":210},[161,6060,4405],{"class":214},[161,6062,407],{"class":210},[161,6064,6065,6067,6069],{"class":163,"line":481},[161,6066,799],{"class":210},[161,6068,4395],{"class":214},[161,6070,407],{"class":210},[161,6072,6073,6075,6077],{"class":163,"line":491},[161,6074,799],{"class":210},[161,6076,4375],{"class":214},[161,6078,407],{"class":210},[115,6080,6081,6082,6085],{},"Alternatively, you may use the ",[158,6083,6084],{},"prettify"," transformer to remove the indentation:",[151,6087,6089],{"className":853,"code":6088,"filename":4604,"language":856,"meta":156,"style":156},"import { prettify } from '@maizzle/framework'\n\nexport default {\n  afterRender(html) {\n    return prettify(html, {\n      indent_size: 0,\n    })\n  }\n}\n",[158,6090,6091,6107,6111,6119,6132,6146,6158,6164,6168],{"__ignoreMap":156},[161,6092,6093,6095,6097,6100,6102,6104],{"class":163,"line":164},[161,6094,2237],{"class":864},[161,6096,2831],{"class":889},[161,6098,6099],{"class":2240}," prettify",[161,6101,3202],{"class":889},[161,6103,2244],{"class":889},[161,6105,6106],{"class":864}," '@maizzle/framework'\n",[161,6108,6109],{"class":163,"line":171},[161,6110,396],{"emptyLinePlaceholder":395},[161,6112,6113,6115,6117],{"class":163,"line":177},[161,6114,883],{"class":214},[161,6116,886],{"class":214},[161,6118,890],{"class":889},[161,6120,6121,6124,6126,6128,6130],{"class":163,"line":183},[161,6122,6123],{"class":1046},"  afterRender",[161,6125,1147],{"class":889},[161,6127,155],{"class":864},[161,6129,1153],{"class":889},[161,6131,890],{"class":889},[161,6133,6134,6136,6138,6140,6142,6144],{"class":163,"line":189},[161,6135,2483],{"class":214},[161,6137,6099],{"class":1046},[161,6139,1147],{"class":167},[161,6141,155],{"class":864},[161,6143,1386],{"class":889},[161,6145,890],{"class":889},[161,6147,6148,6151,6153,6156],{"class":163,"line":335},[161,6149,6150],{"class":167},"      indent_size",[161,6152,302],{"class":889},[161,6154,6155],{"class":167}," 0",[161,6157,913],{"class":889},[161,6159,6160,6162],{"class":163,"line":341},[161,6161,1413],{"class":889},[161,6163,1325],{"class":167},[161,6165,6166],{"class":163,"line":347},[161,6167,1420],{"class":889},[161,6169,6170],{"class":163,"line":481},[161,6171,2127],{"class":889},[140,6173,6175],{"id":6174},"custom-layouts","Custom layouts",[115,6177,6178],{},"You may need to use different designs for your newsletters. We can use Front Matter to do this, by defining a custom layout name for each Markdown file to use.",[115,6180,6181,6182,6185,6186,138],{},"Go ahead and create ",[158,6183,6184],{},"layouts/secondary.html"," based on ",[158,6187,4683],{},[115,6189,6190,6191,6193,6194,6196,6197,138],{},"For the purpose of this tutorial, we'll just change the body background color to differentiate it from the ",[158,6192,4683],{}," layout: replace both occurrences of ",[158,6195,4132],{}," with ",[158,6198,6199],{},"bg-indigo-200",[115,6201,6202,6203,6205,6206,6208],{},"Next, update the ",[158,6204,4696],{}," event in ",[158,6207,4604],{}," to use the layout name from Front Matter:",[151,6210,6212],{"className":853,"code":6211,"filename":4604,"language":856,"meta":156,"style":156},"import fm from 'front-matter'\n\nexport default {\n  beforeRender(html) {\n    const { attributes, body } = fm(html)\n    const layout = attributes.layout || 'main'\n\n    return `\n      \u003Cx-${layout}>\n        \u003Cmd>${body}\u003C/md>\n      \u003C/x-${layout}>`\n  }\n}\n",[158,6213,6214,6224,6228,6236,6248,6272,6292,6296,6302,6315,6327,6341,6345],{"__ignoreMap":156},[161,6215,6216,6218,6220,6222],{"class":163,"line":164},[161,6217,2237],{"class":864},[161,6219,4710],{"class":2240},[161,6221,2244],{"class":889},[161,6223,4715],{"class":864},[161,6225,6226],{"class":163,"line":171},[161,6227,396],{"emptyLinePlaceholder":395},[161,6229,6230,6232,6234],{"class":163,"line":177},[161,6231,883],{"class":214},[161,6233,886],{"class":214},[161,6235,890],{"class":889},[161,6237,6238,6240,6242,6244,6246],{"class":163,"line":183},[161,6239,4732],{"class":1046},[161,6241,1147],{"class":889},[161,6243,155],{"class":864},[161,6245,1153],{"class":889},[161,6247,890],{"class":889},[161,6249,6250,6252,6254,6256,6258,6260,6262,6264,6266,6268,6270],{"class":163,"line":189},[161,6251,2400],{"class":864},[161,6253,2831],{"class":889},[161,6255,2138],{"class":167},[161,6257,1386],{"class":889},[161,6259,4749],{"class":167},[161,6261,2847],{"class":889},[161,6263,4754],{"class":871},[161,6265,4710],{"class":1046},[161,6267,1147],{"class":167},[161,6269,155],{"class":864},[161,6271,1325],{"class":167},[161,6273,6274,6276,6279,6281,6283,6285,6287,6289],{"class":163,"line":335},[161,6275,2400],{"class":864},[161,6277,6278],{"class":167}," layout ",[161,6280,222],{"class":871},[161,6282,2138],{"class":864},[161,6284,138],{"class":889},[161,6286,3726],{"class":864},[161,6288,5577],{"class":214},[161,6290,6291],{"class":167}," 'main'\n",[161,6293,6294],{"class":163,"line":341},[161,6295,396],{"emptyLinePlaceholder":395},[161,6297,6298,6300],{"class":163,"line":347},[161,6299,2483],{"class":214},[161,6301,4773],{"class":167},[161,6303,6304,6307,6309,6311,6313],{"class":163,"line":481},[161,6305,6306],{"class":167},"      \u003Cx-",[161,6308,2963],{"class":889},[161,6310,3726],{"class":864},[161,6312,2847],{"class":889},[161,6314,407],{"class":167},[161,6316,6317,6319,6321,6323,6325],{"class":163,"line":491},[161,6318,4783],{"class":167},[161,6320,2963],{"class":889},[161,6322,4112],{"class":864},[161,6324,2847],{"class":889},[161,6326,4792],{"class":167},[161,6328,6329,6332,6334,6336,6338],{"class":163,"line":501},[161,6330,6331],{"class":167},"      \u003C/x-",[161,6333,2963],{"class":889},[161,6335,3726],{"class":864},[161,6337,2847],{"class":889},[161,6339,6340],{"class":167},">`\n",[161,6342,6343],{"class":163,"line":541},[161,6344,1420],{"class":889},[161,6346,6347],{"class":163,"line":550},[161,6348,2127],{"class":889},[115,6350,6351],{},"You can now specify a custom layout for each Markdown file, via Front Matter:",[151,6353,6355],{"className":3702,"code":6354,"filename":3698,"language":3595,"meta":156,"style":156},"---\nlayout: secondary\n---\n\n# Hello world\n\nWelcome to our first newsletter.\n",[158,6356,6357,6361,6370,6374,6378,6384,6388],{"__ignoreMap":156},[161,6358,6359],{"class":163,"line":164},[161,6360,381],{"class":210},[161,6362,6363,6365,6367],{"class":163,"line":171},[161,6364,3726],{"class":214},[161,6366,302],{"class":210},[161,6368,6369],{"class":167}," secondary\n",[161,6371,6372],{"class":163,"line":177},[161,6373,381],{"class":210},[161,6375,6376],{"class":163,"line":183},[161,6377,396],{"emptyLinePlaceholder":395},[161,6379,6380,6382],{"class":163,"line":189},[161,6381,3711],{"class":210},[161,6383,3714],{"class":214},[161,6385,6386],{"class":163,"line":335},[161,6387,396],{"emptyLinePlaceholder":395},[161,6389,6390],{"class":163,"line":341},[161,6391,6392],{"class":167},"Welcome to our first newsletter.\n",[115,6394,6395,6396,6398],{},"You'll notice that the compiled HTML file at ",[158,6397,5062],{}," now has an indigo background color, which means it's using our custom layout.",[140,6400,6402],{"id":6401},"outlook-note","Outlook note",[115,6404,6405],{},"Your markdown may include retina-sized images that will very likely be larger in natural size than the 600px width of the layout.",[115,6407,6408,6409,6412],{},"By default, compiling Markdown to HTML will not add a ",[158,6410,6411],{},"width"," attribute to images.",[115,6414,6415],{},"While this is fine in browsers and modern email clients because you can control it through CSS, it will be an issue in Outlook for Windows: not specifying the width of an image will render it at its natural size, blowing up the layout in case of retina images.",[115,6417,6418,6419,6421],{},"To fix this, we can use ",[158,6420,4579],{}," to manually add our image width in Markdown:",[151,6423,6425],{"className":3702,"code":6424,"filename":3698,"language":3595,"meta":156,"style":156},"# Hello world\n\nWelcome to our first newsletter.\n\n![Image description](/images/retina-image.jpg){width=600}\n",[158,6426,6427,6433,6437,6441,6445],{"__ignoreMap":156},[161,6428,6429,6431],{"class":163,"line":164},[161,6430,3711],{"class":210},[161,6432,3714],{"class":214},[161,6434,6435],{"class":163,"line":171},[161,6436,396],{"emptyLinePlaceholder":395},[161,6438,6439],{"class":163,"line":177},[161,6440,6392],{"class":167},[161,6442,6443],{"class":163,"line":183},[161,6444,396],{"emptyLinePlaceholder":395},[161,6446,6447,6450,6453,6455,6458,6460],{"class":163,"line":189},[161,6448,6449],{"class":210},"![",[161,6451,6452],{"class":167},"Image description",[161,6454,1085],{"class":210},[161,6456,6457],{"class":167},"/images/retina-image.jpg",[161,6459,1153],{"class":210},[161,6461,6462],{"class":167},"{width=600}\n",[115,6464,6465,6466,6468,6469,6472,6473,6475,6476,6478],{},"Notice how there's no space between the last ",[158,6467,1153],{}," and the opening ",[158,6470,6471],{},"{"," where we specify the attribute. This ensures the attribute is added to the ",[158,6474,215],{}," tag, and not the ",[158,6477,115],{}," tag wrapping it.",[140,6480,3559],{"id":3558},[832,6482,6483,6488,6496],{},[835,6484,6485,3568],{},[125,6486,3567],{"href":3620,"rel":6487},[136],[835,6489,6490,6491],{},"For the new components syntax, see the Maizzle 4.4.0-beta ",[125,6492,6495],{"href":6493,"rel":6494},"https://github.com/maizzle/framework/releases/tag/v4.4.0-beta.1",[136],"release notes",[835,6497,6498,6499],{},"Docs for ",[125,6500,6501],{"href":46},"Markdown in Maizzle",[3576,6503,6504],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}",{"title":156,"searchDepth":171,"depth":171,"links":6506},[6507,6513,6514,6518,6519,6520,6523,6524,6525],{"id":258,"depth":171,"text":259,"children":6508},[6509,6510,6511,6512],{"id":294,"depth":177,"text":295},{"id":3726,"depth":177,"text":3727},{"id":4559,"depth":177,"text":4560},{"id":4603,"depth":177,"text":4604},{"id":4669,"depth":171,"text":4670},{"id":4861,"depth":171,"text":4862,"children":6515},[6516,6517],{"id":5116,"depth":177,"text":9},{"id":5323,"depth":177,"text":5324},{"id":5344,"depth":171,"text":5345},{"id":5650,"depth":171,"text":5651},{"id":5708,"depth":171,"text":5709,"children":6521},[6522],{"id":5900,"depth":177,"text":5901},{"id":6174,"depth":171,"text":6175},{"id":6401,"depth":171,"text":6402},{"id":3558,"depth":171,"text":3559},"2022-12-05T00:00:00.000Z","Learn how to create responsive HTML emails from Markdown files in Maizzle. Write your newsletter in .md files, import components and style it all with Tailwind CSS.",{},"/guides/markdown-emails",{"title":3604,"description":6527},{"loc":6529},"guides/markdown-emails","YHwknycDPMFa23ey1KDKOMduF6frluWp1KguG80_-uM",{"id":6535,"title":6536,"body":6537,"date":7524,"description":7525,"extension":3595,"meta":7526,"navigation":395,"path":98,"seo":7527,"sitemap":7528,"stem":7529,"__hash__":7530},"guides/guides/amp-email.md","How to create an AMP for Email template",{"type":108,"value":6538,"toc":7516},[6539,6542,6547,6550,6563,6571,6575,6578,6588,6593,6595,6597,6599,6609,6811,6814,6823,6829,7184,7201,7207,7211,7214,7217,7256,7259,7292,7296,7302,7305,7334,7341,7347,7395,7407,7440,7447,7457,7491,7497,7499,7513],[111,6540,6536],{"id":6541},"how-to-create-an-amp-for-email-template",[115,6543,6546],{"className":6544},[6545],"text-sm","Last updated: March 18, 2023",[115,6548,6549],{},"In this tutorial, you'll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates.",[115,6551,6552,6553,5354,6558,138],{},"For a syntax refresher, checkout the ",[125,6554,6557],{"href":6555,"rel":6556},"https://amp.dev/documentation/guides-and-tutorials/start/create_email/?format=email",[136],"AMP Email docs",[125,6559,6562],{"href":6560,"rel":6561},"https://amp.dev/documentation/examples/?format=email",[136],"AMP Email examples",[115,6564,6565,6566,138],{},"Want to dive right in? Checkout our ",[125,6567,6570],{"href":6568,"rel":6569},"https://github.com/maizzle/starter-amp4email",[136],"AMP for Email Starter",[140,6572,6574],{"id":6573},"initial-setup","Initial setup",[115,6576,6577],{},"As always, let's scaffold a new project:",[151,6579,6580],{"className":265,"code":266,"language":267,"meta":156,"style":156},[158,6581,6582],{"__ignoreMap":156},[161,6583,6584,6586],{"class":163,"line":164},[161,6585,274],{"class":214},[161,6587,277],{"class":167},[115,6589,280,6590,284],{},[158,6591,6592],{},"./amp-emails",[115,6594,287],{},[115,6596,290],{},[140,6598,3727],{"id":3726},[115,6600,6601,6602,6605,6606,302],{},"AMP for Email requires some special markup, so let's create an ",[158,6603,6604],{},"amp.html"," Layout and save it under ",[158,6607,6608],{},"layouts",[151,6610,6613],{"className":153,"code":6611,"filename":6612,"language":155,"meta":156,"style":156},"\u003C!doctype html>\n\u003Chtml ⚡4email>\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cscript async src=\"https://cdn.ampproject.org/v0.js\">\u003C/script>\n  \u003Cstyle amp4email-boilerplate>body{visibility:hidden}\u003C/style>\n  \u003Cstyle amp-custom>{{{ page.css }}}\u003C/style>\n  \u003Cstack name=\"head\" />\n\u003C/head>\n\u003Cbody>\n  \u003Cyield />\n\u003C/body>\n\u003C/html>\n","layouts/amp.html",[158,6614,6615,6626,6637,6645,6663,6689,6720,6753,6771,6779,6787,6795,6803],{"__ignoreMap":156},[161,6616,6617,6619,6621,6624],{"class":163,"line":164},[161,6618,3750],{"class":210},[161,6620,3753],{"class":214},[161,6622,6623],{"class":218}," html",[161,6625,407],{"class":210},[161,6627,6628,6630,6632,6635],{"class":163,"line":171},[161,6629,401],{"class":210},[161,6631,155],{"class":214},[161,6633,6634],{"class":218}," ⚡4email",[161,6636,407],{"class":210},[161,6638,6639,6641,6643],{"class":163,"line":177},[161,6640,401],{"class":210},[161,6642,3812],{"class":214},[161,6644,407],{"class":210},[161,6646,6647,6649,6651,6653,6655,6657,6659,6661],{"class":163,"line":183},[161,6648,211],{"class":210},[161,6650,3821],{"class":214},[161,6652,3824],{"class":218},[161,6654,222],{"class":210},[161,6656,225],{"class":218},[161,6658,3840],{"class":167},[161,6660,225],{"class":218},[161,6662,407],{"class":210},[161,6664,6665,6667,6670,6673,6675,6677,6680,6682,6685,6687],{"class":163,"line":189},[161,6666,211],{"class":210},[161,6668,6669],{"class":214},"script",[161,6671,6672],{"class":218}," async src",[161,6674,222],{"class":210},[161,6676,225],{"class":218},[161,6678,6679],{"class":167},"https://cdn.ampproject.org/v0.js",[161,6681,225],{"class":218},[161,6683,6684],{"class":210},">\u003C/",[161,6686,6669],{"class":214},[161,6688,407],{"class":210},[161,6690,6691,6693,6695,6698,6700,6702,6704,6707,6709,6712,6714,6716,6718],{"class":163,"line":335},[161,6692,211],{"class":210},[161,6694,3576],{"class":214},[161,6696,6697],{"class":218}," amp4email-boilerplate",[161,6699,233],{"class":210},[161,6701,4112],{"class":214},[161,6703,6471],{"class":3749},[161,6705,6706],{"class":2240},"visibility",[161,6708,302],{"class":4051},[161,6710,4174],{"class":6711},"snKqK",[161,6713,2847],{"class":3749},[161,6715,799],{"class":210},[161,6717,3576],{"class":214},[161,6719,407],{"class":210},[161,6721,6722,6724,6726,6729,6731,6733,6735,6738,6740,6742,6744,6747,6749,6751],{"class":163,"line":341},[161,6723,211],{"class":210},[161,6725,3576],{"class":214},[161,6727,6728],{"class":218}," amp-custom",[161,6730,233],{"class":210},[161,6732,6471],{"class":3749},[161,6734,3772],{"class":4051},[161,6736,6737],{"class":2240},"page",[161,6739,138],{"class":4051},[161,6741,4874],{"class":2240},[161,6743,3202],{"class":3749},[161,6745,6746],{"class":167},"}}",[161,6748,799],{"class":210},[161,6750,3576],{"class":214},[161,6752,407],{"class":210},[161,6754,6755,6757,6759,6761,6763,6765,6767,6769],{"class":163,"line":347},[161,6756,211],{"class":210},[161,6758,4082],{"class":214},[161,6760,3194],{"class":218},[161,6762,222],{"class":210},[161,6764,225],{"class":218},[161,6766,3812],{"class":167},[161,6768,225],{"class":218},[161,6770,5792],{"class":210},[161,6772,6773,6775,6777],{"class":163,"line":481},[161,6774,799],{"class":210},[161,6776,3812],{"class":214},[161,6778,407],{"class":210},[161,6780,6781,6783,6785],{"class":163,"line":491},[161,6782,401],{"class":210},[161,6784,4112],{"class":214},[161,6786,407],{"class":210},[161,6788,6789,6791,6793],{"class":163,"line":501},[161,6790,211],{"class":210},[161,6792,4475],{"class":214},[161,6794,5792],{"class":210},[161,6796,6797,6799,6801],{"class":163,"line":541},[161,6798,799],{"class":210},[161,6800,4112],{"class":214},[161,6802,407],{"class":210},[161,6804,6805,6807,6809],{"class":163,"line":550},[161,6806,799],{"class":210},[161,6808,155],{"class":214},[161,6810,407],{"class":210},[140,6812,6813],{"id":2879},"Template",[115,6815,6816,6817,6822],{},"For this tutorial, we'll use the ",[125,6818,6821],{"href":6819,"rel":6820},"https://amp.dev/documentation/components/amp-carousel/?format=email",[136],"AMP Carousel"," component.",[115,6824,367,6825,6828],{},[158,6826,6827],{},"emails/amp/carousel.html"," and add a basic AMP carousel:",[151,6830,6832],{"className":153,"code":6831,"filename":6827,"language":155,"meta":156,"style":156},"\u003Cx-amp>\n  \u003Cpush name=\"head\">\n    \u003Cscript async custom-element=\"amp-carousel\" src=\"https://cdn.ampproject.org/v0/amp-carousel-0.2.js\">\u003C/script>\n  \u003C/push>\n\n  \u003Cdiv class=\"p-4\">\n    \u003Cdiv class=\"max-w-full\">\n      \u003Camp-carousel width=\"600\" height=\"400\" layout=\"responsive\" type=\"slides\">\n        \u003Camp-img src=\"https://ampbyexample.com/img/image1.jpg\" width=\"600\" height=\"400\" alt=\"a sample image\" />\n        \u003Camp-img src=\"https://ampbyexample.com/img/image2.jpg\" width=\"600\" height=\"400\" alt=\"another sample image\" />\n        \u003Camp-img src=\"https://ampbyexample.com/img/image3.jpg\" width=\"600\" height=\"400\" alt=\"and another sample image\" />\n      \u003C/amp-carousel>\n    \u003C/div>\n  \u003C/div>\n\u003C/x-amp>\n",[158,6833,6834,6843,6861,6896,6904,6908,6927,6946,7001,7052,7102,7152,7160,7168,7176],{"__ignoreMap":156},[161,6835,6836,6838,6841],{"class":163,"line":164},[161,6837,401],{"class":210},[161,6839,6840],{"class":214},"x-amp",[161,6842,407],{"class":210},[161,6844,6845,6847,6849,6851,6853,6855,6857,6859],{"class":163,"line":171},[161,6846,211],{"class":210},[161,6848,1401],{"class":214},[161,6850,3194],{"class":218},[161,6852,222],{"class":210},[161,6854,225],{"class":218},[161,6856,3812],{"class":167},[161,6858,225],{"class":218},[161,6860,407],{"class":210},[161,6862,6863,6865,6867,6870,6872,6874,6877,6879,6881,6883,6885,6888,6890,6892,6894],{"class":163,"line":177},[161,6864,439],{"class":210},[161,6866,6669],{"class":214},[161,6868,6869],{"class":218}," async custom-element",[161,6871,222],{"class":210},[161,6873,225],{"class":218},[161,6875,6876],{"class":167},"amp-carousel",[161,6878,225],{"class":218},[161,6880,219],{"class":218},[161,6882,222],{"class":210},[161,6884,225],{"class":218},[161,6886,6887],{"class":167},"https://cdn.ampproject.org/v0/amp-carousel-0.2.js",[161,6889,225],{"class":218},[161,6891,6684],{"class":210},[161,6893,6669],{"class":214},[161,6895,407],{"class":210},[161,6897,6898,6900,6902],{"class":163,"line":183},[161,6899,484],{"class":210},[161,6901,1401],{"class":214},[161,6903,407],{"class":210},[161,6905,6906],{"class":163,"line":189},[161,6907,396],{"emptyLinePlaceholder":395},[161,6909,6910,6912,6914,6916,6918,6920,6923,6925],{"class":163,"line":335},[161,6911,211],{"class":210},[161,6913,618],{"class":214},[161,6915,4115],{"class":218},[161,6917,222],{"class":210},[161,6919,225],{"class":218},[161,6921,6922],{"class":167},"p-4",[161,6924,225],{"class":218},[161,6926,407],{"class":210},[161,6928,6929,6931,6933,6935,6937,6939,6942,6944],{"class":163,"line":341},[161,6930,439],{"class":210},[161,6932,618],{"class":214},[161,6934,4115],{"class":218},[161,6936,222],{"class":210},[161,6938,225],{"class":218},[161,6940,6941],{"class":167},"max-w-full",[161,6943,225],{"class":218},[161,6945,407],{"class":210},[161,6947,6948,6950,6952,6954,6956,6958,6961,6963,6966,6968,6970,6973,6975,6978,6980,6982,6985,6987,6990,6992,6994,6997,6999],{"class":163,"line":347},[161,6949,4193],{"class":210},[161,6951,6876],{"class":214},[161,6953,455],{"class":218},[161,6955,222],{"class":210},[161,6957,225],{"class":218},[161,6959,6960],{"class":167},"600",[161,6962,225],{"class":218},[161,6964,6965],{"class":218}," height",[161,6967,222],{"class":210},[161,6969,225],{"class":218},[161,6971,6972],{"class":167},"400",[161,6974,225],{"class":218},[161,6976,6977],{"class":218}," layout",[161,6979,222],{"class":210},[161,6981,225],{"class":218},[161,6983,6984],{"class":167},"responsive",[161,6986,225],{"class":218},[161,6988,6989],{"class":218}," type",[161,6991,222],{"class":210},[161,6993,225],{"class":218},[161,6995,6996],{"class":167},"slides",[161,6998,225],{"class":218},[161,7000,407],{"class":210},[161,7002,7003,7005,7008,7010,7012,7014,7017,7019,7021,7023,7025,7027,7029,7031,7033,7035,7037,7039,7041,7043,7045,7048,7050],{"class":163,"line":481},[161,7004,4402],{"class":210},[161,7006,7007],{"class":214},"amp-img",[161,7009,219],{"class":218},[161,7011,222],{"class":210},[161,7013,225],{"class":218},[161,7015,7016],{"class":167},"https://ampbyexample.com/img/image1.jpg",[161,7018,225],{"class":218},[161,7020,455],{"class":218},[161,7022,222],{"class":210},[161,7024,225],{"class":218},[161,7026,6960],{"class":167},[161,7028,225],{"class":218},[161,7030,6965],{"class":218},[161,7032,222],{"class":210},[161,7034,225],{"class":218},[161,7036,6972],{"class":167},[161,7038,225],{"class":218},[161,7040,467],{"class":218},[161,7042,222],{"class":210},[161,7044,225],{"class":218},[161,7046,7047],{"class":167},"a sample image",[161,7049,225],{"class":218},[161,7051,5792],{"class":210},[161,7053,7054,7056,7058,7060,7062,7064,7067,7069,7071,7073,7075,7077,7079,7081,7083,7085,7087,7089,7091,7093,7095,7098,7100],{"class":163,"line":491},[161,7055,4402],{"class":210},[161,7057,7007],{"class":214},[161,7059,219],{"class":218},[161,7061,222],{"class":210},[161,7063,225],{"class":218},[161,7065,7066],{"class":167},"https://ampbyexample.com/img/image2.jpg",[161,7068,225],{"class":218},[161,7070,455],{"class":218},[161,7072,222],{"class":210},[161,7074,225],{"class":218},[161,7076,6960],{"class":167},[161,7078,225],{"class":218},[161,7080,6965],{"class":218},[161,7082,222],{"class":210},[161,7084,225],{"class":218},[161,7086,6972],{"class":167},[161,7088,225],{"class":218},[161,7090,467],{"class":218},[161,7092,222],{"class":210},[161,7094,225],{"class":218},[161,7096,7097],{"class":167},"another sample image",[161,7099,225],{"class":218},[161,7101,5792],{"class":210},[161,7103,7104,7106,7108,7110,7112,7114,7117,7119,7121,7123,7125,7127,7129,7131,7133,7135,7137,7139,7141,7143,7145,7148,7150],{"class":163,"line":501},[161,7105,4402],{"class":210},[161,7107,7007],{"class":214},[161,7109,219],{"class":218},[161,7111,222],{"class":210},[161,7113,225],{"class":218},[161,7115,7116],{"class":167},"https://ampbyexample.com/img/image3.jpg",[161,7118,225],{"class":218},[161,7120,455],{"class":218},[161,7122,222],{"class":210},[161,7124,225],{"class":218},[161,7126,6960],{"class":167},[161,7128,225],{"class":218},[161,7130,6965],{"class":218},[161,7132,222],{"class":210},[161,7134,225],{"class":218},[161,7136,6972],{"class":167},[161,7138,225],{"class":218},[161,7140,467],{"class":218},[161,7142,222],{"class":210},[161,7144,225],{"class":218},[161,7146,7147],{"class":167},"and another sample image",[161,7149,225],{"class":218},[161,7151,5792],{"class":210},[161,7153,7154,7156,7158],{"class":163,"line":541},[161,7155,4520],{"class":210},[161,7157,6876],{"class":214},[161,7159,407],{"class":210},[161,7161,7162,7164,7166],{"class":163,"line":550},[161,7163,4225],{"class":210},[161,7165,618],{"class":214},[161,7167,407],{"class":210},[161,7169,7170,7172,7174],{"class":163,"line":555},[161,7171,484],{"class":210},[161,7173,618],{"class":214},[161,7175,407],{"class":210},[161,7177,7178,7180,7182],{"class":163,"line":564},[161,7179,799],{"class":210},[161,7181,6840],{"class":214},[161,7183,407],{"class":210},[115,7185,7186,7187,7192,7193,7196,7197,7200],{},"You initialize ",[125,7188,7191],{"href":7189,"rel":7190},"https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-components/?format=email",[136],"AMP components"," by pushing their ",[158,7194,7195],{},"\u003Cscript>"," tag to the ",[158,7198,7199],{},"\u003Cstack name=\"head\" />"," from the layout, as shown above.",[115,7202,7203,7204,138],{},"You can then use the component's markup inside ",[158,7205,7206],{},"\u003Cfill:template>\u003C/fill:template>",[140,7208,7210],{"id":7209},"css-inlining","CSS inlining",[115,7212,7213],{},"Inline style attributes are not allowed in AMP, so you need to disable CSS inlining.",[115,7215,7216],{},"Do it either globally, in your environment config:",[151,7218,7220],{"className":853,"code":7219,"filename":4604,"language":856,"meta":156,"style":156},"export default {\n  css: {\n    inline: false,\n  }\n}\n",[158,7221,7222,7230,7238,7248,7252],{"__ignoreMap":156},[161,7223,7224,7226,7228],{"class":163,"line":164},[161,7225,883],{"class":214},[161,7227,886],{"class":214},[161,7229,890],{"class":889},[161,7231,7232,7234,7236],{"class":163,"line":171},[161,7233,949],{"class":167},[161,7235,302],{"class":889},[161,7237,890],{"class":889},[161,7239,7240,7242,7244,7246],{"class":163,"line":177},[161,7241,958],{"class":167},[161,7243,302],{"class":889},[161,7245,910],{"class":214},[161,7247,913],{"class":889},[161,7249,7250],{"class":163,"line":183},[161,7251,1420],{"class":889},[161,7253,7254],{"class":163,"line":189},[161,7255,2127],{"class":889},[115,7257,7258],{},"... or locally, in the Template's Front Matter:",[151,7260,7264],{"className":7261,"code":7262,"filename":6827,"language":7263,"meta":156,"style":156},"language-yaml shiki shiki-themes tailwind-css tailwind-css","---\ncss:\n  inline: false\n---\n","yaml",[158,7265,7266,7271,7278,7288],{"__ignoreMap":156},[161,7267,7268],{"class":163,"line":164},[161,7269,381],{"class":7270},"s1Ehh",[161,7272,7273,7275],{"class":163,"line":171},[161,7274,4874],{"class":214},[161,7276,7277],{"class":889},":\n",[161,7279,7280,7283,7285],{"class":163,"line":177},[161,7281,7282],{"class":214},"  inline",[161,7284,302],{"class":889},[161,7286,7287],{"class":214}," false\n",[161,7289,7290],{"class":163,"line":183},[161,7291,381],{"class":7270},[140,7293,7295],{"id":7294},"important","!important",[115,7297,7298,7299,7301],{},"AMP for Email doesn't support ",[158,7300,7295],{}," in CSS, either.",[115,7303,7304],{},"This can be easily turned off in your Tailwind config:",[151,7306,7309],{"className":853,"code":7307,"filename":7308,"language":856,"meta":156,"style":156},"export default {\n  important: false,\n}\n","tailwind.config.js",[158,7310,7311,7319,7330],{"__ignoreMap":156},[161,7312,7313,7315,7317],{"class":163,"line":164},[161,7314,883],{"class":214},[161,7316,886],{"class":214},[161,7318,890],{"class":889},[161,7320,7321,7324,7326,7328],{"class":163,"line":171},[161,7322,7323],{"class":167},"  important",[161,7325,302],{"class":889},[161,7327,910],{"class":214},[161,7329,913],{"class":889},[161,7331,7332],{"class":163,"line":177},[161,7333,2127],{"class":889},[115,7335,7336,7337,7340],{},"However, you probably want to turn it off ",[5334,7338,7339],{},"only"," for AMP templates.",[115,7342,7343,7344,7346],{},"You can do this by updating your ",[158,7345,2159],{}," tag for AMP templates to use a different Tailwind config file:",[151,7348,7350],{"className":153,"code":7349,"filename":6612,"language":155,"meta":156,"style":156},"\u003Cstyle>\n  @config 'tailwind.amp.js';\n  @tailwind components;\n  @tailwind utilities;\n\u003C/style>\n",[158,7351,7352,7360,7370,7379,7387],{"__ignoreMap":156},[161,7353,7354,7356,7358],{"class":163,"line":164},[161,7355,401],{"class":210},[161,7357,3576],{"class":214},[161,7359,407],{"class":210},[161,7361,7362,7365,7368],{"class":163,"line":171},[161,7363,7364],{"class":4051},"  @config",[161,7366,7367],{"class":167}," 'tailwind.amp.js'",[161,7369,4058],{"class":4051},[161,7371,7372,7375,7377],{"class":163,"line":177},[161,7373,7374],{"class":4051},"  @tailwind",[161,7376,4065],{"class":167},[161,7378,4058],{"class":4051},[161,7380,7381,7383,7385],{"class":163,"line":183},[161,7382,7374],{"class":4051},[161,7384,4055],{"class":167},[161,7386,4058],{"class":4051},[161,7388,7389,7391,7393],{"class":163,"line":189},[161,7390,799],{"class":210},[161,7392,3576],{"class":214},[161,7394,407],{"class":210},[115,7396,7397,7398,7400,7401,7404,7405,302],{},"Next, duplicate ",[158,7399,7308],{}," to ",[158,7402,7403],{},"tailwind.amp.js"," and disable ",[158,7406,7294],{},[151,7408,7410],{"className":853,"code":7409,"filename":7403,"language":856,"meta":156,"style":156},"module.exports = {\n  important: false,\n}\n",[158,7411,7412,7426,7436],{"__ignoreMap":156},[161,7413,7414,7417,7419,7422,7424],{"class":163,"line":164},[161,7415,7416],{"class":214},"module",[161,7418,138],{"class":889},[161,7420,7421],{"class":214},"exports",[161,7423,4754],{"class":871},[161,7425,890],{"class":889},[161,7427,7428,7430,7432,7434],{"class":163,"line":171},[161,7429,7323],{"class":167},[161,7431,302],{"class":889},[161,7433,910],{"class":214},[161,7435,913],{"class":889},[161,7437,7438],{"class":163,"line":177},[161,7439,2127],{"class":889},[115,7441,7442,7443,7446],{},"Finally, run ",[158,7444,7445],{},"maizzle build amp"," to build your ⚡4email templates.",[115,7448,7449,7450,7453,7454,302],{},"In case you haven't installed the ",[125,7451,7452],{"href":50},"Maizzle CLI",", add an NPM script to ",[158,7455,7456],{},"package.json",[151,7458,7461],{"className":7459,"code":7460,"filename":7456,"language":6,"meta":156,"style":156},"language-json shiki shiki-themes tailwind-css tailwind-css","\"scripts\": {\n  \"build:amp\": \"maizzle build amp\"\n}\n",[158,7462,7463,7472,7487],{"__ignoreMap":156},[161,7464,7465,7468,7470],{"class":163,"line":164},[161,7466,7467],{"class":167},"\"scripts\"",[161,7469,4976],{"class":167},[161,7471,1342],{"class":3749},[161,7473,7474,7477,7480,7482,7484],{"class":163,"line":171},[161,7475,7476],{"class":889},"  \"",[161,7478,7479],{"class":167},"build:amp",[161,7481,225],{"class":889},[161,7483,302],{"class":3749},[161,7485,7486],{"class":167}," \"maizzle build amp\"\n",[161,7488,7489],{"class":163,"line":177},[161,7490,2127],{"class":3749},[115,7492,7493,7494,138],{},"You'd then build your AMP emails by running ",[158,7495,7496],{},"npm run build:amp",[140,7498,3559],{"id":3558},[832,7500,7501,7507],{},[835,7502,7503],{},[125,7504,7506],{"href":6555,"rel":7505},[136],"Official AMP for Email docs",[835,7508,7509],{},[125,7510,7512],{"href":6568,"rel":7511},[136],"Maizzle AMP for Email Starter",[3576,7514,7515],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .s1Ehh, html code.shiki .s1Ehh{--shiki-light:#758CA9;--shiki-dark:#758CA9}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}",{"title":156,"searchDepth":171,"depth":171,"links":7517},[7518,7519,7520,7521,7522,7523],{"id":6573,"depth":171,"text":6574},{"id":3726,"depth":171,"text":3727},{"id":2879,"depth":171,"text":6813},{"id":7209,"depth":171,"text":7210},{"id":7294,"depth":171,"text":7295},{"id":3558,"depth":171,"text":3559},"2021-03-03T00:00:00.000Z","Use AMP for Email in Maizzle to easily create interactive HTML emails with realtime information and in-line actions.",{},{"title":6536,"description":7525},{"loc":98},"guides/amp-email","KmxORpK7BI3TCN2fNhIZY4fobWp-d-2DN7wJZBQWRng",{"id":7532,"title":7533,"body":7534,"date":8715,"description":8716,"extension":3595,"meta":8717,"navigation":395,"path":8718,"seo":8719,"sitemap":8720,"stem":8721,"__hash__":8722},"guides/guides/rss-feed.md","How to create an email newsletter from an RSS feed",{"type":108,"value":7535,"toc":8702},[7536,7539,7543,7549,7558,7560,7563,7573,7578,7580,7582,7585,7593,7607,7611,7614,7627,7635,7675,7679,7689,7701,7971,7981,7985,7988,7994,8101,8107,8109,8118,8122,8125,8288,8292,8299,8651,8657,8665,8667,8699],[111,7537,7533],{"id":7538},"how-to-create-an-email-newsletter-from-an-rss-feed",[115,7540,7542],{"className":7541},[6545],"Last updated: May 30, 2022",[115,7544,7545,7546,7548],{},"In this tutorial, we'll use ",[125,7547,29],{"href":30}," in Maizzle to fetch the contents of an RSS feed and display them in an HTML email newsletter.",[115,7550,7551,7552,7557],{},"You can ",[125,7553,7556],{"href":7554,"rel":7555},"https://codepen.io/maizzle/pen/ExjvmdP?editors=1000",[136],"preview the final result"," on CodePen.",[140,7559,6574],{"id":6573},[115,7561,7562],{},"Let's start by creating a new Maizzle project.",[151,7564,7565],{"className":265,"code":266,"language":267,"meta":156,"style":156},[158,7566,7567],{"__ignoreMap":156},[161,7568,7569,7571],{"class":163,"line":164},[161,7570,274],{"class":214},[161,7572,277],{"class":167},[115,7574,280,7575,284],{},[158,7576,7577],{},"./example-rss",[115,7579,287],{},[115,7581,290],{},[292,7583,7584],{"id":7584},"rss-parser",[115,7586,7587,7588,7592],{},"We'll be using ",[125,7589,7584],{"href":7590,"rel":7591},"https://www.npmjs.com/package/rss-parser",[136]," fetch the contents of the RSS feed, so let's install it:",[151,7594,7596],{"className":265,"code":7595,"language":267,"meta":156,"style":156},"npm install rss-parser\n",[158,7597,7598],{"__ignoreMap":156},[161,7599,7600,7602,7604],{"class":163,"line":164},[161,7601,2200],{"class":214},[161,7603,2203],{"class":167},[161,7605,7606],{"class":167}," rss-parser\n",[140,7608,7610],{"id":7609},"rss-feed","RSS Feed",[115,7612,7613],{},"We'll need an RSS feed to work with, so let's go with the best site for learning Laravel.",[115,7615,7616,7617,7622,7623,138],{},"The ",[125,7618,7621],{"href":7619,"rel":7620},"https://laracasts.com",[136],"Laracasts"," feed is available at ",[125,7624,7625],{"href":7625,"rel":7626},"https://laracasts.com/feed",[136],[115,7628,7629,7630,7632,7633,302],{},"Let's add that feed URL inside the ",[158,7631,2458],{}," object in ",[158,7634,4604],{},[151,7636,7638],{"className":853,"code":7637,"filename":4604,"language":856,"meta":156,"style":156},"export default {\n  feed: {\n    url: 'https://laracasts.com/feed'\n  }\n}\n",[158,7639,7640,7648,7657,7667,7671],{"__ignoreMap":156},[161,7641,7642,7644,7646],{"class":163,"line":164},[161,7643,883],{"class":214},[161,7645,886],{"class":214},[161,7647,890],{"class":889},[161,7649,7650,7653,7655],{"class":163,"line":171},[161,7651,7652],{"class":167},"  feed",[161,7654,302],{"class":889},[161,7656,890],{"class":889},[161,7658,7659,7662,7664],{"class":163,"line":177},[161,7660,7661],{"class":167},"    url",[161,7663,302],{"class":889},[161,7665,7666],{"class":167}," 'https://laracasts.com/feed'\n",[161,7668,7669],{"class":163,"line":183},[161,7670,1420],{"class":889},[161,7672,7673],{"class":163,"line":189},[161,7674,2127],{"class":889},[140,7676,7678],{"id":7677},"fetch-items","Fetch Items",[115,7680,7681,7682,7684,7685,7688],{},"We can use ",[158,7683,7584],{}," inside the ",[125,7686,5393],{"href":7687},"/docs/events#beforecreate"," event to fetch feed data.",[115,7690,7691,7692,7694,7695,7697,7698,7700],{},"Edit ",[158,7693,4604],{},", require ",[158,7696,7584],{},", and use it in the ",[158,7699,5393],{}," event:",[151,7702,7704],{"className":853,"code":7703,"filename":4604,"language":856,"meta":156,"style":156},"import Parser from 'rss-parser'\n\nexport default {\n  async beforeCreate(config) {\n    // create a new Parser instance\n    const parser = new Parser({\n      customFields: {\n        feed: ['subtitle'],\n        item: ['summary']\n      }\n    })\n\n    // fetch and parse the feed\n    let feed = await parser.parseURL(config.feed.url)\n\n    // store the feed data in our config\n    config.feed = {\n      title: feed.title,\n      subtitle: feed.subtitle,\n      link: feed.link,\n      updated_at: feed.lastBuildDate,\n      posts: feed.items\n    }\n  }\n}\n",[158,7705,7706,7718,7722,7730,7744,7749,7767,7776,7792,7807,7811,7817,7821,7826,7861,7865,7870,7882,7897,7913,7929,7945,7959,7963,7967],{"__ignoreMap":156},[161,7707,7708,7710,7713,7715],{"class":163,"line":164},[161,7709,2237],{"class":864},[161,7711,7712],{"class":2240}," Parser",[161,7714,2244],{"class":889},[161,7716,7717],{"class":864}," 'rss-parser'\n",[161,7719,7720],{"class":163,"line":171},[161,7721,396],{"emptyLinePlaceholder":395},[161,7723,7724,7726,7728],{"class":163,"line":177},[161,7725,883],{"class":214},[161,7727,886],{"class":214},[161,7729,890],{"class":889},[161,7731,7732,7734,7736,7738,7740,7742],{"class":163,"line":183},[161,7733,5432],{"class":864},[161,7735,5435],{"class":1046},[161,7737,1147],{"class":889},[161,7739,2453],{"class":864},[161,7741,1153],{"class":889},[161,7743,890],{"class":889},[161,7745,7746],{"class":163,"line":189},[161,7747,7748],{"class":412},"    // create a new Parser instance\n",[161,7750,7751,7753,7756,7758,7761,7763,7765],{"class":163,"line":335},[161,7752,2400],{"class":864},[161,7754,7755],{"class":167}," parser ",[161,7757,222],{"class":871},[161,7759,7760],{"class":214}," new",[161,7762,7712],{"class":1046},[161,7764,1147],{"class":167},[161,7766,1342],{"class":889},[161,7768,7769,7772,7774],{"class":163,"line":341},[161,7770,7771],{"class":167},"      customFields",[161,7773,302],{"class":889},[161,7775,890],{"class":889},[161,7777,7778,7781,7783,7785,7788,7790],{"class":163,"line":347},[161,7779,7780],{"class":167},"        feed",[161,7782,302],{"class":889},[161,7784,4651],{"class":167},[161,7786,7787],{"class":167},"'subtitle'",[161,7789,1096],{"class":167},[161,7791,913],{"class":889},[161,7793,7794,7797,7799,7801,7804],{"class":163,"line":481},[161,7795,7796],{"class":167},"        item",[161,7798,302],{"class":889},[161,7800,4651],{"class":167},[161,7802,7803],{"class":167},"'summary'",[161,7805,7806],{"class":167},"]\n",[161,7808,7809],{"class":163,"line":491},[161,7810,2095],{"class":889},[161,7812,7813,7815],{"class":163,"line":501},[161,7814,1413],{"class":889},[161,7816,1325],{"class":167},[161,7818,7819],{"class":163,"line":541},[161,7820,396],{"emptyLinePlaceholder":395},[161,7822,7823],{"class":163,"line":550},[161,7824,7825],{"class":412},"    // fetch and parse the feed\n",[161,7827,7828,7831,7834,7836,7838,7841,7843,7846,7848,7850,7852,7855,7857,7859],{"class":163,"line":555},[161,7829,7830],{"class":864},"    let",[161,7832,7833],{"class":864}," feed",[161,7835,4754],{"class":871},[161,7837,5455],{"class":214},[161,7839,7840],{"class":864}," parser",[161,7842,138],{"class":889},[161,7844,7845],{"class":1046},"parseURL",[161,7847,1147],{"class":167},[161,7849,2453],{"class":864},[161,7851,138],{"class":889},[161,7853,7854],{"class":864},"feed",[161,7856,138],{"class":889},[161,7858,1164],{"class":864},[161,7860,1325],{"class":167},[161,7862,7863],{"class":163,"line":564},[161,7864,396],{"emptyLinePlaceholder":395},[161,7866,7867],{"class":163,"line":570},[161,7868,7869],{"class":412},"    // store the feed data in our config\n",[161,7871,7872,7874,7876,7878,7880],{"class":163,"line":579},[161,7873,5508],{"class":864},[161,7875,138],{"class":889},[161,7877,7854],{"class":864},[161,7879,4754],{"class":871},[161,7881,890],{"class":889},[161,7883,7884,7887,7889,7891,7893,7895],{"class":163,"line":584},[161,7885,7886],{"class":167},"      title",[161,7888,302],{"class":889},[161,7890,7833],{"class":864},[161,7892,138],{"class":889},[161,7894,4014],{"class":864},[161,7896,913],{"class":889},[161,7898,7899,7902,7904,7906,7908,7911],{"class":163,"line":593},[161,7900,7901],{"class":167},"      subtitle",[161,7903,302],{"class":889},[161,7905,7833],{"class":864},[161,7907,138],{"class":889},[161,7909,7910],{"class":864},"subtitle",[161,7912,913],{"class":889},[161,7914,7915,7918,7920,7922,7924,7927],{"class":163,"line":599},[161,7916,7917],{"class":167},"      link",[161,7919,302],{"class":889},[161,7921,7833],{"class":864},[161,7923,138],{"class":889},[161,7925,7926],{"class":864},"link",[161,7928,913],{"class":889},[161,7930,7931,7934,7936,7938,7940,7943],{"class":163,"line":608},[161,7932,7933],{"class":167},"      updated_at",[161,7935,302],{"class":889},[161,7937,7833],{"class":864},[161,7939,138],{"class":889},[161,7941,7942],{"class":864},"lastBuildDate",[161,7944,913],{"class":889},[161,7946,7947,7950,7952,7954,7956],{"class":163,"line":613},[161,7948,7949],{"class":167},"      posts",[161,7951,302],{"class":889},[161,7953,7833],{"class":864},[161,7955,138],{"class":889},[161,7957,7958],{"class":864},"items\n",[161,7960,7961],{"class":163,"line":623},[161,7962,3458],{"class":889},[161,7964,7965],{"class":163,"line":665},[161,7966,1420],{"class":889},[161,7968,7969],{"class":163,"line":674},[161,7970,2127],{"class":889},[3686,7972,7973,7974,7976,7977,7980],{},"\nThe Laracasts feed contains fields that \n",[158,7975,7584],{},"\n does not currently return by default. We include them through the \n",[158,7978,7979],{},"customFields","\n option.\n",[140,7982,7984],{"id":7983},"date-format","Date Format",[115,7986,7987],{},"We'll probably need to format the date of a feed item to something more readable than what the feed provides.",[115,7989,7990,7991,7993],{},"We can add a function to ",[158,7992,4604],{}," and use it to format the item's date according to our audience's locale:",[151,7995,7997],{"className":853,"code":7996,"filename":4604,"language":856,"meta":156,"style":156},"export default {\n  formattedDate(str) {\n    const date = new Date(str)\n    return date.toLocaleDateString('en-US', {day: 'numeric', month: 'short', year: 'numeric'})\n  }\n}\n",[158,7998,7999,8007,8021,8041,8093,8097],{"__ignoreMap":156},[161,8000,8001,8003,8005],{"class":163,"line":164},[161,8002,883],{"class":214},[161,8004,886],{"class":214},[161,8006,890],{"class":889},[161,8008,8009,8012,8014,8017,8019],{"class":163,"line":171},[161,8010,8011],{"class":1046},"  formattedDate",[161,8013,1147],{"class":889},[161,8015,8016],{"class":864},"str",[161,8018,1153],{"class":889},[161,8020,890],{"class":889},[161,8022,8023,8025,8028,8030,8032,8035,8037,8039],{"class":163,"line":177},[161,8024,2400],{"class":864},[161,8026,8027],{"class":167}," date ",[161,8029,222],{"class":871},[161,8031,7760],{"class":214},[161,8033,8034],{"class":1046}," Date",[161,8036,1147],{"class":167},[161,8038,8016],{"class":864},[161,8040,1325],{"class":167},[161,8042,8043,8045,8048,8050,8053,8055,8058,8060,8062,8065,8067,8070,8072,8075,8077,8080,8082,8085,8087,8089,8091],{"class":163,"line":183},[161,8044,2483],{"class":214},[161,8046,8047],{"class":864}," date",[161,8049,138],{"class":889},[161,8051,8052],{"class":1046},"toLocaleDateString",[161,8054,1147],{"class":167},[161,8056,8057],{"class":167},"'en-US'",[161,8059,1386],{"class":889},[161,8061,2831],{"class":889},[161,8063,8064],{"class":167},"day",[161,8066,302],{"class":889},[161,8068,8069],{"class":167}," 'numeric'",[161,8071,1386],{"class":889},[161,8073,8074],{"class":167}," month",[161,8076,302],{"class":889},[161,8078,8079],{"class":167}," 'short'",[161,8081,1386],{"class":889},[161,8083,8084],{"class":167}," year",[161,8086,302],{"class":889},[161,8088,8069],{"class":167},[161,8090,2847],{"class":889},[161,8092,1325],{"class":167},[161,8094,8095],{"class":163,"line":189},[161,8096,1420],{"class":889},[161,8098,8099],{"class":163,"line":335},[161,8100,2127],{"class":889},[3686,8102,8103,8104,8106],{},"\nTip: you could set \n",[158,8105,8057],{},"\n dynamically, based on your subscriber's preference.\n",[140,8108,6813],{"id":2879},[115,8110,8111,8112,8117],{},"We'll use a simplified version of the ",[125,8113,8116],{"href":8114,"rel":8115},"https://github.com/maizzle/maizzle/blob/master/emails/promotional.html",[136],"promotional template"," from the Starter, displaying posts as full width cards.",[292,8119,8121],{"id":8120},"header","Header",[115,8123,8124],{},"Let's update the existing header row:",[151,8126,8129],{"className":3740,"code":8127,"filename":8128,"language":3742,"meta":156,"style":156},"\u003C!-- ... -->\n\u003Ctr>\n  \u003Ctd class=\"p-12 sm:py-8 sm:px-6 text-center\">\n    \u003Ca href=\"https://laracasts.com\">\n      \u003Cimg src=\"laracasts-logo.png\" width=\"157\" alt=\"{{ page.feed.title }}\">\n    \u003C/a>\n    \u003Cp class=\"m-0 mt-2 text-sm text-slate-600\">\n      {{ page.feed.subtitle }}\n    \u003C/p>\n  \u003C/td>\n\u003C/tr>\n","emails/promotional.html",[158,8130,8131,8136,8144,8163,8182,8227,8235,8254,8264,8272,8280],{"__ignoreMap":156},[161,8132,8133],{"class":163,"line":164},[161,8134,8135],{"class":412},"\u003C!-- ... -->\n",[161,8137,8138,8140,8142],{"class":163,"line":171},[161,8139,401],{"class":210},[161,8141,4395],{"class":214},[161,8143,407],{"class":210},[161,8145,8146,8148,8150,8152,8154,8156,8159,8161],{"class":163,"line":177},[161,8147,211],{"class":210},[161,8149,4405],{"class":214},[161,8151,4115],{"class":218},[161,8153,222],{"class":210},[161,8155,225],{"class":218},[161,8157,8158],{"class":167},"p-12 sm:py-8 sm:px-6 text-center",[161,8160,225],{"class":218},[161,8162,407],{"class":210},[161,8164,8165,8167,8169,8172,8174,8176,8178,8180],{"class":163,"line":183},[161,8166,439],{"class":210},[161,8168,125],{"class":214},[161,8170,8171],{"class":218}," href",[161,8173,222],{"class":210},[161,8175,225],{"class":218},[161,8177,7619],{"class":167},[161,8179,225],{"class":218},[161,8181,407],{"class":210},[161,8183,8184,8186,8188,8190,8192,8194,8197,8199,8201,8203,8205,8208,8210,8212,8214,8216,8218,8221,8223,8225],{"class":163,"line":189},[161,8185,4193],{"class":210},[161,8187,215],{"class":214},[161,8189,219],{"class":218},[161,8191,222],{"class":210},[161,8193,225],{"class":218},[161,8195,8196],{"class":167},"laracasts-logo.png",[161,8198,225],{"class":218},[161,8200,455],{"class":218},[161,8202,222],{"class":210},[161,8204,225],{"class":218},[161,8206,8207],{"class":167},"157",[161,8209,225],{"class":218},[161,8211,467],{"class":218},[161,8213,222],{"class":210},[161,8215,225],{"class":218},[161,8217,3772],{"class":167},[161,8219,8220],{"class":864},"page.feed.title",[161,8222,3789],{"class":167},[161,8224,225],{"class":218},[161,8226,407],{"class":210},[161,8228,8229,8231,8233],{"class":163,"line":335},[161,8230,4225],{"class":210},[161,8232,125],{"class":214},[161,8234,407],{"class":210},[161,8236,8237,8239,8241,8243,8245,8247,8250,8252],{"class":163,"line":341},[161,8238,439],{"class":210},[161,8240,115],{"class":214},[161,8242,4115],{"class":218},[161,8244,222],{"class":210},[161,8246,225],{"class":218},[161,8248,8249],{"class":167},"m-0 mt-2 text-sm text-slate-600",[161,8251,225],{"class":218},[161,8253,407],{"class":210},[161,8255,8256,8259,8262],{"class":163,"line":347},[161,8257,8258],{"class":167},"      {{ ",[161,8260,8261],{"class":864},"page.feed.subtitle",[161,8263,5697],{"class":167},[161,8265,8266,8268,8270],{"class":163,"line":481},[161,8267,4225],{"class":210},[161,8269,115],{"class":214},[161,8271,407],{"class":210},[161,8273,8274,8276,8278],{"class":163,"line":491},[161,8275,484],{"class":210},[161,8277,4405],{"class":214},[161,8279,407],{"class":210},[161,8281,8282,8284,8286],{"class":163,"line":501},[161,8283,799],{"class":210},[161,8285,4395],{"class":214},[161,8287,407],{"class":210},[292,8289,8291],{"id":8290},"items-loop","Items Loop",[115,8293,8294,8295,8298],{},"Let's use a full width card from the ",[125,8296,8116],{"href":8114,"rel":8297},[136]," to show a list of all items from the feed:",[151,8300,8302],{"className":3740,"code":8301,"filename":8128,"language":3742,"meta":156,"style":156},"\u003C!-- ... -->\n\u003Ceach loop=\"post in page.feed.posts\">\n  \u003Ctr>\n    \u003Ctd class=\"p-6 bg-white hover:shadow-xl rounded transition-shadow duration-300\">\n      \u003Cp class=\"m-0 mb-1 text-sm text-slate-500\">\n        {{ page.formattedDate(post.pubDate) }}\n      \u003C/p>\n\n      \u003Ch2 class=\"m-0 mb-4 text-2xl leading-6\">\n        \u003Ca href=\"{{ post.link }}\" class=\"text-slate-800 hover:text-slate-700 [text-decoration:none]\">\n          {{ post.title }}\n        \u003C/a>\n      \u003C/h2>\n\n      \u003Cp class=\"m-0 text-base\">\n        \u003Ca href=\"{{ post.link }}\" class=\"text-slate-500 hover:text-slate-700 [text-decoration:none]\">\n          {{ post.summary }}\n        \u003C/a>\n      \u003C/p>\n    \u003C/td>\n  \u003C/tr>\n  \u003Cif condition=\"!loop.last\">\n    \u003Ctr>\n      \u003Ctd class=\"h-24\">\u003C/td>\n    \u003C/tr>\n  \u003C/if>\n\u003C/each>\n",[158,8303,8304,8308,8327,8335,8354,8373,8389,8397,8401,8420,8454,8464,8472,8480,8484,8503,8536,8545,8553,8561,8569,8577,8596,8604,8627,8635,8643],{"__ignoreMap":156},[161,8305,8306],{"class":163,"line":164},[161,8307,8135],{"class":412},[161,8309,8310,8312,8314,8316,8318,8320,8323,8325],{"class":163,"line":171},[161,8311,401],{"class":210},[161,8313,4196],{"class":214},[161,8315,4199],{"class":218},[161,8317,222],{"class":210},[161,8319,225],{"class":218},[161,8321,8322],{"class":167},"post in page.feed.posts",[161,8324,225],{"class":218},[161,8326,407],{"class":210},[161,8328,8329,8331,8333],{"class":163,"line":177},[161,8330,211],{"class":210},[161,8332,4395],{"class":214},[161,8334,407],{"class":210},[161,8336,8337,8339,8341,8343,8345,8347,8350,8352],{"class":163,"line":183},[161,8338,439],{"class":210},[161,8340,4405],{"class":214},[161,8342,4115],{"class":218},[161,8344,222],{"class":210},[161,8346,225],{"class":218},[161,8348,8349],{"class":167},"p-6 bg-white hover:shadow-xl rounded transition-shadow duration-300",[161,8351,225],{"class":218},[161,8353,407],{"class":210},[161,8355,8356,8358,8360,8362,8364,8366,8369,8371],{"class":163,"line":189},[161,8357,4193],{"class":210},[161,8359,115],{"class":214},[161,8361,4115],{"class":218},[161,8363,222],{"class":210},[161,8365,225],{"class":218},[161,8367,8368],{"class":167},"m-0 mb-1 text-sm text-slate-500",[161,8370,225],{"class":218},[161,8372,407],{"class":210},[161,8374,8375,8378,8381,8383,8386],{"class":163,"line":335},[161,8376,8377],{"class":167},"        {{ ",[161,8379,8380],{"class":864},"page.formattedDate",[161,8382,1147],{"class":167},[161,8384,8385],{"class":864},"post.pubDate",[161,8387,8388],{"class":167},") }}\n",[161,8390,8391,8393,8395],{"class":163,"line":341},[161,8392,4520],{"class":210},[161,8394,115],{"class":214},[161,8396,407],{"class":210},[161,8398,8399],{"class":163,"line":347},[161,8400,396],{"emptyLinePlaceholder":395},[161,8402,8403,8405,8407,8409,8411,8413,8416,8418],{"class":163,"line":481},[161,8404,4193],{"class":210},[161,8406,140],{"class":214},[161,8408,4115],{"class":218},[161,8410,222],{"class":210},[161,8412,225],{"class":218},[161,8414,8415],{"class":167},"m-0 mb-4 text-2xl leading-6",[161,8417,225],{"class":218},[161,8419,407],{"class":210},[161,8421,8422,8424,8426,8428,8430,8432,8434,8437,8439,8441,8443,8445,8447,8450,8452],{"class":163,"line":491},[161,8423,4402],{"class":210},[161,8425,125],{"class":214},[161,8427,8171],{"class":218},[161,8429,222],{"class":210},[161,8431,225],{"class":218},[161,8433,3772],{"class":167},[161,8435,8436],{"class":864},"post.link",[161,8438,3789],{"class":167},[161,8440,225],{"class":218},[161,8442,4115],{"class":218},[161,8444,222],{"class":210},[161,8446,225],{"class":218},[161,8448,8449],{"class":167},"text-slate-800 hover:text-slate-700 [text-decoration:none]",[161,8451,225],{"class":218},[161,8453,407],{"class":210},[161,8455,8456,8459,8462],{"class":163,"line":501},[161,8457,8458],{"class":167},"          {{ ",[161,8460,8461],{"class":864},"post.title",[161,8463,5697],{"class":167},[161,8465,8466,8468,8470],{"class":163,"line":541},[161,8467,4511],{"class":210},[161,8469,125],{"class":214},[161,8471,407],{"class":210},[161,8473,8474,8476,8478],{"class":163,"line":550},[161,8475,4520],{"class":210},[161,8477,140],{"class":214},[161,8479,407],{"class":210},[161,8481,8482],{"class":163,"line":555},[161,8483,396],{"emptyLinePlaceholder":395},[161,8485,8486,8488,8490,8492,8494,8496,8499,8501],{"class":163,"line":564},[161,8487,4193],{"class":210},[161,8489,115],{"class":214},[161,8491,4115],{"class":218},[161,8493,222],{"class":210},[161,8495,225],{"class":218},[161,8497,8498],{"class":167},"m-0 text-base",[161,8500,225],{"class":218},[161,8502,407],{"class":210},[161,8504,8505,8507,8509,8511,8513,8515,8517,8519,8521,8523,8525,8527,8529,8532,8534],{"class":163,"line":570},[161,8506,4402],{"class":210},[161,8508,125],{"class":214},[161,8510,8171],{"class":218},[161,8512,222],{"class":210},[161,8514,225],{"class":218},[161,8516,3772],{"class":167},[161,8518,8436],{"class":864},[161,8520,3789],{"class":167},[161,8522,225],{"class":218},[161,8524,4115],{"class":218},[161,8526,222],{"class":210},[161,8528,225],{"class":218},[161,8530,8531],{"class":167},"text-slate-500 hover:text-slate-700 [text-decoration:none]",[161,8533,225],{"class":218},[161,8535,407],{"class":210},[161,8537,8538,8540,8543],{"class":163,"line":579},[161,8539,8458],{"class":167},[161,8541,8542],{"class":864},"post.summary",[161,8544,5697],{"class":167},[161,8546,8547,8549,8551],{"class":163,"line":584},[161,8548,4511],{"class":210},[161,8550,125],{"class":214},[161,8552,407],{"class":210},[161,8554,8555,8557,8559],{"class":163,"line":593},[161,8556,4520],{"class":210},[161,8558,115],{"class":214},[161,8560,407],{"class":210},[161,8562,8563,8565,8567],{"class":163,"line":599},[161,8564,4225],{"class":210},[161,8566,4405],{"class":214},[161,8568,407],{"class":210},[161,8570,8571,8573,8575],{"class":163,"line":608},[161,8572,484],{"class":210},[161,8574,4395],{"class":214},[161,8576,407],{"class":210},[161,8578,8579,8581,8583,8585,8587,8589,8592,8594],{"class":163,"line":613},[161,8580,211],{"class":210},[161,8582,420],{"class":214},[161,8584,423],{"class":218},[161,8586,222],{"class":210},[161,8588,225],{"class":218},[161,8590,8591],{"class":167},"!loop.last",[161,8593,225],{"class":218},[161,8595,407],{"class":210},[161,8597,8598,8600,8602],{"class":163,"line":623},[161,8599,439],{"class":210},[161,8601,4395],{"class":214},[161,8603,407],{"class":210},[161,8605,8606,8608,8610,8612,8614,8616,8619,8621,8623,8625],{"class":163,"line":665},[161,8607,4193],{"class":210},[161,8609,4405],{"class":214},[161,8611,4115],{"class":218},[161,8613,222],{"class":210},[161,8615,225],{"class":218},[161,8617,8618],{"class":167},"h-24",[161,8620,225],{"class":218},[161,8622,6684],{"class":210},[161,8624,4405],{"class":214},[161,8626,407],{"class":210},[161,8628,8629,8631,8633],{"class":163,"line":674},[161,8630,4225],{"class":210},[161,8632,4395],{"class":214},[161,8634,407],{"class":210},[161,8636,8637,8639,8641],{"class":163,"line":679},[161,8638,484],{"class":210},[161,8640,420],{"class":214},[161,8642,407],{"class":210},[161,8644,8645,8647,8649],{"class":163,"line":688},[161,8646,799],{"class":210},[161,8648,4196],{"class":214},[161,8650,407],{"class":210},[115,8652,8653,8654,8656],{},"That's it, run ",[158,8655,3478],{}," to generate the production-ready email template.",[115,8658,8659,8660,138],{},"Take a look at the ",[125,8661,8664],{"href":8662,"rel":8663},"https://codepen.io/maizzle/pen/ExjvmdP",[136],"final result on CodePen",[140,8666,3559],{"id":3558},[832,8668,8669,8675,8680,8686,8693],{},[835,8670,8671],{},[125,8672,7621],{"href":8673,"rel":8674},"https://laracasts.com/",[136],[835,8676,8677],{},[125,8678,7584],{"href":7590,"rel":8679},[136],[835,8681,8682],{},[125,8683,8685],{"href":8684},"/docs/events/","Maizzle Events",[835,8687,8688,8692],{},[125,8689,3567],{"href":8690,"rel":8691},"https://github.com/maizzle/starter-rss",[136]," for this tutorial",[835,8694,8695],{},[125,8696,8698],{"href":8662,"rel":8697},[136],"CodePen preview",[3576,8700,8701],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}",{"title":156,"searchDepth":171,"depth":171,"links":8703},[8704,8707,8708,8709,8710,8714],{"id":6573,"depth":171,"text":6574,"children":8705},[8706],{"id":7584,"depth":177,"text":7584},{"id":7609,"depth":171,"text":7610},{"id":7677,"depth":171,"text":7678},{"id":7983,"depth":171,"text":7984},{"id":2879,"depth":171,"text":6813,"children":8711},[8712,8713],{"id":8120,"depth":177,"text":8121},{"id":8290,"depth":177,"text":8291},{"id":3558,"depth":171,"text":3559},"2020-03-04T00:00:00.000Z","Learn how to use Maizzle Events and RSS parsing libraries to create an email newsletter from an (atom) RSS feed.",{},"/guides/rss-feed",{"title":7533,"description":8716},{"loc":8718},"guides/rss-feed","vsoCcP_hY258kdAEGxiODevMXkH4DPReJUrHNT0upaI",{"id":8724,"title":8725,"body":8726,"date":10366,"description":10367,"extension":3595,"meta":10368,"navigation":395,"path":10369,"seo":10370,"sitemap":10371,"stem":10372,"__hash__":10373},"guides/guides/wordpress-api.md","Using the WordPress API to create a newsletter from your posts",{"type":108,"value":8727,"toc":10351},[8728,8731,8734,8737,8744,8746,8749,8759,8764,8766,8768,8772,8775,8789,8796,8799,8806,8812,8818,8827,8830,8836,8846,8850,8856,8912,8916,8922,8926,8929,8932,9561,9571,9575,9580,9679,9682,9709,9713,9721,9789,9794,9797,10261,10264,10284,10288,10291,10302,10305,10308,10324,10326,10348],[111,8729,8725],{"id":8730},"using-the-wordpress-api-to-create-a-newsletter-from-your-posts",[115,8732,7542],{"className":8733},[6545],[115,8735,8736],{},"Learn how to use Maizzle to fetch content from an API endpoint, process it, and display it in an HTML email newsletter.",[115,8738,8739,8740,7557],{},"You may ",[125,8741,7556],{"href":8742,"rel":8743},"https://codepen.io/maizzle/pen/wvaeOVM?editors=1000",[136],[140,8745,6574],{"id":6573},[115,8747,8748],{},"As always, let's start by creating a new Maizzle project.",[151,8750,8751],{"className":265,"code":266,"language":267,"meta":156,"style":156},[158,8752,8753],{"__ignoreMap":156},[161,8754,8755,8757],{"class":163,"line":164},[161,8756,274],{"class":214},[161,8758,277],{"class":167},[115,8760,280,8761,284],{},[158,8762,8763],{},"./example-wordpress",[115,8765,287],{},[115,8767,290],{},[140,8769,8771],{"id":8770},"wordpress-api","WordPress API",[115,8773,8774],{},"Instead of imagining abstract APIs and how you'd interact with them, let's work with a real one so you can actually follow along and test things out yourself.",[115,8776,8777,8778,8783,8784,138],{},"Given its popularity, we'll be using the ",[125,8779,8782],{"href":8780,"rel":8781},"https://developer.wordpress.org/rest-api/",[136],"WordPress REST API"," in our example. We'll also need to fetch data from a real blog, so let's use the wonderful ",[125,8785,8788],{"href":8786,"rel":8787},"https://css-tricks.com",[136],"CSS-Tricks",[115,8790,8791,8792],{},"The WordPress API on CSS-Tricks is available at ",[125,8793,8794],{"href":8794,"rel":8795},"https://css-tricks.com/wp-json/wp/v2/",[136],[115,8797,8798],{},"Click that link and you'll see the various routes you can access.",[292,8800,8802,8805],{"id":8801},"posts-route",[158,8803,8804],{},"/posts"," route",[115,8807,8808,8809,8811],{},"We can fetch posts from the ",[158,8810,8804],{}," route:",[115,8813,8814],{},[125,8815,8816],{"href":8816,"rel":8817},"https://css-tricks.com/wp-json/wp/v2/posts/",[136],[115,8819,8820,8821,8826],{},"We can also use ",[125,8822,8825],{"href":8823,"rel":8824},"https://developer.wordpress.org/rest-api/reference/posts/#arguments",[136],"query string parameters"," in order to refine our API call.",[115,8828,8829],{},"For example, this only asks for the 3 latest posts:",[115,8831,8832],{},[125,8833,8834],{"href":8834,"rel":8835},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=3&_embed=1",[136],[3686,8837,8838,8841,8842,8845],{},[158,8839,8840],{},"_embed=1","\n is a request scope that adds a few more fields to the response. We use it to include \n",[158,8843,8844],{},"_embedded[\"wp:featuredmedia\"]","\n.\n",[140,8847,8849],{"id":8848},"fetch-posts","Fetch posts",[115,8851,2213,8852,8855],{},[158,8853,8854],{},"\u003Cfetch>"," tag to fetch posts from the CSS-Tricks WordPress API.",[151,8857,8860],{"className":153,"code":8858,"filename":8859,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003C!-- Posts are now available in {{ response }} -->\n  \u003C/fetch>\n\u003C/x-main>\n","emails/example.html",[158,8861,8862,8870,8891,8896,8904],{"__ignoreMap":156},[161,8863,8864,8866,8868],{"class":163,"line":164},[161,8865,401],{"class":210},[161,8867,404],{"class":214},[161,8869,407],{"class":210},[161,8871,8872,8874,8877,8880,8882,8884,8887,8889],{"class":163,"line":171},[161,8873,211],{"class":210},[161,8875,8876],{"class":214},"fetch",[161,8878,8879],{"class":218}," url",[161,8881,222],{"class":210},[161,8883,225],{"class":218},[161,8885,8886],{"class":167},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1",[161,8888,225],{"class":218},[161,8890,407],{"class":210},[161,8892,8893],{"class":163,"line":177},[161,8894,8895],{"class":412},"    \u003C!-- Posts are now available in {{ response }} -->\n",[161,8897,8898,8900,8902],{"class":163,"line":183},[161,8899,484],{"class":210},[161,8901,8876],{"class":214},[161,8903,407],{"class":210},[161,8905,8906,8908,8910],{"class":163,"line":189},[161,8907,799],{"class":210},[161,8909,404],{"class":214},[161,8911,407],{"class":210},[140,8913,8915],{"id":8914},"use-in-template","Use in Template",[115,8917,8918,8921],{},[158,8919,8920],{},"promotional.html"," in Maizzle displays 6 articles in four different layouts. Above, we're also fetching the latest 6 articles from CSS-Tricks, so it's a perfect fit ✌",[292,8923,8925],{"id":8924},"featured-post","Featured Post",[115,8927,8928],{},"Let's update the Hero with background image to show the first post.",[115,8930,8931],{},"Our code becomes:",[151,8933,8935],{"className":3740,"code":8934,"filename":8859,"language":3742,"meta":156,"style":156},"---\nbodyClass: bg-gray-200\ntitle: \"Latest posts on CSS-Tricks\"\npreheader: \"👀 Lorem, ipsum, and much dolor in this week's edition\"\n---\n\n\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003C!-- ... existing template markup before the HERO \u003Ctr> -->\n    \u003Ctr>\n      \u003Ctd class=\"bg-top bg-no-repeat bg-cover rounded text-left\" style=\"background-image: url('{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}');\">\n        \u003C!--[if mso]>\n        \u003Cv:image src=\"{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\" style=\"width:600px;height:400px;\" />\n        \u003Cv:rect fill=\"false\" stroke=\"false\" style=\"position:absolute;width:600px;height:400px;\">\n        \u003Cv:textbox inset=\"0,0,0,0\">\u003Cdiv>\u003C![endif]-->\n        \u003Cdiv class=\"leading-8\">‍\u003C/div>\n        \u003Ctable class=\"w-full\">\n          \u003Ctr>\n            \u003Ctd class=\"w-12 sm:w-4\">\u003C/td>\n            \u003Ctd>\n              \u003Ch1 class=\"m-0 mb-4 text-4xl text-white sm:leading-10\">\n                {{ response[0].title.rendered }}\n              \u003C/h1>\n              \u003Cdiv class=\"m-0 text-white text-lg leading-6\">\n                {{ response[0].excerpt.rendered }}\n              \u003C/div>\n              \u003Cdiv class=\"leading-8\">‍\u003C/div>\n              \u003Ctable>\n                \u003Ctr>\n                  \u003Cth class=\"bg-indigo-800 hover:bg-indigo-700 rounded\" style=\"mso-padding-alt: 16px 24px;\">\n                    \u003Ca href=\"{{ response[0].link }}\" class=\"block font-semibold text-white text-base leading-full py-4 px-6 [text-decoration:none]\">Read more →\u003C/a>\n                  \u003C/th>\n                \u003C/tr>\n              \u003C/table>\n            \u003C/td>\n            \u003Ctd class=\"w-12 sm:w-4\">\u003C/td>\n          \u003C/tr>\n        \u003C/table>\n        \u003Cdiv class=\"leading-8\">‍\u003C/div>\n        \u003C!--[if mso]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/fetch>\n\u003C/x-main>\n",[158,8936,8937,8941,8951,8964,8978,8982,8986,8994,9012,9017,9025,9103,9108,9113,9118,9123,9151,9169,9177,9200,9208,9227,9245,9253,9272,9289,9297,9323,9331,9339,9371,9426,9435,9444,9452,9460,9482,9490,9498,9524,9529,9537,9545,9553],{"__ignoreMap":156},[161,8938,8939],{"class":163,"line":164},[161,8940,381],{"class":167},[161,8942,8943,8946,8948],{"class":163,"line":171},[161,8944,8945],{"class":214},"bodyClass",[161,8947,302],{"class":210},[161,8949,8950],{"class":167}," bg-gray-200\n",[161,8952,8953,8955,8957,8959,8962],{"class":163,"line":177},[161,8954,4014],{"class":214},[161,8956,302],{"class":210},[161,8958,5012],{"class":218},[161,8960,8961],{"class":167},"Latest posts on CSS-Tricks",[161,8963,4263],{"class":218},[161,8965,8966,8969,8971,8973,8976],{"class":163,"line":183},[161,8967,8968],{"class":214},"preheader",[161,8970,302],{"class":210},[161,8972,5012],{"class":218},[161,8974,8975],{"class":167},"👀 Lorem, ipsum, and much dolor in this week's edition",[161,8977,4263],{"class":218},[161,8979,8980],{"class":163,"line":189},[161,8981,381],{"class":167},[161,8983,8984],{"class":163,"line":335},[161,8985,396],{"emptyLinePlaceholder":395},[161,8987,8988,8990,8992],{"class":163,"line":341},[161,8989,401],{"class":210},[161,8991,404],{"class":214},[161,8993,407],{"class":210},[161,8995,8996,8998,9000,9002,9004,9006,9008,9010],{"class":163,"line":347},[161,8997,211],{"class":210},[161,8999,8876],{"class":214},[161,9001,8879],{"class":218},[161,9003,222],{"class":210},[161,9005,225],{"class":218},[161,9007,8886],{"class":167},[161,9009,225],{"class":218},[161,9011,407],{"class":210},[161,9013,9014],{"class":163,"line":481},[161,9015,9016],{"class":412},"    \u003C!-- ... existing template markup before the HERO \u003Ctr> -->\n",[161,9018,9019,9021,9023],{"class":163,"line":491},[161,9020,439],{"class":210},[161,9022,4395],{"class":214},[161,9024,407],{"class":210},[161,9026,9027,9029,9031,9033,9035,9037,9040,9042,9044,9046,9048,9051,9054,9056,9058,9060,9063,9065,9067,9070,9072,9075,9077,9079,9081,9084,9086,9089,9091,9094,9096,9099,9101],{"class":163,"line":501},[161,9028,4193],{"class":210},[161,9030,4405],{"class":214},[161,9032,4115],{"class":218},[161,9034,222],{"class":210},[161,9036,225],{"class":218},[161,9038,9039],{"class":167},"bg-top bg-no-repeat bg-cover rounded text-left",[161,9041,225],{"class":218},[161,9043,5094],{"class":218},[161,9045,222],{"class":210},[161,9047,225],{"class":218},[161,9049,9050],{"class":167},"background-image: url('{{ ",[161,9052,9053],{"class":864},"response",[161,9055,1079],{"class":167},[161,9057,4979],{"class":864},[161,9059,1096],{"class":167},[161,9061,9062],{"class":864},"._embedded",[161,9064,1079],{"class":167},[161,9066,3781],{"class":218},[161,9068,9069],{"class":167},"wp:featuredmedia",[161,9071,3781],{"class":218},[161,9073,9074],{"class":167},"][",[161,9076,4979],{"class":864},[161,9078,9074],{"class":167},[161,9080,3781],{"class":218},[161,9082,9083],{"class":167},"source_url",[161,9085,3781],{"class":218},[161,9087,9088],{"class":167},"] || ",[161,9090,3781],{"class":218},[161,9092,9093],{"class":167},"https://via.placeholder.com/600x400",[161,9095,3781],{"class":218},[161,9097,9098],{"class":167}," }}');",[161,9100,225],{"class":218},[161,9102,407],{"class":210},[161,9104,9105],{"class":163,"line":541},[161,9106,9107],{"class":412},"        \u003C!--[if mso]>\n",[161,9109,9110],{"class":163,"line":550},[161,9111,9112],{"class":412},"        \u003Cv:image src=\"{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\" style=\"width:600px;height:400px;\" />\n",[161,9114,9115],{"class":163,"line":555},[161,9116,9117],{"class":412},"        \u003Cv:rect fill=\"false\" stroke=\"false\" style=\"position:absolute;width:600px;height:400px;\">\n",[161,9119,9120],{"class":163,"line":564},[161,9121,9122],{"class":412},"        \u003Cv:textbox inset=\"0,0,0,0\">\u003Cdiv>\u003C![endif]-->\n",[161,9124,9125,9127,9129,9131,9133,9135,9138,9140,9142,9145,9147,9149],{"class":163,"line":570},[161,9126,4402],{"class":210},[161,9128,618],{"class":214},[161,9130,4115],{"class":218},[161,9132,222],{"class":210},[161,9134,225],{"class":218},[161,9136,9137],{"class":167},"leading-8",[161,9139,225],{"class":218},[161,9141,233],{"class":210},[161,9143,9144],{"class":214},"‍",[161,9146,799],{"class":210},[161,9148,618],{"class":214},[161,9150,407],{"class":210},[161,9152,9153,9155,9157,9159,9161,9163,9165,9167],{"class":163,"line":579},[161,9154,4402],{"class":210},[161,9156,4375],{"class":214},[161,9158,4115],{"class":218},[161,9160,222],{"class":210},[161,9162,225],{"class":218},[161,9164,4434],{"class":167},[161,9166,225],{"class":218},[161,9168,407],{"class":210},[161,9170,9171,9173,9175],{"class":163,"line":584},[161,9172,4423],{"class":210},[161,9174,4395],{"class":214},[161,9176,407],{"class":210},[161,9178,9179,9181,9183,9185,9187,9189,9192,9194,9196,9198],{"class":163,"line":593},[161,9180,4443],{"class":210},[161,9182,4405],{"class":214},[161,9184,4115],{"class":218},[161,9186,222],{"class":210},[161,9188,225],{"class":218},[161,9190,9191],{"class":167},"w-12 sm:w-4",[161,9193,225],{"class":218},[161,9195,6684],{"class":210},[161,9197,4405],{"class":214},[161,9199,407],{"class":210},[161,9201,9202,9204,9206],{"class":163,"line":599},[161,9203,4443],{"class":210},[161,9205,4405],{"class":214},[161,9207,407],{"class":210},[161,9209,9210,9212,9214,9216,9218,9220,9223,9225],{"class":163,"line":608},[161,9211,4452],{"class":210},[161,9213,111],{"class":214},[161,9215,4115],{"class":218},[161,9217,222],{"class":210},[161,9219,225],{"class":218},[161,9221,9222],{"class":167},"m-0 mb-4 text-4xl text-white sm:leading-10",[161,9224,225],{"class":218},[161,9226,407],{"class":210},[161,9228,9229,9232,9234,9236,9238,9240,9243],{"class":163,"line":613},[161,9230,9231],{"class":167},"                {{ ",[161,9233,9053],{"class":864},[161,9235,1079],{"class":167},[161,9237,4979],{"class":864},[161,9239,1096],{"class":167},[161,9241,9242],{"class":864},".title.rendered",[161,9244,5697],{"class":167},[161,9246,9247,9249,9251],{"class":163,"line":623},[161,9248,4484],{"class":210},[161,9250,111],{"class":214},[161,9252,407],{"class":210},[161,9254,9255,9257,9259,9261,9263,9265,9268,9270],{"class":163,"line":665},[161,9256,4452],{"class":210},[161,9258,618],{"class":214},[161,9260,4115],{"class":218},[161,9262,222],{"class":210},[161,9264,225],{"class":218},[161,9266,9267],{"class":167},"m-0 text-white text-lg leading-6",[161,9269,225],{"class":218},[161,9271,407],{"class":210},[161,9273,9274,9276,9278,9280,9282,9284,9287],{"class":163,"line":674},[161,9275,9231],{"class":167},[161,9277,9053],{"class":864},[161,9279,1079],{"class":167},[161,9281,4979],{"class":864},[161,9283,1096],{"class":167},[161,9285,9286],{"class":864},".excerpt.rendered",[161,9288,5697],{"class":167},[161,9290,9291,9293,9295],{"class":163,"line":679},[161,9292,4484],{"class":210},[161,9294,618],{"class":214},[161,9296,407],{"class":210},[161,9298,9299,9301,9303,9305,9307,9309,9311,9313,9315,9317,9319,9321],{"class":163,"line":688},[161,9300,4452],{"class":210},[161,9302,618],{"class":214},[161,9304,4115],{"class":218},[161,9306,222],{"class":210},[161,9308,225],{"class":218},[161,9310,9137],{"class":167},[161,9312,225],{"class":218},[161,9314,233],{"class":210},[161,9316,9144],{"class":214},[161,9318,799],{"class":210},[161,9320,618],{"class":214},[161,9322,407],{"class":210},[161,9324,9325,9327,9329],{"class":163,"line":694},[161,9326,4452],{"class":210},[161,9328,4375],{"class":214},[161,9330,407],{"class":210},[161,9332,9333,9335,9337],{"class":163,"line":703},[161,9334,4472],{"class":210},[161,9336,4395],{"class":214},[161,9338,407],{"class":210},[161,9340,9341,9344,9347,9349,9351,9353,9356,9358,9360,9362,9364,9367,9369],{"class":163,"line":708},[161,9342,9343],{"class":210},"                  \u003C",[161,9345,9346],{"class":214},"th",[161,9348,4115],{"class":218},[161,9350,222],{"class":210},[161,9352,225],{"class":218},[161,9354,9355],{"class":167},"bg-indigo-800 hover:bg-indigo-700 rounded",[161,9357,225],{"class":218},[161,9359,5094],{"class":218},[161,9361,222],{"class":210},[161,9363,225],{"class":218},[161,9365,9366],{"class":167},"mso-padding-alt: 16px 24px;",[161,9368,225],{"class":218},[161,9370,407],{"class":210},[161,9372,9373,9376,9378,9380,9382,9384,9386,9388,9390,9392,9394,9397,9399,9401,9403,9405,9407,9410,9412,9414,9417,9420,9422,9424],{"class":163,"line":717},[161,9374,9375],{"class":210},"                    \u003C",[161,9377,125],{"class":214},[161,9379,8171],{"class":218},[161,9381,222],{"class":210},[161,9383,225],{"class":218},[161,9385,3772],{"class":167},[161,9387,9053],{"class":864},[161,9389,1079],{"class":167},[161,9391,4979],{"class":864},[161,9393,1096],{"class":167},[161,9395,9396],{"class":864},".link",[161,9398,3789],{"class":167},[161,9400,225],{"class":218},[161,9402,4115],{"class":218},[161,9404,222],{"class":210},[161,9406,225],{"class":218},[161,9408,9409],{"class":167},"block font-semibold text-white text-base leading-full py-4 px-6 [text-decoration:none]",[161,9411,225],{"class":218},[161,9413,233],{"class":210},[161,9415,9416],{"class":167},"Read more ",[161,9418,9419],{"class":214},"→",[161,9421,799],{"class":210},[161,9423,125],{"class":214},[161,9425,407],{"class":210},[161,9427,9428,9431,9433],{"class":163,"line":758},[161,9429,9430],{"class":210},"                  \u003C/",[161,9432,9346],{"class":214},[161,9434,407],{"class":210},[161,9436,9437,9440,9442],{"class":163,"line":767},[161,9438,9439],{"class":210},"                \u003C/",[161,9441,4395],{"class":214},[161,9443,407],{"class":210},[161,9445,9446,9448,9450],{"class":163,"line":772},[161,9447,4484],{"class":210},[161,9449,4375],{"class":214},[161,9451,407],{"class":210},[161,9453,9454,9456,9458],{"class":163,"line":781},[161,9455,4493],{"class":210},[161,9457,4405],{"class":214},[161,9459,407],{"class":210},[161,9461,9462,9464,9466,9468,9470,9472,9474,9476,9478,9480],{"class":163,"line":787},[161,9463,4443],{"class":210},[161,9465,4405],{"class":214},[161,9467,4115],{"class":218},[161,9469,222],{"class":210},[161,9471,225],{"class":218},[161,9473,9191],{"class":167},[161,9475,225],{"class":218},[161,9477,6684],{"class":210},[161,9479,4405],{"class":214},[161,9481,407],{"class":210},[161,9483,9484,9486,9488],{"class":163,"line":796},[161,9485,4502],{"class":210},[161,9487,4395],{"class":214},[161,9489,407],{"class":210},[161,9491,9492,9494,9496],{"class":163,"line":1651},[161,9493,4511],{"class":210},[161,9495,4375],{"class":214},[161,9497,407],{"class":210},[161,9499,9500,9502,9504,9506,9508,9510,9512,9514,9516,9518,9520,9522],{"class":163,"line":1674},[161,9501,4402],{"class":210},[161,9503,618],{"class":214},[161,9505,4115],{"class":218},[161,9507,222],{"class":210},[161,9509,225],{"class":218},[161,9511,9137],{"class":167},[161,9513,225],{"class":218},[161,9515,233],{"class":210},[161,9517,9144],{"class":214},[161,9519,799],{"class":210},[161,9521,618],{"class":214},[161,9523,407],{"class":210},[161,9525,9526],{"class":163,"line":1688},[161,9527,9528],{"class":412},"        \u003C!--[if mso]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[161,9530,9531,9533,9535],{"class":163,"line":1706},[161,9532,4520],{"class":210},[161,9534,4405],{"class":214},[161,9536,407],{"class":210},[161,9538,9539,9541,9543],{"class":163,"line":1731},[161,9540,4225],{"class":210},[161,9542,4395],{"class":214},[161,9544,407],{"class":210},[161,9546,9547,9549,9551],{"class":163,"line":1737},[161,9548,484],{"class":210},[161,9550,8876],{"class":214},[161,9552,407],{"class":210},[161,9554,9555,9557,9559],{"class":163,"line":1770},[161,9556,799],{"class":210},[161,9558,404],{"class":214},[161,9560,407],{"class":210},[115,9562,7681,9563,9566,9567,9570],{},[158,9564,9565],{},"response[index]"," to output data for each post, manually. For example, we would use ",[158,9568,9569],{},"response[1].title.rendered"," to show the title of the second post.",[292,9572,9574],{"id":9573},"post-dates","Post dates",[115,9576,7990,9577,9579],{},[158,9578,4604],{}," and use it to format the post's date according to our audience's locale:",[151,9581,9583],{"className":853,"code":9582,"filename":4604,"language":856,"meta":156,"style":156},"module.exports = {\n  formattedDate(str) {\n    const date = new Date(str)\n    return date.toLocaleDateString('en-US', {day: 'numeric', month: 'short', year: 'numeric'})\n  }\n}\n",[158,9584,9585,9597,9609,9627,9671,9675],{"__ignoreMap":156},[161,9586,9587,9589,9591,9593,9595],{"class":163,"line":164},[161,9588,7416],{"class":214},[161,9590,138],{"class":889},[161,9592,7421],{"class":214},[161,9594,4754],{"class":871},[161,9596,890],{"class":889},[161,9598,9599,9601,9603,9605,9607],{"class":163,"line":171},[161,9600,8011],{"class":1046},[161,9602,1147],{"class":889},[161,9604,8016],{"class":864},[161,9606,1153],{"class":889},[161,9608,890],{"class":889},[161,9610,9611,9613,9615,9617,9619,9621,9623,9625],{"class":163,"line":177},[161,9612,2400],{"class":864},[161,9614,8027],{"class":167},[161,9616,222],{"class":871},[161,9618,7760],{"class":214},[161,9620,8034],{"class":1046},[161,9622,1147],{"class":167},[161,9624,8016],{"class":864},[161,9626,1325],{"class":167},[161,9628,9629,9631,9633,9635,9637,9639,9641,9643,9645,9647,9649,9651,9653,9655,9657,9659,9661,9663,9665,9667,9669],{"class":163,"line":183},[161,9630,2483],{"class":214},[161,9632,8047],{"class":864},[161,9634,138],{"class":889},[161,9636,8052],{"class":1046},[161,9638,1147],{"class":167},[161,9640,8057],{"class":167},[161,9642,1386],{"class":889},[161,9644,2831],{"class":889},[161,9646,8064],{"class":167},[161,9648,302],{"class":889},[161,9650,8069],{"class":167},[161,9652,1386],{"class":889},[161,9654,8074],{"class":167},[161,9656,302],{"class":889},[161,9658,8079],{"class":167},[161,9660,1386],{"class":889},[161,9662,8084],{"class":167},[161,9664,302],{"class":889},[161,9666,8069],{"class":167},[161,9668,2847],{"class":889},[161,9670,1325],{"class":167},[161,9672,9673],{"class":163,"line":189},[161,9674,1420],{"class":889},[161,9676,9677],{"class":163,"line":335},[161,9678,2127],{"class":889},[115,9680,9681],{},"We can then display it in the template with an expression like this:",[151,9683,9685],{"className":3740,"code":9684,"language":3742,"meta":156,"style":156},"{{ page.formattedDate(response[1].date) }}\n",[158,9686,9687],{"__ignoreMap":156},[161,9688,9689,9691,9693,9695,9697,9699,9702,9704,9707],{"class":163,"line":164},[161,9690,3772],{"class":167},[161,9692,8380],{"class":864},[161,9694,1147],{"class":167},[161,9696,9053],{"class":864},[161,9698,1079],{"class":167},[161,9700,9701],{"class":864},"1",[161,9703,1096],{"class":167},[161,9705,9706],{"class":864},".date",[161,9708,8388],{"class":167},[292,9710,9712],{"id":9711},"looping","Looping",[115,9714,4690,9715,9718,9719,302],{},[158,9716,9717],{},"\u003Ceach>"," tag in Maizzle to loop over each item in the ",[158,9720,9053],{},[151,9722,9724],{"className":3740,"code":9723,"language":3742,"meta":156,"style":156},"\u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n  \u003Ceach loop=\"post in response\">\n    {{ post.title.rendered }}\n  \u003C/each>\n\u003C/fetch>\n",[158,9725,9726,9744,9763,9773,9781],{"__ignoreMap":156},[161,9727,9728,9730,9732,9734,9736,9738,9740,9742],{"class":163,"line":164},[161,9729,401],{"class":210},[161,9731,8876],{"class":214},[161,9733,8879],{"class":218},[161,9735,222],{"class":210},[161,9737,225],{"class":218},[161,9739,8886],{"class":167},[161,9741,225],{"class":218},[161,9743,407],{"class":210},[161,9745,9746,9748,9750,9752,9754,9756,9759,9761],{"class":163,"line":171},[161,9747,211],{"class":210},[161,9749,4196],{"class":214},[161,9751,4199],{"class":218},[161,9753,222],{"class":210},[161,9755,225],{"class":218},[161,9757,9758],{"class":167},"post in response",[161,9760,225],{"class":218},[161,9762,407],{"class":210},[161,9764,9765,9768,9771],{"class":163,"line":177},[161,9766,9767],{"class":167},"    {{ ",[161,9769,9770],{"class":864},"post.title.rendered",[161,9772,5697],{"class":167},[161,9774,9775,9777,9779],{"class":163,"line":183},[161,9776,484],{"class":210},[161,9778,4196],{"class":214},[161,9780,407],{"class":210},[161,9782,9783,9785,9787],{"class":163,"line":189},[161,9784,799],{"class":210},[161,9786,8876],{"class":214},[161,9788,407],{"class":210},[115,9790,9791,9792,138],{},"Want to loop over a specific subset only? You can use ",[125,9793,5650],{"href":5657},[115,9795,9796],{},"For example, let's show the last 2 posts in a list format at the end of the template:",[151,9798,9800],{"className":3740,"code":9799,"filename":8859,"language":3742,"meta":156,"style":156},"\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003Ch3 class=\"m-0 text-base font-semibold text-gray-500 uppercase\">From the archives\u003C/h3>\n    \u003Cdiv class=\"leading-6\">‍\u003C/div>\n    \u003Ctable class=\"w-full\">\n      \u003Ceach loop=\"post in response.slice(-2)\">\n        \u003Ctr>\n          \u003Ctd>\n            \u003Cp class=\"text-xs text-gray-500 mb-0.5\">\n              {{ page.formattedDate(post.date) }}\n            \u003C/p>\n            \u003Ch4 class=\"m-0 mb-1 text-xl font-semibold\">\n              \u003Ca href=\"{{ post.link }}\" class=\"text-blue-500 hover:text-blue-400 [text-decoration:none]\">\n                {{ post.title.rendered }}\n              \u003C/a>\n            \u003C/h4>\n            \u003Cdiv class=\"m-0 text-gray-500\">\n              {{ post.excerpt.rendered }}\n            \u003C/div>\n            \u003Cif condition=\"loop.last\">\n              \u003Ctable class=\"w-full\">\n                \u003Ctr>\n                  \u003Ctd class=\"py-6\">\n                    \u003Cdiv class=\"bg-gray-300 h-px leading-px\">‍\u003C/div>\n                  \u003C/td>\n                \u003C/tr>\n              \u003C/table>\n            \u003C/if>\n          \u003C/td>\n        \u003C/tr>\n      \u003C/each>\n    \u003C/table>\n  \u003C/fetch>\n\u003C/x-main>\n",[158,9801,9802,9810,9828,9856,9883,9901,9920,9928,9936,9955,9969,9977,9997,10030,10038,10046,10054,10073,10082,10090,10109,10127,10135,10154,10181,10189,10197,10205,10213,10221,10229,10237,10245,10253],{"__ignoreMap":156},[161,9803,9804,9806,9808],{"class":163,"line":164},[161,9805,401],{"class":210},[161,9807,404],{"class":214},[161,9809,407],{"class":210},[161,9811,9812,9814,9816,9818,9820,9822,9824,9826],{"class":163,"line":171},[161,9813,211],{"class":210},[161,9815,8876],{"class":214},[161,9817,8879],{"class":218},[161,9819,222],{"class":210},[161,9821,225],{"class":218},[161,9823,8886],{"class":167},[161,9825,225],{"class":218},[161,9827,407],{"class":210},[161,9829,9830,9832,9834,9836,9838,9840,9843,9845,9847,9850,9852,9854],{"class":163,"line":177},[161,9831,439],{"class":210},[161,9833,292],{"class":214},[161,9835,4115],{"class":218},[161,9837,222],{"class":210},[161,9839,225],{"class":218},[161,9841,9842],{"class":167},"m-0 text-base font-semibold text-gray-500 uppercase",[161,9844,225],{"class":218},[161,9846,233],{"class":210},[161,9848,9849],{"class":167},"From the archives",[161,9851,799],{"class":210},[161,9853,292],{"class":214},[161,9855,407],{"class":210},[161,9857,9858,9860,9862,9864,9866,9868,9871,9873,9875,9877,9879,9881],{"class":163,"line":183},[161,9859,439],{"class":210},[161,9861,618],{"class":214},[161,9863,4115],{"class":218},[161,9865,222],{"class":210},[161,9867,225],{"class":218},[161,9869,9870],{"class":167},"leading-6",[161,9872,225],{"class":218},[161,9874,233],{"class":210},[161,9876,9144],{"class":214},[161,9878,799],{"class":210},[161,9880,618],{"class":214},[161,9882,407],{"class":210},[161,9884,9885,9887,9889,9891,9893,9895,9897,9899],{"class":163,"line":189},[161,9886,439],{"class":210},[161,9888,4375],{"class":214},[161,9890,4115],{"class":218},[161,9892,222],{"class":210},[161,9894,225],{"class":218},[161,9896,4434],{"class":167},[161,9898,225],{"class":218},[161,9900,407],{"class":210},[161,9902,9903,9905,9907,9909,9911,9913,9916,9918],{"class":163,"line":335},[161,9904,4193],{"class":210},[161,9906,4196],{"class":214},[161,9908,4199],{"class":218},[161,9910,222],{"class":210},[161,9912,225],{"class":218},[161,9914,9915],{"class":167},"post in response.slice(-2)",[161,9917,225],{"class":218},[161,9919,407],{"class":210},[161,9921,9922,9924,9926],{"class":163,"line":341},[161,9923,4402],{"class":210},[161,9925,4395],{"class":214},[161,9927,407],{"class":210},[161,9929,9930,9932,9934],{"class":163,"line":347},[161,9931,4423],{"class":210},[161,9933,4405],{"class":214},[161,9935,407],{"class":210},[161,9937,9938,9940,9942,9944,9946,9948,9951,9953],{"class":163,"line":481},[161,9939,4443],{"class":210},[161,9941,115],{"class":214},[161,9943,4115],{"class":218},[161,9945,222],{"class":210},[161,9947,225],{"class":218},[161,9949,9950],{"class":167},"text-xs text-gray-500 mb-0.5",[161,9952,225],{"class":218},[161,9954,407],{"class":210},[161,9956,9957,9960,9962,9964,9967],{"class":163,"line":491},[161,9958,9959],{"class":167},"              {{ ",[161,9961,8380],{"class":864},[161,9963,1147],{"class":167},[161,9965,9966],{"class":864},"post.date",[161,9968,8388],{"class":167},[161,9970,9971,9973,9975],{"class":163,"line":501},[161,9972,4493],{"class":210},[161,9974,115],{"class":214},[161,9976,407],{"class":210},[161,9978,9979,9981,9984,9986,9988,9990,9993,9995],{"class":163,"line":541},[161,9980,4443],{"class":210},[161,9982,9983],{"class":214},"h4",[161,9985,4115],{"class":218},[161,9987,222],{"class":210},[161,9989,225],{"class":218},[161,9991,9992],{"class":167},"m-0 mb-1 text-xl font-semibold",[161,9994,225],{"class":218},[161,9996,407],{"class":210},[161,9998,9999,10001,10003,10005,10007,10009,10011,10013,10015,10017,10019,10021,10023,10026,10028],{"class":163,"line":550},[161,10000,4452],{"class":210},[161,10002,125],{"class":214},[161,10004,8171],{"class":218},[161,10006,222],{"class":210},[161,10008,225],{"class":218},[161,10010,3772],{"class":167},[161,10012,8436],{"class":864},[161,10014,3789],{"class":167},[161,10016,225],{"class":218},[161,10018,4115],{"class":218},[161,10020,222],{"class":210},[161,10022,225],{"class":218},[161,10024,10025],{"class":167},"text-blue-500 hover:text-blue-400 [text-decoration:none]",[161,10027,225],{"class":218},[161,10029,407],{"class":210},[161,10031,10032,10034,10036],{"class":163,"line":555},[161,10033,9231],{"class":167},[161,10035,9770],{"class":864},[161,10037,5697],{"class":167},[161,10039,10040,10042,10044],{"class":163,"line":564},[161,10041,4484],{"class":210},[161,10043,125],{"class":214},[161,10045,407],{"class":210},[161,10047,10048,10050,10052],{"class":163,"line":570},[161,10049,4493],{"class":210},[161,10051,9983],{"class":214},[161,10053,407],{"class":210},[161,10055,10056,10058,10060,10062,10064,10066,10069,10071],{"class":163,"line":579},[161,10057,4443],{"class":210},[161,10059,618],{"class":214},[161,10061,4115],{"class":218},[161,10063,222],{"class":210},[161,10065,225],{"class":218},[161,10067,10068],{"class":167},"m-0 text-gray-500",[161,10070,225],{"class":218},[161,10072,407],{"class":210},[161,10074,10075,10077,10080],{"class":163,"line":584},[161,10076,9959],{"class":167},[161,10078,10079],{"class":864},"post.excerpt.rendered",[161,10081,5697],{"class":167},[161,10083,10084,10086,10088],{"class":163,"line":593},[161,10085,4493],{"class":210},[161,10087,618],{"class":214},[161,10089,407],{"class":210},[161,10091,10092,10094,10096,10098,10100,10102,10105,10107],{"class":163,"line":599},[161,10093,4443],{"class":210},[161,10095,420],{"class":214},[161,10097,423],{"class":218},[161,10099,222],{"class":210},[161,10101,225],{"class":218},[161,10103,10104],{"class":167},"loop.last",[161,10106,225],{"class":218},[161,10108,407],{"class":210},[161,10110,10111,10113,10115,10117,10119,10121,10123,10125],{"class":163,"line":608},[161,10112,4452],{"class":210},[161,10114,4375],{"class":214},[161,10116,4115],{"class":218},[161,10118,222],{"class":210},[161,10120,225],{"class":218},[161,10122,4434],{"class":167},[161,10124,225],{"class":218},[161,10126,407],{"class":210},[161,10128,10129,10131,10133],{"class":163,"line":613},[161,10130,4472],{"class":210},[161,10132,4395],{"class":214},[161,10134,407],{"class":210},[161,10136,10137,10139,10141,10143,10145,10147,10150,10152],{"class":163,"line":623},[161,10138,9343],{"class":210},[161,10140,4405],{"class":214},[161,10142,4115],{"class":218},[161,10144,222],{"class":210},[161,10146,225],{"class":218},[161,10148,10149],{"class":167},"py-6",[161,10151,225],{"class":218},[161,10153,407],{"class":210},[161,10155,10156,10158,10160,10162,10164,10166,10169,10171,10173,10175,10177,10179],{"class":163,"line":665},[161,10157,9375],{"class":210},[161,10159,618],{"class":214},[161,10161,4115],{"class":218},[161,10163,222],{"class":210},[161,10165,225],{"class":218},[161,10167,10168],{"class":167},"bg-gray-300 h-px leading-px",[161,10170,225],{"class":218},[161,10172,233],{"class":210},[161,10174,9144],{"class":214},[161,10176,799],{"class":210},[161,10178,618],{"class":214},[161,10180,407],{"class":210},[161,10182,10183,10185,10187],{"class":163,"line":674},[161,10184,9430],{"class":210},[161,10186,4405],{"class":214},[161,10188,407],{"class":210},[161,10190,10191,10193,10195],{"class":163,"line":679},[161,10192,9439],{"class":210},[161,10194,4395],{"class":214},[161,10196,407],{"class":210},[161,10198,10199,10201,10203],{"class":163,"line":688},[161,10200,4484],{"class":210},[161,10202,4375],{"class":214},[161,10204,407],{"class":210},[161,10206,10207,10209,10211],{"class":163,"line":694},[161,10208,4493],{"class":210},[161,10210,420],{"class":214},[161,10212,407],{"class":210},[161,10214,10215,10217,10219],{"class":163,"line":703},[161,10216,4502],{"class":210},[161,10218,4405],{"class":214},[161,10220,407],{"class":210},[161,10222,10223,10225,10227],{"class":163,"line":708},[161,10224,4511],{"class":210},[161,10226,4395],{"class":214},[161,10228,407],{"class":210},[161,10230,10231,10233,10235],{"class":163,"line":717},[161,10232,4520],{"class":210},[161,10234,4196],{"class":214},[161,10236,407],{"class":210},[161,10238,10239,10241,10243],{"class":163,"line":758},[161,10240,4225],{"class":210},[161,10242,4375],{"class":214},[161,10244,407],{"class":210},[161,10246,10247,10249,10251],{"class":163,"line":767},[161,10248,484],{"class":210},[161,10250,8876],{"class":214},[161,10252,407],{"class":210},[161,10254,10255,10257,10259],{"class":163,"line":772},[161,10256,799],{"class":210},[161,10258,404],{"class":214},[161,10260,407],{"class":210},[115,10262,10263],{},"Notes:",[832,10265,10266,10269],{},[835,10267,10268],{},"we also added the post date in a paragraph above the title",[835,10270,10271,10272,10279,10280,10283],{},"we're using ",[125,10273,10275,10278],{"href":10274},"/docs/tags#loop-meta",[158,10276,10277],{},"loop"," meta"," to output the divider only ",[5334,10281,10282],{},"between"," list items",[140,10285,10287],{"id":10286},"conclusion","Conclusion",[115,10289,10290],{},"All that we've done in this tutorial is to:",[4810,10292,10293,10299],{},[835,10294,10295,10296,10298],{},"Use the ",[158,10297,8854],{}," tag to fetch JSON data from an API endpoint",[835,10300,10301],{},"Use that data in a Maizzle template",[115,10303,10304],{},"So this isn't tied to WordPress: it was used as an example because of its convenient API, but you're free to implement it with any other APIs.",[115,10306,10307],{},"Some ideas:",[832,10309,10310,10313,10316],{},[835,10311,10312],{},"use your CMS as an authoring system for your newsletter's content",[835,10314,10315],{},"show the latest products from your store",[835,10317,10318,10319],{},"include data from ",[125,10320,10323],{"href":10321,"rel":10322},"https://github.com/public-apis/public-apis",[136],"public APIs",[140,10325,3559],{"id":3558},[832,10327,10328,10333,10337,10342],{},[835,10329,10330],{},[125,10331,8788],{"href":8786,"rel":10332},[136],[835,10334,10335],{},[125,10336,8685],{"href":30},[835,10338,10339],{},[125,10340,8782],{"href":8780,"rel":10341},[136],[835,10343,10344,8692],{},[125,10345,3567],{"href":10346,"rel":10347},"https://github.com/maizzle/starter-wordpress-api",[136],[3576,10349,10350],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}",{"title":156,"searchDepth":171,"depth":171,"links":10352},[10353,10354,10358,10359,10364,10365],{"id":6573,"depth":171,"text":6574},{"id":8770,"depth":171,"text":8771,"children":10355},[10356],{"id":8801,"depth":177,"text":10357},"/posts route",{"id":8848,"depth":171,"text":8849},{"id":8914,"depth":171,"text":8915,"children":10360},[10361,10362,10363],{"id":8924,"depth":177,"text":8925},{"id":9573,"depth":177,"text":9574},{"id":9711,"depth":177,"text":9712},{"id":10286,"depth":171,"text":10287},{"id":3558,"depth":171,"text":3559},"2020-03-02T00:00:00.000Z","Learn how to use the WordPress API and Maizzle to create an HTML email newsletter with your latest posts.",{},"/guides/wordpress-api",{"title":8725,"description":10367},{"loc":10369},"guides/wordpress-api","AfihqwOLOddMEiTa9y488rnGiPwLq-fyMTR5v4nSCyc",{"id":10375,"title":10376,"body":10377,"date":11357,"description":11358,"extension":3595,"meta":11359,"navigation":395,"path":11360,"seo":11361,"sitemap":11362,"stem":11363,"__hash__":11364},"guides/guides/gradients.md","How to use CSS background gradients in HTML emails",{"type":108,"value":10378,"toc":11345},[10379,10382,10385,10393,10408,10412,10414,10424,10429,10431,10437,10450,10456,10470,10476,10480,10486,10490,10503,10554,10563,10566,10624,10633,10637,10643,10646,10741,10745,10750,10753,10886,10897,10903,10907,10910,10913,10930,10933,11097,11105,11109,11116,11123,11229,11232,11326,11328,11342],[111,10380,10376],{"id":10381},"how-to-use-css-background-gradients-in-html-emails",[115,10383,7542],{"className":10384},[6545],[115,10386,10387,10388,138],{},"Many email clients ",[125,10389,10392],{"href":10390,"rel":10391},"https://www.caniemail.com/features/css-linear-gradient/",[136],"support CSS background gradients",[115,10394,10395,10396,10401,10402,10407],{},"In this tutorial, you will learn how to use the ",[125,10397,10400],{"href":10398,"rel":10399},"https://www.npmjs.com/package/tailwindcss-gradients",[136],"tailwindcss-gradients"," plugin to add colorful gradients to your HTML email templates. We will also cover how to add a ",[10403,10404,10406],"abbr",{"title":10405},"Vector Markup Language","VML"," fallback for Outlook on Windows.",[140,10409,10411],{"id":10410},"getting-started","Getting started",[115,10413,7562],{},[151,10415,10416],{"className":265,"code":266,"language":267,"meta":156,"style":156},[158,10417,10418],{"__ignoreMap":156},[161,10419,10420,10422],{"class":163,"line":164},[161,10421,274],{"class":214},[161,10423,277],{"class":167},[115,10425,280,10426,284],{},[158,10427,10428],{},"./example-gradients",[115,10430,287],{},[115,10432,10433,10434,302],{},"After dependencies finish installing, change the current directory to ",[158,10435,10436],{},"example-gradients",[151,10438,10440],{"className":265,"code":10439,"language":267,"meta":156,"style":156},"cd example-gradients\n",[158,10441,10442],{"__ignoreMap":156},[161,10443,10444,10447],{"class":163,"line":164},[161,10445,10446],{"class":214},"cd",[161,10448,10449],{"class":167}," example-gradients\n",[115,10451,10452,10453,10455],{},"Next, install the ",[158,10454,10400],{}," plugin:",[151,10457,10459],{"className":265,"code":10458,"language":267,"meta":156,"style":156},"npm install tailwindcss-gradients\n",[158,10460,10461],{"__ignoreMap":156},[161,10462,10463,10465,10467],{"class":163,"line":164},[161,10464,2200],{"class":214},[161,10466,2203],{"class":167},[161,10468,10469],{"class":167}," tailwindcss-gradients\n",[115,10471,10472,10473,10475],{},"Once it finishes, open the ",[158,10474,10436],{}," folder in your favorite code editor.",[140,10477,10479],{"id":10478},"css-gradients","CSS Gradients",[115,10481,10482,10483,10485],{},"Let's configure and use ",[158,10484,10400],{}," with Tailwind CSS.",[292,10487,10489],{"id":10488},"tailwind-css-config","Tailwind CSS config",[115,10491,10492,10493,813,10495,10498,10499,10502],{},"We need to tell Tailwind CSS to use the plugin. Edit ",[158,10494,7308],{},[158,10496,10497],{},"require()"," the plugin inside the ",[158,10500,10501],{},"plugins: []"," array:",[151,10504,10507],{"className":4620,"code":10505,"filename":7308,"highlights":10506,"language":856,"meta":156,"style":156},"module.exports = {\n  plugins: [\n    require('tailwindcss-gradients'), // [!code ++]\n  ]\n}\n",[177],[158,10508,10509,10521,10530,10545,10550],{"__ignoreMap":156},[161,10510,10511,10513,10515,10517,10519],{"class":163,"line":164},[161,10512,7416],{"class":214},[161,10514,138],{"class":889},[161,10516,7421],{"class":214},[161,10518,4754],{"class":871},[161,10520,890],{"class":889},[161,10522,10523,10526,10528],{"class":163,"line":171},[161,10524,10525],{"class":167},"  plugins",[161,10527,302],{"class":889},[161,10529,5179],{"class":167},[161,10531,10533,10536,10538,10541,10543],{"class":10532,"line":177},[163,237,206,238],[161,10534,10535],{"class":1046},"    require",[161,10537,1147],{"class":167},[161,10539,10540],{"class":167},"'tailwindcss-gradients'",[161,10542,1153],{"class":167},[161,10544,1386],{"class":889},[161,10546,10547],{"class":163,"line":183},[161,10548,10549],{"class":167},"  ]\n",[161,10551,10552],{"class":163,"line":189},[161,10553,2127],{"class":889},[115,10555,10556,10557,10560,10561,138],{},"Next, we need to define what kind of gradients we want to generate, based on which colors. We do that in the ",[158,10558,10559],{},"theme: {}"," key from ",[158,10562,7308],{},[115,10564,10565],{},"For example, let's register linear gradients based on the existing color palette:",[151,10567,10570],{"className":4620,"code":10568,"filename":7308,"highlights":10569,"language":856,"meta":156,"style":156},"module.exports = {\n  theme: {\n    linearGradientColors: theme => theme('colors'), // [!code ++]\n  }\n}\n",[177],[158,10571,10572,10584,10593,10616,10620],{"__ignoreMap":156},[161,10573,10574,10576,10578,10580,10582],{"class":163,"line":164},[161,10575,7416],{"class":214},[161,10577,138],{"class":889},[161,10579,7421],{"class":214},[161,10581,4754],{"class":871},[161,10583,890],{"class":889},[161,10585,10586,10589,10591],{"class":163,"line":171},[161,10587,10588],{"class":167},"  theme",[161,10590,302],{"class":889},[161,10592,890],{"class":889},[161,10594,10596,10599,10601,10603,10605,10607,10609,10612,10614],{"class":10595,"line":177},[163,237,206,238],[161,10597,10598],{"class":1046},"    linearGradientColors",[161,10600,302],{"class":889},[161,10602,5608],{"class":864},[161,10604,1359],{"class":864},[161,10606,5608],{"class":1046},[161,10608,1147],{"class":167},[161,10610,10611],{"class":167},"'colors'",[161,10613,1153],{"class":167},[161,10615,1386],{"class":889},[161,10617,10618],{"class":163,"line":183},[161,10619,1420],{"class":889},[161,10621,10622],{"class":163,"line":189},[161,10623,2127],{"class":889},[3686,10625,10626,10628,10629,8845],{},[158,10627,10400],{},"\n can generate many other types of gradients (although not all are supported in email). See all \n",[125,10630,10632],{"href":10631},"https://github.com/benface/tailwindcss-gradients","\nconfiguration options\n",[292,10634,10636],{"id":10635},"use-in-html","Use in HTML",[115,10638,10639,10640,10642],{},"Simply add the utility class on an element that supports ",[158,10641,2171],{}," CSS.",[115,10644,10645],{},"We also specify a background color first, so that email clients that don't support CSS background-image gradients can display a fallback:",[151,10647,10649],{"className":153,"code":10648,"filename":8859,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-gray-200 bg-gradient-b-black\">\n        \u003C!-- ... -->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[158,10650,10651,10659,10677,10685,10704,10709,10717,10725,10733],{"__ignoreMap":156},[161,10652,10653,10655,10657],{"class":163,"line":164},[161,10654,401],{"class":210},[161,10656,404],{"class":214},[161,10658,407],{"class":210},[161,10660,10661,10663,10665,10667,10669,10671,10673,10675],{"class":163,"line":171},[161,10662,211],{"class":210},[161,10664,4375],{"class":214},[161,10666,4115],{"class":218},[161,10668,222],{"class":210},[161,10670,225],{"class":218},[161,10672,4434],{"class":167},[161,10674,225],{"class":218},[161,10676,407],{"class":210},[161,10678,10679,10681,10683],{"class":163,"line":177},[161,10680,439],{"class":210},[161,10682,4395],{"class":214},[161,10684,407],{"class":210},[161,10686,10687,10689,10691,10693,10695,10697,10700,10702],{"class":163,"line":183},[161,10688,4193],{"class":210},[161,10690,4405],{"class":214},[161,10692,4115],{"class":218},[161,10694,222],{"class":210},[161,10696,225],{"class":218},[161,10698,10699],{"class":167},"bg-gray-200 bg-gradient-b-black",[161,10701,225],{"class":218},[161,10703,407],{"class":210},[161,10705,10706],{"class":163,"line":189},[161,10707,10708],{"class":412},"        \u003C!-- ... -->\n",[161,10710,10711,10713,10715],{"class":163,"line":335},[161,10712,4520],{"class":210},[161,10714,4405],{"class":214},[161,10716,407],{"class":210},[161,10718,10719,10721,10723],{"class":163,"line":341},[161,10720,4225],{"class":210},[161,10722,4395],{"class":214},[161,10724,407],{"class":210},[161,10726,10727,10729,10731],{"class":163,"line":347},[161,10728,484],{"class":210},[161,10730,4375],{"class":214},[161,10732,407],{"class":210},[161,10734,10735,10737,10739],{"class":163,"line":481},[161,10736,799],{"class":210},[161,10738,404],{"class":214},[161,10740,407],{"class":210},[140,10742,10744],{"id":10743},"outlook-vml","Outlook VML",[115,10746,10747,10748,138],{},"Outlook for Windows doesn't support CSS gradients, but we can use ",[10403,10749,10406],{"title":10405},[115,10751,10752],{},"You need to add it right after the element with the CSS gradient class:",[151,10754,10757],{"className":153,"code":10755,"filename":8859,"highlights":10756,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-blue-500 bg-gradient-b-black-transparent\">\n        \u003C!--[if gte mso 9]>\n        \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;\">\n        \u003Cv:fill type=\"gradient\" color=\"#0072FF\" color2=\"#00C6FF\" angle=\"90\" />\n        \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n        \u003Cdiv>\u003C![endif]-->\n        [your overlayed HTML here]\n        \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[189,335,341,347,481,491,501],[158,10758,10759,10767,10785,10793,10812,10818,10824,10830,10836,10842,10848,10854,10862,10870,10878],{"__ignoreMap":156},[161,10760,10761,10763,10765],{"class":163,"line":164},[161,10762,401],{"class":210},[161,10764,404],{"class":214},[161,10766,407],{"class":210},[161,10768,10769,10771,10773,10775,10777,10779,10781,10783],{"class":163,"line":171},[161,10770,211],{"class":210},[161,10772,4375],{"class":214},[161,10774,4115],{"class":218},[161,10776,222],{"class":210},[161,10778,225],{"class":218},[161,10780,4434],{"class":167},[161,10782,225],{"class":218},[161,10784,407],{"class":210},[161,10786,10787,10789,10791],{"class":163,"line":177},[161,10788,439],{"class":210},[161,10790,4395],{"class":214},[161,10792,407],{"class":210},[161,10794,10795,10797,10799,10801,10803,10805,10808,10810],{"class":163,"line":183},[161,10796,4193],{"class":210},[161,10798,4405],{"class":214},[161,10800,4115],{"class":218},[161,10802,222],{"class":210},[161,10804,225],{"class":218},[161,10806,10807],{"class":167},"bg-blue-500 bg-gradient-b-black-transparent",[161,10809,225],{"class":218},[161,10811,407],{"class":210},[161,10813,10815],{"class":10814,"line":189},[163,237],[161,10816,10817],{"class":412},"        \u003C!--[if gte mso 9]>\n",[161,10819,10821],{"class":10820,"line":335},[163,237],[161,10822,10823],{"class":412},"        \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;\">\n",[161,10825,10827],{"class":10826,"line":341},[163,237],[161,10828,10829],{"class":412},"        \u003Cv:fill type=\"gradient\" color=\"#0072FF\" color2=\"#00C6FF\" angle=\"90\" />\n",[161,10831,10833],{"class":10832,"line":347},[163,237],[161,10834,10835],{"class":412},"        \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[161,10837,10839],{"class":10838,"line":481},[163,237],[161,10840,10841],{"class":412},"        \u003Cdiv>\u003C![endif]-->\n",[161,10843,10845],{"class":10844,"line":491},[163,237],[161,10846,10847],{"class":167},"        [your overlayed HTML here]\n",[161,10849,10851],{"class":10850,"line":501},[163,237],[161,10852,10853],{"class":412},"        \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[161,10855,10856,10858,10860],{"class":163,"line":541},[161,10857,4520],{"class":210},[161,10859,4405],{"class":214},[161,10861,407],{"class":210},[161,10863,10864,10866,10868],{"class":163,"line":550},[161,10865,4225],{"class":210},[161,10867,4395],{"class":214},[161,10869,407],{"class":210},[161,10871,10872,10874,10876],{"class":163,"line":555},[161,10873,484],{"class":210},[161,10875,4375],{"class":214},[161,10877,407],{"class":210},[161,10879,10880,10882,10884],{"class":163,"line":564},[161,10881,799],{"class":210},[161,10883,404],{"class":214},[161,10885,407],{"class":210},[115,10887,10888,10889,10892,10893,10896],{},"As you can see, you need to set a fixed width on the ",[158,10890,10891],{},"\u003Cv:rect>"," element - it is recommended instead of using ",[158,10894,10895],{},"mso-width-percent: 1000;",", as that is pretty buggy (especially in Outlook 2013).",[3686,10898,10899,10900,10902],{},"\nThe width of the \n",[158,10901,10891],{},"\n element needs to match the width of its parent element.\n",[292,10904,10906],{"id":10905},"body-gradient","Body gradient",[115,10908,10909],{},"We can also add a VML gradient to the body of the email.",[115,10911,10912],{},"To achieve this, we:",[4810,10914,10915,10922],{},[835,10916,10917,10918,10921],{},"create a ",[158,10919,10920],{},"\u003Cdiv>"," that wraps our template: this will be used as the solid background color fallback",[835,10923,10924,10925,10927,10928],{},"place the VML code immediately inside that div, basically wrapping our entire template. Note how we're using ",[158,10926,10895],{}," instead of a fixed width on the ",[158,10929,10891],{},[115,10931,10932],{},"Here's an example:",[151,10934,10936],{"className":153,"code":10935,"filename":8859,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Cdiv class=\"bg-gray-200\">\n    \u003C!--[if gte mso 9]>\n    \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"mso-width-percent:1000;\">\n    \u003Cv:fill type=\"gradient\" color=\"#edf2f7\" color2=\"#cbd5e0\" />\n    \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n    \u003Cdiv>\u003C![endif]-->\n    \u003Ctable class=\"w-full font-sans\">\n      \u003Ctr>\n        \u003Ctd align=\"center\" class=\"bg-gradient-t-gray-400\">\n          \u003C!-- your content here... -->\n        \u003C/td>\n      \u003C/tr>\n    \u003C/table>\n    \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n  \u003C/div>\n\u003C/x-main>\n",[158,10937,10938,10946,10965,10970,10975,10980,10985,10990,11009,11017,11047,11052,11060,11068,11076,11081,11089],{"__ignoreMap":156},[161,10939,10940,10942,10944],{"class":163,"line":164},[161,10941,401],{"class":210},[161,10943,404],{"class":214},[161,10945,407],{"class":210},[161,10947,10948,10950,10952,10954,10956,10958,10961,10963],{"class":163,"line":171},[161,10949,211],{"class":210},[161,10951,618],{"class":214},[161,10953,4115],{"class":218},[161,10955,222],{"class":210},[161,10957,225],{"class":218},[161,10959,10960],{"class":167},"bg-gray-200",[161,10962,225],{"class":218},[161,10964,407],{"class":210},[161,10966,10967],{"class":163,"line":177},[161,10968,10969],{"class":412},"    \u003C!--[if gte mso 9]>\n",[161,10971,10972],{"class":163,"line":183},[161,10973,10974],{"class":412},"    \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"mso-width-percent:1000;\">\n",[161,10976,10977],{"class":163,"line":189},[161,10978,10979],{"class":412},"    \u003Cv:fill type=\"gradient\" color=\"#edf2f7\" color2=\"#cbd5e0\" />\n",[161,10981,10982],{"class":163,"line":335},[161,10983,10984],{"class":412},"    \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[161,10986,10987],{"class":163,"line":341},[161,10988,10989],{"class":412},"    \u003Cdiv>\u003C![endif]-->\n",[161,10991,10992,10994,10996,10998,11000,11002,11005,11007],{"class":163,"line":347},[161,10993,439],{"class":210},[161,10995,4375],{"class":214},[161,10997,4115],{"class":218},[161,10999,222],{"class":210},[161,11001,225],{"class":218},[161,11003,11004],{"class":167},"w-full font-sans",[161,11006,225],{"class":218},[161,11008,407],{"class":210},[161,11010,11011,11013,11015],{"class":163,"line":481},[161,11012,4193],{"class":210},[161,11014,4395],{"class":214},[161,11016,407],{"class":210},[161,11018,11019,11021,11023,11026,11028,11030,11032,11034,11036,11038,11040,11043,11045],{"class":163,"line":491},[161,11020,4402],{"class":210},[161,11022,4405],{"class":214},[161,11024,11025],{"class":218}," align",[161,11027,222],{"class":210},[161,11029,225],{"class":218},[161,11031,4260],{"class":167},[161,11033,225],{"class":218},[161,11035,4115],{"class":218},[161,11037,222],{"class":210},[161,11039,225],{"class":218},[161,11041,11042],{"class":167},"bg-gradient-t-gray-400",[161,11044,225],{"class":218},[161,11046,407],{"class":210},[161,11048,11049],{"class":163,"line":501},[161,11050,11051],{"class":412},"          \u003C!-- your content here... -->\n",[161,11053,11054,11056,11058],{"class":163,"line":541},[161,11055,4511],{"class":210},[161,11057,4405],{"class":214},[161,11059,407],{"class":210},[161,11061,11062,11064,11066],{"class":163,"line":550},[161,11063,4520],{"class":210},[161,11065,4395],{"class":214},[161,11067,407],{"class":210},[161,11069,11070,11072,11074],{"class":163,"line":555},[161,11071,4225],{"class":210},[161,11073,4375],{"class":214},[161,11075,407],{"class":210},[161,11077,11078],{"class":163,"line":564},[161,11079,11080],{"class":412},"    \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[161,11082,11083,11085,11087],{"class":163,"line":570},[161,11084,484],{"class":210},[161,11086,618],{"class":214},[161,11088,407],{"class":210},[161,11090,11091,11093,11095],{"class":163,"line":579},[161,11092,799],{"class":210},[161,11094,404],{"class":214},[161,11096,407],{"class":210},[115,11098,11099,11100,138],{},"You can see both examples in the ",[125,11101,11104],{"href":11102,"rel":11103},"https://github.com/maizzle/example-gradients",[136],"project repository",[140,11106,11108],{"id":11107},"avoid-inlining","Avoid inlining",[115,11110,11111,11112,11115],{},"Most email clients that support CSS gradients also support ",[158,11113,11114],{},"@media"," queries.",[115,11117,11118,11119,11122],{},"We can register a ",[158,11120,11121],{},"screen"," breakpoint to prevent Juice from inlining our gradient:",[151,11124,11127],{"className":4620,"code":11125,"filename":7308,"highlights":11126,"language":856,"meta":156,"style":156},"module.exports = {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[335],[158,11128,11129,11141,11149,11158,11178,11196,11217,11221,11225],{"__ignoreMap":156},[161,11130,11131,11133,11135,11137,11139],{"class":163,"line":164},[161,11132,7416],{"class":214},[161,11134,138],{"class":889},[161,11136,7421],{"class":214},[161,11138,4754],{"class":871},[161,11140,890],{"class":889},[161,11142,11143,11145,11147],{"class":163,"line":171},[161,11144,10588],{"class":167},[161,11146,302],{"class":889},[161,11148,890],{"class":889},[161,11150,11151,11154,11156],{"class":163,"line":177},[161,11152,11153],{"class":167},"    screens",[161,11155,302],{"class":889},[161,11157,890],{"class":889},[161,11159,11160,11163,11165,11167,11170,11172,11175],{"class":163,"line":183},[161,11161,11162],{"class":167},"      sm",[161,11164,302],{"class":889},[161,11166,2831],{"class":889},[161,11168,11169],{"class":167},"max",[161,11171,302],{"class":889},[161,11173,11174],{"class":167}," '600px'",[161,11176,11177],{"class":889},"},\n",[161,11179,11180,11183,11185,11187,11189,11191,11194],{"class":163,"line":189},[161,11181,11182],{"class":167},"      xs",[161,11184,302],{"class":889},[161,11186,2831],{"class":889},[161,11188,11169],{"class":167},[161,11190,302],{"class":889},[161,11192,11193],{"class":167}," '425px'",[161,11195,11177],{"class":889},[161,11197,11199,11202,11204,11206,11209,11211,11214],{"class":11198,"line":335},[163,237,206,238],[161,11200,11201],{"class":167},"      screen",[161,11203,302],{"class":889},[161,11205,2831],{"class":889},[161,11207,11208],{"class":167},"raw",[161,11210,302],{"class":889},[161,11212,11213],{"class":167}," 'screen'",[161,11215,11216],{"class":889},"},",[161,11218,11219],{"class":163,"line":341},[161,11220,3458],{"class":889},[161,11222,11223],{"class":163,"line":347},[161,11224,1420],{"class":889},[161,11226,11227],{"class":163,"line":481},[161,11228,2127],{"class":889},[115,11230,11231],{},"We can then write the utility class like this:",[151,11233,11235],{"className":153,"code":11234,"filename":8859,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Ctable class=\"w-full\">\n    \u003Ctr>\n      \u003Ctd class=\"bg-gray-200 screen:bg-gradient-b-black\">\n        \u003C!-- ... -->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[158,11236,11237,11245,11263,11271,11290,11294,11302,11310,11318],{"__ignoreMap":156},[161,11238,11239,11241,11243],{"class":163,"line":164},[161,11240,401],{"class":210},[161,11242,404],{"class":214},[161,11244,407],{"class":210},[161,11246,11247,11249,11251,11253,11255,11257,11259,11261],{"class":163,"line":171},[161,11248,211],{"class":210},[161,11250,4375],{"class":214},[161,11252,4115],{"class":218},[161,11254,222],{"class":210},[161,11256,225],{"class":218},[161,11258,4434],{"class":167},[161,11260,225],{"class":218},[161,11262,407],{"class":210},[161,11264,11265,11267,11269],{"class":163,"line":177},[161,11266,439],{"class":210},[161,11268,4395],{"class":214},[161,11270,407],{"class":210},[161,11272,11273,11275,11277,11279,11281,11283,11286,11288],{"class":163,"line":183},[161,11274,4193],{"class":210},[161,11276,4405],{"class":214},[161,11278,4115],{"class":218},[161,11280,222],{"class":210},[161,11282,225],{"class":218},[161,11284,11285],{"class":167},"bg-gray-200 screen:bg-gradient-b-black",[161,11287,225],{"class":218},[161,11289,407],{"class":210},[161,11291,11292],{"class":163,"line":189},[161,11293,10708],{"class":412},[161,11295,11296,11298,11300],{"class":163,"line":335},[161,11297,4520],{"class":210},[161,11299,4405],{"class":214},[161,11301,407],{"class":210},[161,11303,11304,11306,11308],{"class":163,"line":341},[161,11305,4225],{"class":210},[161,11307,4395],{"class":214},[161,11309,407],{"class":210},[161,11311,11312,11314,11316],{"class":163,"line":347},[161,11313,484],{"class":210},[161,11315,4375],{"class":214},[161,11317,407],{"class":210},[161,11319,11320,11322,11324],{"class":163,"line":481},[161,11321,799],{"class":210},[161,11323,404],{"class":214},[161,11325,407],{"class":210},[140,11327,3559],{"id":3558},[832,11329,11330,11336],{},[835,11331,11332,11335],{},[125,11333,10400],{"href":10398,"rel":11334},[136]," plugin",[835,11337,11338,8692],{},[125,11339,3567],{"href":11340,"rel":11341},"https://github.com/maizzle/starter-gradients",[136],[3576,11343,11344],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}",{"title":156,"searchDepth":171,"depth":171,"links":11346},[11347,11348,11352,11355,11356],{"id":10410,"depth":171,"text":10411},{"id":10478,"depth":171,"text":10479,"children":11349},[11350,11351],{"id":10488,"depth":177,"text":10489},{"id":10635,"depth":177,"text":10636},{"id":10743,"depth":171,"text":10744,"children":11353},[11354],{"id":10905,"depth":177,"text":10906},{"id":11107,"depth":171,"text":11108},{"id":3558,"depth":171,"text":3559},"2020-02-21T00:00:00.000Z","Learn how to add CSS background image gradients with Outlook VML fallback to your HTML email templates in Maizzle.",{},"/guides/gradients",{"title":10376,"description":11358},{"loc":11360},"guides/gradients","Hs8TQhUUHQbYbufi4UhZv6LnUrIHcB_ryzxx9Fzwi00",{"id":11366,"title":11367,"body":11368,"description":156,"extension":3595,"meta":11516,"navigation":395,"path":11517,"seo":11518,"stem":11519,"__hash__":11520},"code/code/config.md","Config",{"type":108,"value":11369,"toc":11514},[11370,11511],[151,11371,11373],{"className":853,"code":11372,"language":856,"meta":156,"style":156},"/** @type {import('tailwindcss').Config} */\n\nmodule.exports = {\n  presets: [\n    require('tailwindcss-preset-email')\n  ],\n  theme: {\n    extend: {\n      colors: {\n        blue: {\n          brand: '#286dbd',\n        },\n      },\n    }\n  },\n}\n",[158,11374,11375,11399,11403,11415,11424,11435,11442,11450,11459,11468,11477,11489,11494,11499,11503,11507],{"__ignoreMap":156},[161,11376,11377,11380,11384,11388,11390,11394,11396],{"class":163,"line":164},[161,11378,11379],{"class":412},"/** ",[161,11381,11383],{"class":11382},"sTnEA","@",[161,11385,11387],{"class":11386},"sGouh","type",[161,11389,2831],{"class":11382},[161,11391,11393],{"class":11392},"sSci_","import('tailwindcss').Config",[161,11395,2847],{"class":11382},[161,11397,11398],{"class":412}," */\n",[161,11400,11401],{"class":163,"line":171},[161,11402,396],{"emptyLinePlaceholder":395},[161,11404,11405,11407,11409,11411,11413],{"class":163,"line":177},[161,11406,7416],{"class":214},[161,11408,138],{"class":889},[161,11410,7421],{"class":214},[161,11412,4754],{"class":871},[161,11414,890],{"class":889},[161,11416,11417,11420,11422],{"class":163,"line":183},[161,11418,11419],{"class":167},"  presets",[161,11421,302],{"class":889},[161,11423,5179],{"class":167},[161,11425,11426,11428,11430,11433],{"class":163,"line":189},[161,11427,10535],{"class":1046},[161,11429,1147],{"class":167},[161,11431,11432],{"class":167},"'tailwindcss-preset-email'",[161,11434,1325],{"class":167},[161,11436,11437,11440],{"class":163,"line":335},[161,11438,11439],{"class":167},"  ]",[161,11441,913],{"class":889},[161,11443,11444,11446,11448],{"class":163,"line":341},[161,11445,10588],{"class":167},[161,11447,302],{"class":889},[161,11449,890],{"class":889},[161,11451,11452,11455,11457],{"class":163,"line":347},[161,11453,11454],{"class":167},"    extend",[161,11456,302],{"class":889},[161,11458,890],{"class":889},[161,11460,11461,11464,11466],{"class":163,"line":481},[161,11462,11463],{"class":167},"      colors",[161,11465,302],{"class":889},[161,11467,890],{"class":889},[161,11469,11470,11473,11475],{"class":163,"line":491},[161,11471,11472],{"class":167},"        blue",[161,11474,302],{"class":889},[161,11476,890],{"class":889},[161,11478,11479,11482,11484,11487],{"class":163,"line":501},[161,11480,11481],{"class":167},"          brand",[161,11483,302],{"class":889},[161,11485,11486],{"class":167}," '#286dbd'",[161,11488,913],{"class":889},[161,11490,11491],{"class":163,"line":541},[161,11492,11493],{"class":889},"        },\n",[161,11495,11496],{"class":163,"line":550},[161,11497,11498],{"class":889},"      },\n",[161,11500,11501],{"class":163,"line":555},[161,11502,3458],{"class":889},[161,11504,11505],{"class":163,"line":564},[161,11506,944],{"class":889},[161,11508,11509],{"class":163,"line":570},[161,11510,2127],{"class":889},[3576,11512,11513],{},"html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sTnEA, html code.shiki .sTnEA{--shiki-light:#44403C;--shiki-light-font-style:italic;--shiki-dark:#44403C;--shiki-dark-font-style:italic}html pre.shiki code .sGouh, html code.shiki .sGouh{--shiki-light:#3730A3;--shiki-light-font-style:italic;--shiki-dark:#3730A3;--shiki-dark-font-style:italic}html pre.shiki code .sSci_, html code.shiki .sSci_{--shiki-light:#EC4899;--shiki-light-font-style:italic;--shiki-dark:#EC4899;--shiki-dark-font-style:italic}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":156,"searchDepth":171,"depth":171,"links":11515},[],{},"/code/config",{"description":156},"code/config","ExPVhVn_J0SQpjHeiJYhI9WUvvwi_HJIL2vclXshC8w",{"id":11522,"title":11523,"body":11524,"description":156,"extension":3595,"meta":11671,"navigation":395,"path":11672,"seo":11673,"stem":11674,"__hash__":11675},"code/code/environment.md","Environment",{"type":108,"value":11525,"toc":11669},[11526,11666],[151,11527,11529],{"className":853,"code":11528,"language":856,"meta":156,"style":156},"/** @type {import('@maizzle/framework').Config} */\n\nexport default {\n  build: {\n    content: ['emails/**/*.html'],\n    output: {\n      path: 'build_production',\n    },\n  },\n  css: {\n    inline: true,\n    purge: true,\n    shorthand: true,\n  },\n  prettify: true,\n}\n",[158,11530,11531,11548,11552,11560,11568,11583,11591,11602,11606,11610,11618,11628,11638,11648,11652,11662],{"__ignoreMap":156},[161,11532,11533,11535,11537,11539,11541,11544,11546],{"class":163,"line":164},[161,11534,11379],{"class":412},[161,11536,11383],{"class":11382},[161,11538,11387],{"class":11386},[161,11540,2831],{"class":11382},[161,11542,11543],{"class":11392},"import('@maizzle/framework').Config",[161,11545,2847],{"class":11382},[161,11547,11398],{"class":412},[161,11549,11550],{"class":163,"line":171},[161,11551,396],{"emptyLinePlaceholder":395},[161,11553,11554,11556,11558],{"class":163,"line":177},[161,11555,883],{"class":214},[161,11557,886],{"class":214},[161,11559,890],{"class":889},[161,11561,11562,11564,11566],{"class":163,"line":183},[161,11563,895],{"class":167},[161,11565,302],{"class":889},[161,11567,890],{"class":889},[161,11569,11570,11572,11574,11576,11579,11581],{"class":163,"line":189},[161,11571,4646],{"class":167},[161,11573,302],{"class":889},[161,11575,4651],{"class":167},[161,11577,11578],{"class":167},"'emails/**/*.html'",[161,11580,1096],{"class":167},[161,11582,913],{"class":889},[161,11584,11585,11587,11589],{"class":163,"line":335},[161,11586,918],{"class":167},[161,11588,302],{"class":889},[161,11590,890],{"class":889},[161,11592,11593,11595,11597,11600],{"class":163,"line":341},[161,11594,927],{"class":167},[161,11596,302],{"class":889},[161,11598,11599],{"class":167}," 'build_production'",[161,11601,913],{"class":889},[161,11603,11604],{"class":163,"line":347},[161,11605,939],{"class":889},[161,11607,11608],{"class":163,"line":481},[161,11609,944],{"class":889},[161,11611,11612,11614,11616],{"class":163,"line":491},[161,11613,949],{"class":167},[161,11615,302],{"class":889},[161,11617,890],{"class":889},[161,11619,11620,11622,11624,11626],{"class":163,"line":501},[161,11621,958],{"class":167},[161,11623,302],{"class":889},[161,11625,963],{"class":214},[161,11627,913],{"class":889},[161,11629,11630,11632,11634,11636],{"class":163,"line":541},[161,11631,970],{"class":167},[161,11633,302],{"class":889},[161,11635,963],{"class":214},[161,11637,913],{"class":889},[161,11639,11640,11642,11644,11646],{"class":163,"line":550},[161,11641,981],{"class":167},[161,11643,302],{"class":889},[161,11645,963],{"class":214},[161,11647,913],{"class":889},[161,11649,11650],{"class":163,"line":555},[161,11651,944],{"class":889},[161,11653,11654,11656,11658,11660],{"class":163,"line":564},[161,11655,996],{"class":167},[161,11657,302],{"class":889},[161,11659,963],{"class":214},[161,11661,913],{"class":889},[161,11663,11664],{"class":163,"line":570},[161,11665,2127],{"class":889},[3576,11667,11668],{},"html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sTnEA, html code.shiki .sTnEA{--shiki-light:#44403C;--shiki-light-font-style:italic;--shiki-dark:#44403C;--shiki-dark-font-style:italic}html pre.shiki code .sGouh, html code.shiki .sGouh{--shiki-light:#3730A3;--shiki-light-font-style:italic;--shiki-dark:#3730A3;--shiki-dark-font-style:italic}html pre.shiki code .sSci_, html code.shiki .sSci_{--shiki-light:#EC4899;--shiki-light-font-style:italic;--shiki-dark:#EC4899;--shiki-dark-font-style:italic}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":156,"searchDepth":171,"depth":171,"links":11670},[],{},"/code/environment",{"description":156},"code/environment","f53wRu7euFEGuBEa4y9qgYX9R-YFa1cKdjQ3YApWbSg",{"id":11677,"title":6813,"body":11678,"description":156,"extension":3595,"meta":11881,"navigation":395,"path":11882,"seo":11883,"stem":11884,"__hash__":11885},"code/code/template.md",{"type":108,"value":11679,"toc":11879},[11680,11876],[151,11681,11683],{"className":153,"code":11682,"language":155,"meta":156,"style":156},"\u003Cx-main>\n  \u003Ctable class=\"mx-auto font-inter\">\n    \u003Ctr>\n      \u003Ctd class=\"w-[600px] max-w-full bg-white\">\n        \u003Ch1 class=\"text-2xl/8 text-slate-950\">\n          BYOHTML\n        \u003C/h1>\n\n        \u003Cp class=\"text-base/6 text-slate-600\">\n          Bring your own HTML\n        \u003C/p>\n\n        \u003Cx-button href=\"https://maizzle.com\">\n          Read more\n        \u003C/x-button>\n      \u003C/td>\n    \u003C/tr>\n  \u003C/table>\n\u003C/x-main>\n",[158,11684,11685,11693,11712,11720,11739,11758,11763,11771,11775,11794,11799,11807,11811,11831,11836,11844,11852,11860,11868],{"__ignoreMap":156},[161,11686,11687,11689,11691],{"class":163,"line":164},[161,11688,401],{"class":210},[161,11690,404],{"class":214},[161,11692,407],{"class":210},[161,11694,11695,11697,11699,11701,11703,11705,11708,11710],{"class":163,"line":171},[161,11696,211],{"class":210},[161,11698,4375],{"class":214},[161,11700,4115],{"class":218},[161,11702,222],{"class":210},[161,11704,225],{"class":218},[161,11706,11707],{"class":167},"mx-auto font-inter",[161,11709,225],{"class":218},[161,11711,407],{"class":210},[161,11713,11714,11716,11718],{"class":163,"line":177},[161,11715,439],{"class":210},[161,11717,4395],{"class":214},[161,11719,407],{"class":210},[161,11721,11722,11724,11726,11728,11730,11732,11735,11737],{"class":163,"line":183},[161,11723,4193],{"class":210},[161,11725,4405],{"class":214},[161,11727,4115],{"class":218},[161,11729,222],{"class":210},[161,11731,225],{"class":218},[161,11733,11734],{"class":167},"w-[600px] max-w-full bg-white",[161,11736,225],{"class":218},[161,11738,407],{"class":210},[161,11740,11741,11743,11745,11747,11749,11751,11754,11756],{"class":163,"line":189},[161,11742,4402],{"class":210},[161,11744,111],{"class":214},[161,11746,4115],{"class":218},[161,11748,222],{"class":210},[161,11750,225],{"class":218},[161,11752,11753],{"class":167},"text-2xl/8 text-slate-950",[161,11755,225],{"class":218},[161,11757,407],{"class":210},[161,11759,11760],{"class":163,"line":335},[161,11761,11762],{"class":167},"          BYOHTML\n",[161,11764,11765,11767,11769],{"class":163,"line":341},[161,11766,4511],{"class":210},[161,11768,111],{"class":214},[161,11770,407],{"class":210},[161,11772,11773],{"class":163,"line":347},[161,11774,396],{"emptyLinePlaceholder":395},[161,11776,11777,11779,11781,11783,11785,11787,11790,11792],{"class":163,"line":481},[161,11778,4402],{"class":210},[161,11780,115],{"class":214},[161,11782,4115],{"class":218},[161,11784,222],{"class":210},[161,11786,225],{"class":218},[161,11788,11789],{"class":167},"text-base/6 text-slate-600",[161,11791,225],{"class":218},[161,11793,407],{"class":210},[161,11795,11796],{"class":163,"line":491},[161,11797,11798],{"class":167},"          Bring your own HTML\n",[161,11800,11801,11803,11805],{"class":163,"line":501},[161,11802,4511],{"class":210},[161,11804,115],{"class":214},[161,11806,407],{"class":210},[161,11808,11809],{"class":163,"line":541},[161,11810,396],{"emptyLinePlaceholder":395},[161,11812,11813,11815,11818,11820,11822,11824,11827,11829],{"class":163,"line":550},[161,11814,4402],{"class":210},[161,11816,11817],{"class":214},"x-button",[161,11819,8171],{"class":218},[161,11821,222],{"class":210},[161,11823,225],{"class":218},[161,11825,11826],{"class":167},"https://maizzle.com",[161,11828,225],{"class":218},[161,11830,407],{"class":210},[161,11832,11833],{"class":163,"line":555},[161,11834,11835],{"class":167},"          Read more\n",[161,11837,11838,11840,11842],{"class":163,"line":564},[161,11839,4511],{"class":210},[161,11841,11817],{"class":214},[161,11843,407],{"class":210},[161,11845,11846,11848,11850],{"class":163,"line":570},[161,11847,4520],{"class":210},[161,11849,4405],{"class":214},[161,11851,407],{"class":210},[161,11853,11854,11856,11858],{"class":163,"line":579},[161,11855,4225],{"class":210},[161,11857,4395],{"class":214},[161,11859,407],{"class":210},[161,11861,11862,11864,11866],{"class":163,"line":584},[161,11863,484],{"class":210},[161,11865,4375],{"class":214},[161,11867,407],{"class":210},[161,11869,11870,11872,11874],{"class":163,"line":593},[161,11871,799],{"class":210},[161,11873,404],{"class":214},[161,11875,407],{"class":210},[3576,11877,11878],{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":156,"searchDepth":171,"depth":171,"links":11880},[],{},"/code/template",{"description":156},"code/template","5eEB2I-XIIUOrqki2E3pMSh501HXA4PIqSgrRvJkWYM",1780318599121]