[{"data":1,"prerenderedAt":13807},["ShallowReactive",2],{"guides-index-collection":3},[4,3503,6439,7439,8632,10283,11274,12378],{"id":5,"title":6,"body":7,"date":3494,"description":3495,"extension":3496,"meta":3497,"navigation":296,"path":3498,"seo":3499,"sitemap":3500,"stem":3501,"__hash__":3502},"guides/guides/mailchimp-package.md","Automating Mailchimp template zip packaging with Maizzle",{"type":8,"value":9,"toc":3480},"minimark",[10,14,18,21,30,40,45,48,51,94,97,157,161,164,179,186,189,192,197,204,252,255,259,266,273,705,722,726,729,732,745,752,904,919,923,926,931,2029,2032,2074,2078,2087,2090,2108,2112,2123,2128,2393,2397,2400,2407,2411,3370,3374,3384,3387,3451,3457,3461,3476],[11,12,6],"h1",{"id":13},"automating-mailchimp-template-zip-packaging-with-maizzle",[15,16,17],"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.",[15,19,20],{},"And if you've done this for many templates, you also know that it can be a tedious process.",[15,22,23,24,29],{},"In this guide, you'll learn how to use Maizzle's ",[25,26,28],"a",{"href":27},"/docs/events","events"," to automatically package your templates and their images into a zip archive that can be uploaded to Mailchimp.",[15,31,32,33,39],{},"If you want to dive right in, check out the ",[25,34,38],{"href":35,"rel":36},"https://github.com/maizzle/starter-mailchimp",[37],"nofollow","Mailchimp Starter",".",[41,42,44],"h2",{"id":43},"requirements","Requirements",[15,46,47],{},"Mailchimp requires that the zip archive contains the HTML file and all its images in the same folder.",[15,49,50],{},"For example:",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"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","",[59,60,61,70,76,82,88],"code",{"__ignoreMap":57},[62,63,66],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sfCc6","template.zip\n",[62,71,73],{"class":64,"line":72},2,[62,74,75],{"class":68},"├── index.html\n",[62,77,79],{"class":64,"line":78},3,[62,80,81],{"class":68},"├── image1.jpg\n",[62,83,85],{"class":64,"line":84},4,[62,86,87],{"class":68},"├── image2.jpg\n",[62,89,91],{"class":64,"line":90},5,[62,92,93],{"class":68},"└── image3.jpg\n",[15,95,96],{},"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:",[52,98,102],{"className":99,"code":100,"highlights":101,"language":56,"meta":57,"style":57},"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",[72],[59,103,104,135],{"__ignoreMap":57},[62,105,109,113,117,121,124,127,130,132],{"class":106,"line":65},[64,107,108],"diff","remove",[62,110,112],{"class":111},"soJEP","  \u003C",[62,114,116],{"class":115},"sizJ4","img",[62,118,120],{"class":119},"sQMLp"," src",[62,122,123],{"class":111},"=",[62,125,126],{"class":119},"\"",[62,128,129],{"class":68},"https://some-cdn.com/image1.jpg",[62,131,126],{"class":119},[62,133,134],{"class":111},">",[62,136,140,142,144,146,148,150,153,155],{"class":137,"line":72},[64,138,107,139],"highlight","add",[62,141,112],{"class":111},[62,143,116],{"class":115},[62,145,120],{"class":119},[62,147,123],{"class":111},[62,149,126],{"class":119},[62,151,152],{"class":68},"image1.jpg",[62,154,126],{"class":119},[62,156,134],{"class":111},[41,158,160],{"id":159},"project-setup","Project setup",[15,162,163],{},"We're starting from scratch, so let's scaffold a new project using the Official Starter:",[52,165,169],{"className":166,"code":167,"language":168,"meta":57,"style":57},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh",[59,170,171],{"__ignoreMap":57},[62,172,173,176],{"class":64,"line":65},[62,174,175],{"class":115},"npx",[62,177,178],{"class":68}," create-maizzle\n",[15,180,181,182,185],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[59,183,184],{},"./mailchimp-project",", and select the Default Starter.",[15,187,188],{},"Choose Yes when prompted to Install dependencies.",[15,190,191],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[193,194,196],"h3",{"id":195},"structure","Structure",[15,198,199,200,203],{},"We'll be organizing our templates into folders inside ",[59,201,202],{},"templates",":",[52,205,207],{"className":54,"code":206,"language":56,"meta":57,"style":57},"src\n└── templates\n    └── template-1\n        ├── index.html\n        ├── image1.jpg\n        ├── image2.jpg\n        └── image3.jpg\n    └── ...\n",[59,208,209,214,219,224,229,234,240,246],{"__ignoreMap":57},[62,210,211],{"class":64,"line":65},[62,212,213],{"class":68},"src\n",[62,215,216],{"class":64,"line":72},[62,217,218],{"class":68},"└── templates\n",[62,220,221],{"class":64,"line":78},[62,222,223],{"class":68},"    └── template-1\n",[62,225,226],{"class":64,"line":84},[62,227,228],{"class":68},"        ├── index.html\n",[62,230,231],{"class":64,"line":90},[62,232,233],{"class":68},"        ├── image1.jpg\n",[62,235,237],{"class":64,"line":236},6,[62,238,239],{"class":68},"        ├── image2.jpg\n",[62,241,243],{"class":64,"line":242},7,[62,244,245],{"class":68},"        └── image3.jpg\n",[62,247,249],{"class":64,"line":248},8,[62,250,251],{"class":68},"    └── ...\n",[15,253,254],{},"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.",[41,256,258],{"id":257},"create-a-template","Create a template",[15,260,261,262,265],{},"For this written guide, we'll be using a simplified template with a few images. See the ",[25,263,38],{"href":35,"rel":264},[37]," for a more extensive example.",[15,267,268,269,272],{},"Create ",[59,270,271],{},"emails/template-1/index.html"," and paste in the following code:",[52,274,276],{"className":54,"code":275,"filename":271,"language":56,"meta":57,"style":57},"---\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",[59,277,278,283,288,292,298,309,315,336,380,390,400,440,449,454,463,469,478,483,492,498,507,512,522,564,573,578,587,593,602,607,616,657,666,671,680,686,695],{"__ignoreMap":57},[62,279,280],{"class":64,"line":65},[62,281,282],{"class":68},"---\n",[62,284,285],{"class":64,"line":72},[62,286,287],{"class":68},"title: \"Example template 1\"\n",[62,289,290],{"class":64,"line":78},[62,291,282],{"class":68},[62,293,294],{"class":64,"line":84},[62,295,297],{"emptyLinePlaceholder":296},true,"\n",[62,299,300,303,306],{"class":64,"line":90},[62,301,302],{"class":111},"\u003C",[62,304,305],{"class":115},"x-main",[62,307,308],{"class":111},">\n",[62,310,311],{"class":64,"line":236},[62,312,314],{"class":313},"smVoC","  \u003C!-- Condition needed in order to see global images when developing locally -->\n",[62,316,317,319,322,325,327,329,332,334],{"class":64,"line":242},[62,318,112],{"class":111},[62,320,321],{"class":115},"if",[62,323,324],{"class":119}," condition",[62,326,123],{"class":111},[62,328,126],{"class":119},[62,330,331],{"class":68},"page.env === 'local'",[62,333,126],{"class":119},[62,335,308],{"class":111},[62,337,338,341,343,345,347,349,352,354,357,359,361,364,366,369,371,373,376,378],{"class":64,"line":248},[62,339,340],{"class":111},"    \u003C",[62,342,116],{"class":115},[62,344,120],{"class":119},[62,346,123],{"class":111},[62,348,126],{"class":119},[62,350,351],{"class":68},"/images/insignia.png",[62,353,126],{"class":119},[62,355,356],{"class":119}," width",[62,358,123],{"class":111},[62,360,126],{"class":119},[62,362,363],{"class":68},"70",[62,365,126],{"class":119},[62,367,368],{"class":119}," alt",[62,370,123],{"class":111},[62,372,126],{"class":119},[62,374,375],{"class":68},"Maizzle",[62,377,126],{"class":119},[62,379,308],{"class":111},[62,381,383,386,388],{"class":64,"line":382},9,[62,384,385],{"class":111},"  \u003C/",[62,387,321],{"class":115},[62,389,308],{"class":111},[62,391,393,395,398],{"class":64,"line":392},10,[62,394,112],{"class":111},[62,396,397],{"class":115},"else",[62,399,308],{"class":111},[62,401,403,405,407,409,411,413,416,418,420,422,424,426,428,430,432,434,436,438],{"class":64,"line":402},11,[62,404,340],{"class":111},[62,406,116],{"class":115},[62,408,120],{"class":119},[62,410,123],{"class":111},[62,412,126],{"class":119},[62,414,415],{"class":68},"insignia.png",[62,417,126],{"class":119},[62,419,356],{"class":119},[62,421,123],{"class":111},[62,423,126],{"class":119},[62,425,363],{"class":68},[62,427,126],{"class":119},[62,429,368],{"class":119},[62,431,123],{"class":111},[62,433,126],{"class":119},[62,435,375],{"class":68},[62,437,126],{"class":119},[62,439,308],{"class":111},[62,441,443,445,447],{"class":64,"line":442},12,[62,444,385],{"class":111},[62,446,397],{"class":115},[62,448,308],{"class":111},[62,450,452],{"class":64,"line":451},13,[62,453,297],{"emptyLinePlaceholder":296},[62,455,457,459,461],{"class":64,"line":456},14,[62,458,112],{"class":111},[62,460,11],{"class":115},[62,462,308],{"class":111},[62,464,466],{"class":64,"line":465},15,[62,467,468],{"class":68},"    Hello,\n",[62,470,472,474,476],{"class":64,"line":471},16,[62,473,385],{"class":111},[62,475,11],{"class":115},[62,477,308],{"class":111},[62,479,481],{"class":64,"line":480},17,[62,482,297],{"emptyLinePlaceholder":296},[62,484,486,488,490],{"class":64,"line":485},18,[62,487,112],{"class":111},[62,489,15],{"class":115},[62,491,308],{"class":111},[62,493,495],{"class":64,"line":494},19,[62,496,497],{"class":68},"    As you might know, lorem ipsum dolor sit amet...\n",[62,499,501,503,505],{"class":64,"line":500},20,[62,502,385],{"class":111},[62,504,15],{"class":115},[62,506,308],{"class":111},[62,508,510],{"class":64,"line":509},21,[62,511,297],{"emptyLinePlaceholder":296},[62,513,515,517,520],{"class":64,"line":514},22,[62,516,112],{"class":111},[62,518,519],{"class":115},"div",[62,521,308],{"class":111},[62,523,525,527,529,531,533,535,538,540,542,544,546,549,551,553,555,557,560,562],{"class":64,"line":524},23,[62,526,340],{"class":111},[62,528,116],{"class":115},[62,530,120],{"class":119},[62,532,123],{"class":111},[62,534,126],{"class":119},[62,536,537],{"class":68},"maizzle.png",[62,539,126],{"class":119},[62,541,356],{"class":119},[62,543,123],{"class":111},[62,545,126],{"class":119},[62,547,548],{"class":68},"456",[62,550,126],{"class":119},[62,552,368],{"class":119},[62,554,123],{"class":111},[62,556,126],{"class":119},[62,558,559],{"class":68},"Maizzle cover image",[62,561,126],{"class":119},[62,563,308],{"class":111},[62,565,567,569,571],{"class":64,"line":566},24,[62,568,385],{"class":111},[62,570,519],{"class":115},[62,572,308],{"class":111},[62,574,576],{"class":64,"line":575},25,[62,577,297],{"emptyLinePlaceholder":296},[62,579,581,583,585],{"class":64,"line":580},26,[62,582,112],{"class":111},[62,584,15],{"class":115},[62,586,308],{"class":111},[62,588,590],{"class":64,"line":589},27,[62,591,592],{"class":68},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat.\n",[62,594,596,598,600],{"class":64,"line":595},28,[62,597,385],{"class":111},[62,599,15],{"class":115},[62,601,308],{"class":111},[62,603,605],{"class":64,"line":604},29,[62,606,297],{"emptyLinePlaceholder":296},[62,608,610,612,614],{"class":64,"line":609},30,[62,611,112],{"class":111},[62,613,519],{"class":115},[62,615,308],{"class":111},[62,617,619,621,623,625,627,629,632,634,636,638,640,642,644,646,648,650,653,655],{"class":64,"line":618},31,[62,620,340],{"class":111},[62,622,116],{"class":115},[62,624,120],{"class":119},[62,626,123],{"class":111},[62,628,126],{"class":119},[62,630,631],{"class":68},"tailwindcss.jpg",[62,633,126],{"class":119},[62,635,356],{"class":119},[62,637,123],{"class":111},[62,639,126],{"class":119},[62,641,548],{"class":68},[62,643,126],{"class":119},[62,645,368],{"class":119},[62,647,123],{"class":111},[62,649,126],{"class":119},[62,651,652],{"class":68},"Tailwind CSS cover image",[62,654,126],{"class":119},[62,656,308],{"class":111},[62,658,660,662,664],{"class":64,"line":659},32,[62,661,385],{"class":111},[62,663,519],{"class":115},[62,665,308],{"class":111},[62,667,669],{"class":64,"line":668},33,[62,670,297],{"emptyLinePlaceholder":296},[62,672,674,676,678],{"class":64,"line":673},34,[62,675,112],{"class":111},[62,677,15],{"class":115},[62,679,308],{"class":111},[62,681,683],{"class":64,"line":682},35,[62,684,685],{"class":68},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat, suscipit sapiente non minus necessitatibus vero hic.\n",[62,687,689,691,693],{"class":64,"line":688},36,[62,690,385],{"class":111},[62,692,15],{"class":115},[62,694,308],{"class":111},[62,696,698,701,703],{"class":64,"line":697},37,[62,699,700],{"class":111},"\u003C/",[62,702,305],{"class":115},[62,704,308],{"class":111},[15,706,707,708,714,715,721],{},"Make sure to save the ",[25,709,712],{"href":710,"rel":711},"https://maizzle.com/__og_image__/og.png",[37],[59,713,537],{}," and ",[25,716,719],{"href":717,"rel":718},"https://tailwindcss.com/_next/static/media/social-card-large.a6e71726.jpg",[37],[59,720,631],{}," images to the same folder.",[41,723,725],{"id":724},"production-config","Production config",[15,727,728],{},"This is where the magic happens.",[15,730,731],{},"Our strategy is as follows:",[733,734,735,739,742],"ul",{},[736,737,738],"li",{},"for each template, create a list of the images it uses",[736,740,741],{},"push that list along with some data about the template file to a queue",[736,743,744],{},"after all templates have been compiled, process the queue and create the .zip archives",[15,746,747,748,751],{},"For now, update your ",[59,749,750],{},"config.production.js"," to look like this:",[52,753,758],{"className":754,"code":755,"filename":750,"highlights":756,"language":757,"meta":57,"style":57},"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",[65,90],"js",[59,759,760,776,780,792,801,815,824,836,841,846,855,867,878,889,893],{"__ignoreMap":57},[62,761,763,767,770,773],{"class":762,"line":65},[64,138],[62,764,766],{"class":765},"s8qYB","const",[62,768,769],{"class":68}," queue ",[62,771,123],{"class":772},"sVevU",[62,774,775],{"class":68}," []\n",[62,777,778],{"class":64,"line":72},[62,779,297],{"emptyLinePlaceholder":296},[62,781,782,785,788],{"class":64,"line":78},[62,783,784],{"class":115},"export",[62,786,787],{"class":115}," default",[62,789,791],{"class":790},"sprQ5"," {\n",[62,793,794,797,799],{"class":64,"line":84},[62,795,796],{"class":68},"  build",[62,798,203],{"class":790},[62,800,791],{"class":790},[62,802,804,807,809,812],{"class":803,"line":90},[64,138],[62,805,806],{"class":68},"    static",[62,808,203],{"class":790},[62,810,811],{"class":115}," false",[62,813,814],{"class":790},",\n",[62,816,817,820,822],{"class":64,"line":236},[62,818,819],{"class":68},"    output",[62,821,203],{"class":790},[62,823,791],{"class":790},[62,825,826,829,831,834],{"class":64,"line":242},[62,827,828],{"class":68},"      path",[62,830,203],{"class":790},[62,832,833],{"class":68}," 'dist'",[62,835,814],{"class":790},[62,837,838],{"class":64,"line":248},[62,839,840],{"class":790},"    },\n",[62,842,843],{"class":64,"line":382},[62,844,845],{"class":790},"  },\n",[62,847,848,851,853],{"class":64,"line":392},[62,849,850],{"class":68},"  css",[62,852,203],{"class":790},[62,854,791],{"class":790},[62,856,857,860,862,865],{"class":64,"line":402},[62,858,859],{"class":68},"    inline",[62,861,203],{"class":790},[62,863,864],{"class":115}," true",[62,866,814],{"class":790},[62,868,869,872,874,876],{"class":64,"line":442},[62,870,871],{"class":68},"    purge",[62,873,203],{"class":790},[62,875,864],{"class":115},[62,877,814],{"class":790},[62,879,880,883,885,887],{"class":64,"line":451},[62,881,882],{"class":68},"    shorthand",[62,884,203],{"class":790},[62,886,864],{"class":115},[62,888,814],{"class":790},[62,890,891],{"class":64,"line":456},[62,892,845],{"class":790},[62,894,895,898,900,902],{"class":64,"line":465},[62,896,897],{"class":68},"  prettify",[62,899,203],{"class":790},[62,901,864],{"class":115},[62,903,814],{"class":790},[15,905,906,907,910,911,914,915,918],{},"We're setting ",[59,908,909],{},"static: false"," because we don't want Maizzle to copy the global ",[59,912,913],{},"images"," folder to the ",[59,916,917],{},"dist"," folder. We'll handle any global images ourselves.",[41,920,922],{"id":921},"get-image-paths-from-html","Get image paths from HTML",[15,924,925],{},"We'll need a way of creating a list of images that are used in a template.",[15,927,268,928,272],{},[59,929,930],{},"utils/getImagePaths.js",[52,932,934],{"className":754,"code":933,"filename":930,"language":757,"meta":57,"style":57},"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",[59,935,936,954,966,1004,1034,1091,1121,1151,1194,1198,1203,1227,1244,1263,1293,1310,1317,1322,1326,1331,1353,1366,1383,1407,1421,1427,1431,1435,1440,1462,1475,1492,1517,1531,1537,1541,1545,1550,1573,1587,1605,1630,1636,1669,1688,1695,1700,1705,1711,1734,1748,1766,1791,1806,1813,1818,1823,1829,1852,1866,1885,1908,1923,1941,1967,1983,1991,1997,2004,2009,2014,2023],{"__ignoreMap":57},[62,937,938,940,942,945,949,952],{"class":64,"line":65},[62,939,784],{"class":115},[62,941,787],{"class":115},[62,943,944],{"class":765}," function",[62,946,948],{"class":947},"s2ImL"," htmlString",[62,950,951],{"class":790},"()",[62,953,791],{"class":790},[62,955,956,959,962,964],{"class":64,"line":72},[62,957,958],{"class":765},"  const",[62,960,961],{"class":68}," imagePaths ",[62,963,123],{"class":772},[62,965,775],{"class":68},[62,967,968,970,973,975,978,981,984,987,990,993,995,998,1001],{"class":64,"line":78},[62,969,958],{"class":765},[62,971,972],{"class":68}," regexSrcAttribute ",[62,974,123],{"class":772},[62,976,977],{"class":68}," /src=",[62,979,980],{"class":790},"[",[62,982,983],{"class":115},"\"'",[62,985,986],{"class":790},"](",[62,988,989],{"class":115},".*?",[62,991,992],{"class":790},")[",[62,994,983],{"class":115},[62,996,997],{"class":790},"]",[62,999,1000],{"class":68},"/",[62,1002,1003],{"class":115},"gi\n",[62,1005,1006,1008,1011,1013,1016,1018,1020,1022,1024,1026,1028,1030,1032],{"class":64,"line":84},[62,1007,958],{"class":765},[62,1009,1010],{"class":68}," regexBackgroundAttribute ",[62,1012,123],{"class":772},[62,1014,1015],{"class":68}," /background=",[62,1017,980],{"class":790},[62,1019,983],{"class":115},[62,1021,986],{"class":790},[62,1023,989],{"class":115},[62,1025,992],{"class":790},[62,1027,983],{"class":115},[62,1029,997],{"class":790},[62,1031,1000],{"class":68},[62,1033,1003],{"class":115},[62,1035,1036,1038,1041,1043,1046,1049,1052,1055,1058,1060,1063,1066,1069,1071,1074,1076,1078,1080,1082,1084,1087,1089],{"class":64,"line":90},[62,1037,958],{"class":765},[62,1039,1040],{"class":68}," regexInlineBackgroundCSS ",[62,1042,123],{"class":772},[62,1044,1045],{"class":68}," /background",[62,1047,1048],{"class":790},"(",[62,1050,1051],{"class":68},"-image",[62,1053,1054],{"class":790},")",[62,1056,1057],{"class":115},"?",[62,1059,203],{"class":68},[62,1061,1062],{"class":115},"\\s?",[62,1064,1065],{"class":68},"url",[62,1067,1068],{"class":111},"\\(",[62,1070,980],{"class":790},[62,1072,1073],{"class":115},"'\"",[62,1075,986],{"class":790},[62,1077,989],{"class":115},[62,1079,992],{"class":790},[62,1081,1073],{"class":115},[62,1083,997],{"class":790},[62,1085,1086],{"class":111},"\\)",[62,1088,1000],{"class":68},[62,1090,1003],{"class":115},[62,1092,1093,1095,1098,1100,1103,1105,1107,1109,1111,1113,1115,1117,1119],{"class":64,"line":236},[62,1094,958],{"class":765},[62,1096,1097],{"class":68}," regexSrcsetAttribute ",[62,1099,123],{"class":772},[62,1101,1102],{"class":68}," /srcset=",[62,1104,980],{"class":790},[62,1106,983],{"class":115},[62,1108,986],{"class":790},[62,1110,989],{"class":115},[62,1112,992],{"class":790},[62,1114,983],{"class":115},[62,1116,997],{"class":790},[62,1118,1000],{"class":68},[62,1120,1003],{"class":115},[62,1122,1123,1125,1128,1130,1133,1135,1137,1139,1141,1143,1145,1147,1149],{"class":64,"line":242},[62,1124,958],{"class":765},[62,1126,1127],{"class":68}," regexPosterAttribute ",[62,1129,123],{"class":772},[62,1131,1132],{"class":68}," /poster=",[62,1134,980],{"class":790},[62,1136,983],{"class":115},[62,1138,986],{"class":790},[62,1140,989],{"class":115},[62,1142,992],{"class":790},[62,1144,983],{"class":115},[62,1146,997],{"class":790},[62,1148,1000],{"class":68},[62,1150,1003],{"class":115},[62,1152,1153,1155,1158,1160,1163,1166,1168,1171,1173,1176,1178,1180,1182,1184,1186,1189,1192],{"class":64,"line":248},[62,1154,958],{"class":765},[62,1156,1157],{"class":68}," regexStyleTag ",[62,1159,123],{"class":772},[62,1161,1162],{"class":68}," /\u003Cstyle",[62,1164,1165],{"class":115},"\\b",[62,1167,980],{"class":790},[62,1169,1170],{"class":115},"^>",[62,1172,997],{"class":790},[62,1174,1175],{"class":115},"*",[62,1177,134],{"class":68},[62,1179,1048],{"class":790},[62,1181,989],{"class":115},[62,1183,1054],{"class":790},[62,1185,302],{"class":68},[62,1187,1188],{"class":111},"\\/",[62,1190,1191],{"class":68},"style>/",[62,1193,1003],{"class":115},[62,1195,1196],{"class":64,"line":382},[62,1197,297],{"emptyLinePlaceholder":296},[62,1199,1200],{"class":64,"line":392},[62,1201,1202],{"class":313},"  // Extract image paths from src attributes\n",[62,1204,1205,1207,1210,1212,1214,1216,1219,1221,1224],{"class":64,"line":402},[62,1206,958],{"class":765},[62,1208,1209],{"class":68}," srcMatches ",[62,1211,123],{"class":772},[62,1213,948],{"class":765},[62,1215,39],{"class":790},[62,1217,1218],{"class":947},"match",[62,1220,1048],{"class":68},[62,1222,1223],{"class":765},"regexSrcAttribute",[62,1225,1226],{"class":68},")\n",[62,1228,1229,1232,1235,1238,1241],{"class":64,"line":442},[62,1230,1231],{"class":115},"  if",[62,1233,1234],{"class":68}," (",[62,1236,1237],{"class":765},"srcMatches",[62,1239,1240],{"class":68},") ",[62,1242,1243],{"class":790},"{\n",[62,1245,1246,1249,1251,1254,1256,1258,1261],{"class":64,"line":451},[62,1247,1248],{"class":765},"    srcMatches",[62,1250,39],{"class":790},[62,1252,1253],{"class":947},"forEach",[62,1255,1048],{"class":68},[62,1257,1218],{"class":765},[62,1259,1260],{"class":765}," =>",[62,1262,791],{"class":790},[62,1264,1265,1268,1271,1273,1276,1278,1281,1283,1285,1288,1291],{"class":64,"line":456},[62,1266,1267],{"class":765},"      const",[62,1269,1270],{"class":68}," imagePath ",[62,1272,123],{"class":772},[62,1274,1275],{"class":765}," match",[62,1277,39],{"class":790},[62,1279,1280],{"class":947},"replace",[62,1282,1048],{"class":68},[62,1284,1223],{"class":765},[62,1286,1287],{"class":790},",",[62,1289,1290],{"class":68}," '$1'",[62,1292,1226],{"class":68},[62,1294,1295,1298,1300,1303,1305,1308],{"class":64,"line":465},[62,1296,1297],{"class":765},"      imagePaths",[62,1299,39],{"class":790},[62,1301,1302],{"class":947},"push",[62,1304,1048],{"class":68},[62,1306,1307],{"class":765},"imagePath",[62,1309,1226],{"class":68},[62,1311,1312,1315],{"class":64,"line":471},[62,1313,1314],{"class":790},"    }",[62,1316,1226],{"class":68},[62,1318,1319],{"class":64,"line":480},[62,1320,1321],{"class":790},"  }\n",[62,1323,1324],{"class":64,"line":485},[62,1325,297],{"emptyLinePlaceholder":296},[62,1327,1328],{"class":64,"line":494},[62,1329,1330],{"class":313},"  // Extract image paths from background attributes\n",[62,1332,1333,1335,1338,1340,1342,1344,1346,1348,1351],{"class":64,"line":500},[62,1334,958],{"class":765},[62,1336,1337],{"class":68}," backgroundMatches ",[62,1339,123],{"class":772},[62,1341,948],{"class":765},[62,1343,39],{"class":790},[62,1345,1218],{"class":947},[62,1347,1048],{"class":68},[62,1349,1350],{"class":765},"regexBackgroundAttribute",[62,1352,1226],{"class":68},[62,1354,1355,1357,1359,1362,1364],{"class":64,"line":509},[62,1356,1231],{"class":115},[62,1358,1234],{"class":68},[62,1360,1361],{"class":765},"backgroundMatches",[62,1363,1240],{"class":68},[62,1365,1243],{"class":790},[62,1367,1368,1371,1373,1375,1377,1379,1381],{"class":64,"line":514},[62,1369,1370],{"class":765},"    backgroundMatches",[62,1372,39],{"class":790},[62,1374,1253],{"class":947},[62,1376,1048],{"class":68},[62,1378,1218],{"class":765},[62,1380,1260],{"class":765},[62,1382,791],{"class":790},[62,1384,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405],{"class":64,"line":524},[62,1386,1267],{"class":765},[62,1388,1270],{"class":68},[62,1390,123],{"class":772},[62,1392,1275],{"class":765},[62,1394,39],{"class":790},[62,1396,1280],{"class":947},[62,1398,1048],{"class":68},[62,1400,1350],{"class":765},[62,1402,1287],{"class":790},[62,1404,1290],{"class":68},[62,1406,1226],{"class":68},[62,1408,1409,1411,1413,1415,1417,1419],{"class":64,"line":566},[62,1410,1297],{"class":765},[62,1412,39],{"class":790},[62,1414,1302],{"class":947},[62,1416,1048],{"class":68},[62,1418,1307],{"class":765},[62,1420,1226],{"class":68},[62,1422,1423,1425],{"class":64,"line":575},[62,1424,1314],{"class":790},[62,1426,1226],{"class":68},[62,1428,1429],{"class":64,"line":580},[62,1430,1321],{"class":790},[62,1432,1433],{"class":64,"line":589},[62,1434,297],{"emptyLinePlaceholder":296},[62,1436,1437],{"class":64,"line":595},[62,1438,1439],{"class":313},"  // Extract image paths from inline background CSS\n",[62,1441,1442,1444,1447,1449,1451,1453,1455,1457,1460],{"class":64,"line":604},[62,1443,958],{"class":765},[62,1445,1446],{"class":68}," inlineBackgroundMatches ",[62,1448,123],{"class":772},[62,1450,948],{"class":765},[62,1452,39],{"class":790},[62,1454,1218],{"class":947},[62,1456,1048],{"class":68},[62,1458,1459],{"class":765},"regexInlineBackgroundCSS",[62,1461,1226],{"class":68},[62,1463,1464,1466,1468,1471,1473],{"class":64,"line":609},[62,1465,1231],{"class":115},[62,1467,1234],{"class":68},[62,1469,1470],{"class":765},"inlineBackgroundMatches",[62,1472,1240],{"class":68},[62,1474,1243],{"class":790},[62,1476,1477,1480,1482,1484,1486,1488,1490],{"class":64,"line":618},[62,1478,1479],{"class":765},"    inlineBackgroundMatches",[62,1481,39],{"class":790},[62,1483,1253],{"class":947},[62,1485,1048],{"class":68},[62,1487,1218],{"class":765},[62,1489,1260],{"class":765},[62,1491,791],{"class":790},[62,1493,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1515],{"class":64,"line":659},[62,1495,1267],{"class":765},[62,1497,1270],{"class":68},[62,1499,123],{"class":772},[62,1501,1275],{"class":765},[62,1503,39],{"class":790},[62,1505,1280],{"class":947},[62,1507,1048],{"class":68},[62,1509,1459],{"class":765},[62,1511,1287],{"class":790},[62,1513,1514],{"class":68}," '$2'",[62,1516,1226],{"class":68},[62,1518,1519,1521,1523,1525,1527,1529],{"class":64,"line":668},[62,1520,1297],{"class":765},[62,1522,39],{"class":790},[62,1524,1302],{"class":947},[62,1526,1048],{"class":68},[62,1528,1307],{"class":765},[62,1530,1226],{"class":68},[62,1532,1533,1535],{"class":64,"line":673},[62,1534,1314],{"class":790},[62,1536,1226],{"class":68},[62,1538,1539],{"class":64,"line":682},[62,1540,1321],{"class":790},[62,1542,1543],{"class":64,"line":688},[62,1544,297],{"emptyLinePlaceholder":296},[62,1546,1547],{"class":64,"line":697},[62,1548,1549],{"class":313},"  // Extract image paths from srcset attributes\n",[62,1551,1553,1555,1558,1560,1562,1564,1566,1568,1571],{"class":64,"line":1552},38,[62,1554,958],{"class":765},[62,1556,1557],{"class":68}," srcsetMatches ",[62,1559,123],{"class":772},[62,1561,948],{"class":765},[62,1563,39],{"class":790},[62,1565,1218],{"class":947},[62,1567,1048],{"class":68},[62,1569,1570],{"class":765},"regexSrcsetAttribute",[62,1572,1226],{"class":68},[62,1574,1576,1578,1580,1583,1585],{"class":64,"line":1575},39,[62,1577,1231],{"class":115},[62,1579,1234],{"class":68},[62,1581,1582],{"class":765},"srcsetMatches",[62,1584,1240],{"class":68},[62,1586,1243],{"class":790},[62,1588,1590,1593,1595,1597,1599,1601,1603],{"class":64,"line":1589},40,[62,1591,1592],{"class":765},"    srcsetMatches",[62,1594,39],{"class":790},[62,1596,1253],{"class":947},[62,1598,1048],{"class":68},[62,1600,1218],{"class":765},[62,1602,1260],{"class":765},[62,1604,791],{"class":790},[62,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628],{"class":64,"line":1607},41,[62,1609,1267],{"class":765},[62,1611,1270],{"class":68},[62,1613,123],{"class":772},[62,1615,1275],{"class":765},[62,1617,39],{"class":790},[62,1619,1280],{"class":947},[62,1621,1048],{"class":68},[62,1623,1570],{"class":765},[62,1625,1287],{"class":790},[62,1627,1290],{"class":68},[62,1629,1226],{"class":68},[62,1631,1633],{"class":64,"line":1632},42,[62,1634,1635],{"class":313},"      // Split the srcset and add each image path individually\n",[62,1637,1639,1641,1644,1646,1649,1651,1654,1656,1658,1661,1663,1665,1667],{"class":64,"line":1638},43,[62,1640,1267],{"class":765},[62,1642,1643],{"class":68}," imagePathsArray ",[62,1645,123],{"class":772},[62,1647,1648],{"class":765}," imagePath",[62,1650,39],{"class":790},[62,1652,1653],{"class":947},"split",[62,1655,1048],{"class":68},[62,1657,1000],{"class":68},[62,1659,1660],{"class":115},"\\s*",[62,1662,1287],{"class":68},[62,1664,1660],{"class":115},[62,1666,1000],{"class":68},[62,1668,1226],{"class":68},[62,1670,1672,1674,1676,1678,1680,1683,1686],{"class":64,"line":1671},44,[62,1673,1297],{"class":765},[62,1675,39],{"class":790},[62,1677,1302],{"class":947},[62,1679,1048],{"class":68},[62,1681,1682],{"class":115},"...",[62,1684,1685],{"class":765},"imagePathsArray",[62,1687,1226],{"class":68},[62,1689,1691,1693],{"class":64,"line":1690},45,[62,1692,1314],{"class":790},[62,1694,1226],{"class":68},[62,1696,1698],{"class":64,"line":1697},46,[62,1699,1321],{"class":790},[62,1701,1703],{"class":64,"line":1702},47,[62,1704,297],{"emptyLinePlaceholder":296},[62,1706,1708],{"class":64,"line":1707},48,[62,1709,1710],{"class":313},"  // Extract image paths from poster attributes\n",[62,1712,1714,1716,1719,1721,1723,1725,1727,1729,1732],{"class":64,"line":1713},49,[62,1715,958],{"class":765},[62,1717,1718],{"class":68}," posterMatches ",[62,1720,123],{"class":772},[62,1722,948],{"class":765},[62,1724,39],{"class":790},[62,1726,1218],{"class":947},[62,1728,1048],{"class":68},[62,1730,1731],{"class":765},"regexPosterAttribute",[62,1733,1226],{"class":68},[62,1735,1737,1739,1741,1744,1746],{"class":64,"line":1736},50,[62,1738,1231],{"class":115},[62,1740,1234],{"class":68},[62,1742,1743],{"class":765},"posterMatches",[62,1745,1240],{"class":68},[62,1747,1243],{"class":790},[62,1749,1751,1754,1756,1758,1760,1762,1764],{"class":64,"line":1750},51,[62,1752,1753],{"class":765},"    posterMatches",[62,1755,39],{"class":790},[62,1757,1253],{"class":947},[62,1759,1048],{"class":68},[62,1761,1218],{"class":765},[62,1763,1260],{"class":765},[62,1765,791],{"class":790},[62,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789],{"class":64,"line":1768},52,[62,1770,1267],{"class":765},[62,1772,1270],{"class":68},[62,1774,123],{"class":772},[62,1776,1275],{"class":765},[62,1778,39],{"class":790},[62,1780,1280],{"class":947},[62,1782,1048],{"class":68},[62,1784,1731],{"class":765},[62,1786,1287],{"class":790},[62,1788,1290],{"class":68},[62,1790,1226],{"class":68},[62,1792,1794,1796,1798,1800,1802,1804],{"class":64,"line":1793},53,[62,1795,1297],{"class":765},[62,1797,39],{"class":790},[62,1799,1302],{"class":947},[62,1801,1048],{"class":68},[62,1803,1307],{"class":765},[62,1805,1226],{"class":68},[62,1807,1809,1811],{"class":64,"line":1808},54,[62,1810,1314],{"class":790},[62,1812,1226],{"class":68},[62,1814,1816],{"class":64,"line":1815},55,[62,1817,1321],{"class":790},[62,1819,1821],{"class":64,"line":1820},56,[62,1822,297],{"emptyLinePlaceholder":296},[62,1824,1826],{"class":64,"line":1825},57,[62,1827,1828],{"class":313},"  // Extract image paths from CSS inside \u003Cstyle> tags in the \u003Chead>\n",[62,1830,1832,1834,1837,1839,1841,1843,1845,1847,1850],{"class":64,"line":1831},58,[62,1833,958],{"class":765},[62,1835,1836],{"class":68}," styleTagMatches ",[62,1838,123],{"class":772},[62,1840,948],{"class":765},[62,1842,39],{"class":790},[62,1844,1218],{"class":947},[62,1846,1048],{"class":68},[62,1848,1849],{"class":765},"regexStyleTag",[62,1851,1226],{"class":68},[62,1853,1855,1857,1859,1862,1864],{"class":64,"line":1854},59,[62,1856,1231],{"class":115},[62,1858,1234],{"class":68},[62,1860,1861],{"class":765},"styleTagMatches",[62,1863,1240],{"class":68},[62,1865,1243],{"class":790},[62,1867,1869,1872,1874,1876,1878,1881,1883],{"class":64,"line":1868},60,[62,1870,1871],{"class":765},"    styleTagMatches",[62,1873,39],{"class":790},[62,1875,1253],{"class":947},[62,1877,1048],{"class":68},[62,1879,1880],{"class":765},"styleTag",[62,1882,1260],{"class":765},[62,1884,791],{"class":790},[62,1886,1888,1890,1893,1895,1898,1900,1902,1904,1906],{"class":64,"line":1887},61,[62,1889,1267],{"class":765},[62,1891,1892],{"class":68}," cssMatches ",[62,1894,123],{"class":772},[62,1896,1897],{"class":765}," styleTag",[62,1899,39],{"class":790},[62,1901,1218],{"class":947},[62,1903,1048],{"class":68},[62,1905,1459],{"class":765},[62,1907,1226],{"class":68},[62,1909,1911,1914,1916,1919,1921],{"class":64,"line":1910},62,[62,1912,1913],{"class":115},"      if",[62,1915,1234],{"class":68},[62,1917,1918],{"class":765},"cssMatches",[62,1920,1240],{"class":68},[62,1922,1243],{"class":790},[62,1924,1926,1929,1931,1933,1935,1937,1939],{"class":64,"line":1925},63,[62,1927,1928],{"class":765},"        cssMatches",[62,1930,39],{"class":790},[62,1932,1253],{"class":947},[62,1934,1048],{"class":68},[62,1936,1218],{"class":765},[62,1938,1260],{"class":765},[62,1940,791],{"class":790},[62,1942,1944,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965],{"class":64,"line":1943},64,[62,1945,1946],{"class":765},"          const",[62,1948,1270],{"class":68},[62,1950,123],{"class":772},[62,1952,1275],{"class":765},[62,1954,39],{"class":790},[62,1956,1280],{"class":947},[62,1958,1048],{"class":68},[62,1960,1459],{"class":765},[62,1962,1287],{"class":790},[62,1964,1514],{"class":68},[62,1966,1226],{"class":68},[62,1968,1970,1973,1975,1977,1979,1981],{"class":64,"line":1969},65,[62,1971,1972],{"class":765},"          imagePaths",[62,1974,39],{"class":790},[62,1976,1302],{"class":947},[62,1978,1048],{"class":68},[62,1980,1307],{"class":765},[62,1982,1226],{"class":68},[62,1984,1986,1989],{"class":64,"line":1985},66,[62,1987,1988],{"class":790},"        }",[62,1990,1226],{"class":68},[62,1992,1994],{"class":64,"line":1993},67,[62,1995,1996],{"class":790},"      }\n",[62,1998,2000,2002],{"class":64,"line":1999},68,[62,2001,1314],{"class":790},[62,2003,1226],{"class":68},[62,2005,2007],{"class":64,"line":2006},69,[62,2008,1321],{"class":790},[62,2010,2012],{"class":64,"line":2011},70,[62,2013,297],{"emptyLinePlaceholder":296},[62,2015,2017,2020],{"class":64,"line":2016},71,[62,2018,2019],{"class":115},"  return",[62,2021,2022],{"class":765}," imagePaths\n",[62,2024,2026],{"class":64,"line":2025},72,[62,2027,2028],{"class":790},"}\n",[15,2030,2031],{},"This will return an array of image paths extracted from the following:",[733,2033,2034,2040,2045,2050,2055,2065],{},[736,2035,2036,2039],{},[59,2037,2038],{},"src"," attributes",[736,2041,2042,2039],{},[59,2043,2044],{},"srcset",[736,2046,2047,2039],{},[59,2048,2049],{},"poster",[736,2051,2052,2039],{},[59,2053,2054],{},"background",[736,2056,2057,2058,2061,2062],{},"CSS inside ",[59,2059,2060],{},"\u003Cstyle>"," tags in the ",[59,2063,2064],{},"\u003Chead>",[736,2066,2067,2068,714,2070,2073],{},"inline ",[59,2069,2054],{},[59,2071,2072],{},"background-image"," CSS",[41,2075,2077],{"id":2076},"archiving-library","Archiving library",[15,2079,2080,2081,2086],{},"There are a few libraries that can create .zip archives, but we'll be using ",[25,2082,2085],{"href":2083,"rel":2084},"https://www.npmjs.com/package/archiver",[37],"archiver"," for this guide.",[15,2088,2089],{},"Install it now:",[52,2091,2095],{"className":2092,"code":2093,"language":2094,"meta":57,"style":57},"language-bash shiki shiki-themes tailwind-css tailwind-css","npm install archiver\n","bash",[59,2096,2097],{"__ignoreMap":57},[62,2098,2099,2102,2105],{"class":64,"line":65},[62,2100,2101],{"class":115},"npm",[62,2103,2104],{"class":68}," install",[62,2106,2107],{"class":68}," archiver\n",[41,2109,2111],{"id":2110},"add-to-the-queue","Add to the queue",[15,2113,2114,2115,2118,2119,2122],{},"Let's use the ",[59,2116,2117],{},"afterTransformers"," event to push information about each template and the images it uses to the ",[59,2120,2121],{},"queue"," variable that we defined earlier.",[15,2124,2125,2126,751],{},"Modify your ",[59,2127,750],{},[52,2129,2132],{"className":754,"code":2130,"filename":750,"highlights":2131,"language":757,"meta":57,"style":57},"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",[485,494,500,509,514,524,566,575,580,589,595,604],[59,2133,2134,2149,2153,2163,2167,2175,2183,2193,2201,2211,2215,2219,2227,2237,2247,2257,2261,2271,2290,2296,2314,2319,2333,2346,2367,2374,2379,2388],{"__ignoreMap":57},[62,2135,2136,2139,2143,2146],{"class":64,"line":65},[62,2137,2138],{"class":765},"import",[62,2140,2142],{"class":2141},"sO1gY"," getImagePathsFromHTML",[62,2144,2145],{"class":790}," from",[62,2147,2148],{"class":765}," './utils/getImagePaths.js'\n",[62,2150,2151],{"class":64,"line":72},[62,2152,297],{"emptyLinePlaceholder":296},[62,2154,2155,2157,2159,2161],{"class":64,"line":78},[62,2156,766],{"class":765},[62,2158,769],{"class":68},[62,2160,123],{"class":772},[62,2162,775],{"class":68},[62,2164,2165],{"class":64,"line":84},[62,2166,297],{"emptyLinePlaceholder":296},[62,2168,2169,2171,2173],{"class":64,"line":90},[62,2170,784],{"class":115},[62,2172,787],{"class":115},[62,2174,791],{"class":790},[62,2176,2177,2179,2181],{"class":64,"line":236},[62,2178,796],{"class":68},[62,2180,203],{"class":790},[62,2182,791],{"class":790},[62,2184,2185,2187,2189,2191],{"class":64,"line":242},[62,2186,806],{"class":68},[62,2188,203],{"class":790},[62,2190,811],{"class":115},[62,2192,814],{"class":790},[62,2194,2195,2197,2199],{"class":64,"line":248},[62,2196,819],{"class":68},[62,2198,203],{"class":790},[62,2200,791],{"class":790},[62,2202,2203,2205,2207,2209],{"class":64,"line":382},[62,2204,828],{"class":68},[62,2206,203],{"class":790},[62,2208,833],{"class":68},[62,2210,814],{"class":790},[62,2212,2213],{"class":64,"line":392},[62,2214,840],{"class":790},[62,2216,2217],{"class":64,"line":402},[62,2218,845],{"class":790},[62,2220,2221,2223,2225],{"class":64,"line":442},[62,2222,850],{"class":68},[62,2224,203],{"class":790},[62,2226,791],{"class":790},[62,2228,2229,2231,2233,2235],{"class":64,"line":451},[62,2230,859],{"class":68},[62,2232,203],{"class":790},[62,2234,864],{"class":115},[62,2236,814],{"class":790},[62,2238,2239,2241,2243,2245],{"class":64,"line":456},[62,2240,871],{"class":68},[62,2242,203],{"class":790},[62,2244,864],{"class":115},[62,2246,814],{"class":790},[62,2248,2249,2251,2253,2255],{"class":64,"line":465},[62,2250,882],{"class":68},[62,2252,203],{"class":790},[62,2254,864],{"class":115},[62,2256,814],{"class":790},[62,2258,2259],{"class":64,"line":471},[62,2260,845],{"class":790},[62,2262,2263,2265,2267,2269],{"class":64,"line":480},[62,2264,897],{"class":68},[62,2266,203],{"class":790},[62,2268,864],{"class":115},[62,2270,814],{"class":790},[62,2272,2274,2277,2279,2281,2283,2286,2288],{"class":2273,"line":485},[64,138],[62,2275,2276],{"class":947},"  afterTransformers",[62,2278,1048],{"class":790},[62,2280,56],{"class":765},[62,2282,1287],{"class":790},[62,2284,2285],{"class":765}," config",[62,2287,1054],{"class":790},[62,2289,791],{"class":790},[62,2291,2293],{"class":2292,"line":494},[64,138],[62,2294,2295],{"class":313},"    // Get image paths from HTML\n",[62,2297,2299,2302,2304,2306,2308,2310,2312],{"class":2298,"line":500},[64,138],[62,2300,2301],{"class":765},"    const",[62,2303,961],{"class":68},[62,2305,123],{"class":772},[62,2307,2142],{"class":947},[62,2309,1048],{"class":68},[62,2311,56],{"class":765},[62,2313,1226],{"class":68},[62,2315,2317],{"class":2316,"line":509},[64,138],[62,2318,297],{"emptyLinePlaceholder":296},[62,2320,2322,2325,2327,2329,2331],{"class":2321,"line":514},[64,138],[62,2323,2324],{"class":765},"    queue",[62,2326,39],{"class":790},[62,2328,1302],{"class":947},[62,2330,1048],{"class":68},[62,2332,1243],{"class":790},[62,2334,2336,2339,2341,2344],{"class":2335,"line":524},[64,138],[62,2337,2338],{"class":68},"      images",[62,2340,203],{"class":790},[62,2342,2343],{"class":765}," imagePaths",[62,2345,814],{"class":790},[62,2347,2349,2352,2355,2357,2360,2362,2365],{"class":2348,"line":566},[64,138],[62,2350,2351],{"class":115},"      ...",[62,2353,2354],{"class":765},"config",[62,2356,39],{"class":790},[62,2358,2359],{"class":765},"build",[62,2361,39],{"class":790},[62,2363,2364],{"class":765},"current",[62,2366,814],{"class":790},[62,2368,2370,2372],{"class":2369,"line":575},[64,138],[62,2371,1314],{"class":790},[62,2373,1226],{"class":68},[62,2375,2377],{"class":2376,"line":580},[64,138],[62,2378,297],{"emptyLinePlaceholder":296},[62,2380,2382,2385],{"class":2381,"line":589},[64,138],[62,2383,2384],{"class":115},"    return",[62,2386,2387],{"class":765}," html\n",[62,2389,2391],{"class":2390,"line":595},[64,138],[62,2392,845],{"class":790},[41,2394,2396],{"id":2395},"create-the-zip-archives","Create the .zip archives",[15,2398,2399],{},"We can now process the queue and create the .zip archive for each template.",[15,2401,2402,2403,2406],{},"We'll use the ",[59,2404,2405],{},"afterBuild"," event for this, which is triggered after all templates have been compiled.",[15,2408,2125,2409,751],{},[59,2410,750],{},[52,2412,2420],{"className":754,"code":2413,"filename":750,"highlights":2414,"language":757,"meta":57,"style":57},"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",[65,72,78,84,668,673,682,688,697,1552,1575,1589,1607,1632,1638,1671,1690,1697,1702,1707,1713,1736,1750,1768,1793,1808,1815,1820,1825,1831,1854,1868,1887,1910,1925,1943,1969,1985,1993,1999,2006,2011,2016,2025,2415,2416,2417,2418,2419],73,74,75,76,77,[59,2421,2422,2435,2448,2461,2474,2484,2488,2498,2502,2510,2518,2528,2536,2546,2550,2554,2562,2572,2582,2592,2596,2606,2622,2626,2642,2646,2658,2668,2684,2690,2694,2700,2704,2714,2720,2759,2765,2804,2810,2828,2833,2839,2891,2912,2922,2936,2942,2949,2954,2982,2990,2997,3002,3008,3025,3030,3036,3055,3106,3113,3118,3124,3154,3178,3216,3248,3253,3259,3278,3315,3322,3327,3333,3346,3354,3360,3365],{"__ignoreMap":57},[62,2423,2425,2427,2430,2432],{"class":2424,"line":65},[64,138],[62,2426,2138],{"class":765},[62,2428,2429],{"class":2141}," fs",[62,2431,2145],{"class":790},[62,2433,2434],{"class":765}," 'node:fs'\n",[62,2436,2438,2440,2443,2445],{"class":2437,"line":72},[64,138],[62,2439,2138],{"class":765},[62,2441,2442],{"class":2141}," path",[62,2444,2145],{"class":790},[62,2446,2447],{"class":765}," 'node:path'\n",[62,2449,2451,2453,2456,2458],{"class":2450,"line":78},[64,138],[62,2452,2138],{"class":765},[62,2454,2455],{"class":2141}," archiver",[62,2457,2145],{"class":790},[62,2459,2460],{"class":765}," 'archiver'\n",[62,2462,2464,2466,2469,2471],{"class":2463,"line":84},[64,138],[62,2465,2138],{"class":765},[62,2467,2468],{"class":2141}," baseConfig",[62,2470,2145],{"class":790},[62,2472,2473],{"class":765}," './config.js'\n",[62,2475,2476,2478,2480,2482],{"class":64,"line":90},[62,2477,2138],{"class":765},[62,2479,2142],{"class":2141},[62,2481,2145],{"class":790},[62,2483,2148],{"class":765},[62,2485,2486],{"class":64,"line":236},[62,2487,297],{"emptyLinePlaceholder":296},[62,2489,2490,2492,2494,2496],{"class":64,"line":242},[62,2491,766],{"class":765},[62,2493,769],{"class":68},[62,2495,123],{"class":772},[62,2497,775],{"class":68},[62,2499,2500],{"class":64,"line":248},[62,2501,297],{"emptyLinePlaceholder":296},[62,2503,2504,2506,2508],{"class":64,"line":382},[62,2505,784],{"class":115},[62,2507,787],{"class":115},[62,2509,791],{"class":790},[62,2511,2512,2514,2516],{"class":64,"line":392},[62,2513,796],{"class":68},[62,2515,203],{"class":790},[62,2517,791],{"class":790},[62,2519,2520,2522,2524,2526],{"class":64,"line":402},[62,2521,806],{"class":68},[62,2523,203],{"class":790},[62,2525,811],{"class":115},[62,2527,814],{"class":790},[62,2529,2530,2532,2534],{"class":64,"line":442},[62,2531,819],{"class":68},[62,2533,203],{"class":790},[62,2535,791],{"class":790},[62,2537,2538,2540,2542,2544],{"class":64,"line":451},[62,2539,828],{"class":68},[62,2541,203],{"class":790},[62,2543,833],{"class":68},[62,2545,814],{"class":790},[62,2547,2548],{"class":64,"line":456},[62,2549,840],{"class":790},[62,2551,2552],{"class":64,"line":465},[62,2553,845],{"class":790},[62,2555,2556,2558,2560],{"class":64,"line":471},[62,2557,850],{"class":68},[62,2559,203],{"class":790},[62,2561,791],{"class":790},[62,2563,2564,2566,2568,2570],{"class":64,"line":480},[62,2565,859],{"class":68},[62,2567,203],{"class":790},[62,2569,864],{"class":115},[62,2571,814],{"class":790},[62,2573,2574,2576,2578,2580],{"class":64,"line":485},[62,2575,871],{"class":68},[62,2577,203],{"class":790},[62,2579,864],{"class":115},[62,2581,814],{"class":790},[62,2583,2584,2586,2588,2590],{"class":64,"line":494},[62,2585,882],{"class":68},[62,2587,203],{"class":790},[62,2589,864],{"class":115},[62,2591,814],{"class":790},[62,2593,2594],{"class":64,"line":500},[62,2595,845],{"class":790},[62,2597,2598,2600,2602,2604],{"class":64,"line":509},[62,2599,897],{"class":68},[62,2601,203],{"class":790},[62,2603,864],{"class":115},[62,2605,814],{"class":790},[62,2607,2608,2610,2612,2614,2616,2618,2620],{"class":64,"line":514},[62,2609,2276],{"class":947},[62,2611,1048],{"class":790},[62,2613,56],{"class":765},[62,2615,1287],{"class":790},[62,2617,2285],{"class":765},[62,2619,1054],{"class":790},[62,2621,791],{"class":790},[62,2623,2624],{"class":64,"line":524},[62,2625,2295],{"class":313},[62,2627,2628,2630,2632,2634,2636,2638,2640],{"class":64,"line":566},[62,2629,2301],{"class":765},[62,2631,961],{"class":68},[62,2633,123],{"class":772},[62,2635,2142],{"class":947},[62,2637,1048],{"class":68},[62,2639,56],{"class":765},[62,2641,1226],{"class":68},[62,2643,2644],{"class":64,"line":575},[62,2645,297],{"emptyLinePlaceholder":296},[62,2647,2648,2650,2652,2654,2656],{"class":64,"line":580},[62,2649,2324],{"class":765},[62,2651,39],{"class":790},[62,2653,1302],{"class":947},[62,2655,1048],{"class":68},[62,2657,1243],{"class":790},[62,2659,2660,2662,2664,2666],{"class":64,"line":589},[62,2661,2338],{"class":68},[62,2663,203],{"class":790},[62,2665,2343],{"class":765},[62,2667,814],{"class":790},[62,2669,2670,2672,2674,2676,2678,2680,2682],{"class":64,"line":595},[62,2671,2351],{"class":115},[62,2673,2354],{"class":765},[62,2675,39],{"class":790},[62,2677,2359],{"class":765},[62,2679,39],{"class":790},[62,2681,2364],{"class":765},[62,2683,814],{"class":790},[62,2685,2686,2688],{"class":64,"line":604},[62,2687,1314],{"class":790},[62,2689,1226],{"class":68},[62,2691,2692],{"class":64,"line":609},[62,2693,297],{"emptyLinePlaceholder":296},[62,2695,2696,2698],{"class":64,"line":618},[62,2697,2384],{"class":115},[62,2699,2387],{"class":765},[62,2701,2702],{"class":64,"line":659},[62,2703,845],{"class":790},[62,2705,2707,2710,2712],{"class":2706,"line":668},[64,138],[62,2708,2709],{"class":947},"  afterBuild",[62,2711,951],{"class":790},[62,2713,791],{"class":790},[62,2715,2717],{"class":2716,"line":673},[64,138],[62,2718,2719],{"class":313},"    // Process each item in the queue\n",[62,2721,2723,2726,2728,2730,2733,2736,2738,2741,2743,2746,2749,2752,2755,2757],{"class":2722,"line":682},[64,138],[62,2724,2725],{"class":115},"    for",[62,2727,1234],{"class":68},[62,2729,766],{"class":765},[62,2731,2732],{"class":790}," {",[62,2734,2735],{"class":765},"path",[62,2737,203],{"class":790},[62,2739,2740],{"class":68}," template",[62,2742,1287],{"class":790},[62,2744,2745],{"class":68}," images",[62,2747,2748],{"class":790},"}",[62,2750,2751],{"class":115}," of",[62,2753,2754],{"class":765}," queue",[62,2756,1240],{"class":68},[62,2758,1243],{"class":790},[62,2760,2762],{"class":2761,"line":688},[64,138],[62,2763,2764],{"class":313},"      // Read template's directory\n",[62,2766,2768,2771,2773,2776,2778,2781,2783,2786,2788,2790,2793,2795,2798,2800,2802],{"class":2767,"line":697},[64,138],[62,2769,2770],{"class":765},"      fs",[62,2772,39],{"class":790},[62,2774,2775],{"class":947},"readdir",[62,2777,1048],{"class":68},[62,2779,2780],{"class":765},"template",[62,2782,39],{"class":790},[62,2784,2785],{"class":765},"dir",[62,2787,1287],{"class":790},[62,2789,1234],{"class":790},[62,2791,2792],{"class":765},"err",[62,2794,1287],{"class":790},[62,2796,2797],{"class":765}," files",[62,2799,1054],{"class":790},[62,2801,1260],{"class":765},[62,2803,791],{"class":790},[62,2805,2807],{"class":2806,"line":1552},[64,138],[62,2808,2809],{"class":313},"        // Exit early if there's an error\n",[62,2811,2813,2816,2818,2820,2822,2825],{"class":2812,"line":1575},[64,138],[62,2814,2815],{"class":115},"        if",[62,2817,1234],{"class":68},[62,2819,2792],{"class":765},[62,2821,1240],{"class":68},[62,2823,2824],{"class":115},"throw",[62,2826,2827],{"class":765}," err\n",[62,2829,2831],{"class":2830,"line":1589},[64,138],[62,2832,297],{"emptyLinePlaceholder":296},[62,2834,2836],{"class":2835,"line":1607},[64,138],[62,2837,2838],{"class":313},"        // Create archive\n",[62,2840,2842,2845,2848,2850,2852,2854,2857,2859,2862,2865,2867,2869,2871,2873,2875,2877,2879,2881,2884,2886,2889],{"class":2841,"line":1632},[64,138],[62,2843,2844],{"class":765},"        const",[62,2846,2847],{"class":68}," output ",[62,2849,123],{"class":772},[62,2851,2429],{"class":765},[62,2853,39],{"class":790},[62,2855,2856],{"class":947},"createWriteStream",[62,2858,1048],{"class":68},[62,2860,2861],{"class":68},"`",[62,2863,2864],{"class":790},"${",[62,2866,2780],{"class":765},[62,2868,39],{"class":790},[62,2870,2785],{"class":765},[62,2872,2748],{"class":790},[62,2874,1000],{"class":68},[62,2876,2864],{"class":790},[62,2878,2780],{"class":765},[62,2880,39],{"class":790},[62,2882,2883],{"class":765},"name",[62,2885,2748],{"class":790},[62,2887,2888],{"class":68},".zip`",[62,2890,1226],{"class":68},[62,2892,2894,2896,2899,2901,2903,2905,2908,2910],{"class":2893,"line":1638},[64,138],[62,2895,2844],{"class":765},[62,2897,2898],{"class":68}," archive ",[62,2900,123],{"class":772},[62,2902,2455],{"class":947},[62,2904,1048],{"class":68},[62,2906,2907],{"class":68},"'zip'",[62,2909,1287],{"class":790},[62,2911,791],{"class":790},[62,2913,2915,2918,2920],{"class":2914,"line":1671},[64,138],[62,2916,2917],{"class":68},"          zlib",[62,2919,203],{"class":790},[62,2921,791],{"class":790},[62,2923,2925,2928,2930,2933],{"class":2924,"line":1690},[64,138],[62,2926,2927],{"class":68},"            level",[62,2929,203],{"class":790},[62,2931,2932],{"class":68}," 9 ",[62,2934,2935],{"class":313},"// Sets the compression level\n",[62,2937,2939],{"class":2938,"line":1697},[64,138],[62,2940,2941],{"class":790},"          }\n",[62,2943,2945,2947],{"class":2944,"line":1702},[64,138],[62,2946,1988],{"class":790},[62,2948,1226],{"class":68},[62,2950,2952],{"class":2951,"line":1707},[64,138],[62,2953,297],{"emptyLinePlaceholder":296},[62,2955,2957,2960,2962,2965,2967,2970,2972,2974,2976,2978,2980],{"class":2956,"line":1713},[64,138],[62,2958,2959],{"class":765},"        archive",[62,2961,39],{"class":790},[62,2963,2964],{"class":947},"on",[62,2966,1048],{"class":68},[62,2968,2969],{"class":68},"'error'",[62,2971,1287],{"class":790},[62,2973,944],{"class":765},[62,2975,1048],{"class":790},[62,2977,2792],{"class":765},[62,2979,1054],{"class":790},[62,2981,791],{"class":790},[62,2983,2985,2988],{"class":2984,"line":1736},[64,138],[62,2986,2987],{"class":115},"          throw",[62,2989,2827],{"class":765},[62,2991,2993,2995],{"class":2992,"line":1750},[64,138],[62,2994,1988],{"class":790},[62,2996,1226],{"class":68},[62,2998,3000],{"class":2999,"line":1768},[64,138],[62,3001,297],{"emptyLinePlaceholder":296},[62,3003,3005],{"class":3004,"line":1793},[64,138],[62,3006,3007],{"class":313},"        // Pipe archive data to the file\n",[62,3009,3011,3013,3015,3018,3020,3023],{"class":3010,"line":1808},[64,138],[62,3012,2959],{"class":765},[62,3014,39],{"class":790},[62,3016,3017],{"class":947},"pipe",[62,3019,1048],{"class":68},[62,3021,3022],{"class":765},"output",[62,3024,1226],{"class":68},[62,3026,3028],{"class":3027,"line":1815},[64,138],[62,3029,297],{"emptyLinePlaceholder":296},[62,3031,3033],{"class":3032,"line":1820},[64,138],[62,3034,3035],{"class":313},"        // Add files from template's directory to archive\n",[62,3037,3039,3042,3044,3046,3048,3051,3053],{"class":3038,"line":1825},[64,138],[62,3040,3041],{"class":765},"        files",[62,3043,39],{"class":790},[62,3045,1253],{"class":947},[62,3047,1048],{"class":68},[62,3049,3050],{"class":765},"file",[62,3052,1260],{"class":765},[62,3054,791],{"class":790},[62,3056,3058,3061,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3096,3098,3101,3104],{"class":3057,"line":1831},[64,138],[62,3059,3060],{"class":765},"          archive",[62,3062,39],{"class":790},[62,3064,3050],{"class":947},[62,3066,1048],{"class":68},[62,3068,2861],{"class":68},[62,3070,2864],{"class":790},[62,3072,2780],{"class":765},[62,3074,39],{"class":790},[62,3076,2785],{"class":765},[62,3078,2748],{"class":790},[62,3080,1000],{"class":68},[62,3082,2864],{"class":790},[62,3084,3050],{"class":765},[62,3086,2748],{"class":790},[62,3088,2861],{"class":68},[62,3090,1287],{"class":790},[62,3092,2732],{"class":790},[62,3094,3095],{"class":68}," name",[62,3097,203],{"class":790},[62,3099,3100],{"class":765}," file",[62,3102,3103],{"class":790}," }",[62,3105,1226],{"class":68},[62,3107,3109,3111],{"class":3108,"line":1854},[64,138],[62,3110,1988],{"class":790},[62,3112,1226],{"class":68},[62,3114,3116],{"class":3115,"line":1868},[64,138],[62,3117,297],{"emptyLinePlaceholder":296},[62,3119,3121],{"class":3120,"line":1887},[64,138],[62,3122,3123],{"class":313},"        // Get a list of files found in `images` that have been used in the template\n",[62,3125,3127,3129,3132,3134,3136,3138,3140,3142,3144,3146,3149,3151],{"class":3126,"line":1910},[64,138],[62,3128,2844],{"class":765},[62,3130,3131],{"class":68}," assetsSource ",[62,3133,123],{"class":772},[62,3135,2468],{"class":765},[62,3137,39],{"class":790},[62,3139,2359],{"class":765},[62,3141,39],{"class":790},[62,3143,202],{"class":765},[62,3145,39],{"class":790},[62,3147,3148],{"class":765},"assets",[62,3150,39],{"class":790},[62,3152,3153],{"class":765},"source\n",[62,3155,3157,3159,3162,3164,3166,3168,3171,3173,3176],{"class":3156,"line":1925},[64,138],[62,3158,2844],{"class":765},[62,3160,3161],{"class":68}," globalImages ",[62,3163,123],{"class":772},[62,3165,2429],{"class":765},[62,3167,39],{"class":790},[62,3169,3170],{"class":947},"readdirSync",[62,3172,1048],{"class":68},[62,3174,3175],{"class":765},"assetsSource",[62,3177,1226],{"class":68},[62,3179,3181,3184,3187,3189,3191,3193,3195,3197,3200,3202,3204,3206,3209,3211,3213],{"class":3180,"line":1943},[64,138],[62,3182,3183],{"class":790},"          .",[62,3185,3186],{"class":947},"filter",[62,3188,1048],{"class":68},[62,3190,3050],{"class":765},[62,3192,1260],{"class":765},[62,3194,2745],{"class":765},[62,3196,39],{"class":790},[62,3198,3199],{"class":947},"includes",[62,3201,1048],{"class":68},[62,3203,2735],{"class":765},[62,3205,39],{"class":790},[62,3207,3208],{"class":947},"basename",[62,3210,1048],{"class":68},[62,3212,3050],{"class":765},[62,3214,3215],{"class":68},")))\n",[62,3217,3219,3221,3224,3226,3228,3230,3232,3234,3237,3239,3241,3243,3245],{"class":3218,"line":1969},[64,138],[62,3220,3183],{"class":790},[62,3222,3223],{"class":947},"map",[62,3225,1048],{"class":68},[62,3227,3050],{"class":765},[62,3229,1260],{"class":765},[62,3231,2442],{"class":765},[62,3233,39],{"class":790},[62,3235,3236],{"class":947},"join",[62,3238,1048],{"class":68},[62,3240,3175],{"class":765},[62,3242,1287],{"class":790},[62,3244,3100],{"class":765},[62,3246,3247],{"class":68},"))\n",[62,3249,3251],{"class":3250,"line":1985},[64,138],[62,3252,297],{"emptyLinePlaceholder":296},[62,3254,3256],{"class":3255,"line":1993},[64,138],[62,3257,3258],{"class":313},"        // Add global images to archive\n",[62,3260,3262,3265,3267,3269,3271,3274,3276],{"class":3261,"line":1999},[64,138],[62,3263,3264],{"class":765},"        globalImages",[62,3266,39],{"class":790},[62,3268,1253],{"class":947},[62,3270,1048],{"class":68},[62,3272,3273],{"class":765},"image",[62,3275,1260],{"class":765},[62,3277,791],{"class":790},[62,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3313],{"class":3280,"line":2006},[64,138],[62,3282,3060],{"class":765},[62,3284,39],{"class":790},[62,3286,3050],{"class":947},[62,3288,1048],{"class":68},[62,3290,3273],{"class":765},[62,3292,1287],{"class":790},[62,3294,2732],{"class":790},[62,3296,3095],{"class":68},[62,3298,203],{"class":790},[62,3300,2442],{"class":765},[62,3302,39],{"class":790},[62,3304,3208],{"class":947},[62,3306,1048],{"class":68},[62,3308,3273],{"class":765},[62,3310,1240],{"class":68},[62,3312,2748],{"class":790},[62,3314,1226],{"class":68},[62,3316,3318,3320],{"class":3317,"line":2011},[64,138],[62,3319,1988],{"class":790},[62,3321,1226],{"class":68},[62,3323,3325],{"class":3324,"line":2016},[64,138],[62,3326,297],{"emptyLinePlaceholder":296},[62,3328,3330],{"class":3329,"line":2025},[64,138],[62,3331,3332],{"class":313},"        // Finalize the archive\n",[62,3334,3336,3338,3340,3343],{"class":3335,"line":2415},[64,138],[62,3337,2959],{"class":765},[62,3339,39],{"class":790},[62,3341,3342],{"class":947},"finalize",[62,3344,3345],{"class":68},"()\n",[62,3347,3349,3352],{"class":3348,"line":2416},[64,138],[62,3350,3351],{"class":790},"      }",[62,3353,1226],{"class":68},[62,3355,3357],{"class":3356,"line":2417},[64,138],[62,3358,3359],{"class":790},"    }\n",[62,3361,3363],{"class":3362,"line":2418},[64,138],[62,3364,845],{"class":790},[62,3366,3368],{"class":3367,"line":2419},[64,138],[62,3369,2028],{"class":790},[41,3371,3373],{"id":3372},"build-the-templates","Build the templates",[15,3375,3376,3377,3380,3381,3383],{},"Running the ",[59,3378,3379],{},"npm run build"," command will now create a .zip archive for each template in the ",[59,3382,917],{}," directory.",[15,3385,3386],{},"The archive file will have the same name as the template, so you'll see something like this:",[52,3388,3390],{"className":54,"code":3389,"language":56,"meta":57,"style":57},"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",[59,3391,3392,3397,3402,3407,3412,3416,3421,3426,3431,3436,3441,3446],{"__ignoreMap":57},[62,3393,3394],{"class":64,"line":65},[62,3395,3396],{"class":68},"build_production\n",[62,3398,3399],{"class":64,"line":72},[62,3400,3401],{"class":68},"  └── template-1\n",[62,3403,3404],{"class":64,"line":78},[62,3405,3406],{"class":68},"      ├── index.html\n",[62,3408,3409],{"class":64,"line":84},[62,3410,3411],{"class":68},"      └── index.zip\n",[62,3413,3414],{"class":64,"line":90},[62,3415,228],{"class":68},[62,3417,3418],{"class":64,"line":236},[62,3419,3420],{"class":68},"        ├── insignia.png\n",[62,3422,3423],{"class":64,"line":242},[62,3424,3425],{"class":68},"        ├── maizzle.png\n",[62,3427,3428],{"class":64,"line":248},[62,3429,3430],{"class":68},"        ├── tailwindcss.jpg\n",[62,3432,3433],{"class":64,"line":382},[62,3434,3435],{"class":68},"      ├── maizzle.png\n",[62,3437,3438],{"class":64,"line":392},[62,3439,3440],{"class":68},"      ├── tailwindcss.jpg\n",[62,3442,3443],{"class":64,"line":402},[62,3444,3445],{"class":68},"  └── template-2\n",[62,3447,3448],{"class":64,"line":442},[62,3449,3450],{"class":68},"      └── ...\n",[15,3452,3453,3454,3456],{},"You'll notice that ",[59,3455,415],{}," has been added to both archives, even though none of the template folders include it.",[41,3458,3460],{"id":3459},"resources","Resources",[733,3462,3463,3470],{},[736,3464,3465,3469],{},[25,3466,3468],{"href":35,"rel":3467},[37],"GitHub repository"," for this guide",[736,3471,3472,3475],{},[25,3473,2085],{"href":2083,"rel":3474},[37]," library documentation",[3477,3478,3479],"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":57,"searchDepth":72,"depth":72,"links":3481},[3482,3483,3486,3487,3488,3489,3490,3491,3492,3493],{"id":43,"depth":72,"text":44},{"id":159,"depth":72,"text":160,"children":3484},[3485],{"id":195,"depth":78,"text":196},{"id":257,"depth":72,"text":258},{"id":724,"depth":72,"text":725},{"id":921,"depth":72,"text":922},{"id":2076,"depth":72,"text":2077},{"id":2110,"depth":72,"text":2111},{"id":2395,"depth":72,"text":2396},{"id":3372,"depth":72,"text":3373},{"id":3459,"depth":72,"text":3460},"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":6,"description":3495},{"loc":3498},"guides/mailchimp-package","lzY8UUAxQhe7vs-UhaO5duXkSXapA1lgZrmC0rSkF0k",{"id":3504,"title":3505,"body":3506,"date":6431,"description":6432,"extension":3496,"meta":6433,"navigation":296,"path":6434,"seo":6435,"sitemap":6436,"stem":6437,"__hash__":6438},"guides/guides/markdown-emails.md","How to create an HTML email newsletter from Markdown files",{"type":8,"value":3507,"toc":6410},[3508,3511,3514,3517,3524,3526,3529,3539,3544,3546,3549,3551,3558,3586,3594,3601,3625,3629,3636,3639,4458,4462,4465,4484,4487,4504,4508,4511,4521,4570,4574,4588,4591,4602,4709,4712,4751,4763,4767,4774,4890,4896,4958,4963,5018,5022,5025,5031,5036,5119,5122,5159,5162,5165,5226,5230,5241,5244,5247,5251,5266,5269,5272,5286,5300,5550,5553,5557,5564,5611,5615,5618,5625,5722,5729,5732,5803,5807,5810,5881,5895,5984,5991,6077,6081,6084,6093,6105,6114,6254,6257,6298,6304,6308,6311,6318,6321,6327,6368,6384,6386,6407],[11,3509,3505],{"id":3510},"how-to-create-an-html-email-newsletter-from-markdown-files",[15,3512,3513],{},"In this tutorial, you'll learn how to create HTML emails from Markdown files in Maizzle.",[15,3515,3516],{},"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.",[15,3518,32,3519,39],{},[25,3520,3523],{"href":3521,"rel":3522},"https://github.com/maizzle/starter-markdown",[37],"Markdown Starter",[41,3525,160],{"id":159},[15,3527,3528],{},"Scaffold a new project using the Markdown Starter:",[52,3530,3531],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,3532,3533],{"__ignoreMap":57},[62,3534,3535,3537],{"class":64,"line":65},[62,3536,175],{"class":115},[62,3538,178],{"class":68},[15,3540,181,3541,185],{},[59,3542,3543],{},"./markdown-project",[15,3545,188],{},[15,3547,3548],{},"Once it finishes installing dependencies, open the project folder in your favorite code editor.",[193,3550,196],{"id":195},[15,3552,3553,3554,3557],{},"We'll be using the ",[59,3555,3556],{},"content"," folder to store our Markdown files:",[52,3559,3561],{"className":54,"code":3560,"language":56,"meta":57,"style":57},"src\n└── content\n    └── newsletter-1.md\n    └── newsletter-2.md\n    └── ...\n",[59,3562,3563,3567,3572,3577,3582],{"__ignoreMap":57},[62,3564,3565],{"class":64,"line":65},[62,3566,213],{"class":68},[62,3568,3569],{"class":64,"line":72},[62,3570,3571],{"class":68},"└── content\n",[62,3573,3574],{"class":64,"line":78},[62,3575,3576],{"class":68},"    └── newsletter-1.md\n",[62,3578,3579],{"class":64,"line":84},[62,3580,3581],{"class":68},"    └── newsletter-2.md\n",[62,3583,3584],{"class":64,"line":90},[62,3585,251],{"class":68},[3587,3588,3589,3590,3593],"alert",{},"\nYou can remove the \n",[59,3591,3592],{},"emails","\n directory, we won't need it.\n",[15,3595,3596,3597,3600],{},"Next, create ",[59,3598,3599],{},"content/newsletter-1.md"," and add some markdown to it:",[52,3602,3606],{"className":3603,"code":3604,"filename":3605,"language":3496,"meta":57,"style":57},"language-md shiki shiki-themes tailwind-css tailwind-css","# Hello world\n\nThis is the first newsletter.\n","newsletter-1.md",[59,3607,3608,3616,3620],{"__ignoreMap":57},[62,3609,3610,3613],{"class":64,"line":65},[62,3611,3612],{"class":111},"#",[62,3614,3615],{"class":115}," Hello world\n",[62,3617,3618],{"class":64,"line":72},[62,3619,297],{"emptyLinePlaceholder":296},[62,3621,3622],{"class":64,"line":78},[62,3623,3624],{"class":68},"This is the first newsletter.\n",[193,3626,3628],{"id":3627},"layout","Layout",[15,3630,3631,3632,3635],{},"Since we just want to write Markdown and not have to deal with any tables and such, we need to update ",[59,3633,3634],{},"layouts/main.html"," to contain the entire HTML boilerplate.",[15,3637,3638],{},"Replace its contents with the following:",[52,3640,3644],{"className":3641,"code":3642,"filename":3634,"language":3643,"meta":57,"style":57},"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",[59,3645,3646,3658,3707,3716,3750,3769,3800,3830,3835,3840,3845,3850,3855,3860,3865,3870,3875,3880,3885,3890,3909,3932,3940,3948,3960,3969,3977,3999,4007,4042,4061,4080,4090,4122,4131,4139,4143,4150,4165,4179,4193,4218,4243,4265,4270,4290,4299,4320,4340,4349,4369,4381,4390,4399,4408,4417,4426,4434,4442,4450],{"__ignoreMap":57},[62,3647,3648,3652,3655],{"class":64,"line":65},[62,3649,3651],{"class":3650},"shy1k","\u003C!",[62,3653,3654],{"class":115},"doctype",[62,3656,3657],{"class":3650}," {{{ page.doctype || 'html' }}}>\n",[62,3659,3660,3662,3664,3667,3669,3671,3674,3677,3680,3683,3686,3688,3691,3693,3696,3698,3700,3703,3705],{"class":64,"line":72},[62,3661,302],{"class":111},[62,3663,56],{"class":115},[62,3665,3666],{"class":119}," lang",[62,3668,123],{"class":111},[62,3670,126],{"class":119},[62,3672,3673],{"class":68},"{{ ",[62,3675,3676],{"class":765},"page.language",[62,3678,3679],{"class":68}," || ",[62,3681,3682],{"class":119},"'",[62,3684,3685],{"class":68},"en",[62,3687,3682],{"class":119},[62,3689,3690],{"class":68}," }}",[62,3692,126],{"class":119},[62,3694,3695],{"class":119}," xmlns:v",[62,3697,123],{"class":111},[62,3699,126],{"class":119},[62,3701,3702],{"class":68},"urn:schemas-microsoft-com:vml",[62,3704,126],{"class":119},[62,3706,308],{"class":111},[62,3708,3709,3711,3714],{"class":64,"line":78},[62,3710,302],{"class":111},[62,3712,3713],{"class":115},"head",[62,3715,308],{"class":111},[62,3717,3718,3720,3723,3726,3728,3730,3732,3735,3737,3739,3742,3744,3746,3748],{"class":64,"line":84},[62,3719,112],{"class":111},[62,3721,3722],{"class":115},"meta",[62,3724,3725],{"class":119}," charset",[62,3727,123],{"class":111},[62,3729,126],{"class":119},[62,3731,3673],{"class":68},[62,3733,3734],{"class":765},"page.charset",[62,3736,3679],{"class":68},[62,3738,3682],{"class":119},[62,3740,3741],{"class":68},"utf-8",[62,3743,3682],{"class":119},[62,3745,3690],{"class":68},[62,3747,126],{"class":119},[62,3749,308],{"class":111},[62,3751,3752,3754,3756,3758,3760,3762,3765,3767],{"class":64,"line":90},[62,3753,112],{"class":111},[62,3755,3722],{"class":115},[62,3757,3095],{"class":119},[62,3759,123],{"class":111},[62,3761,126],{"class":119},[62,3763,3764],{"class":68},"x-apple-disable-message-reformatting",[62,3766,126],{"class":119},[62,3768,308],{"class":111},[62,3770,3771,3773,3775,3777,3779,3781,3784,3786,3789,3791,3793,3796,3798],{"class":64,"line":236},[62,3772,112],{"class":111},[62,3774,3722],{"class":115},[62,3776,3095],{"class":119},[62,3778,123],{"class":111},[62,3780,126],{"class":119},[62,3782,3783],{"class":68},"viewport",[62,3785,126],{"class":119},[62,3787,3788],{"class":119}," content",[62,3790,123],{"class":111},[62,3792,126],{"class":119},[62,3794,3795],{"class":68},"width=device-width, initial-scale=1",[62,3797,126],{"class":119},[62,3799,308],{"class":111},[62,3801,3802,3804,3806,3808,3810,3812,3815,3817,3819,3821,3823,3826,3828],{"class":64,"line":242},[62,3803,112],{"class":111},[62,3805,3722],{"class":115},[62,3807,3095],{"class":119},[62,3809,123],{"class":111},[62,3811,126],{"class":119},[62,3813,3814],{"class":68},"format-detection",[62,3816,126],{"class":119},[62,3818,3788],{"class":119},[62,3820,123],{"class":111},[62,3822,126],{"class":119},[62,3824,3825],{"class":68},"telephone=no, date=no, address=no, email=no, url=no",[62,3827,126],{"class":119},[62,3829,308],{"class":111},[62,3831,3832],{"class":64,"line":248},[62,3833,3834],{"class":313},"  \u003C!--[if mso]>\n",[62,3836,3837],{"class":64,"line":382},[62,3838,3839],{"class":313},"  \u003Cnoscript>\n",[62,3841,3842],{"class":64,"line":392},[62,3843,3844],{"class":313},"    \u003Cxml>\n",[62,3846,3847],{"class":64,"line":402},[62,3848,3849],{"class":313},"      \u003Co:OfficeDocumentSettings xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n",[62,3851,3852],{"class":64,"line":442},[62,3853,3854],{"class":313},"        \u003Co:PixelsPerInch>96\u003C/o:PixelsPerInch>\n",[62,3856,3857],{"class":64,"line":451},[62,3858,3859],{"class":313},"      \u003C/o:OfficeDocumentSettings>\n",[62,3861,3862],{"class":64,"line":456},[62,3863,3864],{"class":313},"    \u003C/xml>\n",[62,3866,3867],{"class":64,"line":465},[62,3868,3869],{"class":313},"  \u003C/noscript>\n",[62,3871,3872],{"class":64,"line":471},[62,3873,3874],{"class":313},"  \u003Cstyle>\n",[62,3876,3877],{"class":64,"line":480},[62,3878,3879],{"class":313},"    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif; mso-line-height-rule: exactly;}\n",[62,3881,3882],{"class":64,"line":485},[62,3883,3884],{"class":313},"  \u003C/style>\n",[62,3886,3887],{"class":64,"line":494},[62,3888,3889],{"class":313},"  \u003C![endif]-->\n",[62,3891,3892,3894,3896,3898,3900,3902,3905,3907],{"class":64,"line":500},[62,3893,112],{"class":111},[62,3895,321],{"class":115},[62,3897,324],{"class":119},[62,3899,123],{"class":111},[62,3901,126],{"class":119},[62,3903,3904],{"class":68},"page.title",[62,3906,126],{"class":119},[62,3908,308],{"class":111},[62,3910,3911,3913,3916,3918,3921,3923,3926,3928,3930],{"class":64,"line":509},[62,3912,340],{"class":111},[62,3914,3915],{"class":115},"title",[62,3917,134],{"class":111},[62,3919,3920],{"class":68},"{{{ ",[62,3922,3904],{"class":765},[62,3924,3925],{"class":68}," }}}",[62,3927,700],{"class":111},[62,3929,3915],{"class":115},[62,3931,308],{"class":111},[62,3933,3934,3936,3938],{"class":64,"line":514},[62,3935,385],{"class":111},[62,3937,321],{"class":115},[62,3939,308],{"class":111},[62,3941,3942,3944,3946],{"class":64,"line":524},[62,3943,112],{"class":111},[62,3945,3477],{"class":115},[62,3947,308],{"class":111},[62,3949,3950,3954,3957],{"class":64,"line":566},[62,3951,3953],{"class":3952},"sO3Gh","    @tailwind",[62,3955,3956],{"class":68}," utilities",[62,3958,3959],{"class":3952},";\n",[62,3961,3962,3964,3967],{"class":64,"line":575},[62,3963,3953],{"class":3952},[62,3965,3966],{"class":68}," components",[62,3968,3959],{"class":3952},[62,3970,3971,3973,3975],{"class":64,"line":580},[62,3972,385],{"class":111},[62,3974,3477],{"class":115},[62,3976,308],{"class":111},[62,3978,3979,3981,3984,3986,3988,3990,3992,3994,3997],{"class":64,"line":589},[62,3980,112],{"class":111},[62,3982,3983],{"class":115},"stack",[62,3985,3095],{"class":119},[62,3987,123],{"class":111},[62,3989,126],{"class":119},[62,3991,3713],{"class":68},[62,3993,126],{"class":119},[62,3995,3996],{"class":119}," /",[62,3998,308],{"class":111},[62,4000,4001,4003,4005],{"class":64,"line":595},[62,4002,700],{"class":111},[62,4004,3713],{"class":115},[62,4006,308],{"class":111},[62,4008,4009,4011,4014,4017,4019,4021,4024,4027,4029,4031,4034,4036,4038,4040],{"class":64,"line":604},[62,4010,302],{"class":111},[62,4012,4013],{"class":115},"body",[62,4015,4016],{"class":119}," class",[62,4018,123],{"class":111},[62,4020,126],{"class":119},[62,4022,4023],{"class":68},"m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ ",[62,4025,4026],{"class":765},"page.bodyClass",[62,4028,3679],{"class":68},[62,4030,3682],{"class":119},[62,4032,4033],{"class":68},"bg-slate-100",[62,4035,3682],{"class":119},[62,4037,3690],{"class":68},[62,4039,126],{"class":119},[62,4041,308],{"class":111},[62,4043,4044,4046,4048,4050,4052,4054,4057,4059],{"class":64,"line":609},[62,4045,112],{"class":111},[62,4047,321],{"class":115},[62,4049,324],{"class":119},[62,4051,123],{"class":111},[62,4053,126],{"class":119},[62,4055,4056],{"class":68},"page.preheader",[62,4058,126],{"class":119},[62,4060,308],{"class":111},[62,4062,4063,4065,4067,4069,4071,4073,4076,4078],{"class":64,"line":618},[62,4064,340],{"class":111},[62,4066,519],{"class":115},[62,4068,4016],{"class":119},[62,4070,123],{"class":111},[62,4072,126],{"class":119},[62,4074,4075],{"class":68},"hidden",[62,4077,126],{"class":119},[62,4079,308],{"class":111},[62,4081,4082,4085,4087],{"class":64,"line":659},[62,4083,4084],{"class":68},"      {{{ ",[62,4086,4056],{"class":765},[62,4088,4089],{"class":68}," }}}\n",[62,4091,4092,4095,4098,4101,4103,4105,4108,4110,4112,4115,4118,4120],{"class":64,"line":668},[62,4093,4094],{"class":111},"      \u003C",[62,4096,4097],{"class":115},"each",[62,4099,4100],{"class":119}," loop",[62,4102,123],{"class":111},[62,4104,126],{"class":119},[62,4106,4107],{"class":68},"item in Array.from(Array(150))",[62,4109,126],{"class":119},[62,4111,134],{"class":111},[62,4113,4114],{"class":115},"͏",[62,4116,4117],{"class":111}," \u003C/",[62,4119,4097],{"class":115},[62,4121,308],{"class":111},[62,4123,4124,4127,4129],{"class":64,"line":673},[62,4125,4126],{"class":111},"    \u003C/",[62,4128,519],{"class":115},[62,4130,308],{"class":111},[62,4132,4133,4135,4137],{"class":64,"line":682},[62,4134,385],{"class":111},[62,4136,321],{"class":115},[62,4138,308],{"class":111},[62,4140,4141],{"class":64,"line":688},[62,4142,297],{"emptyLinePlaceholder":296},[62,4144,4145,4147],{"class":64,"line":697},[62,4146,112],{"class":111},[62,4148,4149],{"class":115},"div\n",[62,4151,4152,4155,4157,4159,4162],{"class":64,"line":1552},[62,4153,4154],{"class":119},"    align",[62,4156,123],{"class":111},[62,4158,126],{"class":119},[62,4160,4161],{"class":68},"center",[62,4163,4164],{"class":119},"\"\n",[62,4166,4167,4170,4172,4174,4177],{"class":64,"line":1575},[62,4168,4169],{"class":119},"    role",[62,4171,123],{"class":111},[62,4173,126],{"class":119},[62,4175,4176],{"class":68},"article",[62,4178,4164],{"class":119},[62,4180,4181,4184,4186,4188,4191],{"class":64,"line":1589},[62,4182,4183],{"class":119},"    aria-roledescription",[62,4185,123],{"class":111},[62,4187,126],{"class":119},[62,4189,4190],{"class":68},"email",[62,4192,4164],{"class":119},[62,4194,4195,4198,4200,4202,4204,4206,4208,4210,4212,4214,4216],{"class":64,"line":1607},[62,4196,4197],{"class":119},"    lang",[62,4199,123],{"class":111},[62,4201,126],{"class":119},[62,4203,3673],{"class":68},[62,4205,3676],{"class":765},[62,4207,3679],{"class":68},[62,4209,3682],{"class":119},[62,4211,3685],{"class":68},[62,4213,3682],{"class":119},[62,4215,3690],{"class":68},[62,4217,4164],{"class":119},[62,4219,4220,4223,4225,4227,4229,4231,4233,4235,4237,4239,4241],{"class":64,"line":1632},[62,4221,4222],{"class":119},"    class",[62,4224,123],{"class":111},[62,4226,126],{"class":119},[62,4228,3673],{"class":68},[62,4230,4026],{"class":765},[62,4232,3679],{"class":68},[62,4234,3682],{"class":119},[62,4236,4033],{"class":68},[62,4238,3682],{"class":119},[62,4240,3690],{"class":68},[62,4242,4164],{"class":119},[62,4244,4245,4248,4250,4252,4254,4256,4258,4261,4263],{"class":64,"line":1638},[62,4246,4247],{"class":119},"    aria-label",[62,4249,123],{"class":111},[62,4251,126],{"class":119},[62,4253,3920],{"class":68},[62,4255,3904],{"class":765},[62,4257,3679],{"class":68},[62,4259,4260],{"class":119},"''",[62,4262,3925],{"class":68},[62,4264,4164],{"class":119},[62,4266,4267],{"class":64,"line":1671},[62,4268,4269],{"class":111},"  >\n",[62,4271,4272,4274,4277,4279,4281,4283,4286,4288],{"class":64,"line":1690},[62,4273,340],{"class":111},[62,4275,4276],{"class":115},"table",[62,4278,4016],{"class":119},[62,4280,123],{"class":111},[62,4282,126],{"class":119},[62,4284,4285],{"class":68},"font-sans",[62,4287,126],{"class":119},[62,4289,308],{"class":111},[62,4291,4292,4294,4297],{"class":64,"line":1697},[62,4293,4094],{"class":111},[62,4295,4296],{"class":115},"tr",[62,4298,308],{"class":111},[62,4300,4301,4304,4307,4309,4311,4313,4316,4318],{"class":64,"line":1702},[62,4302,4303],{"class":111},"        \u003C",[62,4305,4306],{"class":115},"td",[62,4308,4016],{"class":119},[62,4310,123],{"class":111},[62,4312,126],{"class":119},[62,4314,4315],{"class":68},"w-[600px] max-w-full bg-white rounded-xl",[62,4317,126],{"class":119},[62,4319,308],{"class":111},[62,4321,4322,4325,4327,4329,4331,4333,4336,4338],{"class":64,"line":1707},[62,4323,4324],{"class":111},"          \u003C",[62,4326,4276],{"class":115},[62,4328,4016],{"class":119},[62,4330,123],{"class":111},[62,4332,126],{"class":119},[62,4334,4335],{"class":68},"w-full",[62,4337,126],{"class":119},[62,4339,308],{"class":111},[62,4341,4342,4345,4347],{"class":64,"line":1713},[62,4343,4344],{"class":111},"            \u003C",[62,4346,4296],{"class":115},[62,4348,308],{"class":111},[62,4350,4351,4354,4356,4358,4360,4362,4365,4367],{"class":64,"line":1736},[62,4352,4353],{"class":111},"              \u003C",[62,4355,4306],{"class":115},[62,4357,4016],{"class":119},[62,4359,123],{"class":111},[62,4361,126],{"class":119},[62,4363,4364],{"class":68},"p-0 px-8 sm:px-4 text-base/6 text-slate-700",[62,4366,126],{"class":119},[62,4368,308],{"class":111},[62,4370,4371,4374,4377,4379],{"class":64,"line":1750},[62,4372,4373],{"class":111},"                \u003C",[62,4375,4376],{"class":115},"yield",[62,4378,3996],{"class":119},[62,4380,308],{"class":111},[62,4382,4383,4386,4388],{"class":64,"line":1768},[62,4384,4385],{"class":111},"              \u003C/",[62,4387,4306],{"class":115},[62,4389,308],{"class":111},[62,4391,4392,4395,4397],{"class":64,"line":1793},[62,4393,4394],{"class":111},"            \u003C/",[62,4396,4296],{"class":115},[62,4398,308],{"class":111},[62,4400,4401,4404,4406],{"class":64,"line":1808},[62,4402,4403],{"class":111},"          \u003C/",[62,4405,4276],{"class":115},[62,4407,308],{"class":111},[62,4409,4410,4413,4415],{"class":64,"line":1815},[62,4411,4412],{"class":111},"        \u003C/",[62,4414,4306],{"class":115},[62,4416,308],{"class":111},[62,4418,4419,4422,4424],{"class":64,"line":1820},[62,4420,4421],{"class":111},"      \u003C/",[62,4423,4296],{"class":115},[62,4425,308],{"class":111},[62,4427,4428,4430,4432],{"class":64,"line":1825},[62,4429,4126],{"class":111},[62,4431,4276],{"class":115},[62,4433,308],{"class":111},[62,4435,4436,4438,4440],{"class":64,"line":1831},[62,4437,385],{"class":111},[62,4439,519],{"class":115},[62,4441,308],{"class":111},[62,4443,4444,4446,4448],{"class":64,"line":1854},[62,4445,700],{"class":111},[62,4447,4013],{"class":115},[62,4449,308],{"class":111},[62,4451,4452,4454,4456],{"class":64,"line":1868},[62,4453,700],{"class":111},[62,4455,56],{"class":115},[62,4457,308],{"class":111},[193,4459,4461],{"id":4460},"dependencies","Dependencies",[15,4463,4464],{},"We'll need a couple of extra dependencies to parse the Markdown files:",[733,4466,4467,4478],{},[736,4468,4469,4472,4473,4477],{},[59,4470,4471],{},"front-matter"," to be able to use ",[25,4474,4476],{"href":4475},"/docs/templates#front-matter","Front Matter"," in our Markdown files",[736,4479,4480,4483],{},[59,4481,4482],{},"markdown-it-attrs"," to be able to add Tailwind CSS classes right in Markdown",[15,4485,4486],{},"Let's install them:",[52,4488,4490],{"className":166,"code":4489,"language":168,"meta":57,"style":57},"npm install front-matter markdown-it-attrs\n",[59,4491,4492],{"__ignoreMap":57},[62,4493,4494,4496,4498,4501],{"class":64,"line":65},[62,4495,2101],{"class":115},[62,4497,2104],{"class":68},[62,4499,4500],{"class":68}," front-matter",[62,4502,4503],{"class":68}," markdown-it-attrs\n",[193,4505,4507],{"id":4506},"configjs","config.js",[15,4509,4510],{},"Since we're not using the default setup anymore, we need to tell Maizzle where to look for 'templates' to compile.",[15,4512,4513,4514,4517,4518,4520],{},"Update ",[59,4515,4516],{},"build.templates"," to use .md files from the ",[59,4519,3556],{}," folder:",[52,4522,4526],{"className":4523,"code":4524,"filename":4507,"highlights":4525,"language":757,"meta":57,"style":57},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  build: {\n    content: ['content/**/*.md'], // [!code ++]\n  },\n}\n",[78],[59,4527,4528,4536,4544,4562,4566],{"__ignoreMap":57},[62,4529,4530,4532,4534],{"class":64,"line":65},[62,4531,784],{"class":115},[62,4533,787],{"class":115},[62,4535,791],{"class":790},[62,4537,4538,4540,4542],{"class":64,"line":72},[62,4539,796],{"class":68},[62,4541,203],{"class":790},[62,4543,791],{"class":790},[62,4545,4547,4550,4552,4555,4558,4560],{"class":4546,"line":78},[64,138,107,139],[62,4548,4549],{"class":68},"    content",[62,4551,203],{"class":790},[62,4553,4554],{"class":68}," [",[62,4556,4557],{"class":68},"'content/**/*.md'",[62,4559,997],{"class":68},[62,4561,1287],{"class":790},[62,4563,4564],{"class":64,"line":84},[62,4565,845],{"class":790},[62,4567,4568],{"class":64,"line":90},[62,4569,2028],{"class":790},[41,4571,4573],{"id":4572},"compile-markdown","Compile Markdown",[15,4575,4576,4577,4579,4580,4583,4584,4587],{},"If you run ",[59,4578,3379],{}," now, you'll notice the files output to ",[59,4581,4582],{},"build_production"," only include the raw, unparsed content of your Markdown files: they were not compiled to HTML, neither did they use our ",[59,4585,4586],{},"main.html"," layout.",[15,4589,4590],{},"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.",[15,4592,4593,4594,4601],{},"We can use the ",[25,4595,4597,4600],{"href":4596},"/docs/events#beforerender",[59,4598,4599],{},"beforeRender"," event"," for this:",[52,4603,4605],{"className":754,"code":4604,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,4606,4607,4619,4623,4631,4644,4666,4670,4677,4682,4696,4701,4705],{"__ignoreMap":57},[62,4608,4609,4611,4614,4616],{"class":64,"line":65},[62,4610,2138],{"class":765},[62,4612,4613],{"class":2141}," fm",[62,4615,2145],{"class":790},[62,4617,4618],{"class":765}," 'front-matter'\n",[62,4620,4621],{"class":64,"line":72},[62,4622,297],{"emptyLinePlaceholder":296},[62,4624,4625,4627,4629],{"class":64,"line":78},[62,4626,784],{"class":115},[62,4628,787],{"class":115},[62,4630,791],{"class":790},[62,4632,4633,4636,4638,4640,4642],{"class":64,"line":84},[62,4634,4635],{"class":947},"  beforeRender",[62,4637,1048],{"class":790},[62,4639,56],{"class":765},[62,4641,1054],{"class":790},[62,4643,791],{"class":790},[62,4645,4646,4648,4650,4653,4655,4658,4660,4662,4664],{"class":64,"line":90},[62,4647,2301],{"class":765},[62,4649,2732],{"class":790},[62,4651,4652],{"class":68}," body ",[62,4654,2748],{"class":790},[62,4656,4657],{"class":772}," =",[62,4659,4613],{"class":947},[62,4661,1048],{"class":68},[62,4663,56],{"class":765},[62,4665,1226],{"class":68},[62,4667,4668],{"class":64,"line":236},[62,4669,297],{"emptyLinePlaceholder":296},[62,4671,4672,4674],{"class":64,"line":242},[62,4673,2384],{"class":115},[62,4675,4676],{"class":68}," `\n",[62,4678,4679],{"class":64,"line":248},[62,4680,4681],{"class":68},"      \u003Cx-main>\n",[62,4683,4684,4687,4689,4691,4693],{"class":64,"line":382},[62,4685,4686],{"class":68},"        \u003Cmd>",[62,4688,2864],{"class":790},[62,4690,4013],{"class":765},[62,4692,2748],{"class":790},[62,4694,4695],{"class":68},"\u003C/md>\n",[62,4697,4698],{"class":64,"line":392},[62,4699,4700],{"class":68},"      \u003C/x-main>`\n",[62,4702,4703],{"class":64,"line":402},[62,4704,845],{"class":790},[62,4706,4707],{"class":64,"line":442},[62,4708,2028],{"class":790},[15,4710,4711],{},"Here's a step-by-step explanation of what's happening:",[4713,4714,4715,4721,4730],"ol",{},[736,4716,4717,4718,4720],{},"We're hooking into the ",[59,4719,4599],{}," event to alter the HTML before it's compiled.",[736,4722,4723,4724,4726,4727,4729],{},"We use ",[59,4725,4471],{}," to extract the Markdown content from the file into a ",[59,4728,4013],{}," variable. This ensures that we only parse Markdown content, and not the Front Matter too.",[736,4731,4732,4733,4735,4736,4739,4740,4744,4745,4748,4749,4587],{},"We're returning a string that includes the contents of the ",[59,4734,4013],{}," property wrapped in ",[59,4737,4738],{},"\u003Cmd>"," tags, so Maizzle can parse them as Markdown. See the ",[25,4741,4743],{"href":4742},"/docs/markdown","Markdown documentation"," for more info on this tag. Finally, the ",[59,4746,4747],{},"\u003Cx-main>"," tag tells Maizzle to use our ",[59,4750,4586],{},[15,4752,4753,4754,4756,4757,4759,4760,4762],{},"Run ",[59,4755,3379],{}," again and you'll see that the files in the ",[59,4758,4582],{}," folder are now compiled to HTML using our ",[59,4761,4586],{}," layout 🥳",[41,4764,4766],{"id":4765},"styling","Styling",[15,4768,4769,4770,4773],{},"Let's create a ",[59,4771,4772],{},"css/markdown.css"," file so we can add some global styles for our Markdown content:",[52,4775,4779],{"className":4776,"code":4777,"filename":4772,"language":4778,"meta":57,"style":57},"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",[59,4780,4781,4787,4810,4814,4818,4824,4842,4846,4850,4856,4873,4886],{"__ignoreMap":57},[62,4782,4783,4785],{"class":64,"line":65},[62,4784,11],{"class":115},[62,4786,791],{"class":3650},[62,4788,4789,4792,4795,4798,4801,4804,4807],{"class":64,"line":72},[62,4790,4791],{"class":3952},"  @",[62,4793,4794],{"class":2141},"apply",[62,4796,4797],{"class":2141}," text-",[62,4799,4800],{"class":3952},"3",[62,4802,4803],{"class":2141},"xl",[62,4805,4806],{"class":2141}," leading-",[62,4808,4809],{"class":3952},"9;\n",[62,4811,4812],{"class":64,"line":78},[62,4813,2028],{"class":3650},[62,4815,4816],{"class":64,"line":84},[62,4817,297],{"emptyLinePlaceholder":296},[62,4819,4820,4822],{"class":64,"line":90},[62,4821,15],{"class":115},[62,4823,791],{"class":3650},[62,4825,4826,4828,4830,4833,4836,4839],{"class":64,"line":236},[62,4827,4791],{"class":3952},[62,4829,4794],{"class":2141},[62,4831,4832],{"class":2141}," m-",[62,4834,4835],{"class":3952},"0 ",[62,4837,4838],{"class":2141},"mb-",[62,4840,4841],{"class":3952},"8;\n",[62,4843,4844],{"class":64,"line":242},[62,4845,2028],{"class":3650},[62,4847,4848],{"class":64,"line":248},[62,4849,297],{"emptyLinePlaceholder":296},[62,4851,4852,4854],{"class":64,"line":382},[62,4853,116],{"class":115},[62,4855,791],{"class":3650},[62,4857,4858,4860,4862,4865,4868,4871],{"class":64,"line":392},[62,4859,4791],{"class":3952},[62,4861,4794],{"class":2141},[62,4863,4864],{"class":2141}," max-w-full",[62,4866,4867],{"class":2141}," leading-full",[62,4869,4870],{"class":2141}," align-middle",[62,4872,3959],{"class":3952},[62,4874,4875,4878,4881,4884],{"class":64,"line":402},[62,4876,4877],{"class":2141},"  border",[62,4879,4880],{"class":3952},": ",[62,4882,4883],{"class":68},"0",[62,4885,3959],{"class":3952},[62,4887,4888],{"class":64,"line":442},[62,4889,2028],{"class":3650},[15,4891,4892,4893,4895],{},"Make sure to import this file in the ",[59,4894,2060],{}," tag:",[52,4897,4899],{"className":54,"code":4898,"filename":3634,"language":56,"meta":57,"style":57},"\u003Cstyle>\n  @import \"css/markdown.css\";\n  @import 'tailwindcss/components';\n  @import 'tailwindcss/utilities';\n\u003C/style>\n",[59,4900,4901,4909,4923,4937,4950],{"__ignoreMap":57},[62,4902,4903,4905,4907],{"class":64,"line":65},[62,4904,302],{"class":111},[62,4906,3477],{"class":115},[62,4908,308],{"class":111},[62,4910,4911,4914,4917,4919,4921],{"class":64,"line":72},[62,4912,4913],{"class":3952},"  @import",[62,4915,4916],{"class":119}," \"",[62,4918,4772],{"class":68},[62,4920,126],{"class":119},[62,4922,3959],{"class":3952},[62,4924,4925,4927,4930,4933,4935],{"class":64,"line":78},[62,4926,4913],{"class":3952},[62,4928,4929],{"class":119}," '",[62,4931,4932],{"class":68},"tailwindcss/components",[62,4934,3682],{"class":119},[62,4936,3959],{"class":3952},[62,4938,4939,4941,4943,4946,4948],{"class":64,"line":84},[62,4940,4913],{"class":3952},[62,4942,4929],{"class":119},[62,4944,4945],{"class":68},"tailwindcss/utilities",[62,4947,3682],{"class":119},[62,4949,3959],{"class":3952},[62,4951,4952,4954,4956],{"class":64,"line":90},[62,4953,700],{"class":111},[62,4955,3477],{"class":115},[62,4957,308],{"class":111},[15,4959,4753,4960,4962],{},[59,4961,3379],{}," again and you'll see that the styles are now applied:",[52,4964,4969],{"className":99,"code":4965,"filename":4966,"highlights":4967,"language":56,"meta":4968,"style":57},"  \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",[72],"no-copy",[59,4970,4971,4989],{"__ignoreMap":57},[62,4972,4974,4976,4978,4980,4983,4985,4987],{"class":4973,"line":65},[64,107,108],[62,4975,112],{"class":111},[62,4977,11],{"class":115},[62,4979,134],{"class":111},[62,4981,4982],{"class":68},"Hello world",[62,4984,700],{"class":111},[62,4986,11],{"class":115},[62,4988,134],{"class":111},[62,4990,4992,4994,4996,4999,5001,5003,5006,5008,5010,5012,5014,5016],{"class":4991,"line":72},[64,138,107,139],[62,4993,112],{"class":111},[62,4995,11],{"class":115},[62,4997,4998],{"class":119}," style",[62,5000,123],{"class":111},[62,5002,126],{"class":119},[62,5004,5005],{"class":68},"font-size: 30px; line-height: 36px;",[62,5007,126],{"class":119},[62,5009,134],{"class":111},[62,5011,4982],{"class":68},[62,5013,700],{"class":111},[62,5015,11],{"class":115},[62,5017,134],{"class":111},[193,5019,5021],{"id":5020},"tailwind-css","Tailwind CSS",[15,5023,5024],{},"We can also use Tailwind CSS classes directly in our Markdown files.",[15,5026,5027,5028,5030],{},"To do this, we'll use the ",[59,5029,4482],{}," plugin, which allows us to add attributes like class names to elements right when writing Markdown.",[15,5032,4513,5033,5035],{},[59,5034,4507],{}," to have Maizzle use the plugin:",[52,5037,5040],{"className":4523,"code":5038,"filename":4507,"highlights":5039,"language":757,"meta":57,"style":57},"import mdAttrs from 'markdown-it-attrs'\n\nexport default {\n  markdown: {\n    plugins: [\n      {\n        plugin: mdAttrs, // [!code ++]\n      }\n    ]\n  },\n}\n",[242],[59,5041,5042,5054,5058,5066,5075,5085,5090,5102,5106,5111,5115],{"__ignoreMap":57},[62,5043,5044,5046,5049,5051],{"class":64,"line":65},[62,5045,2138],{"class":765},[62,5047,5048],{"class":2141}," mdAttrs",[62,5050,2145],{"class":790},[62,5052,5053],{"class":765}," 'markdown-it-attrs'\n",[62,5055,5056],{"class":64,"line":72},[62,5057,297],{"emptyLinePlaceholder":296},[62,5059,5060,5062,5064],{"class":64,"line":78},[62,5061,784],{"class":115},[62,5063,787],{"class":115},[62,5065,791],{"class":790},[62,5067,5068,5071,5073],{"class":64,"line":84},[62,5069,5070],{"class":68},"  markdown",[62,5072,203],{"class":790},[62,5074,791],{"class":790},[62,5076,5077,5080,5082],{"class":64,"line":90},[62,5078,5079],{"class":68},"    plugins",[62,5081,203],{"class":790},[62,5083,5084],{"class":68}," [\n",[62,5086,5087],{"class":64,"line":236},[62,5088,5089],{"class":790},"      {\n",[62,5091,5093,5096,5098,5100],{"class":5092,"line":242},[64,138,107,139],[62,5094,5095],{"class":68},"        plugin",[62,5097,203],{"class":790},[62,5099,5048],{"class":765},[62,5101,1287],{"class":790},[62,5103,5104],{"class":64,"line":248},[62,5105,1996],{"class":790},[62,5107,5108],{"class":64,"line":382},[62,5109,5110],{"class":68},"    ]\n",[62,5112,5113],{"class":64,"line":392},[62,5114,845],{"class":790},[62,5116,5117],{"class":64,"line":402},[62,5118,2028],{"class":790},[15,5120,5121],{},"You can now add Tailwind CSS classes to your Markdown elements by adding them inside curly braces after the content:",[52,5123,5125],{"className":3603,"code":5124,"filename":3599,"language":3496,"meta":57,"style":57},"---\ntitle: \"Edition #1\"\n---\n\n# Hello world {.m-0 .mb-10 .text-slate-900}\n",[59,5126,5127,5131,5144,5148,5152],{"__ignoreMap":57},[62,5128,5129],{"class":64,"line":65},[62,5130,282],{"class":111},[62,5132,5133,5135,5137,5139,5142],{"class":64,"line":72},[62,5134,3915],{"class":115},[62,5136,203],{"class":111},[62,5138,4916],{"class":119},[62,5140,5141],{"class":68},"Edition #1",[62,5143,4164],{"class":119},[62,5145,5146],{"class":64,"line":78},[62,5147,282],{"class":111},[62,5149,5150],{"class":64,"line":84},[62,5151,297],{"emptyLinePlaceholder":296},[62,5153,5154,5156],{"class":64,"line":90},[62,5155,3612],{"class":111},[62,5157,5158],{"class":115}," Hello world {.m-0 .mb-10 .text-slate-900}\n",[15,5160,5161],{},"Notice how classes include the leading dot, and are separated by spaces.",[15,5163,5164],{},"Result:",[52,5166,5169],{"className":99,"code":5167,"filename":4966,"highlights":5168,"language":56,"meta":4968,"style":57},"  \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",[72],[59,5170,5171,5198],{"__ignoreMap":57},[62,5172,5174,5176,5178,5180,5182,5184,5186,5188,5190,5192,5194,5196],{"class":5173,"line":65},[64,107,108],[62,5175,112],{"class":111},[62,5177,11],{"class":115},[62,5179,4998],{"class":119},[62,5181,123],{"class":111},[62,5183,126],{"class":119},[62,5185,5005],{"class":68},[62,5187,126],{"class":119},[62,5189,134],{"class":111},[62,5191,4982],{"class":68},[62,5193,700],{"class":111},[62,5195,11],{"class":115},[62,5197,134],{"class":111},[62,5199,5201,5203,5205,5207,5209,5211,5214,5216,5218,5220,5222,5224],{"class":5200,"line":72},[64,138,107,139],[62,5202,112],{"class":111},[62,5204,11],{"class":115},[62,5206,4998],{"class":119},[62,5208,123],{"class":111},[62,5210,126],{"class":119},[62,5212,5213],{"class":68},"font-size: 30px; line-height: 36px; margin: 0 0 40px; color: #0f172a",[62,5215,126],{"class":119},[62,5217,134],{"class":111},[62,5219,4982],{"class":68},[62,5221,700],{"class":111},[62,5223,11],{"class":115},[62,5225,134],{"class":111},[193,5227,5229],{"id":5228},"tailwindcsstypography","@tailwindcss/typography",[15,5231,5232,5233,5237,5238,39],{},"Although it's the obvious choice for styling Markdown content with Tailwind, we don't recommend using ",[25,5234,5229],{"href":5235,"rel":5236},"https://tailwindcss.com/docs/typography-plugin",[37]," for Markdown ",[5239,5240,3592],"em",{},[15,5242,5243],{},"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.",[15,5245,5246],{},"Feel free to experiment with it, but consider yourself warned.",[41,5248,5250],{"id":5249},"syntax-highlighting","Syntax highlighting",[15,5252,5253,5254,5259,5260,5265],{},"You can use syntax highlighters like ",[25,5255,5258],{"href":5256,"rel":5257},"https://shiki.matsu.io/",[37],"Shiki"," or ",[25,5261,5264],{"href":5262,"rel":5263},"https://prismjs.com/",[37],"Prism"," to add syntax highlighting to fenced code blocks in your markdown.",[15,5267,5268],{},"For example, here's how you'd use Shiki.",[15,5270,5271],{},"First, install the library:",[52,5273,5275],{"className":166,"code":5274,"language":168,"meta":57,"style":57},"npm install shiki\n",[59,5276,5277],{"__ignoreMap":57},[62,5278,5279,5281,5283],{"class":64,"line":65},[62,5280,2101],{"class":115},[62,5282,2104],{"class":68},[62,5284,5285],{"class":68}," shiki\n",[15,5287,5288,5289,5291,5292,5295,5296,5299],{},"Next, define a custom ",[59,5290,138],{}," method for ",[59,5293,5294],{},"markdown-it",". Add it in the ",[59,5297,5298],{},"beforeCreate"," event so that the highlighter is retrieved once, before templates are compiled:",[52,5301,5303],{"className":754,"code":5302,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,5304,5305,5321,5325,5333,5349,5367,5383,5399,5405,5409,5432,5441,5450,5471,5486,5523,5527,5532,5536,5542,5546],{"__ignoreMap":57},[62,5306,5307,5309,5311,5314,5316,5318],{"class":64,"line":65},[62,5308,2138],{"class":765},[62,5310,2732],{"class":790},[62,5312,5313],{"class":2141}," createHighlighter",[62,5315,3103],{"class":790},[62,5317,2145],{"class":790},[62,5319,5320],{"class":765}," 'shiki'\n",[62,5322,5323],{"class":64,"line":72},[62,5324,297],{"emptyLinePlaceholder":296},[62,5326,5327,5329,5331],{"class":64,"line":78},[62,5328,784],{"class":115},[62,5330,787],{"class":115},[62,5332,791],{"class":790},[62,5334,5335,5338,5341,5343,5345,5347],{"class":64,"line":84},[62,5336,5337],{"class":765},"  async",[62,5339,5340],{"class":947}," beforeCreate",[62,5342,1048],{"class":790},[62,5344,2354],{"class":765},[62,5346,1054],{"class":790},[62,5348,791],{"class":790},[62,5350,5351,5353,5356,5358,5361,5363,5365],{"class":64,"line":90},[62,5352,2301],{"class":765},[62,5354,5355],{"class":68}," highlighter ",[62,5357,123],{"class":772},[62,5359,5360],{"class":115}," await",[62,5362,5313],{"class":947},[62,5364,1048],{"class":68},[62,5366,1243],{"class":790},[62,5368,5369,5372,5374,5376,5379,5381],{"class":64,"line":236},[62,5370,5371],{"class":68},"      themes",[62,5373,203],{"class":790},[62,5375,4554],{"class":68},[62,5377,5378],{"class":68},"'nord'",[62,5380,997],{"class":68},[62,5382,814],{"class":790},[62,5384,5385,5388,5390,5392,5395,5397],{"class":64,"line":242},[62,5386,5387],{"class":68},"      langs",[62,5389,203],{"class":790},[62,5391,4554],{"class":68},[62,5393,5394],{"class":68},"'html'",[62,5396,997],{"class":68},[62,5398,814],{"class":790},[62,5400,5401,5403],{"class":64,"line":248},[62,5402,1314],{"class":790},[62,5404,1226],{"class":68},[62,5406,5407],{"class":64,"line":382},[62,5408,297],{"emptyLinePlaceholder":296},[62,5410,5411,5414,5416,5419,5421,5424,5426,5428,5430],{"class":64,"line":392},[62,5412,5413],{"class":765},"    config",[62,5415,4657],{"class":772},[62,5417,5418],{"class":765}," Object",[62,5420,39],{"class":790},[62,5422,5423],{"class":947},"assign",[62,5425,1048],{"class":68},[62,5427,2354],{"class":765},[62,5429,1287],{"class":790},[62,5431,791],{"class":790},[62,5433,5434,5437,5439],{"class":64,"line":402},[62,5435,5436],{"class":68},"      markdown",[62,5438,203],{"class":790},[62,5440,791],{"class":790},[62,5442,5443,5446,5448],{"class":64,"line":442},[62,5444,5445],{"class":68},"        markdownit",[62,5447,203],{"class":790},[62,5449,791],{"class":790},[62,5451,5452,5455,5457,5459,5461,5463,5465,5467,5469],{"class":64,"line":451},[62,5453,5454],{"class":947},"          highlight",[62,5456,203],{"class":790},[62,5458,1234],{"class":790},[62,5460,59],{"class":765},[62,5462,1287],{"class":790},[62,5464,3666],{"class":765},[62,5466,1054],{"class":790},[62,5468,1260],{"class":765},[62,5470,791],{"class":790},[62,5472,5473,5476,5478,5480,5483],{"class":64,"line":456},[62,5474,5475],{"class":765},"            lang",[62,5477,4657],{"class":772},[62,5479,3666],{"class":765},[62,5481,5482],{"class":115}," ||",[62,5484,5485],{"class":68}," 'html'\n",[62,5487,5488,5491,5494,5496,5499,5501,5503,5505,5507,5509,5511,5514,5516,5519,5521],{"class":64,"line":465},[62,5489,5490],{"class":115},"            return",[62,5492,5493],{"class":765}," highlighter",[62,5495,39],{"class":790},[62,5497,5498],{"class":947},"codeToHtml",[62,5500,1048],{"class":68},[62,5502,59],{"class":765},[62,5504,1287],{"class":790},[62,5506,2732],{"class":790},[62,5508,3666],{"class":765},[62,5510,1287],{"class":790},[62,5512,5513],{"class":68}," theme",[62,5515,203],{"class":790},[62,5517,5518],{"class":68}," 'nord'",[62,5520,3103],{"class":790},[62,5522,1226],{"class":68},[62,5524,5525],{"class":64,"line":471},[62,5526,2941],{"class":790},[62,5528,5529],{"class":64,"line":480},[62,5530,5531],{"class":790},"        }\n",[62,5533,5534],{"class":64,"line":485},[62,5535,1996],{"class":790},[62,5537,5538,5540],{"class":64,"line":494},[62,5539,1314],{"class":790},[62,5541,1226],{"class":68},[62,5543,5544],{"class":64,"line":500},[62,5545,845],{"class":790},[62,5547,5548],{"class":64,"line":509},[62,5549,2028],{"class":790},[15,5551,5552],{},"Now all your markdown code blocks will be highlighted with the Nord theme.",[41,5554,5556],{"id":5555},"expressions","Expressions",[15,5558,5559,5560,5563],{},"You can use ",[25,5561,5555],{"href":5562},"/docs/templates#expressions"," in Markdown files just as you would in any Maizzle template:",[52,5565,5567],{"className":3641,"code":5566,"filename":3599,"language":3643,"meta":57,"style":57},"---\ntitle: \"Edition #1\"\n---\n\n# {{ page.title }}\n\nThis is the first newsletter.\n",[59,5568,5569,5573,5585,5589,5593,5603,5607],{"__ignoreMap":57},[62,5570,5571],{"class":64,"line":65},[62,5572,282],{"class":68},[62,5574,5575,5577,5579,5581,5583],{"class":64,"line":72},[62,5576,3915],{"class":115},[62,5578,203],{"class":111},[62,5580,4916],{"class":119},[62,5582,5141],{"class":68},[62,5584,4164],{"class":119},[62,5586,5587],{"class":64,"line":78},[62,5588,282],{"class":68},[62,5590,5591],{"class":64,"line":84},[62,5592,297],{"emptyLinePlaceholder":296},[62,5594,5595,5598,5600],{"class":64,"line":90},[62,5596,5597],{"class":68},"# {{ ",[62,5599,3904],{"class":765},[62,5601,5602],{"class":68}," }}\n",[62,5604,5605],{"class":64,"line":236},[62,5606,297],{"emptyLinePlaceholder":296},[62,5608,5609],{"class":64,"line":242},[62,5610,3624],{"class":68},[41,5612,5614],{"id":5613},"components","Components",[15,5616,5617],{},"You can also import Maizzle components in your Markdown files.",[15,5619,5620,5621,5624],{},"For example, let's create an ",[59,5622,5623],{},"\u003Cx-alert>"," component:",[52,5626,5629],{"className":54,"code":5627,"filename":5628,"language":56,"meta":57,"style":57},"\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",[59,5630,5631,5650,5658,5665,5670,5684,5689,5698,5706,5714],{"__ignoreMap":57},[62,5632,5633,5635,5637,5639,5641,5643,5646,5648],{"class":64,"line":65},[62,5634,302],{"class":111},[62,5636,4276],{"class":115},[62,5638,4016],{"class":119},[62,5640,123],{"class":111},[62,5642,126],{"class":119},[62,5644,5645],{"class":68},"w-full mb-8",[62,5647,126],{"class":119},[62,5649,308],{"class":111},[62,5651,5652,5654,5656],{"class":64,"line":72},[62,5653,112],{"class":111},[62,5655,4296],{"class":115},[62,5657,308],{"class":111},[62,5659,5660,5662],{"class":64,"line":78},[62,5661,340],{"class":111},[62,5663,5664],{"class":115},"td\n",[62,5666,5667],{"class":64,"line":84},[62,5668,5669],{"class":119},"      attributes\n",[62,5671,5672,5675,5677,5679,5682],{"class":64,"line":90},[62,5673,5674],{"class":119},"      class",[62,5676,123],{"class":111},[62,5678,126],{"class":119},[62,5680,5681],{"class":68},"py-2 px-4 bg-blue-100 text-blue-600 rounded",[62,5683,4164],{"class":119},[62,5685,5686],{"class":64,"line":236},[62,5687,5688],{"class":111},"    >\n",[62,5690,5691,5693,5695],{"class":64,"line":242},[62,5692,4094],{"class":111},[62,5694,4376],{"class":115},[62,5696,5697],{"class":111}," />\n",[62,5699,5700,5702,5704],{"class":64,"line":248},[62,5701,4126],{"class":111},[62,5703,4306],{"class":115},[62,5705,308],{"class":111},[62,5707,5708,5710,5712],{"class":64,"line":382},[62,5709,385],{"class":111},[62,5711,4296],{"class":115},[62,5713,308],{"class":111},[62,5715,5716,5718,5720],{"class":64,"line":392},[62,5717,700],{"class":111},[62,5719,4276],{"class":115},[62,5721,308],{"class":111},[15,5723,5724,5725,5728],{},"Notice the ",[59,5726,5727],{},"attributes"," attribute - this indicates that any attributes passed to the component should be added to this element, instead of the root element.",[15,5730,5731],{},"We can use it like this:",[52,5733,5735],{"className":3641,"code":5734,"filename":3599,"language":3643,"meta":57,"style":57},"---\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",[59,5736,5737,5741,5753,5757,5761,5769,5773,5777,5781,5790,5795],{"__ignoreMap":57},[62,5738,5739],{"class":64,"line":65},[62,5740,282],{"class":68},[62,5742,5743,5745,5747,5749,5751],{"class":64,"line":72},[62,5744,3915],{"class":115},[62,5746,203],{"class":111},[62,5748,4916],{"class":119},[62,5750,5141],{"class":68},[62,5752,4164],{"class":119},[62,5754,5755],{"class":64,"line":78},[62,5756,282],{"class":68},[62,5758,5759],{"class":64,"line":84},[62,5760,297],{"emptyLinePlaceholder":296},[62,5762,5763,5765,5767],{"class":64,"line":90},[62,5764,5597],{"class":68},[62,5766,3904],{"class":765},[62,5768,5602],{"class":68},[62,5770,5771],{"class":64,"line":236},[62,5772,297],{"emptyLinePlaceholder":296},[62,5774,5775],{"class":64,"line":242},[62,5776,3624],{"class":68},[62,5778,5779],{"class":64,"line":248},[62,5780,297],{"emptyLinePlaceholder":296},[62,5782,5783,5785,5788],{"class":64,"line":382},[62,5784,302],{"class":111},[62,5786,5787],{"class":115},"x-alert",[62,5789,308],{"class":111},[62,5791,5792],{"class":64,"line":392},[62,5793,5794],{"class":68},"  Notice: this is an alert.\n",[62,5796,5797,5799,5801],{"class":64,"line":402},[62,5798,700],{"class":111},[62,5800,5787],{"class":115},[62,5802,308],{"class":111},[193,5804,5806],{"id":5805},"markdown-in-components","Markdown in components",[15,5808,5809],{},"To use Markdown inside a component, add an empty line before and after the content that you pass inside:",[52,5811,5813],{"className":3641,"code":5812,"filename":3599,"language":3643,"meta":57,"style":57},"---\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",[59,5814,5815,5819,5831,5835,5839,5847,5851,5860,5864,5869,5873],{"__ignoreMap":57},[62,5816,5817],{"class":64,"line":65},[62,5818,282],{"class":68},[62,5820,5821,5823,5825,5827,5829],{"class":64,"line":72},[62,5822,3915],{"class":115},[62,5824,203],{"class":111},[62,5826,4916],{"class":119},[62,5828,5141],{"class":68},[62,5830,4164],{"class":119},[62,5832,5833],{"class":64,"line":78},[62,5834,282],{"class":68},[62,5836,5837],{"class":64,"line":84},[62,5838,297],{"emptyLinePlaceholder":296},[62,5840,5841,5843,5845],{"class":64,"line":90},[62,5842,302],{"class":111},[62,5844,5787],{"class":115},[62,5846,308],{"class":111},[62,5848,5849],{"class":64,"line":236},[62,5850,297],{"emptyLinePlaceholder":296},[62,5852,5853,5856,5858],{"class":64,"line":242},[62,5854,5855],{"class":68},"  # {{ ",[62,5857,3904],{"class":765},[62,5859,5602],{"class":68},[62,5861,5862],{"class":64,"line":248},[62,5863,297],{"emptyLinePlaceholder":296},[62,5865,5866],{"class":64,"line":382},[62,5867,5868],{"class":68},"  This is the first newsletter.\n",[62,5870,5871],{"class":64,"line":392},[62,5872,297],{"emptyLinePlaceholder":296},[62,5874,5875,5877,5879],{"class":64,"line":402},[62,5876,700],{"class":111},[62,5878,5787],{"class":115},[62,5880,308],{"class":111},[15,5882,5883,5884,5886,5887,5890,5891,5894],{},"To prevent an issue with code indentation in ",[59,5885,5294],{}," that would result in ",[59,5888,5889],{},"\u003Cpre>"," tags being added to the rendered HTML, simply don't indent the closing tags after ",[59,5892,5893],{},"\u003Cyield />",". A bit of a workaround, but it works:",[52,5896,5898],{"className":54,"code":5897,"filename":5628,"language":56,"meta":57,"style":57},"\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",[59,5899,5900,5918,5926,5932,5936,5948,5952,5960,5968,5976],{"__ignoreMap":57},[62,5901,5902,5904,5906,5908,5910,5912,5914,5916],{"class":64,"line":65},[62,5903,302],{"class":111},[62,5905,4276],{"class":115},[62,5907,4016],{"class":119},[62,5909,123],{"class":111},[62,5911,126],{"class":119},[62,5913,5645],{"class":68},[62,5915,126],{"class":119},[62,5917,308],{"class":111},[62,5919,5920,5922,5924],{"class":64,"line":72},[62,5921,112],{"class":111},[62,5923,4296],{"class":115},[62,5925,308],{"class":111},[62,5927,5928,5930],{"class":64,"line":78},[62,5929,340],{"class":111},[62,5931,5664],{"class":115},[62,5933,5934],{"class":64,"line":84},[62,5935,5669],{"class":119},[62,5937,5938,5940,5942,5944,5946],{"class":64,"line":90},[62,5939,5674],{"class":119},[62,5941,123],{"class":111},[62,5943,126],{"class":119},[62,5945,5681],{"class":68},[62,5947,4164],{"class":119},[62,5949,5950],{"class":64,"line":236},[62,5951,5688],{"class":111},[62,5953,5954,5956,5958],{"class":64,"line":242},[62,5955,4094],{"class":111},[62,5957,4376],{"class":115},[62,5959,5697],{"class":111},[62,5961,5962,5964,5966],{"class":64,"line":248},[62,5963,700],{"class":111},[62,5965,4306],{"class":115},[62,5967,308],{"class":111},[62,5969,5970,5972,5974],{"class":64,"line":382},[62,5971,700],{"class":111},[62,5973,4296],{"class":115},[62,5975,308],{"class":111},[62,5977,5978,5980,5982],{"class":64,"line":392},[62,5979,700],{"class":111},[62,5981,4276],{"class":115},[62,5983,308],{"class":111},[15,5985,5986,5987,5990],{},"Alternatively, you may use the ",[59,5988,5989],{},"prettify"," transformer to remove the indentation:",[52,5992,5994],{"className":754,"code":5993,"filename":4507,"language":757,"meta":57,"style":57},"import { prettify } from '@maizzle/framework'\n\nexport default {\n  afterRender(html) {\n    return prettify(html, {\n      indent_size: 0,\n    })\n  }\n}\n",[59,5995,5996,6012,6016,6024,6037,6051,6063,6069,6073],{"__ignoreMap":57},[62,5997,5998,6000,6002,6005,6007,6009],{"class":64,"line":65},[62,5999,2138],{"class":765},[62,6001,2732],{"class":790},[62,6003,6004],{"class":2141}," prettify",[62,6006,3103],{"class":790},[62,6008,2145],{"class":790},[62,6010,6011],{"class":765}," '@maizzle/framework'\n",[62,6013,6014],{"class":64,"line":72},[62,6015,297],{"emptyLinePlaceholder":296},[62,6017,6018,6020,6022],{"class":64,"line":78},[62,6019,784],{"class":115},[62,6021,787],{"class":115},[62,6023,791],{"class":790},[62,6025,6026,6029,6031,6033,6035],{"class":64,"line":84},[62,6027,6028],{"class":947},"  afterRender",[62,6030,1048],{"class":790},[62,6032,56],{"class":765},[62,6034,1054],{"class":790},[62,6036,791],{"class":790},[62,6038,6039,6041,6043,6045,6047,6049],{"class":64,"line":90},[62,6040,2384],{"class":115},[62,6042,6004],{"class":947},[62,6044,1048],{"class":68},[62,6046,56],{"class":765},[62,6048,1287],{"class":790},[62,6050,791],{"class":790},[62,6052,6053,6056,6058,6061],{"class":64,"line":236},[62,6054,6055],{"class":68},"      indent_size",[62,6057,203],{"class":790},[62,6059,6060],{"class":68}," 0",[62,6062,814],{"class":790},[62,6064,6065,6067],{"class":64,"line":242},[62,6066,1314],{"class":790},[62,6068,1226],{"class":68},[62,6070,6071],{"class":64,"line":248},[62,6072,1321],{"class":790},[62,6074,6075],{"class":64,"line":382},[62,6076,2028],{"class":790},[41,6078,6080],{"id":6079},"custom-layouts","Custom layouts",[15,6082,6083],{},"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.",[15,6085,6086,6087,6090,6091,39],{},"Go ahead and create ",[59,6088,6089],{},"layouts/secondary.html"," based on ",[59,6092,4586],{},[15,6094,6095,6096,6098,6099,6101,6102,39],{},"For the purpose of this tutorial, we'll just change the body background color to differentiate it from the ",[59,6097,4586],{}," layout: replace both occurrences of ",[59,6100,4033],{}," with ",[59,6103,6104],{},"bg-indigo-200",[15,6106,6107,6108,6110,6111,6113],{},"Next, update the ",[59,6109,4599],{}," event in ",[59,6112,4507],{}," to use the layout name from Front Matter:",[52,6115,6117],{"className":754,"code":6116,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,6118,6119,6129,6133,6141,6153,6177,6197,6201,6207,6220,6232,6246,6250],{"__ignoreMap":57},[62,6120,6121,6123,6125,6127],{"class":64,"line":65},[62,6122,2138],{"class":765},[62,6124,4613],{"class":2141},[62,6126,2145],{"class":790},[62,6128,4618],{"class":765},[62,6130,6131],{"class":64,"line":72},[62,6132,297],{"emptyLinePlaceholder":296},[62,6134,6135,6137,6139],{"class":64,"line":78},[62,6136,784],{"class":115},[62,6138,787],{"class":115},[62,6140,791],{"class":790},[62,6142,6143,6145,6147,6149,6151],{"class":64,"line":84},[62,6144,4635],{"class":947},[62,6146,1048],{"class":790},[62,6148,56],{"class":765},[62,6150,1054],{"class":790},[62,6152,791],{"class":790},[62,6154,6155,6157,6159,6161,6163,6165,6167,6169,6171,6173,6175],{"class":64,"line":90},[62,6156,2301],{"class":765},[62,6158,2732],{"class":790},[62,6160,2039],{"class":68},[62,6162,1287],{"class":790},[62,6164,4652],{"class":68},[62,6166,2748],{"class":790},[62,6168,4657],{"class":772},[62,6170,4613],{"class":947},[62,6172,1048],{"class":68},[62,6174,56],{"class":765},[62,6176,1226],{"class":68},[62,6178,6179,6181,6184,6186,6188,6190,6192,6194],{"class":64,"line":236},[62,6180,2301],{"class":765},[62,6182,6183],{"class":68}," layout ",[62,6185,123],{"class":772},[62,6187,2039],{"class":765},[62,6189,39],{"class":790},[62,6191,3627],{"class":765},[62,6193,5482],{"class":115},[62,6195,6196],{"class":68}," 'main'\n",[62,6198,6199],{"class":64,"line":242},[62,6200,297],{"emptyLinePlaceholder":296},[62,6202,6203,6205],{"class":64,"line":248},[62,6204,2384],{"class":115},[62,6206,4676],{"class":68},[62,6208,6209,6212,6214,6216,6218],{"class":64,"line":382},[62,6210,6211],{"class":68},"      \u003Cx-",[62,6213,2864],{"class":790},[62,6215,3627],{"class":765},[62,6217,2748],{"class":790},[62,6219,308],{"class":68},[62,6221,6222,6224,6226,6228,6230],{"class":64,"line":392},[62,6223,4686],{"class":68},[62,6225,2864],{"class":790},[62,6227,4013],{"class":765},[62,6229,2748],{"class":790},[62,6231,4695],{"class":68},[62,6233,6234,6237,6239,6241,6243],{"class":64,"line":402},[62,6235,6236],{"class":68},"      \u003C/x-",[62,6238,2864],{"class":790},[62,6240,3627],{"class":765},[62,6242,2748],{"class":790},[62,6244,6245],{"class":68},">`\n",[62,6247,6248],{"class":64,"line":442},[62,6249,1321],{"class":790},[62,6251,6252],{"class":64,"line":451},[62,6253,2028],{"class":790},[15,6255,6256],{},"You can now specify a custom layout for each Markdown file, via Front Matter:",[52,6258,6260],{"className":3603,"code":6259,"filename":3599,"language":3496,"meta":57,"style":57},"---\nlayout: secondary\n---\n\n# Hello world\n\nWelcome to our first newsletter.\n",[59,6261,6262,6266,6275,6279,6283,6289,6293],{"__ignoreMap":57},[62,6263,6264],{"class":64,"line":65},[62,6265,282],{"class":111},[62,6267,6268,6270,6272],{"class":64,"line":72},[62,6269,3627],{"class":115},[62,6271,203],{"class":111},[62,6273,6274],{"class":68}," secondary\n",[62,6276,6277],{"class":64,"line":78},[62,6278,282],{"class":111},[62,6280,6281],{"class":64,"line":84},[62,6282,297],{"emptyLinePlaceholder":296},[62,6284,6285,6287],{"class":64,"line":90},[62,6286,3612],{"class":111},[62,6288,3615],{"class":115},[62,6290,6291],{"class":64,"line":236},[62,6292,297],{"emptyLinePlaceholder":296},[62,6294,6295],{"class":64,"line":242},[62,6296,6297],{"class":68},"Welcome to our first newsletter.\n",[15,6299,6300,6301,6303],{},"You'll notice that the compiled HTML file at ",[59,6302,4966],{}," now has an indigo background color, which means it's using our custom layout.",[41,6305,6307],{"id":6306},"outlook-note","Outlook note",[15,6309,6310],{},"Your markdown may include retina-sized images that will very likely be larger in natural size than the 600px width of the layout.",[15,6312,6313,6314,6317],{},"By default, compiling Markdown to HTML will not add a ",[59,6315,6316],{},"width"," attribute to images.",[15,6319,6320],{},"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.",[15,6322,6323,6324,6326],{},"To fix this, we can use ",[59,6325,4482],{}," to manually add our image width in Markdown:",[52,6328,6330],{"className":3603,"code":6329,"filename":3599,"language":3496,"meta":57,"style":57},"# Hello world\n\nWelcome to our first newsletter.\n\n![Image description](/images/retina-image.jpg){width=600}\n",[59,6331,6332,6338,6342,6346,6350],{"__ignoreMap":57},[62,6333,6334,6336],{"class":64,"line":65},[62,6335,3612],{"class":111},[62,6337,3615],{"class":115},[62,6339,6340],{"class":64,"line":72},[62,6341,297],{"emptyLinePlaceholder":296},[62,6343,6344],{"class":64,"line":78},[62,6345,6297],{"class":68},[62,6347,6348],{"class":64,"line":84},[62,6349,297],{"emptyLinePlaceholder":296},[62,6351,6352,6355,6358,6360,6363,6365],{"class":64,"line":90},[62,6353,6354],{"class":111},"![",[62,6356,6357],{"class":68},"Image description",[62,6359,986],{"class":111},[62,6361,6362],{"class":68},"/images/retina-image.jpg",[62,6364,1054],{"class":111},[62,6366,6367],{"class":68},"{width=600}\n",[15,6369,6370,6371,6373,6374,6377,6378,6380,6381,6383],{},"Notice how there's no space between the last ",[59,6372,1054],{}," and the opening ",[59,6375,6376],{},"{"," where we specify the attribute. This ensures the attribute is added to the ",[59,6379,116],{}," tag, and not the ",[59,6382,15],{}," tag wrapping it.",[41,6385,3460],{"id":3459},[733,6387,6388,6393,6401],{},[736,6389,6390,3469],{},[25,6391,3468],{"href":3521,"rel":6392},[37],[736,6394,6395,6396],{},"For the new components syntax, see the Maizzle 4.4.0-beta ",[25,6397,6400],{"href":6398,"rel":6399},"https://github.com/maizzle/framework/releases/tag/v4.4.0-beta.1",[37],"release notes",[736,6402,6403,6404],{},"Docs for ",[25,6405,6406],{"href":4742},"Markdown in Maizzle",[3477,6408,6409],{},"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":57,"searchDepth":72,"depth":72,"links":6411},[6412,6418,6419,6423,6424,6425,6428,6429,6430],{"id":159,"depth":72,"text":160,"children":6413},[6414,6415,6416,6417],{"id":195,"depth":78,"text":196},{"id":3627,"depth":78,"text":3628},{"id":4460,"depth":78,"text":4461},{"id":4506,"depth":78,"text":4507},{"id":4572,"depth":72,"text":4573},{"id":4765,"depth":72,"text":4766,"children":6420},[6421,6422],{"id":5020,"depth":78,"text":5021},{"id":5228,"depth":78,"text":5229},{"id":5249,"depth":72,"text":5250},{"id":5555,"depth":72,"text":5556},{"id":5613,"depth":72,"text":5614,"children":6426},[6427],{"id":5805,"depth":78,"text":5806},{"id":6079,"depth":72,"text":6080},{"id":6306,"depth":72,"text":6307},{"id":3459,"depth":72,"text":3460},"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":3505,"description":6432},{"loc":6434},"guides/markdown-emails","YHwknycDPMFa23ey1KDKOMduF6frluWp1KguG80_-uM",{"id":6440,"title":6441,"body":6442,"date":7431,"description":7432,"extension":3496,"meta":7433,"navigation":296,"path":7434,"seo":7435,"sitemap":7436,"stem":7437,"__hash__":7438},"guides/guides/amp-email.md","How to create an AMP for Email template",{"type":8,"value":6443,"toc":7423},[6444,6447,6452,6455,6468,6476,6480,6483,6493,6498,6500,6502,6504,6514,6716,6719,6728,6734,7089,7106,7112,7116,7119,7122,7161,7164,7197,7201,7207,7210,7239,7246,7252,7300,7312,7345,7352,7363,7398,7404,7406,7420],[11,6445,6441],{"id":6446},"how-to-create-an-amp-for-email-template",[15,6448,6451],{"className":6449},[6450],"text-sm","Last updated: March 18, 2023",[15,6453,6454],{},"In this tutorial, you'll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates.",[15,6456,6457,6458,5259,6463,39],{},"For a syntax refresher, checkout the ",[25,6459,6462],{"href":6460,"rel":6461},"https://amp.dev/documentation/guides-and-tutorials/start/create_email/?format=email",[37],"AMP Email docs",[25,6464,6467],{"href":6465,"rel":6466},"https://amp.dev/documentation/examples/?format=email",[37],"AMP Email examples",[15,6469,6470,6471,39],{},"Want to dive right in? Checkout our ",[25,6472,6475],{"href":6473,"rel":6474},"https://github.com/maizzle/starter-amp4email",[37],"AMP for Email Starter",[41,6477,6479],{"id":6478},"initial-setup","Initial setup",[15,6481,6482],{},"As always, let's scaffold a new project:",[52,6484,6485],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,6486,6487],{"__ignoreMap":57},[62,6488,6489,6491],{"class":64,"line":65},[62,6490,175],{"class":115},[62,6492,178],{"class":68},[15,6494,181,6495,185],{},[59,6496,6497],{},"./amp-emails",[15,6499,188],{},[15,6501,191],{},[41,6503,3628],{"id":3627},[15,6505,6506,6507,6510,6511,203],{},"AMP for Email requires some special markup, so let's create an ",[59,6508,6509],{},"amp.html"," Layout and save it under ",[59,6512,6513],{},"layouts",[52,6515,6518],{"className":54,"code":6516,"filename":6517,"language":56,"meta":57,"style":57},"\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",[59,6519,6520,6531,6542,6550,6568,6594,6625,6658,6676,6684,6692,6700,6708],{"__ignoreMap":57},[62,6521,6522,6524,6526,6529],{"class":64,"line":65},[62,6523,3651],{"class":111},[62,6525,3654],{"class":115},[62,6527,6528],{"class":119}," html",[62,6530,308],{"class":111},[62,6532,6533,6535,6537,6540],{"class":64,"line":72},[62,6534,302],{"class":111},[62,6536,56],{"class":115},[62,6538,6539],{"class":119}," ⚡4email",[62,6541,308],{"class":111},[62,6543,6544,6546,6548],{"class":64,"line":78},[62,6545,302],{"class":111},[62,6547,3713],{"class":115},[62,6549,308],{"class":111},[62,6551,6552,6554,6556,6558,6560,6562,6564,6566],{"class":64,"line":84},[62,6553,112],{"class":111},[62,6555,3722],{"class":115},[62,6557,3725],{"class":119},[62,6559,123],{"class":111},[62,6561,126],{"class":119},[62,6563,3741],{"class":68},[62,6565,126],{"class":119},[62,6567,308],{"class":111},[62,6569,6570,6572,6575,6578,6580,6582,6585,6587,6590,6592],{"class":64,"line":90},[62,6571,112],{"class":111},[62,6573,6574],{"class":115},"script",[62,6576,6577],{"class":119}," async src",[62,6579,123],{"class":111},[62,6581,126],{"class":119},[62,6583,6584],{"class":68},"https://cdn.ampproject.org/v0.js",[62,6586,126],{"class":119},[62,6588,6589],{"class":111},">\u003C/",[62,6591,6574],{"class":115},[62,6593,308],{"class":111},[62,6595,6596,6598,6600,6603,6605,6607,6609,6612,6614,6617,6619,6621,6623],{"class":64,"line":236},[62,6597,112],{"class":111},[62,6599,3477],{"class":115},[62,6601,6602],{"class":119}," amp4email-boilerplate",[62,6604,134],{"class":111},[62,6606,4013],{"class":115},[62,6608,6376],{"class":3650},[62,6610,6611],{"class":2141},"visibility",[62,6613,203],{"class":3952},[62,6615,4075],{"class":6616},"snKqK",[62,6618,2748],{"class":3650},[62,6620,700],{"class":111},[62,6622,3477],{"class":115},[62,6624,308],{"class":111},[62,6626,6627,6629,6631,6634,6636,6638,6640,6643,6645,6647,6649,6652,6654,6656],{"class":64,"line":242},[62,6628,112],{"class":111},[62,6630,3477],{"class":115},[62,6632,6633],{"class":119}," amp-custom",[62,6635,134],{"class":111},[62,6637,6376],{"class":3650},[62,6639,3673],{"class":3952},[62,6641,6642],{"class":2141},"page",[62,6644,39],{"class":3952},[62,6646,4778],{"class":2141},[62,6648,3103],{"class":3650},[62,6650,6651],{"class":68},"}}",[62,6653,700],{"class":111},[62,6655,3477],{"class":115},[62,6657,308],{"class":111},[62,6659,6660,6662,6664,6666,6668,6670,6672,6674],{"class":64,"line":248},[62,6661,112],{"class":111},[62,6663,3983],{"class":115},[62,6665,3095],{"class":119},[62,6667,123],{"class":111},[62,6669,126],{"class":119},[62,6671,3713],{"class":68},[62,6673,126],{"class":119},[62,6675,5697],{"class":111},[62,6677,6678,6680,6682],{"class":64,"line":382},[62,6679,700],{"class":111},[62,6681,3713],{"class":115},[62,6683,308],{"class":111},[62,6685,6686,6688,6690],{"class":64,"line":392},[62,6687,302],{"class":111},[62,6689,4013],{"class":115},[62,6691,308],{"class":111},[62,6693,6694,6696,6698],{"class":64,"line":402},[62,6695,112],{"class":111},[62,6697,4376],{"class":115},[62,6699,5697],{"class":111},[62,6701,6702,6704,6706],{"class":64,"line":442},[62,6703,700],{"class":111},[62,6705,4013],{"class":115},[62,6707,308],{"class":111},[62,6709,6710,6712,6714],{"class":64,"line":451},[62,6711,700],{"class":111},[62,6713,56],{"class":115},[62,6715,308],{"class":111},[41,6717,6718],{"id":2780},"Template",[15,6720,6721,6722,6727],{},"For this tutorial, we'll use the ",[25,6723,6726],{"href":6724,"rel":6725},"https://amp.dev/documentation/components/amp-carousel/?format=email",[37],"AMP Carousel"," component.",[15,6729,268,6730,6733],{},[59,6731,6732],{},"emails/amp/carousel.html"," and add a basic AMP carousel:",[52,6735,6737],{"className":54,"code":6736,"filename":6732,"language":56,"meta":57,"style":57},"\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",[59,6738,6739,6748,6766,6801,6809,6813,6832,6851,6906,6957,7007,7057,7065,7073,7081],{"__ignoreMap":57},[62,6740,6741,6743,6746],{"class":64,"line":65},[62,6742,302],{"class":111},[62,6744,6745],{"class":115},"x-amp",[62,6747,308],{"class":111},[62,6749,6750,6752,6754,6756,6758,6760,6762,6764],{"class":64,"line":72},[62,6751,112],{"class":111},[62,6753,1302],{"class":115},[62,6755,3095],{"class":119},[62,6757,123],{"class":111},[62,6759,126],{"class":119},[62,6761,3713],{"class":68},[62,6763,126],{"class":119},[62,6765,308],{"class":111},[62,6767,6768,6770,6772,6775,6777,6779,6782,6784,6786,6788,6790,6793,6795,6797,6799],{"class":64,"line":78},[62,6769,340],{"class":111},[62,6771,6574],{"class":115},[62,6773,6774],{"class":119}," async custom-element",[62,6776,123],{"class":111},[62,6778,126],{"class":119},[62,6780,6781],{"class":68},"amp-carousel",[62,6783,126],{"class":119},[62,6785,120],{"class":119},[62,6787,123],{"class":111},[62,6789,126],{"class":119},[62,6791,6792],{"class":68},"https://cdn.ampproject.org/v0/amp-carousel-0.2.js",[62,6794,126],{"class":119},[62,6796,6589],{"class":111},[62,6798,6574],{"class":115},[62,6800,308],{"class":111},[62,6802,6803,6805,6807],{"class":64,"line":84},[62,6804,385],{"class":111},[62,6806,1302],{"class":115},[62,6808,308],{"class":111},[62,6810,6811],{"class":64,"line":90},[62,6812,297],{"emptyLinePlaceholder":296},[62,6814,6815,6817,6819,6821,6823,6825,6828,6830],{"class":64,"line":236},[62,6816,112],{"class":111},[62,6818,519],{"class":115},[62,6820,4016],{"class":119},[62,6822,123],{"class":111},[62,6824,126],{"class":119},[62,6826,6827],{"class":68},"p-4",[62,6829,126],{"class":119},[62,6831,308],{"class":111},[62,6833,6834,6836,6838,6840,6842,6844,6847,6849],{"class":64,"line":242},[62,6835,340],{"class":111},[62,6837,519],{"class":115},[62,6839,4016],{"class":119},[62,6841,123],{"class":111},[62,6843,126],{"class":119},[62,6845,6846],{"class":68},"max-w-full",[62,6848,126],{"class":119},[62,6850,308],{"class":111},[62,6852,6853,6855,6857,6859,6861,6863,6866,6868,6871,6873,6875,6878,6880,6883,6885,6887,6890,6892,6895,6897,6899,6902,6904],{"class":64,"line":248},[62,6854,4094],{"class":111},[62,6856,6781],{"class":115},[62,6858,356],{"class":119},[62,6860,123],{"class":111},[62,6862,126],{"class":119},[62,6864,6865],{"class":68},"600",[62,6867,126],{"class":119},[62,6869,6870],{"class":119}," height",[62,6872,123],{"class":111},[62,6874,126],{"class":119},[62,6876,6877],{"class":68},"400",[62,6879,126],{"class":119},[62,6881,6882],{"class":119}," layout",[62,6884,123],{"class":111},[62,6886,126],{"class":119},[62,6888,6889],{"class":68},"responsive",[62,6891,126],{"class":119},[62,6893,6894],{"class":119}," type",[62,6896,123],{"class":111},[62,6898,126],{"class":119},[62,6900,6901],{"class":68},"slides",[62,6903,126],{"class":119},[62,6905,308],{"class":111},[62,6907,6908,6910,6913,6915,6917,6919,6922,6924,6926,6928,6930,6932,6934,6936,6938,6940,6942,6944,6946,6948,6950,6953,6955],{"class":64,"line":382},[62,6909,4303],{"class":111},[62,6911,6912],{"class":115},"amp-img",[62,6914,120],{"class":119},[62,6916,123],{"class":111},[62,6918,126],{"class":119},[62,6920,6921],{"class":68},"https://ampbyexample.com/img/image1.jpg",[62,6923,126],{"class":119},[62,6925,356],{"class":119},[62,6927,123],{"class":111},[62,6929,126],{"class":119},[62,6931,6865],{"class":68},[62,6933,126],{"class":119},[62,6935,6870],{"class":119},[62,6937,123],{"class":111},[62,6939,126],{"class":119},[62,6941,6877],{"class":68},[62,6943,126],{"class":119},[62,6945,368],{"class":119},[62,6947,123],{"class":111},[62,6949,126],{"class":119},[62,6951,6952],{"class":68},"a sample image",[62,6954,126],{"class":119},[62,6956,5697],{"class":111},[62,6958,6959,6961,6963,6965,6967,6969,6972,6974,6976,6978,6980,6982,6984,6986,6988,6990,6992,6994,6996,6998,7000,7003,7005],{"class":64,"line":392},[62,6960,4303],{"class":111},[62,6962,6912],{"class":115},[62,6964,120],{"class":119},[62,6966,123],{"class":111},[62,6968,126],{"class":119},[62,6970,6971],{"class":68},"https://ampbyexample.com/img/image2.jpg",[62,6973,126],{"class":119},[62,6975,356],{"class":119},[62,6977,123],{"class":111},[62,6979,126],{"class":119},[62,6981,6865],{"class":68},[62,6983,126],{"class":119},[62,6985,6870],{"class":119},[62,6987,123],{"class":111},[62,6989,126],{"class":119},[62,6991,6877],{"class":68},[62,6993,126],{"class":119},[62,6995,368],{"class":119},[62,6997,123],{"class":111},[62,6999,126],{"class":119},[62,7001,7002],{"class":68},"another sample image",[62,7004,126],{"class":119},[62,7006,5697],{"class":111},[62,7008,7009,7011,7013,7015,7017,7019,7022,7024,7026,7028,7030,7032,7034,7036,7038,7040,7042,7044,7046,7048,7050,7053,7055],{"class":64,"line":402},[62,7010,4303],{"class":111},[62,7012,6912],{"class":115},[62,7014,120],{"class":119},[62,7016,123],{"class":111},[62,7018,126],{"class":119},[62,7020,7021],{"class":68},"https://ampbyexample.com/img/image3.jpg",[62,7023,126],{"class":119},[62,7025,356],{"class":119},[62,7027,123],{"class":111},[62,7029,126],{"class":119},[62,7031,6865],{"class":68},[62,7033,126],{"class":119},[62,7035,6870],{"class":119},[62,7037,123],{"class":111},[62,7039,126],{"class":119},[62,7041,6877],{"class":68},[62,7043,126],{"class":119},[62,7045,368],{"class":119},[62,7047,123],{"class":111},[62,7049,126],{"class":119},[62,7051,7052],{"class":68},"and another sample image",[62,7054,126],{"class":119},[62,7056,5697],{"class":111},[62,7058,7059,7061,7063],{"class":64,"line":442},[62,7060,4421],{"class":111},[62,7062,6781],{"class":115},[62,7064,308],{"class":111},[62,7066,7067,7069,7071],{"class":64,"line":451},[62,7068,4126],{"class":111},[62,7070,519],{"class":115},[62,7072,308],{"class":111},[62,7074,7075,7077,7079],{"class":64,"line":456},[62,7076,385],{"class":111},[62,7078,519],{"class":115},[62,7080,308],{"class":111},[62,7082,7083,7085,7087],{"class":64,"line":465},[62,7084,700],{"class":111},[62,7086,6745],{"class":115},[62,7088,308],{"class":111},[15,7090,7091,7092,7097,7098,7101,7102,7105],{},"You initialize ",[25,7093,7096],{"href":7094,"rel":7095},"https://amp.dev/documentation/guides-and-tutorials/learn/email-spec/amp-email-components/?format=email",[37],"AMP components"," by pushing their ",[59,7099,7100],{},"\u003Cscript>"," tag to the ",[59,7103,7104],{},"\u003Cstack name=\"head\" />"," from the layout, as shown above.",[15,7107,7108,7109,39],{},"You can then use the component's markup inside ",[59,7110,7111],{},"\u003Cfill:template>\u003C/fill:template>",[41,7113,7115],{"id":7114},"css-inlining","CSS inlining",[15,7117,7118],{},"Inline style attributes are not allowed in AMP, so you need to disable CSS inlining.",[15,7120,7121],{},"Do it either globally, in your environment config:",[52,7123,7125],{"className":754,"code":7124,"filename":4507,"language":757,"meta":57,"style":57},"export default {\n  css: {\n    inline: false,\n  }\n}\n",[59,7126,7127,7135,7143,7153,7157],{"__ignoreMap":57},[62,7128,7129,7131,7133],{"class":64,"line":65},[62,7130,784],{"class":115},[62,7132,787],{"class":115},[62,7134,791],{"class":790},[62,7136,7137,7139,7141],{"class":64,"line":72},[62,7138,850],{"class":68},[62,7140,203],{"class":790},[62,7142,791],{"class":790},[62,7144,7145,7147,7149,7151],{"class":64,"line":78},[62,7146,859],{"class":68},[62,7148,203],{"class":790},[62,7150,811],{"class":115},[62,7152,814],{"class":790},[62,7154,7155],{"class":64,"line":84},[62,7156,1321],{"class":790},[62,7158,7159],{"class":64,"line":90},[62,7160,2028],{"class":790},[15,7162,7163],{},"... or locally, in the Template's Front Matter:",[52,7165,7169],{"className":7166,"code":7167,"filename":6732,"language":7168,"meta":57,"style":57},"language-yaml shiki shiki-themes tailwind-css tailwind-css","---\ncss:\n  inline: false\n---\n","yaml",[59,7170,7171,7176,7183,7193],{"__ignoreMap":57},[62,7172,7173],{"class":64,"line":65},[62,7174,282],{"class":7175},"s1Ehh",[62,7177,7178,7180],{"class":64,"line":72},[62,7179,4778],{"class":115},[62,7181,7182],{"class":790},":\n",[62,7184,7185,7188,7190],{"class":64,"line":78},[62,7186,7187],{"class":115},"  inline",[62,7189,203],{"class":790},[62,7191,7192],{"class":115}," false\n",[62,7194,7195],{"class":64,"line":84},[62,7196,282],{"class":7175},[41,7198,7200],{"id":7199},"important","!important",[15,7202,7203,7204,7206],{},"AMP for Email doesn't support ",[59,7205,7200],{}," in CSS, either.",[15,7208,7209],{},"This can be easily turned off in your Tailwind config:",[52,7211,7214],{"className":754,"code":7212,"filename":7213,"language":757,"meta":57,"style":57},"export default {\n  important: false,\n}\n","tailwind.config.js",[59,7215,7216,7224,7235],{"__ignoreMap":57},[62,7217,7218,7220,7222],{"class":64,"line":65},[62,7219,784],{"class":115},[62,7221,787],{"class":115},[62,7223,791],{"class":790},[62,7225,7226,7229,7231,7233],{"class":64,"line":72},[62,7227,7228],{"class":68},"  important",[62,7230,203],{"class":790},[62,7232,811],{"class":115},[62,7234,814],{"class":790},[62,7236,7237],{"class":64,"line":78},[62,7238,2028],{"class":790},[15,7240,7241,7242,7245],{},"However, you probably want to turn it off ",[5239,7243,7244],{},"only"," for AMP templates.",[15,7247,7248,7249,7251],{},"You can do this by updating your ",[59,7250,2060],{}," tag for AMP templates to use a different Tailwind config file:",[52,7253,7255],{"className":54,"code":7254,"filename":6517,"language":56,"meta":57,"style":57},"\u003Cstyle>\n  @config 'tailwind.amp.js';\n  @tailwind components;\n  @tailwind utilities;\n\u003C/style>\n",[59,7256,7257,7265,7275,7284,7292],{"__ignoreMap":57},[62,7258,7259,7261,7263],{"class":64,"line":65},[62,7260,302],{"class":111},[62,7262,3477],{"class":115},[62,7264,308],{"class":111},[62,7266,7267,7270,7273],{"class":64,"line":72},[62,7268,7269],{"class":3952},"  @config",[62,7271,7272],{"class":68}," 'tailwind.amp.js'",[62,7274,3959],{"class":3952},[62,7276,7277,7280,7282],{"class":64,"line":78},[62,7278,7279],{"class":3952},"  @tailwind",[62,7281,3966],{"class":68},[62,7283,3959],{"class":3952},[62,7285,7286,7288,7290],{"class":64,"line":84},[62,7287,7279],{"class":3952},[62,7289,3956],{"class":68},[62,7291,3959],{"class":3952},[62,7293,7294,7296,7298],{"class":64,"line":90},[62,7295,700],{"class":111},[62,7297,3477],{"class":115},[62,7299,308],{"class":111},[15,7301,7302,7303,7305,7306,7309,7310,203],{},"Next, duplicate ",[59,7304,7213],{}," to ",[59,7307,7308],{},"tailwind.amp.js"," and disable ",[59,7311,7199],{},[52,7313,7315],{"className":754,"code":7314,"filename":7308,"language":757,"meta":57,"style":57},"module.exports = {\n  important: false,\n}\n",[59,7316,7317,7331,7341],{"__ignoreMap":57},[62,7318,7319,7322,7324,7327,7329],{"class":64,"line":65},[62,7320,7321],{"class":115},"module",[62,7323,39],{"class":790},[62,7325,7326],{"class":115},"exports",[62,7328,4657],{"class":772},[62,7330,791],{"class":790},[62,7332,7333,7335,7337,7339],{"class":64,"line":72},[62,7334,7228],{"class":68},[62,7336,203],{"class":790},[62,7338,811],{"class":115},[62,7340,814],{"class":790},[62,7342,7343],{"class":64,"line":78},[62,7344,2028],{"class":790},[15,7346,7347,7348,7351],{},"Finally, run ",[59,7349,7350],{},"maizzle build amp"," to build your ⚡4email templates.",[15,7353,7354,7355,7359,7360,203],{},"In case you haven't installed the ",[25,7356,7358],{"href":7357},"/docs/cli","Maizzle CLI",", add an NPM script to ",[59,7361,7362],{},"package.json",[52,7364,7368],{"className":7365,"code":7366,"filename":7362,"language":7367,"meta":57,"style":57},"language-json shiki shiki-themes tailwind-css tailwind-css","\"scripts\": {\n  \"build:amp\": \"maizzle build amp\"\n}\n","json",[59,7369,7370,7379,7394],{"__ignoreMap":57},[62,7371,7372,7375,7377],{"class":64,"line":65},[62,7373,7374],{"class":68},"\"scripts\"",[62,7376,4880],{"class":68},[62,7378,1243],{"class":3650},[62,7380,7381,7384,7387,7389,7391],{"class":64,"line":72},[62,7382,7383],{"class":790},"  \"",[62,7385,7386],{"class":68},"build:amp",[62,7388,126],{"class":790},[62,7390,203],{"class":3650},[62,7392,7393],{"class":68}," \"maizzle build amp\"\n",[62,7395,7396],{"class":64,"line":78},[62,7397,2028],{"class":3650},[15,7399,7400,7401,39],{},"You'd then build your AMP emails by running ",[59,7402,7403],{},"npm run build:amp",[41,7405,3460],{"id":3459},[733,7407,7408,7414],{},[736,7409,7410],{},[25,7411,7413],{"href":6460,"rel":7412},[37],"Official AMP for Email docs",[736,7415,7416],{},[25,7417,7419],{"href":6473,"rel":7418},[37],"Maizzle AMP for Email Starter",[3477,7421,7422],{},"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":57,"searchDepth":72,"depth":72,"links":7424},[7425,7426,7427,7428,7429,7430],{"id":6478,"depth":72,"text":6479},{"id":3627,"depth":72,"text":3628},{"id":2780,"depth":72,"text":6718},{"id":7114,"depth":72,"text":7115},{"id":7199,"depth":72,"text":7200},{"id":3459,"depth":72,"text":3460},"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.",{},"/guides/amp-email",{"title":6441,"description":7432},{"loc":7434},"guides/amp-email","KmxORpK7BI3TCN2fNhIZY4fobWp-d-2DN7wJZBQWRng",{"id":7440,"title":7441,"body":7442,"date":8624,"description":8625,"extension":3496,"meta":8626,"navigation":296,"path":8627,"seo":8628,"sitemap":8629,"stem":8630,"__hash__":8631},"guides/guides/rss-feed.md","How to create an email newsletter from an RSS feed",{"type":8,"value":7443,"toc":8611},[7444,7447,7451,7458,7467,7469,7472,7482,7487,7489,7491,7494,7502,7516,7520,7523,7536,7544,7584,7588,7598,7610,7880,7890,7894,7897,7903,8010,8016,8018,8027,8031,8034,8197,8201,8208,8560,8566,8574,8576,8608],[11,7445,7441],{"id":7446},"how-to-create-an-email-newsletter-from-an-rss-feed",[15,7448,7450],{"className":7449},[6450],"Last updated: May 30, 2022",[15,7452,7453,7454,7457],{},"In this tutorial, we'll use ",[25,7455,7456],{"href":27},"Events"," in Maizzle to fetch the contents of an RSS feed and display them in an HTML email newsletter.",[15,7459,7460,7461,7466],{},"You can ",[25,7462,7465],{"href":7463,"rel":7464},"https://codepen.io/maizzle/pen/ExjvmdP?editors=1000",[37],"preview the final result"," on CodePen.",[41,7468,6479],{"id":6478},[15,7470,7471],{},"Let's start by creating a new Maizzle project.",[52,7473,7474],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,7475,7476],{"__ignoreMap":57},[62,7477,7478,7480],{"class":64,"line":65},[62,7479,175],{"class":115},[62,7481,178],{"class":68},[15,7483,181,7484,185],{},[59,7485,7486],{},"./example-rss",[15,7488,188],{},[15,7490,191],{},[193,7492,7493],{"id":7493},"rss-parser",[15,7495,7496,7497,7501],{},"We'll be using ",[25,7498,7493],{"href":7499,"rel":7500},"https://www.npmjs.com/package/rss-parser",[37]," fetch the contents of the RSS feed, so let's install it:",[52,7503,7505],{"className":166,"code":7504,"language":168,"meta":57,"style":57},"npm install rss-parser\n",[59,7506,7507],{"__ignoreMap":57},[62,7508,7509,7511,7513],{"class":64,"line":65},[62,7510,2101],{"class":115},[62,7512,2104],{"class":68},[62,7514,7515],{"class":68}," rss-parser\n",[41,7517,7519],{"id":7518},"rss-feed","RSS Feed",[15,7521,7522],{},"We'll need an RSS feed to work with, so let's go with the best site for learning Laravel.",[15,7524,7525,7526,7531,7532,39],{},"The ",[25,7527,7530],{"href":7528,"rel":7529},"https://laracasts.com",[37],"Laracasts"," feed is available at ",[25,7533,7534],{"href":7534,"rel":7535},"https://laracasts.com/feed",[37],[15,7537,7538,7539,7541,7542,203],{},"Let's add that feed URL inside the ",[59,7540,2359],{}," object in ",[59,7543,4507],{},[52,7545,7547],{"className":754,"code":7546,"filename":4507,"language":757,"meta":57,"style":57},"export default {\n  feed: {\n    url: 'https://laracasts.com/feed'\n  }\n}\n",[59,7548,7549,7557,7566,7576,7580],{"__ignoreMap":57},[62,7550,7551,7553,7555],{"class":64,"line":65},[62,7552,784],{"class":115},[62,7554,787],{"class":115},[62,7556,791],{"class":790},[62,7558,7559,7562,7564],{"class":64,"line":72},[62,7560,7561],{"class":68},"  feed",[62,7563,203],{"class":790},[62,7565,791],{"class":790},[62,7567,7568,7571,7573],{"class":64,"line":78},[62,7569,7570],{"class":68},"    url",[62,7572,203],{"class":790},[62,7574,7575],{"class":68}," 'https://laracasts.com/feed'\n",[62,7577,7578],{"class":64,"line":84},[62,7579,1321],{"class":790},[62,7581,7582],{"class":64,"line":90},[62,7583,2028],{"class":790},[41,7585,7587],{"id":7586},"fetch-items","Fetch Items",[15,7589,7590,7591,7593,7594,7597],{},"We can use ",[59,7592,7493],{}," inside the ",[25,7595,5298],{"href":7596},"/docs/events#beforecreate"," event to fetch feed data.",[15,7599,7600,7601,7603,7604,7606,7607,7609],{},"Edit ",[59,7602,4507],{},", require ",[59,7605,7493],{},", and use it in the ",[59,7608,5298],{}," event:",[52,7611,7613],{"className":754,"code":7612,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,7614,7615,7627,7631,7639,7653,7658,7676,7685,7701,7716,7720,7726,7730,7735,7770,7774,7779,7791,7806,7822,7838,7854,7868,7872,7876],{"__ignoreMap":57},[62,7616,7617,7619,7622,7624],{"class":64,"line":65},[62,7618,2138],{"class":765},[62,7620,7621],{"class":2141}," Parser",[62,7623,2145],{"class":790},[62,7625,7626],{"class":765}," 'rss-parser'\n",[62,7628,7629],{"class":64,"line":72},[62,7630,297],{"emptyLinePlaceholder":296},[62,7632,7633,7635,7637],{"class":64,"line":78},[62,7634,784],{"class":115},[62,7636,787],{"class":115},[62,7638,791],{"class":790},[62,7640,7641,7643,7645,7647,7649,7651],{"class":64,"line":84},[62,7642,5337],{"class":765},[62,7644,5340],{"class":947},[62,7646,1048],{"class":790},[62,7648,2354],{"class":765},[62,7650,1054],{"class":790},[62,7652,791],{"class":790},[62,7654,7655],{"class":64,"line":90},[62,7656,7657],{"class":313},"    // create a new Parser instance\n",[62,7659,7660,7662,7665,7667,7670,7672,7674],{"class":64,"line":236},[62,7661,2301],{"class":765},[62,7663,7664],{"class":68}," parser ",[62,7666,123],{"class":772},[62,7668,7669],{"class":115}," new",[62,7671,7621],{"class":947},[62,7673,1048],{"class":68},[62,7675,1243],{"class":790},[62,7677,7678,7681,7683],{"class":64,"line":242},[62,7679,7680],{"class":68},"      customFields",[62,7682,203],{"class":790},[62,7684,791],{"class":790},[62,7686,7687,7690,7692,7694,7697,7699],{"class":64,"line":248},[62,7688,7689],{"class":68},"        feed",[62,7691,203],{"class":790},[62,7693,4554],{"class":68},[62,7695,7696],{"class":68},"'subtitle'",[62,7698,997],{"class":68},[62,7700,814],{"class":790},[62,7702,7703,7706,7708,7710,7713],{"class":64,"line":382},[62,7704,7705],{"class":68},"        item",[62,7707,203],{"class":790},[62,7709,4554],{"class":68},[62,7711,7712],{"class":68},"'summary'",[62,7714,7715],{"class":68},"]\n",[62,7717,7718],{"class":64,"line":392},[62,7719,1996],{"class":790},[62,7721,7722,7724],{"class":64,"line":402},[62,7723,1314],{"class":790},[62,7725,1226],{"class":68},[62,7727,7728],{"class":64,"line":442},[62,7729,297],{"emptyLinePlaceholder":296},[62,7731,7732],{"class":64,"line":451},[62,7733,7734],{"class":313},"    // fetch and parse the feed\n",[62,7736,7737,7740,7743,7745,7747,7750,7752,7755,7757,7759,7761,7764,7766,7768],{"class":64,"line":456},[62,7738,7739],{"class":765},"    let",[62,7741,7742],{"class":765}," feed",[62,7744,4657],{"class":772},[62,7746,5360],{"class":115},[62,7748,7749],{"class":765}," parser",[62,7751,39],{"class":790},[62,7753,7754],{"class":947},"parseURL",[62,7756,1048],{"class":68},[62,7758,2354],{"class":765},[62,7760,39],{"class":790},[62,7762,7763],{"class":765},"feed",[62,7765,39],{"class":790},[62,7767,1065],{"class":765},[62,7769,1226],{"class":68},[62,7771,7772],{"class":64,"line":465},[62,7773,297],{"emptyLinePlaceholder":296},[62,7775,7776],{"class":64,"line":471},[62,7777,7778],{"class":313},"    // store the feed data in our config\n",[62,7780,7781,7783,7785,7787,7789],{"class":64,"line":480},[62,7782,5413],{"class":765},[62,7784,39],{"class":790},[62,7786,7763],{"class":765},[62,7788,4657],{"class":772},[62,7790,791],{"class":790},[62,7792,7793,7796,7798,7800,7802,7804],{"class":64,"line":485},[62,7794,7795],{"class":68},"      title",[62,7797,203],{"class":790},[62,7799,7742],{"class":765},[62,7801,39],{"class":790},[62,7803,3915],{"class":765},[62,7805,814],{"class":790},[62,7807,7808,7811,7813,7815,7817,7820],{"class":64,"line":494},[62,7809,7810],{"class":68},"      subtitle",[62,7812,203],{"class":790},[62,7814,7742],{"class":765},[62,7816,39],{"class":790},[62,7818,7819],{"class":765},"subtitle",[62,7821,814],{"class":790},[62,7823,7824,7827,7829,7831,7833,7836],{"class":64,"line":500},[62,7825,7826],{"class":68},"      link",[62,7828,203],{"class":790},[62,7830,7742],{"class":765},[62,7832,39],{"class":790},[62,7834,7835],{"class":765},"link",[62,7837,814],{"class":790},[62,7839,7840,7843,7845,7847,7849,7852],{"class":64,"line":509},[62,7841,7842],{"class":68},"      updated_at",[62,7844,203],{"class":790},[62,7846,7742],{"class":765},[62,7848,39],{"class":790},[62,7850,7851],{"class":765},"lastBuildDate",[62,7853,814],{"class":790},[62,7855,7856,7859,7861,7863,7865],{"class":64,"line":514},[62,7857,7858],{"class":68},"      posts",[62,7860,203],{"class":790},[62,7862,7742],{"class":765},[62,7864,39],{"class":790},[62,7866,7867],{"class":765},"items\n",[62,7869,7870],{"class":64,"line":524},[62,7871,3359],{"class":790},[62,7873,7874],{"class":64,"line":566},[62,7875,1321],{"class":790},[62,7877,7878],{"class":64,"line":575},[62,7879,2028],{"class":790},[3587,7881,7882,7883,7885,7886,7889],{},"\nThe Laracasts feed contains fields that \n",[59,7884,7493],{},"\n does not currently return by default. We include them through the \n",[59,7887,7888],{},"customFields","\n option.\n",[41,7891,7893],{"id":7892},"date-format","Date Format",[15,7895,7896],{},"We'll probably need to format the date of a feed item to something more readable than what the feed provides.",[15,7898,7899,7900,7902],{},"We can add a function to ",[59,7901,4507],{}," and use it to format the item's date according to our audience's locale:",[52,7904,7906],{"className":754,"code":7905,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,7907,7908,7916,7930,7950,8002,8006],{"__ignoreMap":57},[62,7909,7910,7912,7914],{"class":64,"line":65},[62,7911,784],{"class":115},[62,7913,787],{"class":115},[62,7915,791],{"class":790},[62,7917,7918,7921,7923,7926,7928],{"class":64,"line":72},[62,7919,7920],{"class":947},"  formattedDate",[62,7922,1048],{"class":790},[62,7924,7925],{"class":765},"str",[62,7927,1054],{"class":790},[62,7929,791],{"class":790},[62,7931,7932,7934,7937,7939,7941,7944,7946,7948],{"class":64,"line":78},[62,7933,2301],{"class":765},[62,7935,7936],{"class":68}," date ",[62,7938,123],{"class":772},[62,7940,7669],{"class":115},[62,7942,7943],{"class":947}," Date",[62,7945,1048],{"class":68},[62,7947,7925],{"class":765},[62,7949,1226],{"class":68},[62,7951,7952,7954,7957,7959,7962,7964,7967,7969,7971,7974,7976,7979,7981,7984,7986,7989,7991,7994,7996,7998,8000],{"class":64,"line":84},[62,7953,2384],{"class":115},[62,7955,7956],{"class":765}," date",[62,7958,39],{"class":790},[62,7960,7961],{"class":947},"toLocaleDateString",[62,7963,1048],{"class":68},[62,7965,7966],{"class":68},"'en-US'",[62,7968,1287],{"class":790},[62,7970,2732],{"class":790},[62,7972,7973],{"class":68},"day",[62,7975,203],{"class":790},[62,7977,7978],{"class":68}," 'numeric'",[62,7980,1287],{"class":790},[62,7982,7983],{"class":68}," month",[62,7985,203],{"class":790},[62,7987,7988],{"class":68}," 'short'",[62,7990,1287],{"class":790},[62,7992,7993],{"class":68}," year",[62,7995,203],{"class":790},[62,7997,7978],{"class":68},[62,7999,2748],{"class":790},[62,8001,1226],{"class":68},[62,8003,8004],{"class":64,"line":90},[62,8005,1321],{"class":790},[62,8007,8008],{"class":64,"line":236},[62,8009,2028],{"class":790},[3587,8011,8012,8013,8015],{},"\nTip: you could set \n",[59,8014,7966],{},"\n dynamically, based on your subscriber's preference.\n",[41,8017,6718],{"id":2780},[15,8019,8020,8021,8026],{},"We'll use a simplified version of the ",[25,8022,8025],{"href":8023,"rel":8024},"https://github.com/maizzle/maizzle/blob/master/emails/promotional.html",[37],"promotional template"," from the Starter, displaying posts as full width cards.",[193,8028,8030],{"id":8029},"header","Header",[15,8032,8033],{},"Let's update the existing header row:",[52,8035,8038],{"className":3641,"code":8036,"filename":8037,"language":3643,"meta":57,"style":57},"\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",[59,8039,8040,8045,8053,8072,8091,8136,8144,8163,8173,8181,8189],{"__ignoreMap":57},[62,8041,8042],{"class":64,"line":65},[62,8043,8044],{"class":313},"\u003C!-- ... -->\n",[62,8046,8047,8049,8051],{"class":64,"line":72},[62,8048,302],{"class":111},[62,8050,4296],{"class":115},[62,8052,308],{"class":111},[62,8054,8055,8057,8059,8061,8063,8065,8068,8070],{"class":64,"line":78},[62,8056,112],{"class":111},[62,8058,4306],{"class":115},[62,8060,4016],{"class":119},[62,8062,123],{"class":111},[62,8064,126],{"class":119},[62,8066,8067],{"class":68},"p-12 sm:py-8 sm:px-6 text-center",[62,8069,126],{"class":119},[62,8071,308],{"class":111},[62,8073,8074,8076,8078,8081,8083,8085,8087,8089],{"class":64,"line":84},[62,8075,340],{"class":111},[62,8077,25],{"class":115},[62,8079,8080],{"class":119}," href",[62,8082,123],{"class":111},[62,8084,126],{"class":119},[62,8086,7528],{"class":68},[62,8088,126],{"class":119},[62,8090,308],{"class":111},[62,8092,8093,8095,8097,8099,8101,8103,8106,8108,8110,8112,8114,8117,8119,8121,8123,8125,8127,8130,8132,8134],{"class":64,"line":90},[62,8094,4094],{"class":111},[62,8096,116],{"class":115},[62,8098,120],{"class":119},[62,8100,123],{"class":111},[62,8102,126],{"class":119},[62,8104,8105],{"class":68},"laracasts-logo.png",[62,8107,126],{"class":119},[62,8109,356],{"class":119},[62,8111,123],{"class":111},[62,8113,126],{"class":119},[62,8115,8116],{"class":68},"157",[62,8118,126],{"class":119},[62,8120,368],{"class":119},[62,8122,123],{"class":111},[62,8124,126],{"class":119},[62,8126,3673],{"class":68},[62,8128,8129],{"class":765},"page.feed.title",[62,8131,3690],{"class":68},[62,8133,126],{"class":119},[62,8135,308],{"class":111},[62,8137,8138,8140,8142],{"class":64,"line":236},[62,8139,4126],{"class":111},[62,8141,25],{"class":115},[62,8143,308],{"class":111},[62,8145,8146,8148,8150,8152,8154,8156,8159,8161],{"class":64,"line":242},[62,8147,340],{"class":111},[62,8149,15],{"class":115},[62,8151,4016],{"class":119},[62,8153,123],{"class":111},[62,8155,126],{"class":119},[62,8157,8158],{"class":68},"m-0 mt-2 text-sm text-slate-600",[62,8160,126],{"class":119},[62,8162,308],{"class":111},[62,8164,8165,8168,8171],{"class":64,"line":248},[62,8166,8167],{"class":68},"      {{ ",[62,8169,8170],{"class":765},"page.feed.subtitle",[62,8172,5602],{"class":68},[62,8174,8175,8177,8179],{"class":64,"line":382},[62,8176,4126],{"class":111},[62,8178,15],{"class":115},[62,8180,308],{"class":111},[62,8182,8183,8185,8187],{"class":64,"line":392},[62,8184,385],{"class":111},[62,8186,4306],{"class":115},[62,8188,308],{"class":111},[62,8190,8191,8193,8195],{"class":64,"line":402},[62,8192,700],{"class":111},[62,8194,4296],{"class":115},[62,8196,308],{"class":111},[193,8198,8200],{"id":8199},"items-loop","Items Loop",[15,8202,8203,8204,8207],{},"Let's use a full width card from the ",[25,8205,8025],{"href":8023,"rel":8206},[37]," to show a list of all items from the feed:",[52,8209,8211],{"className":3641,"code":8210,"filename":8037,"language":3643,"meta":57,"style":57},"\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",[59,8212,8213,8217,8236,8244,8263,8282,8298,8306,8310,8329,8363,8373,8381,8389,8393,8412,8445,8454,8462,8470,8478,8486,8505,8513,8536,8544,8552],{"__ignoreMap":57},[62,8214,8215],{"class":64,"line":65},[62,8216,8044],{"class":313},[62,8218,8219,8221,8223,8225,8227,8229,8232,8234],{"class":64,"line":72},[62,8220,302],{"class":111},[62,8222,4097],{"class":115},[62,8224,4100],{"class":119},[62,8226,123],{"class":111},[62,8228,126],{"class":119},[62,8230,8231],{"class":68},"post in page.feed.posts",[62,8233,126],{"class":119},[62,8235,308],{"class":111},[62,8237,8238,8240,8242],{"class":64,"line":78},[62,8239,112],{"class":111},[62,8241,4296],{"class":115},[62,8243,308],{"class":111},[62,8245,8246,8248,8250,8252,8254,8256,8259,8261],{"class":64,"line":84},[62,8247,340],{"class":111},[62,8249,4306],{"class":115},[62,8251,4016],{"class":119},[62,8253,123],{"class":111},[62,8255,126],{"class":119},[62,8257,8258],{"class":68},"p-6 bg-white hover:shadow-xl rounded transition-shadow duration-300",[62,8260,126],{"class":119},[62,8262,308],{"class":111},[62,8264,8265,8267,8269,8271,8273,8275,8278,8280],{"class":64,"line":90},[62,8266,4094],{"class":111},[62,8268,15],{"class":115},[62,8270,4016],{"class":119},[62,8272,123],{"class":111},[62,8274,126],{"class":119},[62,8276,8277],{"class":68},"m-0 mb-1 text-sm text-slate-500",[62,8279,126],{"class":119},[62,8281,308],{"class":111},[62,8283,8284,8287,8290,8292,8295],{"class":64,"line":236},[62,8285,8286],{"class":68},"        {{ ",[62,8288,8289],{"class":765},"page.formattedDate",[62,8291,1048],{"class":68},[62,8293,8294],{"class":765},"post.pubDate",[62,8296,8297],{"class":68},") }}\n",[62,8299,8300,8302,8304],{"class":64,"line":242},[62,8301,4421],{"class":111},[62,8303,15],{"class":115},[62,8305,308],{"class":111},[62,8307,8308],{"class":64,"line":248},[62,8309,297],{"emptyLinePlaceholder":296},[62,8311,8312,8314,8316,8318,8320,8322,8325,8327],{"class":64,"line":382},[62,8313,4094],{"class":111},[62,8315,41],{"class":115},[62,8317,4016],{"class":119},[62,8319,123],{"class":111},[62,8321,126],{"class":119},[62,8323,8324],{"class":68},"m-0 mb-4 text-2xl leading-6",[62,8326,126],{"class":119},[62,8328,308],{"class":111},[62,8330,8331,8333,8335,8337,8339,8341,8343,8346,8348,8350,8352,8354,8356,8359,8361],{"class":64,"line":392},[62,8332,4303],{"class":111},[62,8334,25],{"class":115},[62,8336,8080],{"class":119},[62,8338,123],{"class":111},[62,8340,126],{"class":119},[62,8342,3673],{"class":68},[62,8344,8345],{"class":765},"post.link",[62,8347,3690],{"class":68},[62,8349,126],{"class":119},[62,8351,4016],{"class":119},[62,8353,123],{"class":111},[62,8355,126],{"class":119},[62,8357,8358],{"class":68},"text-slate-800 hover:text-slate-700 [text-decoration:none]",[62,8360,126],{"class":119},[62,8362,308],{"class":111},[62,8364,8365,8368,8371],{"class":64,"line":402},[62,8366,8367],{"class":68},"          {{ ",[62,8369,8370],{"class":765},"post.title",[62,8372,5602],{"class":68},[62,8374,8375,8377,8379],{"class":64,"line":442},[62,8376,4412],{"class":111},[62,8378,25],{"class":115},[62,8380,308],{"class":111},[62,8382,8383,8385,8387],{"class":64,"line":451},[62,8384,4421],{"class":111},[62,8386,41],{"class":115},[62,8388,308],{"class":111},[62,8390,8391],{"class":64,"line":456},[62,8392,297],{"emptyLinePlaceholder":296},[62,8394,8395,8397,8399,8401,8403,8405,8408,8410],{"class":64,"line":465},[62,8396,4094],{"class":111},[62,8398,15],{"class":115},[62,8400,4016],{"class":119},[62,8402,123],{"class":111},[62,8404,126],{"class":119},[62,8406,8407],{"class":68},"m-0 text-base",[62,8409,126],{"class":119},[62,8411,308],{"class":111},[62,8413,8414,8416,8418,8420,8422,8424,8426,8428,8430,8432,8434,8436,8438,8441,8443],{"class":64,"line":471},[62,8415,4303],{"class":111},[62,8417,25],{"class":115},[62,8419,8080],{"class":119},[62,8421,123],{"class":111},[62,8423,126],{"class":119},[62,8425,3673],{"class":68},[62,8427,8345],{"class":765},[62,8429,3690],{"class":68},[62,8431,126],{"class":119},[62,8433,4016],{"class":119},[62,8435,123],{"class":111},[62,8437,126],{"class":119},[62,8439,8440],{"class":68},"text-slate-500 hover:text-slate-700 [text-decoration:none]",[62,8442,126],{"class":119},[62,8444,308],{"class":111},[62,8446,8447,8449,8452],{"class":64,"line":480},[62,8448,8367],{"class":68},[62,8450,8451],{"class":765},"post.summary",[62,8453,5602],{"class":68},[62,8455,8456,8458,8460],{"class":64,"line":485},[62,8457,4412],{"class":111},[62,8459,25],{"class":115},[62,8461,308],{"class":111},[62,8463,8464,8466,8468],{"class":64,"line":494},[62,8465,4421],{"class":111},[62,8467,15],{"class":115},[62,8469,308],{"class":111},[62,8471,8472,8474,8476],{"class":64,"line":500},[62,8473,4126],{"class":111},[62,8475,4306],{"class":115},[62,8477,308],{"class":111},[62,8479,8480,8482,8484],{"class":64,"line":509},[62,8481,385],{"class":111},[62,8483,4296],{"class":115},[62,8485,308],{"class":111},[62,8487,8488,8490,8492,8494,8496,8498,8501,8503],{"class":64,"line":514},[62,8489,112],{"class":111},[62,8491,321],{"class":115},[62,8493,324],{"class":119},[62,8495,123],{"class":111},[62,8497,126],{"class":119},[62,8499,8500],{"class":68},"!loop.last",[62,8502,126],{"class":119},[62,8504,308],{"class":111},[62,8506,8507,8509,8511],{"class":64,"line":524},[62,8508,340],{"class":111},[62,8510,4296],{"class":115},[62,8512,308],{"class":111},[62,8514,8515,8517,8519,8521,8523,8525,8528,8530,8532,8534],{"class":64,"line":566},[62,8516,4094],{"class":111},[62,8518,4306],{"class":115},[62,8520,4016],{"class":119},[62,8522,123],{"class":111},[62,8524,126],{"class":119},[62,8526,8527],{"class":68},"h-24",[62,8529,126],{"class":119},[62,8531,6589],{"class":111},[62,8533,4306],{"class":115},[62,8535,308],{"class":111},[62,8537,8538,8540,8542],{"class":64,"line":575},[62,8539,4126],{"class":111},[62,8541,4296],{"class":115},[62,8543,308],{"class":111},[62,8545,8546,8548,8550],{"class":64,"line":580},[62,8547,385],{"class":111},[62,8549,321],{"class":115},[62,8551,308],{"class":111},[62,8553,8554,8556,8558],{"class":64,"line":589},[62,8555,700],{"class":111},[62,8557,4097],{"class":115},[62,8559,308],{"class":111},[15,8561,8562,8563,8565],{},"That's it, run ",[59,8564,3379],{}," to generate the production-ready email template.",[15,8567,8568,8569,39],{},"Take a look at the ",[25,8570,8573],{"href":8571,"rel":8572},"https://codepen.io/maizzle/pen/ExjvmdP",[37],"final result on CodePen",[41,8575,3460],{"id":3459},[733,8577,8578,8584,8589,8595,8602],{},[736,8579,8580],{},[25,8581,7530],{"href":8582,"rel":8583},"https://laracasts.com/",[37],[736,8585,8586],{},[25,8587,7493],{"href":7499,"rel":8588},[37],[736,8590,8591],{},[25,8592,8594],{"href":8593},"/docs/events/","Maizzle Events",[736,8596,8597,8601],{},[25,8598,3468],{"href":8599,"rel":8600},"https://github.com/maizzle/starter-rss",[37]," for this tutorial",[736,8603,8604],{},[25,8605,8607],{"href":8571,"rel":8606},[37],"CodePen preview",[3477,8609,8610],{},"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":57,"searchDepth":72,"depth":72,"links":8612},[8613,8616,8617,8618,8619,8623],{"id":6478,"depth":72,"text":6479,"children":8614},[8615],{"id":7493,"depth":78,"text":7493},{"id":7518,"depth":72,"text":7519},{"id":7586,"depth":72,"text":7587},{"id":7892,"depth":72,"text":7893},{"id":2780,"depth":72,"text":6718,"children":8620},[8621,8622],{"id":8029,"depth":78,"text":8030},{"id":8199,"depth":78,"text":8200},{"id":3459,"depth":72,"text":3460},"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":7441,"description":8625},{"loc":8627},"guides/rss-feed","vsoCcP_hY258kdAEGxiODevMXkH4DPReJUrHNT0upaI",{"id":8633,"title":8634,"body":8635,"date":10275,"description":10276,"extension":3496,"meta":10277,"navigation":296,"path":10278,"seo":10279,"sitemap":10280,"stem":10281,"__hash__":10282},"guides/guides/wordpress-api.md","Using the WordPress API to create a newsletter from your posts",{"type":8,"value":8636,"toc":10260},[8637,8640,8643,8646,8653,8655,8658,8668,8673,8675,8677,8681,8684,8698,8705,8708,8715,8721,8727,8736,8739,8745,8755,8759,8765,8821,8825,8831,8835,8838,8841,9470,9480,9484,9489,9588,9591,9618,9622,9630,9698,9703,9706,10170,10173,10193,10197,10200,10211,10214,10217,10233,10235,10257],[11,8638,8634],{"id":8639},"using-the-wordpress-api-to-create-a-newsletter-from-your-posts",[15,8641,7450],{"className":8642},[6450],[15,8644,8645],{},"Learn how to use Maizzle to fetch content from an API endpoint, process it, and display it in an HTML email newsletter.",[15,8647,8648,8649,7466],{},"You may ",[25,8650,7465],{"href":8651,"rel":8652},"https://codepen.io/maizzle/pen/wvaeOVM?editors=1000",[37],[41,8654,6479],{"id":6478},[15,8656,8657],{},"As always, let's start by creating a new Maizzle project.",[52,8659,8660],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,8661,8662],{"__ignoreMap":57},[62,8663,8664,8666],{"class":64,"line":65},[62,8665,175],{"class":115},[62,8667,178],{"class":68},[15,8669,181,8670,185],{},[59,8671,8672],{},"./example-wordpress",[15,8674,188],{},[15,8676,191],{},[41,8678,8680],{"id":8679},"wordpress-api","WordPress API",[15,8682,8683],{},"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.",[15,8685,8686,8687,8692,8693,39],{},"Given its popularity, we'll be using the ",[25,8688,8691],{"href":8689,"rel":8690},"https://developer.wordpress.org/rest-api/",[37],"WordPress REST API"," in our example. We'll also need to fetch data from a real blog, so let's use the wonderful ",[25,8694,8697],{"href":8695,"rel":8696},"https://css-tricks.com",[37],"CSS-Tricks",[15,8699,8700,8701],{},"The WordPress API on CSS-Tricks is available at ",[25,8702,8703],{"href":8703,"rel":8704},"https://css-tricks.com/wp-json/wp/v2/",[37],[15,8706,8707],{},"Click that link and you'll see the various routes you can access.",[193,8709,8711,8714],{"id":8710},"posts-route",[59,8712,8713],{},"/posts"," route",[15,8716,8717,8718,8720],{},"We can fetch posts from the ",[59,8719,8713],{}," route:",[15,8722,8723],{},[25,8724,8725],{"href":8725,"rel":8726},"https://css-tricks.com/wp-json/wp/v2/posts/",[37],[15,8728,8729,8730,8735],{},"We can also use ",[25,8731,8734],{"href":8732,"rel":8733},"https://developer.wordpress.org/rest-api/reference/posts/#arguments",[37],"query string parameters"," in order to refine our API call.",[15,8737,8738],{},"For example, this only asks for the 3 latest posts:",[15,8740,8741],{},[25,8742,8743],{"href":8743,"rel":8744},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=3&_embed=1",[37],[3587,8746,8747,8750,8751,8754],{},[59,8748,8749],{},"_embed=1","\n is a request scope that adds a few more fields to the response. We use it to include \n",[59,8752,8753],{},"_embedded[\"wp:featuredmedia\"]","\n.\n",[41,8756,8758],{"id":8757},"fetch-posts","Fetch posts",[15,8760,2114,8761,8764],{},[59,8762,8763],{},"\u003Cfetch>"," tag to fetch posts from the CSS-Tricks WordPress API.",[52,8766,8769],{"className":54,"code":8767,"filename":8768,"language":56,"meta":57,"style":57},"\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",[59,8770,8771,8779,8800,8805,8813],{"__ignoreMap":57},[62,8772,8773,8775,8777],{"class":64,"line":65},[62,8774,302],{"class":111},[62,8776,305],{"class":115},[62,8778,308],{"class":111},[62,8780,8781,8783,8786,8789,8791,8793,8796,8798],{"class":64,"line":72},[62,8782,112],{"class":111},[62,8784,8785],{"class":115},"fetch",[62,8787,8788],{"class":119}," url",[62,8790,123],{"class":111},[62,8792,126],{"class":119},[62,8794,8795],{"class":68},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1",[62,8797,126],{"class":119},[62,8799,308],{"class":111},[62,8801,8802],{"class":64,"line":78},[62,8803,8804],{"class":313},"    \u003C!-- Posts are now available in {{ response }} -->\n",[62,8806,8807,8809,8811],{"class":64,"line":84},[62,8808,385],{"class":111},[62,8810,8785],{"class":115},[62,8812,308],{"class":111},[62,8814,8815,8817,8819],{"class":64,"line":90},[62,8816,700],{"class":111},[62,8818,305],{"class":115},[62,8820,308],{"class":111},[41,8822,8824],{"id":8823},"use-in-template","Use in Template",[15,8826,8827,8830],{},[59,8828,8829],{},"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 ✌",[193,8832,8834],{"id":8833},"featured-post","Featured Post",[15,8836,8837],{},"Let's update the Hero with background image to show the first post.",[15,8839,8840],{},"Our code becomes:",[52,8842,8844],{"className":3641,"code":8843,"filename":8768,"language":3643,"meta":57,"style":57},"---\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",[59,8845,8846,8850,8860,8873,8887,8891,8895,8903,8921,8926,8934,9012,9017,9022,9027,9032,9060,9078,9086,9109,9117,9136,9154,9162,9181,9198,9206,9232,9240,9248,9280,9335,9344,9353,9361,9369,9391,9399,9407,9433,9438,9446,9454,9462],{"__ignoreMap":57},[62,8847,8848],{"class":64,"line":65},[62,8849,282],{"class":68},[62,8851,8852,8855,8857],{"class":64,"line":72},[62,8853,8854],{"class":115},"bodyClass",[62,8856,203],{"class":111},[62,8858,8859],{"class":68}," bg-gray-200\n",[62,8861,8862,8864,8866,8868,8871],{"class":64,"line":78},[62,8863,3915],{"class":115},[62,8865,203],{"class":111},[62,8867,4916],{"class":119},[62,8869,8870],{"class":68},"Latest posts on CSS-Tricks",[62,8872,4164],{"class":119},[62,8874,8875,8878,8880,8882,8885],{"class":64,"line":84},[62,8876,8877],{"class":115},"preheader",[62,8879,203],{"class":111},[62,8881,4916],{"class":119},[62,8883,8884],{"class":68},"👀 Lorem, ipsum, and much dolor in this week's edition",[62,8886,4164],{"class":119},[62,8888,8889],{"class":64,"line":90},[62,8890,282],{"class":68},[62,8892,8893],{"class":64,"line":236},[62,8894,297],{"emptyLinePlaceholder":296},[62,8896,8897,8899,8901],{"class":64,"line":242},[62,8898,302],{"class":111},[62,8900,305],{"class":115},[62,8902,308],{"class":111},[62,8904,8905,8907,8909,8911,8913,8915,8917,8919],{"class":64,"line":248},[62,8906,112],{"class":111},[62,8908,8785],{"class":115},[62,8910,8788],{"class":119},[62,8912,123],{"class":111},[62,8914,126],{"class":119},[62,8916,8795],{"class":68},[62,8918,126],{"class":119},[62,8920,308],{"class":111},[62,8922,8923],{"class":64,"line":382},[62,8924,8925],{"class":313},"    \u003C!-- ... existing template markup before the HERO \u003Ctr> -->\n",[62,8927,8928,8930,8932],{"class":64,"line":392},[62,8929,340],{"class":111},[62,8931,4296],{"class":115},[62,8933,308],{"class":111},[62,8935,8936,8938,8940,8942,8944,8946,8949,8951,8953,8955,8957,8960,8963,8965,8967,8969,8972,8974,8976,8979,8981,8984,8986,8988,8990,8993,8995,8998,9000,9003,9005,9008,9010],{"class":64,"line":402},[62,8937,4094],{"class":111},[62,8939,4306],{"class":115},[62,8941,4016],{"class":119},[62,8943,123],{"class":111},[62,8945,126],{"class":119},[62,8947,8948],{"class":68},"bg-top bg-no-repeat bg-cover rounded text-left",[62,8950,126],{"class":119},[62,8952,4998],{"class":119},[62,8954,123],{"class":111},[62,8956,126],{"class":119},[62,8958,8959],{"class":68},"background-image: url('{{ ",[62,8961,8962],{"class":765},"response",[62,8964,980],{"class":68},[62,8966,4883],{"class":765},[62,8968,997],{"class":68},[62,8970,8971],{"class":765},"._embedded",[62,8973,980],{"class":68},[62,8975,3682],{"class":119},[62,8977,8978],{"class":68},"wp:featuredmedia",[62,8980,3682],{"class":119},[62,8982,8983],{"class":68},"][",[62,8985,4883],{"class":765},[62,8987,8983],{"class":68},[62,8989,3682],{"class":119},[62,8991,8992],{"class":68},"source_url",[62,8994,3682],{"class":119},[62,8996,8997],{"class":68},"] || ",[62,8999,3682],{"class":119},[62,9001,9002],{"class":68},"https://via.placeholder.com/600x400",[62,9004,3682],{"class":119},[62,9006,9007],{"class":68}," }}');",[62,9009,126],{"class":119},[62,9011,308],{"class":111},[62,9013,9014],{"class":64,"line":442},[62,9015,9016],{"class":313},"        \u003C!--[if mso]>\n",[62,9018,9019],{"class":64,"line":451},[62,9020,9021],{"class":313},"        \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",[62,9023,9024],{"class":64,"line":456},[62,9025,9026],{"class":313},"        \u003Cv:rect fill=\"false\" stroke=\"false\" style=\"position:absolute;width:600px;height:400px;\">\n",[62,9028,9029],{"class":64,"line":465},[62,9030,9031],{"class":313},"        \u003Cv:textbox inset=\"0,0,0,0\">\u003Cdiv>\u003C![endif]-->\n",[62,9033,9034,9036,9038,9040,9042,9044,9047,9049,9051,9054,9056,9058],{"class":64,"line":471},[62,9035,4303],{"class":111},[62,9037,519],{"class":115},[62,9039,4016],{"class":119},[62,9041,123],{"class":111},[62,9043,126],{"class":119},[62,9045,9046],{"class":68},"leading-8",[62,9048,126],{"class":119},[62,9050,134],{"class":111},[62,9052,9053],{"class":115},"‍",[62,9055,700],{"class":111},[62,9057,519],{"class":115},[62,9059,308],{"class":111},[62,9061,9062,9064,9066,9068,9070,9072,9074,9076],{"class":64,"line":480},[62,9063,4303],{"class":111},[62,9065,4276],{"class":115},[62,9067,4016],{"class":119},[62,9069,123],{"class":111},[62,9071,126],{"class":119},[62,9073,4335],{"class":68},[62,9075,126],{"class":119},[62,9077,308],{"class":111},[62,9079,9080,9082,9084],{"class":64,"line":485},[62,9081,4324],{"class":111},[62,9083,4296],{"class":115},[62,9085,308],{"class":111},[62,9087,9088,9090,9092,9094,9096,9098,9101,9103,9105,9107],{"class":64,"line":494},[62,9089,4344],{"class":111},[62,9091,4306],{"class":115},[62,9093,4016],{"class":119},[62,9095,123],{"class":111},[62,9097,126],{"class":119},[62,9099,9100],{"class":68},"w-12 sm:w-4",[62,9102,126],{"class":119},[62,9104,6589],{"class":111},[62,9106,4306],{"class":115},[62,9108,308],{"class":111},[62,9110,9111,9113,9115],{"class":64,"line":500},[62,9112,4344],{"class":111},[62,9114,4306],{"class":115},[62,9116,308],{"class":111},[62,9118,9119,9121,9123,9125,9127,9129,9132,9134],{"class":64,"line":509},[62,9120,4353],{"class":111},[62,9122,11],{"class":115},[62,9124,4016],{"class":119},[62,9126,123],{"class":111},[62,9128,126],{"class":119},[62,9130,9131],{"class":68},"m-0 mb-4 text-4xl text-white sm:leading-10",[62,9133,126],{"class":119},[62,9135,308],{"class":111},[62,9137,9138,9141,9143,9145,9147,9149,9152],{"class":64,"line":514},[62,9139,9140],{"class":68},"                {{ ",[62,9142,8962],{"class":765},[62,9144,980],{"class":68},[62,9146,4883],{"class":765},[62,9148,997],{"class":68},[62,9150,9151],{"class":765},".title.rendered",[62,9153,5602],{"class":68},[62,9155,9156,9158,9160],{"class":64,"line":524},[62,9157,4385],{"class":111},[62,9159,11],{"class":115},[62,9161,308],{"class":111},[62,9163,9164,9166,9168,9170,9172,9174,9177,9179],{"class":64,"line":566},[62,9165,4353],{"class":111},[62,9167,519],{"class":115},[62,9169,4016],{"class":119},[62,9171,123],{"class":111},[62,9173,126],{"class":119},[62,9175,9176],{"class":68},"m-0 text-white text-lg leading-6",[62,9178,126],{"class":119},[62,9180,308],{"class":111},[62,9182,9183,9185,9187,9189,9191,9193,9196],{"class":64,"line":575},[62,9184,9140],{"class":68},[62,9186,8962],{"class":765},[62,9188,980],{"class":68},[62,9190,4883],{"class":765},[62,9192,997],{"class":68},[62,9194,9195],{"class":765},".excerpt.rendered",[62,9197,5602],{"class":68},[62,9199,9200,9202,9204],{"class":64,"line":580},[62,9201,4385],{"class":111},[62,9203,519],{"class":115},[62,9205,308],{"class":111},[62,9207,9208,9210,9212,9214,9216,9218,9220,9222,9224,9226,9228,9230],{"class":64,"line":589},[62,9209,4353],{"class":111},[62,9211,519],{"class":115},[62,9213,4016],{"class":119},[62,9215,123],{"class":111},[62,9217,126],{"class":119},[62,9219,9046],{"class":68},[62,9221,126],{"class":119},[62,9223,134],{"class":111},[62,9225,9053],{"class":115},[62,9227,700],{"class":111},[62,9229,519],{"class":115},[62,9231,308],{"class":111},[62,9233,9234,9236,9238],{"class":64,"line":595},[62,9235,4353],{"class":111},[62,9237,4276],{"class":115},[62,9239,308],{"class":111},[62,9241,9242,9244,9246],{"class":64,"line":604},[62,9243,4373],{"class":111},[62,9245,4296],{"class":115},[62,9247,308],{"class":111},[62,9249,9250,9253,9256,9258,9260,9262,9265,9267,9269,9271,9273,9276,9278],{"class":64,"line":609},[62,9251,9252],{"class":111},"                  \u003C",[62,9254,9255],{"class":115},"th",[62,9257,4016],{"class":119},[62,9259,123],{"class":111},[62,9261,126],{"class":119},[62,9263,9264],{"class":68},"bg-indigo-800 hover:bg-indigo-700 rounded",[62,9266,126],{"class":119},[62,9268,4998],{"class":119},[62,9270,123],{"class":111},[62,9272,126],{"class":119},[62,9274,9275],{"class":68},"mso-padding-alt: 16px 24px;",[62,9277,126],{"class":119},[62,9279,308],{"class":111},[62,9281,9282,9285,9287,9289,9291,9293,9295,9297,9299,9301,9303,9306,9308,9310,9312,9314,9316,9319,9321,9323,9326,9329,9331,9333],{"class":64,"line":618},[62,9283,9284],{"class":111},"                    \u003C",[62,9286,25],{"class":115},[62,9288,8080],{"class":119},[62,9290,123],{"class":111},[62,9292,126],{"class":119},[62,9294,3673],{"class":68},[62,9296,8962],{"class":765},[62,9298,980],{"class":68},[62,9300,4883],{"class":765},[62,9302,997],{"class":68},[62,9304,9305],{"class":765},".link",[62,9307,3690],{"class":68},[62,9309,126],{"class":119},[62,9311,4016],{"class":119},[62,9313,123],{"class":111},[62,9315,126],{"class":119},[62,9317,9318],{"class":68},"block font-semibold text-white text-base leading-full py-4 px-6 [text-decoration:none]",[62,9320,126],{"class":119},[62,9322,134],{"class":111},[62,9324,9325],{"class":68},"Read more ",[62,9327,9328],{"class":115},"→",[62,9330,700],{"class":111},[62,9332,25],{"class":115},[62,9334,308],{"class":111},[62,9336,9337,9340,9342],{"class":64,"line":659},[62,9338,9339],{"class":111},"                  \u003C/",[62,9341,9255],{"class":115},[62,9343,308],{"class":111},[62,9345,9346,9349,9351],{"class":64,"line":668},[62,9347,9348],{"class":111},"                \u003C/",[62,9350,4296],{"class":115},[62,9352,308],{"class":111},[62,9354,9355,9357,9359],{"class":64,"line":673},[62,9356,4385],{"class":111},[62,9358,4276],{"class":115},[62,9360,308],{"class":111},[62,9362,9363,9365,9367],{"class":64,"line":682},[62,9364,4394],{"class":111},[62,9366,4306],{"class":115},[62,9368,308],{"class":111},[62,9370,9371,9373,9375,9377,9379,9381,9383,9385,9387,9389],{"class":64,"line":688},[62,9372,4344],{"class":111},[62,9374,4306],{"class":115},[62,9376,4016],{"class":119},[62,9378,123],{"class":111},[62,9380,126],{"class":119},[62,9382,9100],{"class":68},[62,9384,126],{"class":119},[62,9386,6589],{"class":111},[62,9388,4306],{"class":115},[62,9390,308],{"class":111},[62,9392,9393,9395,9397],{"class":64,"line":697},[62,9394,4403],{"class":111},[62,9396,4296],{"class":115},[62,9398,308],{"class":111},[62,9400,9401,9403,9405],{"class":64,"line":1552},[62,9402,4412],{"class":111},[62,9404,4276],{"class":115},[62,9406,308],{"class":111},[62,9408,9409,9411,9413,9415,9417,9419,9421,9423,9425,9427,9429,9431],{"class":64,"line":1575},[62,9410,4303],{"class":111},[62,9412,519],{"class":115},[62,9414,4016],{"class":119},[62,9416,123],{"class":111},[62,9418,126],{"class":119},[62,9420,9046],{"class":68},[62,9422,126],{"class":119},[62,9424,134],{"class":111},[62,9426,9053],{"class":115},[62,9428,700],{"class":111},[62,9430,519],{"class":115},[62,9432,308],{"class":111},[62,9434,9435],{"class":64,"line":1589},[62,9436,9437],{"class":313},"        \u003C!--[if mso]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[62,9439,9440,9442,9444],{"class":64,"line":1607},[62,9441,4421],{"class":111},[62,9443,4306],{"class":115},[62,9445,308],{"class":111},[62,9447,9448,9450,9452],{"class":64,"line":1632},[62,9449,4126],{"class":111},[62,9451,4296],{"class":115},[62,9453,308],{"class":111},[62,9455,9456,9458,9460],{"class":64,"line":1638},[62,9457,385],{"class":111},[62,9459,8785],{"class":115},[62,9461,308],{"class":111},[62,9463,9464,9466,9468],{"class":64,"line":1671},[62,9465,700],{"class":111},[62,9467,305],{"class":115},[62,9469,308],{"class":111},[15,9471,7590,9472,9475,9476,9479],{},[59,9473,9474],{},"response[index]"," to output data for each post, manually. For example, we would use ",[59,9477,9478],{},"response[1].title.rendered"," to show the title of the second post.",[193,9481,9483],{"id":9482},"post-dates","Post dates",[15,9485,7899,9486,9488],{},[59,9487,4507],{}," and use it to format the post's date according to our audience's locale:",[52,9490,9492],{"className":754,"code":9491,"filename":4507,"language":757,"meta":57,"style":57},"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",[59,9493,9494,9506,9518,9536,9580,9584],{"__ignoreMap":57},[62,9495,9496,9498,9500,9502,9504],{"class":64,"line":65},[62,9497,7321],{"class":115},[62,9499,39],{"class":790},[62,9501,7326],{"class":115},[62,9503,4657],{"class":772},[62,9505,791],{"class":790},[62,9507,9508,9510,9512,9514,9516],{"class":64,"line":72},[62,9509,7920],{"class":947},[62,9511,1048],{"class":790},[62,9513,7925],{"class":765},[62,9515,1054],{"class":790},[62,9517,791],{"class":790},[62,9519,9520,9522,9524,9526,9528,9530,9532,9534],{"class":64,"line":78},[62,9521,2301],{"class":765},[62,9523,7936],{"class":68},[62,9525,123],{"class":772},[62,9527,7669],{"class":115},[62,9529,7943],{"class":947},[62,9531,1048],{"class":68},[62,9533,7925],{"class":765},[62,9535,1226],{"class":68},[62,9537,9538,9540,9542,9544,9546,9548,9550,9552,9554,9556,9558,9560,9562,9564,9566,9568,9570,9572,9574,9576,9578],{"class":64,"line":84},[62,9539,2384],{"class":115},[62,9541,7956],{"class":765},[62,9543,39],{"class":790},[62,9545,7961],{"class":947},[62,9547,1048],{"class":68},[62,9549,7966],{"class":68},[62,9551,1287],{"class":790},[62,9553,2732],{"class":790},[62,9555,7973],{"class":68},[62,9557,203],{"class":790},[62,9559,7978],{"class":68},[62,9561,1287],{"class":790},[62,9563,7983],{"class":68},[62,9565,203],{"class":790},[62,9567,7988],{"class":68},[62,9569,1287],{"class":790},[62,9571,7993],{"class":68},[62,9573,203],{"class":790},[62,9575,7978],{"class":68},[62,9577,2748],{"class":790},[62,9579,1226],{"class":68},[62,9581,9582],{"class":64,"line":90},[62,9583,1321],{"class":790},[62,9585,9586],{"class":64,"line":236},[62,9587,2028],{"class":790},[15,9589,9590],{},"We can then display it in the template with an expression like this:",[52,9592,9594],{"className":3641,"code":9593,"language":3643,"meta":57,"style":57},"{{ page.formattedDate(response[1].date) }}\n",[59,9595,9596],{"__ignoreMap":57},[62,9597,9598,9600,9602,9604,9606,9608,9611,9613,9616],{"class":64,"line":65},[62,9599,3673],{"class":68},[62,9601,8289],{"class":765},[62,9603,1048],{"class":68},[62,9605,8962],{"class":765},[62,9607,980],{"class":68},[62,9609,9610],{"class":765},"1",[62,9612,997],{"class":68},[62,9614,9615],{"class":765},".date",[62,9617,8297],{"class":68},[193,9619,9621],{"id":9620},"looping","Looping",[15,9623,4593,9624,9627,9628,203],{},[59,9625,9626],{},"\u003Ceach>"," tag in Maizzle to loop over each item in the ",[59,9629,8962],{},[52,9631,9633],{"className":3641,"code":9632,"language":3643,"meta":57,"style":57},"\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",[59,9634,9635,9653,9672,9682,9690],{"__ignoreMap":57},[62,9636,9637,9639,9641,9643,9645,9647,9649,9651],{"class":64,"line":65},[62,9638,302],{"class":111},[62,9640,8785],{"class":115},[62,9642,8788],{"class":119},[62,9644,123],{"class":111},[62,9646,126],{"class":119},[62,9648,8795],{"class":68},[62,9650,126],{"class":119},[62,9652,308],{"class":111},[62,9654,9655,9657,9659,9661,9663,9665,9668,9670],{"class":64,"line":72},[62,9656,112],{"class":111},[62,9658,4097],{"class":115},[62,9660,4100],{"class":119},[62,9662,123],{"class":111},[62,9664,126],{"class":119},[62,9666,9667],{"class":68},"post in response",[62,9669,126],{"class":119},[62,9671,308],{"class":111},[62,9673,9674,9677,9680],{"class":64,"line":78},[62,9675,9676],{"class":68},"    {{ ",[62,9678,9679],{"class":765},"post.title.rendered",[62,9681,5602],{"class":68},[62,9683,9684,9686,9688],{"class":64,"line":84},[62,9685,385],{"class":111},[62,9687,4097],{"class":115},[62,9689,308],{"class":111},[62,9691,9692,9694,9696],{"class":64,"line":90},[62,9693,700],{"class":111},[62,9695,8785],{"class":115},[62,9697,308],{"class":111},[15,9699,9700,9701,39],{},"Want to loop over a specific subset only? You can use ",[25,9702,5555],{"href":5562},[15,9704,9705],{},"For example, let's show the last 2 posts in a list format at the end of the template:",[52,9707,9709],{"className":3641,"code":9708,"filename":8768,"language":3643,"meta":57,"style":57},"\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",[59,9710,9711,9719,9737,9765,9792,9810,9829,9837,9845,9864,9878,9886,9906,9939,9947,9955,9963,9982,9991,9999,10018,10036,10044,10063,10090,10098,10106,10114,10122,10130,10138,10146,10154,10162],{"__ignoreMap":57},[62,9712,9713,9715,9717],{"class":64,"line":65},[62,9714,302],{"class":111},[62,9716,305],{"class":115},[62,9718,308],{"class":111},[62,9720,9721,9723,9725,9727,9729,9731,9733,9735],{"class":64,"line":72},[62,9722,112],{"class":111},[62,9724,8785],{"class":115},[62,9726,8788],{"class":119},[62,9728,123],{"class":111},[62,9730,126],{"class":119},[62,9732,8795],{"class":68},[62,9734,126],{"class":119},[62,9736,308],{"class":111},[62,9738,9739,9741,9743,9745,9747,9749,9752,9754,9756,9759,9761,9763],{"class":64,"line":78},[62,9740,340],{"class":111},[62,9742,193],{"class":115},[62,9744,4016],{"class":119},[62,9746,123],{"class":111},[62,9748,126],{"class":119},[62,9750,9751],{"class":68},"m-0 text-base font-semibold text-gray-500 uppercase",[62,9753,126],{"class":119},[62,9755,134],{"class":111},[62,9757,9758],{"class":68},"From the archives",[62,9760,700],{"class":111},[62,9762,193],{"class":115},[62,9764,308],{"class":111},[62,9766,9767,9769,9771,9773,9775,9777,9780,9782,9784,9786,9788,9790],{"class":64,"line":84},[62,9768,340],{"class":111},[62,9770,519],{"class":115},[62,9772,4016],{"class":119},[62,9774,123],{"class":111},[62,9776,126],{"class":119},[62,9778,9779],{"class":68},"leading-6",[62,9781,126],{"class":119},[62,9783,134],{"class":111},[62,9785,9053],{"class":115},[62,9787,700],{"class":111},[62,9789,519],{"class":115},[62,9791,308],{"class":111},[62,9793,9794,9796,9798,9800,9802,9804,9806,9808],{"class":64,"line":90},[62,9795,340],{"class":111},[62,9797,4276],{"class":115},[62,9799,4016],{"class":119},[62,9801,123],{"class":111},[62,9803,126],{"class":119},[62,9805,4335],{"class":68},[62,9807,126],{"class":119},[62,9809,308],{"class":111},[62,9811,9812,9814,9816,9818,9820,9822,9825,9827],{"class":64,"line":236},[62,9813,4094],{"class":111},[62,9815,4097],{"class":115},[62,9817,4100],{"class":119},[62,9819,123],{"class":111},[62,9821,126],{"class":119},[62,9823,9824],{"class":68},"post in response.slice(-2)",[62,9826,126],{"class":119},[62,9828,308],{"class":111},[62,9830,9831,9833,9835],{"class":64,"line":242},[62,9832,4303],{"class":111},[62,9834,4296],{"class":115},[62,9836,308],{"class":111},[62,9838,9839,9841,9843],{"class":64,"line":248},[62,9840,4324],{"class":111},[62,9842,4306],{"class":115},[62,9844,308],{"class":111},[62,9846,9847,9849,9851,9853,9855,9857,9860,9862],{"class":64,"line":382},[62,9848,4344],{"class":111},[62,9850,15],{"class":115},[62,9852,4016],{"class":119},[62,9854,123],{"class":111},[62,9856,126],{"class":119},[62,9858,9859],{"class":68},"text-xs text-gray-500 mb-0.5",[62,9861,126],{"class":119},[62,9863,308],{"class":111},[62,9865,9866,9869,9871,9873,9876],{"class":64,"line":392},[62,9867,9868],{"class":68},"              {{ ",[62,9870,8289],{"class":765},[62,9872,1048],{"class":68},[62,9874,9875],{"class":765},"post.date",[62,9877,8297],{"class":68},[62,9879,9880,9882,9884],{"class":64,"line":402},[62,9881,4394],{"class":111},[62,9883,15],{"class":115},[62,9885,308],{"class":111},[62,9887,9888,9890,9893,9895,9897,9899,9902,9904],{"class":64,"line":442},[62,9889,4344],{"class":111},[62,9891,9892],{"class":115},"h4",[62,9894,4016],{"class":119},[62,9896,123],{"class":111},[62,9898,126],{"class":119},[62,9900,9901],{"class":68},"m-0 mb-1 text-xl font-semibold",[62,9903,126],{"class":119},[62,9905,308],{"class":111},[62,9907,9908,9910,9912,9914,9916,9918,9920,9922,9924,9926,9928,9930,9932,9935,9937],{"class":64,"line":451},[62,9909,4353],{"class":111},[62,9911,25],{"class":115},[62,9913,8080],{"class":119},[62,9915,123],{"class":111},[62,9917,126],{"class":119},[62,9919,3673],{"class":68},[62,9921,8345],{"class":765},[62,9923,3690],{"class":68},[62,9925,126],{"class":119},[62,9927,4016],{"class":119},[62,9929,123],{"class":111},[62,9931,126],{"class":119},[62,9933,9934],{"class":68},"text-blue-500 hover:text-blue-400 [text-decoration:none]",[62,9936,126],{"class":119},[62,9938,308],{"class":111},[62,9940,9941,9943,9945],{"class":64,"line":456},[62,9942,9140],{"class":68},[62,9944,9679],{"class":765},[62,9946,5602],{"class":68},[62,9948,9949,9951,9953],{"class":64,"line":465},[62,9950,4385],{"class":111},[62,9952,25],{"class":115},[62,9954,308],{"class":111},[62,9956,9957,9959,9961],{"class":64,"line":471},[62,9958,4394],{"class":111},[62,9960,9892],{"class":115},[62,9962,308],{"class":111},[62,9964,9965,9967,9969,9971,9973,9975,9978,9980],{"class":64,"line":480},[62,9966,4344],{"class":111},[62,9968,519],{"class":115},[62,9970,4016],{"class":119},[62,9972,123],{"class":111},[62,9974,126],{"class":119},[62,9976,9977],{"class":68},"m-0 text-gray-500",[62,9979,126],{"class":119},[62,9981,308],{"class":111},[62,9983,9984,9986,9989],{"class":64,"line":485},[62,9985,9868],{"class":68},[62,9987,9988],{"class":765},"post.excerpt.rendered",[62,9990,5602],{"class":68},[62,9992,9993,9995,9997],{"class":64,"line":494},[62,9994,4394],{"class":111},[62,9996,519],{"class":115},[62,9998,308],{"class":111},[62,10000,10001,10003,10005,10007,10009,10011,10014,10016],{"class":64,"line":500},[62,10002,4344],{"class":111},[62,10004,321],{"class":115},[62,10006,324],{"class":119},[62,10008,123],{"class":111},[62,10010,126],{"class":119},[62,10012,10013],{"class":68},"loop.last",[62,10015,126],{"class":119},[62,10017,308],{"class":111},[62,10019,10020,10022,10024,10026,10028,10030,10032,10034],{"class":64,"line":509},[62,10021,4353],{"class":111},[62,10023,4276],{"class":115},[62,10025,4016],{"class":119},[62,10027,123],{"class":111},[62,10029,126],{"class":119},[62,10031,4335],{"class":68},[62,10033,126],{"class":119},[62,10035,308],{"class":111},[62,10037,10038,10040,10042],{"class":64,"line":514},[62,10039,4373],{"class":111},[62,10041,4296],{"class":115},[62,10043,308],{"class":111},[62,10045,10046,10048,10050,10052,10054,10056,10059,10061],{"class":64,"line":524},[62,10047,9252],{"class":111},[62,10049,4306],{"class":115},[62,10051,4016],{"class":119},[62,10053,123],{"class":111},[62,10055,126],{"class":119},[62,10057,10058],{"class":68},"py-6",[62,10060,126],{"class":119},[62,10062,308],{"class":111},[62,10064,10065,10067,10069,10071,10073,10075,10078,10080,10082,10084,10086,10088],{"class":64,"line":566},[62,10066,9284],{"class":111},[62,10068,519],{"class":115},[62,10070,4016],{"class":119},[62,10072,123],{"class":111},[62,10074,126],{"class":119},[62,10076,10077],{"class":68},"bg-gray-300 h-px leading-px",[62,10079,126],{"class":119},[62,10081,134],{"class":111},[62,10083,9053],{"class":115},[62,10085,700],{"class":111},[62,10087,519],{"class":115},[62,10089,308],{"class":111},[62,10091,10092,10094,10096],{"class":64,"line":575},[62,10093,9339],{"class":111},[62,10095,4306],{"class":115},[62,10097,308],{"class":111},[62,10099,10100,10102,10104],{"class":64,"line":580},[62,10101,9348],{"class":111},[62,10103,4296],{"class":115},[62,10105,308],{"class":111},[62,10107,10108,10110,10112],{"class":64,"line":589},[62,10109,4385],{"class":111},[62,10111,4276],{"class":115},[62,10113,308],{"class":111},[62,10115,10116,10118,10120],{"class":64,"line":595},[62,10117,4394],{"class":111},[62,10119,321],{"class":115},[62,10121,308],{"class":111},[62,10123,10124,10126,10128],{"class":64,"line":604},[62,10125,4403],{"class":111},[62,10127,4306],{"class":115},[62,10129,308],{"class":111},[62,10131,10132,10134,10136],{"class":64,"line":609},[62,10133,4412],{"class":111},[62,10135,4296],{"class":115},[62,10137,308],{"class":111},[62,10139,10140,10142,10144],{"class":64,"line":618},[62,10141,4421],{"class":111},[62,10143,4097],{"class":115},[62,10145,308],{"class":111},[62,10147,10148,10150,10152],{"class":64,"line":659},[62,10149,4126],{"class":111},[62,10151,4276],{"class":115},[62,10153,308],{"class":111},[62,10155,10156,10158,10160],{"class":64,"line":668},[62,10157,385],{"class":111},[62,10159,8785],{"class":115},[62,10161,308],{"class":111},[62,10163,10164,10166,10168],{"class":64,"line":673},[62,10165,700],{"class":111},[62,10167,305],{"class":115},[62,10169,308],{"class":111},[15,10171,10172],{},"Notes:",[733,10174,10175,10178],{},[736,10176,10177],{},"we also added the post date in a paragraph above the title",[736,10179,10180,10181,10188,10189,10192],{},"we're using ",[25,10182,10184,10187],{"href":10183},"/docs/tags#loop-meta",[59,10185,10186],{},"loop"," meta"," to output the divider only ",[5239,10190,10191],{},"between"," list items",[41,10194,10196],{"id":10195},"conclusion","Conclusion",[15,10198,10199],{},"All that we've done in this tutorial is to:",[4713,10201,10202,10208],{},[736,10203,10204,10205,10207],{},"Use the ",[59,10206,8763],{}," tag to fetch JSON data from an API endpoint",[736,10209,10210],{},"Use that data in a Maizzle template",[15,10212,10213],{},"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.",[15,10215,10216],{},"Some ideas:",[733,10218,10219,10222,10225],{},[736,10220,10221],{},"use your CMS as an authoring system for your newsletter's content",[736,10223,10224],{},"show the latest products from your store",[736,10226,10227,10228],{},"include data from ",[25,10229,10232],{"href":10230,"rel":10231},"https://github.com/public-apis/public-apis",[37],"public APIs",[41,10234,3460],{"id":3459},[733,10236,10237,10242,10246,10251],{},[736,10238,10239],{},[25,10240,8697],{"href":8695,"rel":10241},[37],[736,10243,10244],{},[25,10245,8594],{"href":27},[736,10247,10248],{},[25,10249,8691],{"href":8689,"rel":10250},[37],[736,10252,10253,8601],{},[25,10254,3468],{"href":10255,"rel":10256},"https://github.com/maizzle/starter-wordpress-api",[37],[3477,10258,10259],{},"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":57,"searchDepth":72,"depth":72,"links":10261},[10262,10263,10267,10268,10273,10274],{"id":6478,"depth":72,"text":6479},{"id":8679,"depth":72,"text":8680,"children":10264},[10265],{"id":8710,"depth":78,"text":10266},"/posts route",{"id":8757,"depth":72,"text":8758},{"id":8823,"depth":72,"text":8824,"children":10269},[10270,10271,10272],{"id":8833,"depth":78,"text":8834},{"id":9482,"depth":78,"text":9483},{"id":9620,"depth":78,"text":9621},{"id":10195,"depth":72,"text":10196},{"id":3459,"depth":72,"text":3460},"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":8634,"description":10276},{"loc":10278},"guides/wordpress-api","AfihqwOLOddMEiTa9y488rnGiPwLq-fyMTR5v4nSCyc",{"id":10284,"title":10285,"body":10286,"date":11266,"description":11267,"extension":3496,"meta":11268,"navigation":296,"path":11269,"seo":11270,"sitemap":11271,"stem":11272,"__hash__":11273},"guides/guides/gradients.md","How to use CSS background gradients in HTML emails",{"type":8,"value":10287,"toc":11254},[10288,10291,10294,10302,10317,10321,10323,10333,10338,10340,10346,10359,10365,10379,10385,10389,10395,10399,10412,10463,10472,10475,10533,10542,10546,10552,10555,10650,10654,10659,10662,10795,10806,10812,10816,10819,10822,10839,10842,11006,11014,11018,11025,11032,11138,11141,11235,11237,11251],[11,10289,10285],{"id":10290},"how-to-use-css-background-gradients-in-html-emails",[15,10292,7450],{"className":10293},[6450],[15,10295,10296,10297,39],{},"Many email clients ",[25,10298,10301],{"href":10299,"rel":10300},"https://www.caniemail.com/features/css-linear-gradient/",[37],"support CSS background gradients",[15,10303,10304,10305,10310,10311,10316],{},"In this tutorial, you will learn how to use the ",[25,10306,10309],{"href":10307,"rel":10308},"https://www.npmjs.com/package/tailwindcss-gradients",[37],"tailwindcss-gradients"," plugin to add colorful gradients to your HTML email templates. We will also cover how to add a ",[10312,10313,10315],"abbr",{"title":10314},"Vector Markup Language","VML"," fallback for Outlook on Windows.",[41,10318,10320],{"id":10319},"getting-started","Getting started",[15,10322,7471],{},[52,10324,10325],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,10326,10327],{"__ignoreMap":57},[62,10328,10329,10331],{"class":64,"line":65},[62,10330,175],{"class":115},[62,10332,178],{"class":68},[15,10334,181,10335,185],{},[59,10336,10337],{},"./example-gradients",[15,10339,188],{},[15,10341,10342,10343,203],{},"After dependencies finish installing, change the current directory to ",[59,10344,10345],{},"example-gradients",[52,10347,10349],{"className":166,"code":10348,"language":168,"meta":57,"style":57},"cd example-gradients\n",[59,10350,10351],{"__ignoreMap":57},[62,10352,10353,10356],{"class":64,"line":65},[62,10354,10355],{"class":115},"cd",[62,10357,10358],{"class":68}," example-gradients\n",[15,10360,10361,10362,10364],{},"Next, install the ",[59,10363,10309],{}," plugin:",[52,10366,10368],{"className":166,"code":10367,"language":168,"meta":57,"style":57},"npm install tailwindcss-gradients\n",[59,10369,10370],{"__ignoreMap":57},[62,10371,10372,10374,10376],{"class":64,"line":65},[62,10373,2101],{"class":115},[62,10375,2104],{"class":68},[62,10377,10378],{"class":68}," tailwindcss-gradients\n",[15,10380,10381,10382,10384],{},"Once it finishes, open the ",[59,10383,10345],{}," folder in your favorite code editor.",[41,10386,10388],{"id":10387},"css-gradients","CSS Gradients",[15,10390,10391,10392,10394],{},"Let's configure and use ",[59,10393,10309],{}," with Tailwind CSS.",[193,10396,10398],{"id":10397},"tailwind-css-config","Tailwind CSS config",[15,10400,10401,10402,714,10404,10407,10408,10411],{},"We need to tell Tailwind CSS to use the plugin. Edit ",[59,10403,7213],{},[59,10405,10406],{},"require()"," the plugin inside the ",[59,10409,10410],{},"plugins: []"," array:",[52,10413,10416],{"className":4523,"code":10414,"filename":7213,"highlights":10415,"language":757,"meta":57,"style":57},"module.exports = {\n  plugins: [\n    require('tailwindcss-gradients'), // [!code ++]\n  ]\n}\n",[78],[59,10417,10418,10430,10439,10454,10459],{"__ignoreMap":57},[62,10419,10420,10422,10424,10426,10428],{"class":64,"line":65},[62,10421,7321],{"class":115},[62,10423,39],{"class":790},[62,10425,7326],{"class":115},[62,10427,4657],{"class":772},[62,10429,791],{"class":790},[62,10431,10432,10435,10437],{"class":64,"line":72},[62,10433,10434],{"class":68},"  plugins",[62,10436,203],{"class":790},[62,10438,5084],{"class":68},[62,10440,10442,10445,10447,10450,10452],{"class":10441,"line":78},[64,138,107,139],[62,10443,10444],{"class":947},"    require",[62,10446,1048],{"class":68},[62,10448,10449],{"class":68},"'tailwindcss-gradients'",[62,10451,1054],{"class":68},[62,10453,1287],{"class":790},[62,10455,10456],{"class":64,"line":84},[62,10457,10458],{"class":68},"  ]\n",[62,10460,10461],{"class":64,"line":90},[62,10462,2028],{"class":790},[15,10464,10465,10466,10469,10470,39],{},"Next, we need to define what kind of gradients we want to generate, based on which colors. We do that in the ",[59,10467,10468],{},"theme: {}"," key from ",[59,10471,7213],{},[15,10473,10474],{},"For example, let's register linear gradients based on the existing color palette:",[52,10476,10479],{"className":4523,"code":10477,"filename":7213,"highlights":10478,"language":757,"meta":57,"style":57},"module.exports = {\n  theme: {\n    linearGradientColors: theme => theme('colors'), // [!code ++]\n  }\n}\n",[78],[59,10480,10481,10493,10502,10525,10529],{"__ignoreMap":57},[62,10482,10483,10485,10487,10489,10491],{"class":64,"line":65},[62,10484,7321],{"class":115},[62,10486,39],{"class":790},[62,10488,7326],{"class":115},[62,10490,4657],{"class":772},[62,10492,791],{"class":790},[62,10494,10495,10498,10500],{"class":64,"line":72},[62,10496,10497],{"class":68},"  theme",[62,10499,203],{"class":790},[62,10501,791],{"class":790},[62,10503,10505,10508,10510,10512,10514,10516,10518,10521,10523],{"class":10504,"line":78},[64,138,107,139],[62,10506,10507],{"class":947},"    linearGradientColors",[62,10509,203],{"class":790},[62,10511,5513],{"class":765},[62,10513,1260],{"class":765},[62,10515,5513],{"class":947},[62,10517,1048],{"class":68},[62,10519,10520],{"class":68},"'colors'",[62,10522,1054],{"class":68},[62,10524,1287],{"class":790},[62,10526,10527],{"class":64,"line":84},[62,10528,1321],{"class":790},[62,10530,10531],{"class":64,"line":90},[62,10532,2028],{"class":790},[3587,10534,10535,10537,10538,8754],{},[59,10536,10309],{},"\n can generate many other types of gradients (although not all are supported in email). See all \n",[25,10539,10541],{"href":10540},"https://github.com/benface/tailwindcss-gradients","\nconfiguration options\n",[193,10543,10545],{"id":10544},"use-in-html","Use in HTML",[15,10547,10548,10549,10551],{},"Simply add the utility class on an element that supports ",[59,10550,2072],{}," CSS.",[15,10553,10554],{},"We also specify a background color first, so that email clients that don't support CSS background-image gradients can display a fallback:",[52,10556,10558],{"className":54,"code":10557,"filename":8768,"language":56,"meta":57,"style":57},"\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",[59,10559,10560,10568,10586,10594,10613,10618,10626,10634,10642],{"__ignoreMap":57},[62,10561,10562,10564,10566],{"class":64,"line":65},[62,10563,302],{"class":111},[62,10565,305],{"class":115},[62,10567,308],{"class":111},[62,10569,10570,10572,10574,10576,10578,10580,10582,10584],{"class":64,"line":72},[62,10571,112],{"class":111},[62,10573,4276],{"class":115},[62,10575,4016],{"class":119},[62,10577,123],{"class":111},[62,10579,126],{"class":119},[62,10581,4335],{"class":68},[62,10583,126],{"class":119},[62,10585,308],{"class":111},[62,10587,10588,10590,10592],{"class":64,"line":78},[62,10589,340],{"class":111},[62,10591,4296],{"class":115},[62,10593,308],{"class":111},[62,10595,10596,10598,10600,10602,10604,10606,10609,10611],{"class":64,"line":84},[62,10597,4094],{"class":111},[62,10599,4306],{"class":115},[62,10601,4016],{"class":119},[62,10603,123],{"class":111},[62,10605,126],{"class":119},[62,10607,10608],{"class":68},"bg-gray-200 bg-gradient-b-black",[62,10610,126],{"class":119},[62,10612,308],{"class":111},[62,10614,10615],{"class":64,"line":90},[62,10616,10617],{"class":313},"        \u003C!-- ... -->\n",[62,10619,10620,10622,10624],{"class":64,"line":236},[62,10621,4421],{"class":111},[62,10623,4306],{"class":115},[62,10625,308],{"class":111},[62,10627,10628,10630,10632],{"class":64,"line":242},[62,10629,4126],{"class":111},[62,10631,4296],{"class":115},[62,10633,308],{"class":111},[62,10635,10636,10638,10640],{"class":64,"line":248},[62,10637,385],{"class":111},[62,10639,4276],{"class":115},[62,10641,308],{"class":111},[62,10643,10644,10646,10648],{"class":64,"line":382},[62,10645,700],{"class":111},[62,10647,305],{"class":115},[62,10649,308],{"class":111},[41,10651,10653],{"id":10652},"outlook-vml","Outlook VML",[15,10655,10656,10657,39],{},"Outlook for Windows doesn't support CSS gradients, but we can use ",[10312,10658,10315],{"title":10314},[15,10660,10661],{},"You need to add it right after the element with the CSS gradient class:",[52,10663,10666],{"className":54,"code":10664,"filename":8768,"highlights":10665,"language":56,"meta":57,"style":57},"\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",[90,236,242,248,382,392,402],[59,10667,10668,10676,10694,10702,10721,10727,10733,10739,10745,10751,10757,10763,10771,10779,10787],{"__ignoreMap":57},[62,10669,10670,10672,10674],{"class":64,"line":65},[62,10671,302],{"class":111},[62,10673,305],{"class":115},[62,10675,308],{"class":111},[62,10677,10678,10680,10682,10684,10686,10688,10690,10692],{"class":64,"line":72},[62,10679,112],{"class":111},[62,10681,4276],{"class":115},[62,10683,4016],{"class":119},[62,10685,123],{"class":111},[62,10687,126],{"class":119},[62,10689,4335],{"class":68},[62,10691,126],{"class":119},[62,10693,308],{"class":111},[62,10695,10696,10698,10700],{"class":64,"line":78},[62,10697,340],{"class":111},[62,10699,4296],{"class":115},[62,10701,308],{"class":111},[62,10703,10704,10706,10708,10710,10712,10714,10717,10719],{"class":64,"line":84},[62,10705,4094],{"class":111},[62,10707,4306],{"class":115},[62,10709,4016],{"class":119},[62,10711,123],{"class":111},[62,10713,126],{"class":119},[62,10715,10716],{"class":68},"bg-blue-500 bg-gradient-b-black-transparent",[62,10718,126],{"class":119},[62,10720,308],{"class":111},[62,10722,10724],{"class":10723,"line":90},[64,138],[62,10725,10726],{"class":313},"        \u003C!--[if gte mso 9]>\n",[62,10728,10730],{"class":10729,"line":236},[64,138],[62,10731,10732],{"class":313},"        \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"width:600px;\">\n",[62,10734,10736],{"class":10735,"line":242},[64,138],[62,10737,10738],{"class":313},"        \u003Cv:fill type=\"gradient\" color=\"#0072FF\" color2=\"#00C6FF\" angle=\"90\" />\n",[62,10740,10742],{"class":10741,"line":248},[64,138],[62,10743,10744],{"class":313},"        \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[62,10746,10748],{"class":10747,"line":382},[64,138],[62,10749,10750],{"class":313},"        \u003Cdiv>\u003C![endif]-->\n",[62,10752,10754],{"class":10753,"line":392},[64,138],[62,10755,10756],{"class":68},"        [your overlayed HTML here]\n",[62,10758,10760],{"class":10759,"line":402},[64,138],[62,10761,10762],{"class":313},"        \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[62,10764,10765,10767,10769],{"class":64,"line":442},[62,10766,4421],{"class":111},[62,10768,4306],{"class":115},[62,10770,308],{"class":111},[62,10772,10773,10775,10777],{"class":64,"line":451},[62,10774,4126],{"class":111},[62,10776,4296],{"class":115},[62,10778,308],{"class":111},[62,10780,10781,10783,10785],{"class":64,"line":456},[62,10782,385],{"class":111},[62,10784,4276],{"class":115},[62,10786,308],{"class":111},[62,10788,10789,10791,10793],{"class":64,"line":465},[62,10790,700],{"class":111},[62,10792,305],{"class":115},[62,10794,308],{"class":111},[15,10796,10797,10798,10801,10802,10805],{},"As you can see, you need to set a fixed width on the ",[59,10799,10800],{},"\u003Cv:rect>"," element - it is recommended instead of using ",[59,10803,10804],{},"mso-width-percent: 1000;",", as that is pretty buggy (especially in Outlook 2013).",[3587,10807,10808,10809,10811],{},"\nThe width of the \n",[59,10810,10800],{},"\n element needs to match the width of its parent element.\n",[193,10813,10815],{"id":10814},"body-gradient","Body gradient",[15,10817,10818],{},"We can also add a VML gradient to the body of the email.",[15,10820,10821],{},"To achieve this, we:",[4713,10823,10824,10831],{},[736,10825,10826,10827,10830],{},"create a ",[59,10828,10829],{},"\u003Cdiv>"," that wraps our template: this will be used as the solid background color fallback",[736,10832,10833,10834,10836,10837],{},"place the VML code immediately inside that div, basically wrapping our entire template. Note how we're using ",[59,10835,10804],{}," instead of a fixed width on the ",[59,10838,10800],{},[15,10840,10841],{},"Here's an example:",[52,10843,10845],{"className":54,"code":10844,"filename":8768,"language":56,"meta":57,"style":57},"\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",[59,10846,10847,10855,10874,10879,10884,10889,10894,10899,10918,10926,10956,10961,10969,10977,10985,10990,10998],{"__ignoreMap":57},[62,10848,10849,10851,10853],{"class":64,"line":65},[62,10850,302],{"class":111},[62,10852,305],{"class":115},[62,10854,308],{"class":111},[62,10856,10857,10859,10861,10863,10865,10867,10870,10872],{"class":64,"line":72},[62,10858,112],{"class":111},[62,10860,519],{"class":115},[62,10862,4016],{"class":119},[62,10864,123],{"class":111},[62,10866,126],{"class":119},[62,10868,10869],{"class":68},"bg-gray-200",[62,10871,126],{"class":119},[62,10873,308],{"class":111},[62,10875,10876],{"class":64,"line":78},[62,10877,10878],{"class":313},"    \u003C!--[if gte mso 9]>\n",[62,10880,10881],{"class":64,"line":84},[62,10882,10883],{"class":313},"    \u003Cv:rect xmlns:v=\"urn:schemas-microsoft-com:vml\" fill=\"true\" stroke=\"false\" style=\"mso-width-percent:1000;\">\n",[62,10885,10886],{"class":64,"line":90},[62,10887,10888],{"class":313},"    \u003Cv:fill type=\"gradient\" color=\"#edf2f7\" color2=\"#cbd5e0\" />\n",[62,10890,10891],{"class":64,"line":236},[62,10892,10893],{"class":313},"    \u003Cv:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">\n",[62,10895,10896],{"class":64,"line":242},[62,10897,10898],{"class":313},"    \u003Cdiv>\u003C![endif]-->\n",[62,10900,10901,10903,10905,10907,10909,10911,10914,10916],{"class":64,"line":248},[62,10902,340],{"class":111},[62,10904,4276],{"class":115},[62,10906,4016],{"class":119},[62,10908,123],{"class":111},[62,10910,126],{"class":119},[62,10912,10913],{"class":68},"w-full font-sans",[62,10915,126],{"class":119},[62,10917,308],{"class":111},[62,10919,10920,10922,10924],{"class":64,"line":382},[62,10921,4094],{"class":111},[62,10923,4296],{"class":115},[62,10925,308],{"class":111},[62,10927,10928,10930,10932,10935,10937,10939,10941,10943,10945,10947,10949,10952,10954],{"class":64,"line":392},[62,10929,4303],{"class":111},[62,10931,4306],{"class":115},[62,10933,10934],{"class":119}," align",[62,10936,123],{"class":111},[62,10938,126],{"class":119},[62,10940,4161],{"class":68},[62,10942,126],{"class":119},[62,10944,4016],{"class":119},[62,10946,123],{"class":111},[62,10948,126],{"class":119},[62,10950,10951],{"class":68},"bg-gradient-t-gray-400",[62,10953,126],{"class":119},[62,10955,308],{"class":111},[62,10957,10958],{"class":64,"line":402},[62,10959,10960],{"class":313},"          \u003C!-- your content here... -->\n",[62,10962,10963,10965,10967],{"class":64,"line":442},[62,10964,4412],{"class":111},[62,10966,4306],{"class":115},[62,10968,308],{"class":111},[62,10970,10971,10973,10975],{"class":64,"line":451},[62,10972,4421],{"class":111},[62,10974,4296],{"class":115},[62,10976,308],{"class":111},[62,10978,10979,10981,10983],{"class":64,"line":456},[62,10980,4126],{"class":111},[62,10982,4276],{"class":115},[62,10984,308],{"class":111},[62,10986,10987],{"class":64,"line":465},[62,10988,10989],{"class":313},"    \u003C!--[if gte mso 9]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[62,10991,10992,10994,10996],{"class":64,"line":471},[62,10993,385],{"class":111},[62,10995,519],{"class":115},[62,10997,308],{"class":111},[62,10999,11000,11002,11004],{"class":64,"line":480},[62,11001,700],{"class":111},[62,11003,305],{"class":115},[62,11005,308],{"class":111},[15,11007,11008,11009,39],{},"You can see both examples in the ",[25,11010,11013],{"href":11011,"rel":11012},"https://github.com/maizzle/example-gradients",[37],"project repository",[41,11015,11017],{"id":11016},"avoid-inlining","Avoid inlining",[15,11019,11020,11021,11024],{},"Most email clients that support CSS gradients also support ",[59,11022,11023],{},"@media"," queries.",[15,11026,11027,11028,11031],{},"We can register a ",[59,11029,11030],{},"screen"," breakpoint to prevent Juice from inlining our gradient:",[52,11033,11036],{"className":4523,"code":11034,"filename":7213,"highlights":11035,"language":757,"meta":57,"style":57},"module.exports = {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[236],[59,11037,11038,11050,11058,11067,11087,11105,11126,11130,11134],{"__ignoreMap":57},[62,11039,11040,11042,11044,11046,11048],{"class":64,"line":65},[62,11041,7321],{"class":115},[62,11043,39],{"class":790},[62,11045,7326],{"class":115},[62,11047,4657],{"class":772},[62,11049,791],{"class":790},[62,11051,11052,11054,11056],{"class":64,"line":72},[62,11053,10497],{"class":68},[62,11055,203],{"class":790},[62,11057,791],{"class":790},[62,11059,11060,11063,11065],{"class":64,"line":78},[62,11061,11062],{"class":68},"    screens",[62,11064,203],{"class":790},[62,11066,791],{"class":790},[62,11068,11069,11072,11074,11076,11079,11081,11084],{"class":64,"line":84},[62,11070,11071],{"class":68},"      sm",[62,11073,203],{"class":790},[62,11075,2732],{"class":790},[62,11077,11078],{"class":68},"max",[62,11080,203],{"class":790},[62,11082,11083],{"class":68}," '600px'",[62,11085,11086],{"class":790},"},\n",[62,11088,11089,11092,11094,11096,11098,11100,11103],{"class":64,"line":90},[62,11090,11091],{"class":68},"      xs",[62,11093,203],{"class":790},[62,11095,2732],{"class":790},[62,11097,11078],{"class":68},[62,11099,203],{"class":790},[62,11101,11102],{"class":68}," '425px'",[62,11104,11086],{"class":790},[62,11106,11108,11111,11113,11115,11118,11120,11123],{"class":11107,"line":236},[64,138,107,139],[62,11109,11110],{"class":68},"      screen",[62,11112,203],{"class":790},[62,11114,2732],{"class":790},[62,11116,11117],{"class":68},"raw",[62,11119,203],{"class":790},[62,11121,11122],{"class":68}," 'screen'",[62,11124,11125],{"class":790},"},",[62,11127,11128],{"class":64,"line":242},[62,11129,3359],{"class":790},[62,11131,11132],{"class":64,"line":248},[62,11133,1321],{"class":790},[62,11135,11136],{"class":64,"line":382},[62,11137,2028],{"class":790},[15,11139,11140],{},"We can then write the utility class like this:",[52,11142,11144],{"className":54,"code":11143,"filename":8768,"language":56,"meta":57,"style":57},"\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",[59,11145,11146,11154,11172,11180,11199,11203,11211,11219,11227],{"__ignoreMap":57},[62,11147,11148,11150,11152],{"class":64,"line":65},[62,11149,302],{"class":111},[62,11151,305],{"class":115},[62,11153,308],{"class":111},[62,11155,11156,11158,11160,11162,11164,11166,11168,11170],{"class":64,"line":72},[62,11157,112],{"class":111},[62,11159,4276],{"class":115},[62,11161,4016],{"class":119},[62,11163,123],{"class":111},[62,11165,126],{"class":119},[62,11167,4335],{"class":68},[62,11169,126],{"class":119},[62,11171,308],{"class":111},[62,11173,11174,11176,11178],{"class":64,"line":78},[62,11175,340],{"class":111},[62,11177,4296],{"class":115},[62,11179,308],{"class":111},[62,11181,11182,11184,11186,11188,11190,11192,11195,11197],{"class":64,"line":84},[62,11183,4094],{"class":111},[62,11185,4306],{"class":115},[62,11187,4016],{"class":119},[62,11189,123],{"class":111},[62,11191,126],{"class":119},[62,11193,11194],{"class":68},"bg-gray-200 screen:bg-gradient-b-black",[62,11196,126],{"class":119},[62,11198,308],{"class":111},[62,11200,11201],{"class":64,"line":90},[62,11202,10617],{"class":313},[62,11204,11205,11207,11209],{"class":64,"line":236},[62,11206,4421],{"class":111},[62,11208,4306],{"class":115},[62,11210,308],{"class":111},[62,11212,11213,11215,11217],{"class":64,"line":242},[62,11214,4126],{"class":111},[62,11216,4296],{"class":115},[62,11218,308],{"class":111},[62,11220,11221,11223,11225],{"class":64,"line":248},[62,11222,385],{"class":111},[62,11224,4276],{"class":115},[62,11226,308],{"class":111},[62,11228,11229,11231,11233],{"class":64,"line":382},[62,11230,700],{"class":111},[62,11232,305],{"class":115},[62,11234,308],{"class":111},[41,11236,3460],{"id":3459},[733,11238,11239,11245],{},[736,11240,11241,11244],{},[25,11242,10309],{"href":10307,"rel":11243},[37]," plugin",[736,11246,11247,8601],{},[25,11248,3468],{"href":11249,"rel":11250},"https://github.com/maizzle/starter-gradients",[37],[3477,11252,11253],{},"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":57,"searchDepth":72,"depth":72,"links":11255},[11256,11257,11261,11264,11265],{"id":10319,"depth":72,"text":10320},{"id":10387,"depth":72,"text":10388,"children":11258},[11259,11260],{"id":10397,"depth":78,"text":10398},{"id":10544,"depth":78,"text":10545},{"id":10652,"depth":72,"text":10653,"children":11262},[11263],{"id":10814,"depth":78,"text":10815},{"id":11016,"depth":72,"text":11017},{"id":3459,"depth":72,"text":3460},"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":10285,"description":11267},{"loc":11269},"guides/gradients","Hs8TQhUUHQbYbufi4UhZv6LnUrIHcB_ryzxx9Fzwi00",{"id":11275,"title":11276,"body":11277,"date":12370,"description":12371,"extension":3496,"meta":12372,"navigation":296,"path":12373,"seo":12374,"sitemap":12375,"stem":12376,"__hash__":12377},"guides/guides/syntax-highlighting-prismjs.md","How to add PrismJS syntax highlighting to HTML emails",{"type":8,"value":11278,"toc":12350},[11279,11282,11285,11292,11295,11297,11300,11310,11315,11317,11320,11323,11331,11339,11343,11354,11358,11367,11382,11387,11467,11471,11474,11562,11571,11583,11586,11596,11599,11628,11635,11638,11642,11651,11659,11674,11782,11788,11863,11867,11870,11874,11877,11891,11895,11898,11903,12045,12049,12052,12119,12123,12126,12130,12140,12145,12172,12176,12182,12188,12299,12303,12309,12319,12321,12347],[11,11280,11276],{"id":11281},"how-to-add-prismjs-syntax-highlighting-to-html-emails",[15,11283,7450],{"className":11284},[6450],[15,11286,11287,11288,11291],{},"If you want to show a block of code in an HTML email ",[5239,11289,11290],{},"and"," have it look nice, it usually involves a lot of manual work: escaping, formatting, tokenizing, styling tokens...",[15,11293,11294],{},"With Maizzle however, we can use JavaScript libraries to do that work for us 💅",[41,11296,10320],{"id":10319},[15,11298,11299],{},"Let's create a new Maizzle project.",[52,11301,11302],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,11303,11304],{"__ignoreMap":57},[62,11305,11306,11308],{"class":64,"line":65},[62,11307,175],{"class":115},[62,11309,178],{"class":68},[15,11311,181,11312,185],{},[59,11313,11314],{},"./example-syntax-highlight",[15,11316,188],{},[15,11318,11319],{},"Once it finishes installing dependencies open the project folder in your favorite code editor.",[15,11321,11322],{},"We'll be covering two different techniques:",[733,11324,11325,11328],{},[736,11326,11327],{},"with PostHTML",[736,11329,11330],{},"with Markdown",[15,11332,11333,11334,11338],{},"For both techniques we'll be using the ",[25,11335,11337],{"href":5262,"rel":11336},[37],"PrismJS"," library to highlight code blocks.",[41,11340,11342],{"id":11341},"posthtml","PostHTML",[15,11344,11345,11346,11349,11350,11353],{},"Using a PostHTML plugin, we can write our own ",[59,11347,11348],{},"\u003Cpre>\u003Ccode>"," markup and have the plugin highlight the contents of the ",[59,11351,11352],{},"\u003Ccode>"," element.",[193,11355,11357],{"id":11356},"install-plugin","Install plugin",[15,11359,11360,11361,11366],{},"First, let's install the ",[25,11362,11365],{"href":11363,"rel":11364},"https://github.com/posthtml/posthtml-prism",[37],"posthtml-prism"," plugin, which we'll use to highlight code blocks:",[52,11368,11370],{"className":166,"code":11369,"language":168,"meta":57,"style":57},"npm i posthtml-prism\n",[59,11371,11372],{"__ignoreMap":57},[62,11373,11374,11376,11379],{"class":64,"line":65},[62,11375,2101],{"class":115},[62,11377,11378],{"class":68}," i",[62,11380,11381],{"class":68}," posthtml-prism\n",[15,11383,11384,11385,203],{},"Next, add it to the plugins list in your ",[59,11386,4507],{},[52,11388,11391],{"className":4523,"code":11389,"filename":4507,"highlights":11390,"language":757,"meta":57,"style":57},"module.exports = {\n  build: {\n    posthtml: { // [!code ++]\n      plugins: [ // [!code ++]\n        require('posthtml-prism')() // [!code ++]\n      ] // [!code ++]\n    } // [!code ++]\n  }\n}\n",[78,84,90,236,242],[59,11392,11393,11405,11413,11423,11434,11448,11454,11459,11463],{"__ignoreMap":57},[62,11394,11395,11397,11399,11401,11403],{"class":64,"line":65},[62,11396,7321],{"class":115},[62,11398,39],{"class":790},[62,11400,7326],{"class":115},[62,11402,4657],{"class":772},[62,11404,791],{"class":790},[62,11406,11407,11409,11411],{"class":64,"line":72},[62,11408,796],{"class":68},[62,11410,203],{"class":790},[62,11412,791],{"class":790},[62,11414,11416,11419,11421],{"class":11415,"line":78},[64,138,107,139],[62,11417,11418],{"class":68},"    posthtml",[62,11420,203],{"class":790},[62,11422,2732],{"class":790},[62,11424,11426,11429,11431],{"class":11425,"line":84},[64,138,107,139],[62,11427,11428],{"class":68},"      plugins",[62,11430,203],{"class":790},[62,11432,11433],{"class":68}," [ ",[62,11435,11437,11440,11442,11445],{"class":11436,"line":90},[64,138,107,139],[62,11438,11439],{"class":947},"        require",[62,11441,1048],{"class":68},[62,11443,11444],{"class":68},"'posthtml-prism'",[62,11446,11447],{"class":68},")() ",[62,11449,11451],{"class":11450,"line":236},[64,138,107,139],[62,11452,11453],{"class":68},"      ] ",[62,11455,11457],{"class":11456,"line":242},[64,138,107,139],[62,11458,1314],{"class":790},[62,11460,11461],{"class":64,"line":248},[62,11462,1321],{"class":790},[62,11464,11465],{"class":64,"line":382},[62,11466,2028],{"class":790},[193,11468,11470],{"id":11469},"add-code-block","Add code block",[15,11472,11473],{},"Add a block of code in your template, like so:",[52,11475,11477],{"className":54,"code":11476,"filename":8768,"language":56,"meta":57,"style":57},"\u003Cx-main>\n  \u003Cpre>\n    \u003Ccode class=\"language-javascript\">\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    \u003C/code>\n  \u003C/pre>\n\u003C/x-main>\n",[59,11478,11479,11487,11495,11514,11519,11524,11529,11534,11538,11546,11554],{"__ignoreMap":57},[62,11480,11481,11483,11485],{"class":64,"line":65},[62,11482,302],{"class":111},[62,11484,305],{"class":115},[62,11486,308],{"class":111},[62,11488,11489,11491,11493],{"class":64,"line":72},[62,11490,112],{"class":111},[62,11492,52],{"class":115},[62,11494,308],{"class":111},[62,11496,11497,11499,11501,11503,11505,11507,11510,11512],{"class":64,"line":78},[62,11498,340],{"class":111},[62,11500,59],{"class":115},[62,11502,4016],{"class":119},[62,11504,123],{"class":111},[62,11506,126],{"class":119},[62,11508,11509],{"class":68},"language-javascript",[62,11511,126],{"class":119},[62,11513,308],{"class":111},[62,11515,11516],{"class":64,"line":84},[62,11517,11518],{"class":68},"    function foo(bar) {\n",[62,11520,11521],{"class":64,"line":90},[62,11522,11523],{"class":68},"      var a = 42,\n",[62,11525,11526],{"class":64,"line":236},[62,11527,11528],{"class":68},"          b = 'Prism';\n",[62,11530,11531],{"class":64,"line":242},[62,11532,11533],{"class":68},"      return a + bar(b);\n",[62,11535,11536],{"class":64,"line":248},[62,11537,3359],{"class":68},[62,11539,11540,11542,11544],{"class":64,"line":382},[62,11541,4126],{"class":111},[62,11543,59],{"class":115},[62,11545,308],{"class":111},[62,11547,11548,11550,11552],{"class":64,"line":392},[62,11549,385],{"class":111},[62,11551,52],{"class":115},[62,11553,308],{"class":111},[62,11555,11556,11558,11560],{"class":64,"line":402},[62,11557,700],{"class":111},[62,11559,305],{"class":115},[62,11561,308],{"class":111},[3587,11563,11564,11565,11567,11568,11570],{},"\nNotice how we added the \n",[59,11566,11509],{},"\n class on the \n",[59,11569,11352],{},"\n tag - this is required in order to get language-specific syntax highlighting.\n",[3587,11572,11574,11575,11577,11578,11582],{"type":11573},"warning","\nYou need to reset the indentation of code inside the \n",[59,11576,5889],{},"\n tag yourself - see the \n",[25,11579,11581],{"href":11580},"https://github.com/maizzle/example-syntax-highlight/blob/master/emails/posthtml.html","\nPostHTML example\n","\n in the tutorial repository.\n",[41,11584,11585],{"id":2359},"Build",[15,11587,4753,11588,11591,11592,11595],{},[59,11589,11590],{},"npm run dev"," to start the development server, open ",[59,11593,11594],{},"http://localhost:3000/"," in a browser, and navigate to the template.",[15,11597,11598],{},"You'll see something like this:",[52,11600,11602],{"className":54,"code":11601,"language":56,"meta":57,"style":57},"function foo(bar) {\n  var a = 42,\n      b = 'Prism';\n  return a + bar(b);\n}\n",[59,11603,11604,11609,11614,11619,11624],{"__ignoreMap":57},[62,11605,11606],{"class":64,"line":65},[62,11607,11608],{"class":68},"function foo(bar) {\n",[62,11610,11611],{"class":64,"line":72},[62,11612,11613],{"class":68},"  var a = 42,\n",[62,11615,11616],{"class":64,"line":78},[62,11617,11618],{"class":68},"      b = 'Prism';\n",[62,11620,11621],{"class":64,"line":84},[62,11622,11623],{"class":68},"  return a + bar(b);\n",[62,11625,11626],{"class":64,"line":90},[62,11627,2028],{"class":68},[15,11629,11630,11631,11634],{},"If you view the source of your page, you'll notice a lot of ",[59,11632,11633],{},"\u003Cspan>"," tags. This means it worked, and PrismJS has tokenized our code block.",[15,11636,11637],{},"But it's not very pretty, is it? We need a theme!",[41,11639,11641],{"id":11640},"theming","Theming",[15,11643,11644,11645,11650],{},"Choose one of the default themes, or see ",[25,11646,11649],{"href":11647,"rel":11648},"https://github.com/PrismJS/prism-themes",[37],"prism-themes"," for more.",[15,11652,11653,11654,39],{},"For this tutorial, we'll go with a Tailwind adaptation the ",[25,11655,11658],{"href":11656,"rel":11657},"https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode",[37],"Synthwave '84 Theme",[15,11660,11661,11662,11667,11668,11670,11671,203],{},"Save ",[25,11663,11666],{"href":11664,"rel":11665},"https://raw.githubusercontent.com/maizzle/starter-prismjs/master/src/css/prism-synthwave84.css",[37],"prism-synthwave84.css"," to the ",[59,11669,4778],{}," directory in your project, and import it into your ",[59,11672,11673],{},"css/tailwind.css",[52,11675,11677],{"className":4776,"code":11676,"language":4778,"meta":57,"style":57},"/* Tailwind CSS components */\n@import \"tailwindcss/components\";\n\n/**\n * @import here any custom CSS components - that is, CSS that\n * you'd want loaded before the Tailwind utilities, so the\n * utilities can still override them.\n*/\n@import \"custom/prism-synthwave84\";\n\n/* Tailwind CSS utility classes */\n@import \"tailwindcss/utilities\";\n\n/* Your custom utility classes */\n@import \"utilities\";\n",[59,11678,11679,11684,11697,11701,11706,11711,11716,11721,11726,11739,11743,11748,11760,11764,11769],{"__ignoreMap":57},[62,11680,11681],{"class":64,"line":65},[62,11682,11683],{"class":313},"/* Tailwind CSS components */\n",[62,11685,11686,11689,11691,11693,11695],{"class":64,"line":72},[62,11687,11688],{"class":3952},"@import",[62,11690,4916],{"class":68},[62,11692,4932],{"class":2141},[62,11694,126],{"class":68},[62,11696,3959],{"class":3952},[62,11698,11699],{"class":64,"line":78},[62,11700,297],{"emptyLinePlaceholder":296},[62,11702,11703],{"class":64,"line":84},[62,11704,11705],{"class":313},"/**\n",[62,11707,11708],{"class":64,"line":90},[62,11709,11710],{"class":313}," * @import here any custom CSS components - that is, CSS that\n",[62,11712,11713],{"class":64,"line":236},[62,11714,11715],{"class":313}," * you'd want loaded before the Tailwind utilities, so the\n",[62,11717,11718],{"class":64,"line":242},[62,11719,11720],{"class":313}," * utilities can still override them.\n",[62,11722,11723],{"class":64,"line":248},[62,11724,11725],{"class":313},"*/\n",[62,11727,11728,11730,11732,11735,11737],{"class":64,"line":382},[62,11729,11688],{"class":3952},[62,11731,4916],{"class":68},[62,11733,11734],{"class":2141},"custom/prism-synthwave84",[62,11736,126],{"class":68},[62,11738,3959],{"class":3952},[62,11740,11741],{"class":64,"line":392},[62,11742,297],{"emptyLinePlaceholder":296},[62,11744,11745],{"class":64,"line":402},[62,11746,11747],{"class":313},"/* Tailwind CSS utility classes */\n",[62,11749,11750,11752,11754,11756,11758],{"class":64,"line":442},[62,11751,11688],{"class":3952},[62,11753,4916],{"class":68},[62,11755,4945],{"class":2141},[62,11757,126],{"class":68},[62,11759,3959],{"class":3952},[62,11761,11762],{"class":64,"line":451},[62,11763,297],{"emptyLinePlaceholder":296},[62,11765,11766],{"class":64,"line":456},[62,11767,11768],{"class":313},"/* Your custom utility classes */\n",[62,11770,11771,11773,11775,11778,11780],{"class":64,"line":465},[62,11772,11688],{"class":3952},[62,11774,4916],{"class":68},[62,11776,11777],{"class":2141},"utilities",[62,11779,126],{"class":68},[62,11781,3959],{"class":3952},[15,11783,11784,11785,11787],{},"Now, running ",[59,11786,3379],{}," will yield the result we expected:",[519,11789,11793,11797,11798,11802,11805,11809,11797,11811,11813,11814,11797,11817,11797,11820,11797,11823,11827,11829,11830,11797,11833,11797,11835,11839,11813,11842,11797,11845,11797,11847,11797,11850,11852,11854,11856,11858,11860],{"className":11790,"style":11792},[11791],"rounded-md","padding: 24px; margin-bottom: 24px; overflow: auto; font-family: Menlo, Consolas, monospace; font-size: 16px; text-align: left; white-space: pre; background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); color: #f92aad; hyphens: none; tab-size: 2; text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; word-break: normal; word-spacing: normal; word-wrap: normal; background-color: #2a2139;",[62,11794,11796],{"style":11795},"color: #f4eee4; text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;","function"," ",[62,11799,11801],{"style":11800},"color: #fdfdfd; text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;","foo",[62,11803,1048],{"style":11804},"color: #cccccc;",[62,11806,11808],{"style":11807},"color: #f92aad;","bar",[62,11810,1054],{"style":11804},[62,11812,6376],{"style":11804},"\n  ",[62,11815,11816],{"style":11795},"var",[62,11818,25],{"style":11819},"color:#f92aad;",[62,11821,123],{"style":11822},"color: #67cdcc;",[62,11824,11826],{"style":11825},"color: #e2777a;","42",[62,11828,1287],{"style":11804},"\n      ",[62,11831,11832],{"style":11807},"b",[62,11834,123],{"style":11822},[62,11836,11838],{"style":11837},"color: #f87c32;","'Prism'",[62,11840,11841],{"style":11804},";",[62,11843,11844],{"style":11795},"return",[62,11846,25],{"style":11807},[62,11848,11849],{"style":11822},"+",[62,11851,11808],{"style":11800},[62,11853,1048],{"style":11804},[62,11855,11832],{"style":11807},[62,11857,1054],{"style":11804},[62,11859,11841],{"style":11804},[62,11861,2748],{"style":11862},"color: #cccccc;display:block",[41,11864,11866],{"id":11865},"markdown","Markdown",[15,11868,11869],{},"Alternatively, we can also use Markdown to write fenced code blocks and have PrismJS automatically syntax-highlight them.",[193,11871,11873],{"id":11872},"install-prismjs","Install PrismJS",[15,11875,11876],{},"First, we must install the PrismJS library:",[52,11878,11880],{"className":166,"code":11879,"language":168,"meta":57,"style":57},"npm i prismjs\n",[59,11881,11882],{"__ignoreMap":57},[62,11883,11884,11886,11888],{"class":64,"line":65},[62,11885,2101],{"class":115},[62,11887,11378],{"class":68},[62,11889,11890],{"class":68}," prismjs\n",[193,11892,11894],{"id":11893},"configure-markdown","Configure Markdown",[15,11896,11897],{},"Next, we need to configure Maizzle to use PrismJS as a custom highlight function for the Markdown renderer.",[15,11899,11900,11901,203],{},"We do that in ",[59,11902,4507],{},[52,11904,11906],{"className":754,"code":11905,"filename":4507,"language":757,"meta":57,"style":57},"const Prism = require('prismjs')\n\nmodule.exports = {\n  markdown: {\n    markdownit: {\n      highlight(code, lang) {\n        lang = lang || 'markup'\n        return Prism.highlight(code, Prism.languages[lang], lang)\n      }\n    }\n  }\n}\n",[59,11907,11908,11927,11931,11943,11951,11960,11977,11991,12029,12033,12037,12041],{"__ignoreMap":57},[62,11909,11910,11912,11915,11917,11920,11922,11925],{"class":64,"line":65},[62,11911,766],{"class":765},[62,11913,11914],{"class":68}," Prism ",[62,11916,123],{"class":772},[62,11918,11919],{"class":947}," require",[62,11921,1048],{"class":68},[62,11923,11924],{"class":68},"'prismjs'",[62,11926,1226],{"class":68},[62,11928,11929],{"class":64,"line":72},[62,11930,297],{"emptyLinePlaceholder":296},[62,11932,11933,11935,11937,11939,11941],{"class":64,"line":78},[62,11934,7321],{"class":115},[62,11936,39],{"class":790},[62,11938,7326],{"class":115},[62,11940,4657],{"class":772},[62,11942,791],{"class":790},[62,11944,11945,11947,11949],{"class":64,"line":84},[62,11946,5070],{"class":68},[62,11948,203],{"class":790},[62,11950,791],{"class":790},[62,11952,11953,11956,11958],{"class":64,"line":90},[62,11954,11955],{"class":68},"    markdownit",[62,11957,203],{"class":790},[62,11959,791],{"class":790},[62,11961,11962,11965,11967,11969,11971,11973,11975],{"class":64,"line":236},[62,11963,11964],{"class":947},"      highlight",[62,11966,1048],{"class":790},[62,11968,59],{"class":765},[62,11970,1287],{"class":790},[62,11972,3666],{"class":765},[62,11974,1054],{"class":790},[62,11976,791],{"class":790},[62,11978,11979,11982,11984,11986,11988],{"class":64,"line":242},[62,11980,11981],{"class":765},"        lang",[62,11983,4657],{"class":772},[62,11985,3666],{"class":765},[62,11987,5482],{"class":115},[62,11989,11990],{"class":68}," 'markup'\n",[62,11992,11993,11996,11999,12001,12003,12005,12007,12009,12011,12013,12016,12018,12021,12023,12025,12027],{"class":64,"line":248},[62,11994,11995],{"class":115},"        return",[62,11997,11998],{"class":765}," Prism",[62,12000,39],{"class":790},[62,12002,138],{"class":947},[62,12004,1048],{"class":68},[62,12006,59],{"class":765},[62,12008,1287],{"class":790},[62,12010,11998],{"class":765},[62,12012,39],{"class":790},[62,12014,12015],{"class":765},"languages",[62,12017,980],{"class":68},[62,12019,12020],{"class":765},"lang",[62,12022,997],{"class":68},[62,12024,1287],{"class":790},[62,12026,3666],{"class":765},[62,12028,1226],{"class":68},[62,12030,12031],{"class":64,"line":382},[62,12032,1996],{"class":790},[62,12034,12035],{"class":64,"line":392},[62,12036,3359],{"class":790},[62,12038,12039],{"class":64,"line":402},[62,12040,1321],{"class":790},[62,12042,12043],{"class":64,"line":442},[62,12044,2028],{"class":790},[193,12046,12048],{"id":12047},"fenced-code-block","Fenced code block",[15,12050,12051],{},"We can now write code inside a fenced code block in our Template:",[52,12053,12055],{"className":54,"code":12054,"filename":8768,"language":56,"meta":57,"style":57},"\u003Cx-main>\n  \u003Cmd>\n    ```js\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    ```\n  \u003C/md>\n\u003C/x-main>\n",[59,12056,12057,12065,12073,12078,12082,12086,12090,12094,12098,12103,12111],{"__ignoreMap":57},[62,12058,12059,12061,12063],{"class":64,"line":65},[62,12060,302],{"class":111},[62,12062,305],{"class":115},[62,12064,308],{"class":111},[62,12066,12067,12069,12071],{"class":64,"line":72},[62,12068,112],{"class":111},[62,12070,3496],{"class":115},[62,12072,308],{"class":111},[62,12074,12075],{"class":64,"line":78},[62,12076,12077],{"class":68},"    ```js\n",[62,12079,12080],{"class":64,"line":84},[62,12081,11518],{"class":68},[62,12083,12084],{"class":64,"line":90},[62,12085,11523],{"class":68},[62,12087,12088],{"class":64,"line":236},[62,12089,11528],{"class":68},[62,12091,12092],{"class":64,"line":242},[62,12093,11533],{"class":68},[62,12095,12096],{"class":64,"line":248},[62,12097,3359],{"class":68},[62,12099,12100],{"class":64,"line":382},[62,12101,12102],{"class":68},"    ```\n",[62,12104,12105,12107,12109],{"class":64,"line":392},[62,12106,385],{"class":111},[62,12108,3496],{"class":115},[62,12110,308],{"class":111},[62,12112,12113,12115,12117],{"class":64,"line":402},[62,12114,700],{"class":111},[62,12116,305],{"class":115},[62,12118,308],{"class":111},[41,12120,12122],{"id":12121},"compatibility","Compatibility",[15,12124,12125],{},"Some email clients require  extra steps in order to render our code blocks properly.",[193,12127,12129],{"id":12128},"gmail","Gmail",[15,12131,12132,12133,7305,12136,12139],{},"Gmail will change our inline ",[59,12134,12135],{},"white-space: pre;",[59,12137,12138],{},"white-space: pre-wrap;",". This results in code wrapping, instead of showing a horizontal scrollbar.",[15,12141,12142,12143,203],{},"Fix it by adding the following CSS at the beginning of ",[59,12144,11666],{},[52,12146,12149],{"className":4776,"code":12147,"filename":12148,"language":4778,"meta":57,"style":57},"pre {\n  @apply whitespace-pre;\n}\n","css/prism-synthwave84.css",[59,12150,12151,12157,12168],{"__ignoreMap":57},[62,12152,12153,12155],{"class":64,"line":65},[62,12154,52],{"class":115},[62,12156,791],{"class":3650},[62,12158,12159,12161,12163,12166],{"class":64,"line":72},[62,12160,4791],{"class":3952},[62,12162,4794],{"class":2141},[62,12164,12165],{"class":2141}," whitespace-pre",[62,12167,3959],{"class":3952},[62,12169,12170],{"class":64,"line":78},[62,12171,2028],{"class":3650},[193,12173,12175],{"id":12174},"outlook","Outlook",[15,12177,12178,12179,12181],{},"Padding on ",[59,12180,5889],{}," doesn't work in Outlook.",[15,12183,12184,12185,12187],{},"We can fix this by wrapping ",[59,12186,5889],{}," inside a table that we only show in Outlook. We then style this table inline, like so:",[52,12189,12191],{"className":54,"code":12190,"filename":8768,"language":56,"meta":57,"style":57},"\u003Cx-main>\n  \u003C!--[if mso]>\n  \u003Ctable style=\"width:100%;\">\n    \u003Ctr>\n      \u003Ctd style=\"background: #2a2139; padding: 24px;\">\n  \u003C![endif]-->\n  \u003Cpre>\n    \u003Ccode class=\"language-javascript\">\n    function foo(bar) {\n      var a = 42,\n          b = 'Prism';\n      return a + bar(b);\n    }\n    \u003C/code>\n  \u003C/pre>\n  \u003C!--[if mso]>\u003C/td>\u003C/tr>\u003C/table>\u003C![endif]-->\n\u003C/x-main>\n",[59,12192,12193,12201,12205,12210,12215,12220,12224,12232,12250,12254,12258,12262,12266,12270,12278,12286,12291],{"__ignoreMap":57},[62,12194,12195,12197,12199],{"class":64,"line":65},[62,12196,302],{"class":111},[62,12198,305],{"class":115},[62,12200,308],{"class":111},[62,12202,12203],{"class":64,"line":72},[62,12204,3834],{"class":313},[62,12206,12207],{"class":64,"line":78},[62,12208,12209],{"class":313},"  \u003Ctable style=\"width:100%;\">\n",[62,12211,12212],{"class":64,"line":84},[62,12213,12214],{"class":313},"    \u003Ctr>\n",[62,12216,12217],{"class":64,"line":90},[62,12218,12219],{"class":313},"      \u003Ctd style=\"background: #2a2139; padding: 24px;\">\n",[62,12221,12222],{"class":64,"line":236},[62,12223,3889],{"class":313},[62,12225,12226,12228,12230],{"class":64,"line":242},[62,12227,112],{"class":111},[62,12229,52],{"class":115},[62,12231,308],{"class":111},[62,12233,12234,12236,12238,12240,12242,12244,12246,12248],{"class":64,"line":248},[62,12235,340],{"class":111},[62,12237,59],{"class":115},[62,12239,4016],{"class":119},[62,12241,123],{"class":111},[62,12243,126],{"class":119},[62,12245,11509],{"class":68},[62,12247,126],{"class":119},[62,12249,308],{"class":111},[62,12251,12252],{"class":64,"line":382},[62,12253,11518],{"class":68},[62,12255,12256],{"class":64,"line":392},[62,12257,11523],{"class":68},[62,12259,12260],{"class":64,"line":402},[62,12261,11528],{"class":68},[62,12263,12264],{"class":64,"line":442},[62,12265,11533],{"class":68},[62,12267,12268],{"class":64,"line":451},[62,12269,3359],{"class":68},[62,12271,12272,12274,12276],{"class":64,"line":456},[62,12273,4126],{"class":111},[62,12275,59],{"class":115},[62,12277,308],{"class":111},[62,12279,12280,12282,12284],{"class":64,"line":465},[62,12281,385],{"class":111},[62,12283,52],{"class":115},[62,12285,308],{"class":111},[62,12287,12288],{"class":64,"line":471},[62,12289,12290],{"class":313},"  \u003C!--[if mso]>\u003C/td>\u003C/tr>\u003C/table>\u003C![endif]-->\n",[62,12292,12293,12295,12297],{"class":64,"line":480},[62,12294,700],{"class":111},[62,12296,305],{"class":115},[62,12298,308],{"class":111},[41,12300,12302],{"id":12301},"production-build","Production build",[15,12304,12305,12306,12308],{},"We've been developing locally so far, configuring PostHTML or Markdown in ",[59,12307,4507],{},". This means CSS isn't inlined, and most email optimizations are off.",[15,12310,12311,12312,12314,12315,12318],{},"When you're satisfied with the dev preview, run ",[59,12313,3379],{}," and use the template inside the ",[59,12316,12317],{},"build_production/"," directory for sending the email.",[41,12320,3460],{"id":3459},[733,12322,12323,12329,12334,12340],{},[736,12324,12325,8601],{},[25,12326,3468],{"href":12327,"rel":12328},"https://github.com/maizzle/starter-prismjs",[37],[736,12330,12331,11244],{},[25,12332,11365],{"href":11363,"rel":12333},[37],[736,12335,12336,12339],{},[25,12337,11337],{"href":5262,"rel":12338},[37]," library",[736,12341,12342,5513],{},[25,12343,12346],{"href":12344,"rel":12345},"https://github.com/PrismJS/prism-themes/blob/master/themes/prism-synthwave84.css",[37],"Synthwave '84",[3477,12348,12349],{},"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 .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 .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}",{"title":57,"searchDepth":72,"depth":72,"links":12351},[12352,12353,12357,12358,12359,12364,12368,12369],{"id":10319,"depth":72,"text":10320},{"id":11341,"depth":72,"text":11342,"children":12354},[12355,12356],{"id":11356,"depth":78,"text":11357},{"id":11469,"depth":78,"text":11470},{"id":2359,"depth":72,"text":11585},{"id":11640,"depth":72,"text":11641},{"id":11865,"depth":72,"text":11866,"children":12360},[12361,12362,12363],{"id":11872,"depth":78,"text":11873},{"id":11893,"depth":78,"text":11894},{"id":12047,"depth":78,"text":12048},{"id":12121,"depth":72,"text":12122,"children":12365},[12366,12367],{"id":12128,"depth":78,"text":12129},{"id":12174,"depth":78,"text":12175},{"id":12301,"depth":72,"text":12302},{"id":3459,"depth":72,"text":3460},"2020-02-05T00:00:00.000Z","Using PrismJS, Markdown fenced code blocks, and Events in Maizzle to add syntax highlighting to HTML emails.",{},"/guides/syntax-highlighting-prismjs",{"title":11276,"description":12371},{"loc":12373},"guides/syntax-highlighting-prismjs","kueXGGPmitP3CsVqncxh-3l8qK4IJ76w9iIGE5fExm0",{"id":12379,"title":12380,"body":12381,"date":13799,"description":13800,"extension":3496,"meta":13801,"navigation":296,"path":13802,"seo":13803,"sitemap":13804,"stem":13805,"__hash__":13806},"guides/guides/custom-fonts.md","Using custom web fonts in Maizzle email templates",{"type":8,"value":12382,"toc":13786},[12383,12386,12389,12397,12406,12409,12411,12414,12424,12429,12431,12433,12437,12440,12447,12451,12460,12622,12628,12632,12643,12803,12806,12810,12813,12822,12910,12916,12919,12923,12930,12933,12965,12972,13004,13008,13019,13025,13077,13085,13094,13102,13193,13200,13252,13262,13271,13338,13351,13381,13390,13394,13397,13406,13527,13533,13537,13544,13547,13764,13766,13783],[11,12384,12380],{"id":12385},"using-custom-web-fonts-in-maizzle-email-templates",[15,12387,7450],{"className":12388},[6450],[15,12390,12391,12392,12396],{},"It's super easy to ",[25,12393,12395],{"href":12394},"/docs/examples/google-fonts","use Google Fonts in your Maizzle email templates",", but what if you need to use a custom web font?",[15,12398,12399,12400,714,12402,12405],{},"Maybe your brand uses a custom font that isn't available through Google Fonts, or maybe you're just developing Shopify notification email templates (where the usual ",[59,12401,11688],{},[59,12403,12404],{},"\u003Clink>"," techniques aren't supported).",[15,12407,12408],{},"In this tutorial, you'll learn how to add your own custom fonts to emails in Maizzle.",[41,12410,6479],{"id":6478},[15,12412,12413],{},"First, let's scaffold a new project:",[52,12415,12416],{"className":166,"code":167,"language":168,"meta":57,"style":57},[59,12417,12418],{"__ignoreMap":57},[62,12419,12420,12422],{"class":64,"line":65},[62,12421,175],{"class":115},[62,12423,178],{"class":68},[15,12425,181,12426,185],{},[59,12427,12428],{},"./example-font-face",[15,12430,188],{},[15,12432,191],{},[41,12434,12436],{"id":12435},"register-font-face","Register @font-face",[15,12438,12439],{},"Imagine we have a display font called Barosan, which we're hosting on our website.",[15,12441,12442,12443,12446],{},"We'll use ",[59,12444,12445],{},"@font-face"," to register our custom font family - we can do this in the Template or in the Layout that we extend.",[193,12448,12450],{"id":12449},"add-in-template","Add in Template",[15,12452,12453,12454,12457,12458,4895],{},"Open ",[59,12455,12456],{},"emails/transactional.html"," and add this before the ",[59,12459,4747],{},[52,12461,12463],{"className":54,"code":12462,"filename":12456,"language":56,"meta":57,"style":57},"\u003Cpush name=\"head\">\n  \u003Cstyle>\n    @font-face {\n      font-family: 'Barosan';\n      font-style: normal;\n      font-weight: 400;\n      src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n    }\n  \u003C/style>\n\u003C/push>\n",[59,12464,12465,12483,12491,12498,12514,12526,12537,12602,12606,12614],{"__ignoreMap":57},[62,12466,12467,12469,12471,12473,12475,12477,12479,12481],{"class":64,"line":65},[62,12468,302],{"class":111},[62,12470,1302],{"class":115},[62,12472,3095],{"class":119},[62,12474,123],{"class":111},[62,12476,126],{"class":119},[62,12478,3713],{"class":68},[62,12480,126],{"class":119},[62,12482,308],{"class":111},[62,12484,12485,12487,12489],{"class":64,"line":72},[62,12486,112],{"class":111},[62,12488,3477],{"class":115},[62,12490,308],{"class":111},[62,12492,12493,12496],{"class":64,"line":78},[62,12494,12495],{"class":3952},"    @font-face",[62,12497,791],{"class":3650},[62,12499,12500,12503,12505,12507,12510,12512],{"class":64,"line":84},[62,12501,12502],{"class":2141},"      font-family",[62,12504,4880],{"class":3952},[62,12506,3682],{"class":119},[62,12508,12509],{"class":68},"Barosan",[62,12511,3682],{"class":119},[62,12513,3959],{"class":3952},[62,12515,12516,12519,12521,12524],{"class":64,"line":90},[62,12517,12518],{"class":2141},"      font-style",[62,12520,4880],{"class":3952},[62,12522,12523],{"class":6616},"normal",[62,12525,3959],{"class":3952},[62,12527,12528,12531,12533,12535],{"class":64,"line":236},[62,12529,12530],{"class":2141},"      font-weight",[62,12532,4880],{"class":3952},[62,12534,6877],{"class":68},[62,12536,3959],{"class":3952},[62,12538,12539,12542,12544,12547,12549,12551,12554,12556,12558,12560,12563,12565,12567,12570,12572,12574,12576,12578,12580,12584,12586,12589,12591,12593,12596,12598,12600],{"class":64,"line":242},[62,12540,12541],{"class":2141},"      src",[62,12543,4880],{"class":3952},[62,12545,12546],{"class":6616},"local",[62,12548,1048],{"class":3650},[62,12550,3682],{"class":119},[62,12552,12553],{"class":68},"Barosan Regular",[62,12555,3682],{"class":119},[62,12557,1054],{"class":3650},[62,12559,1287],{"class":3952},[62,12561,12562],{"class":6616}," local",[62,12564,1048],{"class":3650},[62,12566,3682],{"class":119},[62,12568,12569],{"class":68},"Barosan-Regular",[62,12571,3682],{"class":119},[62,12573,1054],{"class":3650},[62,12575,1287],{"class":3952},[62,12577,8788],{"class":6616},[62,12579,1048],{"class":3650},[62,12581,12583],{"class":12582},"srhaB","https://example.com/fonts/barosan.woff2",[62,12585,1054],{"class":3650},[62,12587,12588],{"class":6616}," format",[62,12590,1048],{"class":3650},[62,12592,3682],{"class":119},[62,12594,12595],{"class":68},"woff2",[62,12597,3682],{"class":119},[62,12599,1054],{"class":3650},[62,12601,3959],{"class":3952},[62,12603,12604],{"class":64,"line":248},[62,12605,3359],{"class":3650},[62,12607,12608,12610,12612],{"class":64,"line":382},[62,12609,385],{"class":111},[62,12611,3477],{"class":115},[62,12613,308],{"class":111},[62,12615,12616,12618,12620],{"class":64,"line":392},[62,12617,700],{"class":111},[62,12619,1302],{"class":115},[62,12621,308],{"class":111},[15,12623,12624,12625,12627],{},"This adds a separate ",[59,12626,2060],{}," tag in the compiled email HTML, right after the main one.",[193,12629,12631],{"id":12630},"add-in-layout","Add in Layout",[15,12633,12634,12635,12637,12638,12640,12641,4895],{},"If you prefer a single ",[59,12636,2060],{}," tag in your email template, you can register the font in the Layout instead. Open ",[59,12639,3634],{}," and update the ",[59,12642,2060],{},[52,12644,12648],{"className":12645,"code":12646,"filename":3634,"highlights":12647,"language":4778,"meta":4968,"style":57},"language-css shiki shiki-themes tailwind-css tailwind-css has-diff","   \u003Cstyle>\n     @font-face { /* [!code ++] */\n       font-family: 'Barosan'; /* [!code ++] */\n       font-style: normal; /* [!code ++] */\n       font-weight: 400; /* [!code ++] */\n       src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2'); /* [!code ++] */\n     } /* [!code ++] */\n\n     @tailwind components;\n     @tailwind utilities;\n   \u003C/style>\n",[72,78,84,90,236,242],[59,12649,12650,12660,12668,12685,12697,12709,12767,12773,12777,12786,12794],{"__ignoreMap":57},[62,12651,12652,12655,12657],{"class":64,"line":65},[62,12653,12654],{"class":68},"   \u003C",[62,12656,3477],{"class":115},[62,12658,308],{"class":12659},"sbQc2",[62,12661,12663,12666],{"class":12662,"line":72},[64,138,107,139],[62,12664,12665],{"class":3952},"     @font-face",[62,12667,2732],{"class":3650},[62,12669,12671,12674,12676,12678,12680,12682],{"class":12670,"line":78},[64,138,107,139],[62,12672,12673],{"class":2141},"       font-family",[62,12675,4880],{"class":3952},[62,12677,3682],{"class":68},[62,12679,12509],{"class":2141},[62,12681,3682],{"class":68},[62,12683,12684],{"class":3952},"; ",[62,12686,12688,12691,12693,12695],{"class":12687,"line":84},[64,138,107,139],[62,12689,12690],{"class":2141},"       font-style",[62,12692,4880],{"class":3952},[62,12694,12523],{"class":6616},[62,12696,12684],{"class":3952},[62,12698,12700,12703,12705,12707],{"class":12699,"line":90},[64,138,107,139],[62,12701,12702],{"class":2141},"       font-weight",[62,12704,4880],{"class":3952},[62,12706,6877],{"class":68},[62,12708,12684],{"class":3952},[62,12710,12712,12715,12717,12719,12721,12723,12725,12727,12729,12731,12733,12735,12737,12739,12741,12743,12745,12747,12749,12751,12753,12755,12757,12759,12761,12763,12765],{"class":12711,"line":236},[64,138,107,139],[62,12713,12714],{"class":2141},"       src",[62,12716,4880],{"class":3952},[62,12718,12546],{"class":6616},[62,12720,1048],{"class":3650},[62,12722,3682],{"class":68},[62,12724,12553],{"class":2141},[62,12726,3682],{"class":68},[62,12728,1054],{"class":3650},[62,12730,1287],{"class":3952},[62,12732,12562],{"class":6616},[62,12734,1048],{"class":3650},[62,12736,3682],{"class":68},[62,12738,12569],{"class":2141},[62,12740,3682],{"class":68},[62,12742,1054],{"class":3650},[62,12744,1287],{"class":3952},[62,12746,8788],{"class":6616},[62,12748,1048],{"class":3650},[62,12750,12583],{"class":12582},[62,12752,1054],{"class":3650},[62,12754,12588],{"class":6616},[62,12756,1048],{"class":3650},[62,12758,3682],{"class":68},[62,12760,12595],{"class":2141},[62,12762,3682],{"class":68},[62,12764,1054],{"class":3650},[62,12766,12684],{"class":3952},[62,12768,12770],{"class":12769,"line":242},[64,138,107,139],[62,12771,12772],{"class":3650},"     }",[62,12774,12775],{"class":64,"line":248},[62,12776,297],{"emptyLinePlaceholder":296},[62,12778,12779,12782,12784],{"class":64,"line":382},[62,12780,12781],{"class":3952},"     @tailwind",[62,12783,3966],{"class":68},[62,12785,3959],{"class":3952},[62,12787,12788,12790,12792],{"class":64,"line":392},[62,12789,12781],{"class":3952},[62,12791,3956],{"class":68},[62,12793,3959],{"class":3952},[62,12795,12796,12799,12801],{"class":64,"line":402},[62,12797,12798],{"class":68},"   \u003C/",[62,12800,3477],{"class":115},[62,12802,308],{"class":12659},[3587,12804,12805],{},"\nYou can use the same technique to load font files from Google Fonts - it's currently the only way to get them working in Shopify notifications. To find out the URL of a Google Font (and actually, its entire `@font-face` CSS) simply access the URL they give you, in a new browser tab.\n",[41,12807,12809],{"id":12808},"tailwind-css-utility","Tailwind CSS utility",[15,12811,12812],{},"Now that we're importing the font, we should register a Tailwind CSS utility for it.",[15,12814,12453,12815,12817,12818,12821],{},[59,12816,7213],{},", scroll down to ",[59,12819,12820],{},"fontFamily",", and add a new font:",[52,12823,12826],{"className":4523,"code":12824,"filename":7213,"highlights":12825,"language":757,"meta":57,"style":57},"export default {\n  theme: {\n    extend: {\n      fontFamily: {\n        barosan: ['Barosan', '-apple-system', '\"Segoe UI\"', 'sans-serif'], /* [!code ++] */\n      }\n    },\n  },\n}\n",[90],[59,12827,12828,12836,12844,12853,12862,12894,12898,12902,12906],{"__ignoreMap":57},[62,12829,12830,12832,12834],{"class":64,"line":65},[62,12831,784],{"class":115},[62,12833,787],{"class":115},[62,12835,791],{"class":790},[62,12837,12838,12840,12842],{"class":64,"line":72},[62,12839,10497],{"class":68},[62,12841,203],{"class":790},[62,12843,791],{"class":790},[62,12845,12846,12849,12851],{"class":64,"line":78},[62,12847,12848],{"class":68},"    extend",[62,12850,203],{"class":790},[62,12852,791],{"class":790},[62,12854,12855,12858,12860],{"class":64,"line":84},[62,12856,12857],{"class":68},"      fontFamily",[62,12859,203],{"class":790},[62,12861,791],{"class":790},[62,12863,12865,12868,12870,12872,12875,12877,12880,12882,12885,12887,12890,12892],{"class":12864,"line":90},[64,138,107,139],[62,12866,12867],{"class":68},"        barosan",[62,12869,203],{"class":790},[62,12871,4554],{"class":68},[62,12873,12874],{"class":68},"'Barosan'",[62,12876,1287],{"class":790},[62,12878,12879],{"class":68}," '-apple-system'",[62,12881,1287],{"class":790},[62,12883,12884],{"class":68}," '\"Segoe UI\"'",[62,12886,1287],{"class":790},[62,12888,12889],{"class":68}," 'sans-serif'",[62,12891,997],{"class":68},[62,12893,1287],{"class":790},[62,12895,12896],{"class":64,"line":236},[62,12897,1996],{"class":790},[62,12899,12900],{"class":64,"line":242},[62,12901,840],{"class":790},[62,12903,12904],{"class":64,"line":248},[62,12905,845],{"class":790},[62,12907,12908],{"class":64,"line":382},[62,12909,2028],{"class":790},[15,12911,12912,12913,39],{},"Of course, you can change the other fonts in the stack. For example, display fonts often fallback to ",[59,12914,12915],{},"cursive",[15,12917,12918],{},"Great! We're now ready to use the utility class in our email template.",[41,12920,12922],{"id":12921},"quick-use","Quick use",[15,12924,12925,12926,12929],{},"Add the ",[59,12927,12928],{},"font-barosan"," class on elements that you want to use your custom font.",[15,12931,12932],{},"For example, you can add it on a heading:",[52,12934,12936],{"className":54,"code":12935,"language":56,"meta":57,"style":57},"\u003Ch2 class=\"font-barosan\">An article title\u003C/h2>\n",[59,12937,12938],{"__ignoreMap":57},[62,12939,12940,12942,12944,12946,12948,12950,12952,12954,12956,12959,12961,12963],{"class":64,"line":65},[62,12941,302],{"class":111},[62,12943,41],{"class":115},[62,12945,4016],{"class":119},[62,12947,123],{"class":111},[62,12949,126],{"class":119},[62,12951,12928],{"class":68},[62,12953,126],{"class":119},[62,12955,134],{"class":111},[62,12957,12958],{"class":68},"An article title",[62,12960,700],{"class":111},[62,12962,41],{"class":115},[62,12964,308],{"class":111},[15,12966,12967,12968,12971],{},"With ",[25,12969,7115],{"href":12970},"/docs/transformers/inline-css"," enabled, that would result in:",[52,12973,12975],{"className":54,"code":12974,"language":56,"meta":57,"style":57},"\u003Ch2 style=\"font-family: Barosan, -apple-system, 'Segoe UI', sans-serif;\">An article title\u003C/h2>\n",[59,12976,12977],{"__ignoreMap":57},[62,12978,12979,12981,12983,12985,12987,12989,12992,12994,12996,12998,13000,13002],{"class":64,"line":65},[62,12980,302],{"class":111},[62,12982,41],{"class":115},[62,12984,4998],{"class":119},[62,12986,123],{"class":111},[62,12988,126],{"class":119},[62,12990,12991],{"class":68},"font-family: Barosan, -apple-system, 'Segoe UI', sans-serif;",[62,12993,126],{"class":119},[62,12995,134],{"class":111},[62,12997,12958],{"class":68},[62,12999,700],{"class":111},[62,13001,41],{"class":115},[62,13003,308],{"class":111},[41,13005,13007],{"id":13006},"advanced-use","Advanced use",[15,13009,13010,13011,13013,13014,39],{},"Repeatedly writing that ",[59,13012,12928],{}," class on all elements isn't just impractical, it also increases HTML file size (especially when inlining), which then leads to ",[25,13015,13018],{"href":13016,"rel":13017},"https://github.com/hteumeuleu/email-bugs/issues/41",[37],"Gmail clipping",[15,13020,13021,13024],{},[59,13022,13023],{},"font-family"," is inherited, which means you can just add the utility to the top element:",[52,13026,13028],{"className":54,"code":13027,"filename":12456,"language":56,"meta":57,"style":57},"\u003Cx-main>\n  \u003Ctable class=\"font-barosan\">\n    \u003C!-- your email HTML... -->\n  \u003C/table>\n\u003C/x-main>\n",[59,13029,13030,13038,13056,13061,13069],{"__ignoreMap":57},[62,13031,13032,13034,13036],{"class":64,"line":65},[62,13033,302],{"class":111},[62,13035,305],{"class":115},[62,13037,308],{"class":111},[62,13039,13040,13042,13044,13046,13048,13050,13052,13054],{"class":64,"line":72},[62,13041,112],{"class":111},[62,13043,4276],{"class":115},[62,13045,4016],{"class":119},[62,13047,123],{"class":111},[62,13049,126],{"class":119},[62,13051,12928],{"class":68},[62,13053,126],{"class":119},[62,13055,308],{"class":111},[62,13057,13058],{"class":64,"line":78},[62,13059,13060],{"class":313},"    \u003C!-- your email HTML... -->\n",[62,13062,13063,13065,13067],{"class":64,"line":84},[62,13064,385],{"class":111},[62,13066,4276],{"class":115},[62,13068,308],{"class":111},[62,13070,13071,13073,13075],{"class":64,"line":90},[62,13072,700],{"class":111},[62,13074,305],{"class":115},[62,13076,308],{"class":111},[15,13078,13079,13080,39],{},"However, that could trigger ",[25,13081,13084],{"href":13082,"rel":13083},"https://www.caniemail.com/search/?s=font#font-face-cite-note-5",[37],"Outlook's Times New Roman bug",[15,13086,13087,13088,13090,13091,13093],{},"We can work around that by making use of Tailwind's ",[59,13089,11030],{}," variants and an Outlook ",[59,13092,13023],{}," fallback to reduce bloat and write less code 👌",[15,13095,13096,13097,13099,13100,203],{},"First, let's register a new ",[59,13098,11023],{}," query - we will call it ",[59,13101,11030],{},[52,13103,13106],{"className":4523,"code":13104,"filename":7213,"highlights":13105,"language":757,"meta":57,"style":57},"export default {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[236],[59,13107,13108,13116,13124,13132,13148,13164,13181,13185,13189],{"__ignoreMap":57},[62,13109,13110,13112,13114],{"class":64,"line":65},[62,13111,784],{"class":115},[62,13113,787],{"class":115},[62,13115,791],{"class":790},[62,13117,13118,13120,13122],{"class":64,"line":72},[62,13119,10497],{"class":68},[62,13121,203],{"class":790},[62,13123,791],{"class":790},[62,13125,13126,13128,13130],{"class":64,"line":78},[62,13127,11062],{"class":68},[62,13129,203],{"class":790},[62,13131,791],{"class":790},[62,13133,13134,13136,13138,13140,13142,13144,13146],{"class":64,"line":84},[62,13135,11071],{"class":68},[62,13137,203],{"class":790},[62,13139,2732],{"class":790},[62,13141,11078],{"class":68},[62,13143,203],{"class":790},[62,13145,11083],{"class":68},[62,13147,11086],{"class":790},[62,13149,13150,13152,13154,13156,13158,13160,13162],{"class":64,"line":90},[62,13151,11091],{"class":68},[62,13153,203],{"class":790},[62,13155,2732],{"class":790},[62,13157,11078],{"class":68},[62,13159,203],{"class":790},[62,13161,11102],{"class":68},[62,13163,11086],{"class":790},[62,13165,13167,13169,13171,13173,13175,13177,13179],{"class":13166,"line":236},[64,138,107,139],[62,13168,11110],{"class":68},[62,13170,203],{"class":790},[62,13172,2732],{"class":790},[62,13174,11117],{"class":68},[62,13176,203],{"class":790},[62,13178,11122],{"class":68},[62,13180,11125],{"class":790},[62,13182,13183],{"class":64,"line":242},[62,13184,3359],{"class":790},[62,13186,13187],{"class":64,"line":248},[62,13188,1321],{"class":790},[62,13190,13191],{"class":64,"line":382},[62,13192,2028],{"class":790},[15,13194,13195,13196,13199],{},"We can now use it on the outermost",[13197,13198,9610],"sup",{}," element:",[52,13201,13203],{"className":54,"code":13202,"filename":12456,"language":56,"meta":57,"style":57},"\u003Cx-main>\n  \u003Ctable class=\"screen:font-barosan\">\n    \u003C!-- your email HTML... -->\n  \u003C/table>\n\u003C/x-main>\n",[59,13204,13205,13213,13232,13236,13244],{"__ignoreMap":57},[62,13206,13207,13209,13211],{"class":64,"line":65},[62,13208,302],{"class":111},[62,13210,305],{"class":115},[62,13212,308],{"class":111},[62,13214,13215,13217,13219,13221,13223,13225,13228,13230],{"class":64,"line":72},[62,13216,112],{"class":111},[62,13218,4276],{"class":115},[62,13220,4016],{"class":119},[62,13222,123],{"class":111},[62,13224,126],{"class":119},[62,13226,13227],{"class":68},"screen:font-barosan",[62,13229,126],{"class":119},[62,13231,308],{"class":111},[62,13233,13234],{"class":64,"line":78},[62,13235,13060],{"class":313},[62,13237,13238,13240,13242],{"class":64,"line":84},[62,13239,385],{"class":111},[62,13241,4276],{"class":115},[62,13243,308],{"class":111},[62,13245,13246,13248,13250],{"class":64,"line":90},[62,13247,700],{"class":111},[62,13249,305],{"class":115},[62,13251,308],{"class":111},[3587,13253,13254,13257,13258,13261],{},[13197,13255,13256],{},"\n1\n","\n Don't add it to the \n",[59,13259,13260],{},"\u003Cbody>","\n - some email clients remove or replace this tag.\n",[15,13263,13264,13265,13267,13268,13270],{},"This will tuck the ",[59,13266,13023],{}," away in an ",[59,13269,11023],{}," query:",[52,13272,13274],{"className":4776,"code":13273,"language":4778,"meta":57,"style":57},"/* Compiled CSS. Maizzle replaces escaped \\: with - */\n@media screen {\n  .screen-font-barosan {\n    font-family: Barosan, -apple-system, \"Segoe UI\", sans-serif !important;\n  }\n}\n",[59,13275,13276,13281,13290,13297,13330,13334],{"__ignoreMap":57},[62,13277,13278],{"class":64,"line":65},[62,13279,13280],{"class":313},"/* Compiled CSS. Maizzle replaces escaped \\: with - */\n",[62,13282,13283,13285,13288],{"class":64,"line":72},[62,13284,11023],{"class":3952},[62,13286,13287],{"class":6616}," screen",[62,13289,791],{"class":3650},[62,13291,13292,13295],{"class":64,"line":78},[62,13293,13294],{"class":115},"  .screen-font-barosan",[62,13296,791],{"class":3650},[62,13298,13299,13302,13304,13306,13308,13311,13313,13315,13318,13320,13322,13325,13328],{"class":64,"line":84},[62,13300,13301],{"class":2141},"    font-family",[62,13303,4880],{"class":3952},[62,13305,12509],{"class":12582},[62,13307,1287],{"class":3952},[62,13309,13310],{"class":6616}," -apple-system",[62,13312,1287],{"class":3952},[62,13314,4916],{"class":68},[62,13316,13317],{"class":2141},"Segoe UI",[62,13319,126],{"class":68},[62,13321,1287],{"class":3952},[62,13323,13324],{"class":6616}," sans-serif",[62,13326,13327],{"class":115}," !important",[62,13329,3959],{"class":3952},[62,13331,13332],{"class":64,"line":90},[62,13333,1321],{"class":3650},[62,13335,13336],{"class":64,"line":236},[62,13337,2028],{"class":3650},[15,13339,13340,13341,13343,13344,13347,13348,13350],{},"Since Outlook on Windows doesn't read ",[59,13342,11023],{}," queries, define a fallback",[13197,13345,13346],{},"2"," for it in the ",[59,13349,2064],{}," of your Layout:",[52,13352,13354],{"className":54,"code":13353,"filename":3634,"language":56,"meta":57,"style":57},"\u003C!--[if mso]>\n\u003Cstyle>\n  td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif;}\n\u003C/style>\n\u003C![endif]-->\n",[59,13355,13356,13361,13366,13371,13376],{"__ignoreMap":57},[62,13357,13358],{"class":64,"line":65},[62,13359,13360],{"class":313},"\u003C!--[if mso]>\n",[62,13362,13363],{"class":64,"line":72},[62,13364,13365],{"class":313},"\u003Cstyle>\n",[62,13367,13368],{"class":64,"line":78},[62,13369,13370],{"class":313},"  td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif;}\n",[62,13372,13373],{"class":64,"line":84},[62,13374,13375],{"class":313},"\u003C/style>\n",[62,13377,13378],{"class":64,"line":90},[62,13379,13380],{"class":313},"\u003C![endif]-->\n",[3587,13382,13383,13386,13387,13389],{},[13197,13384,13385],{},"\n2\n","\n The Maizzle Starter includes this fallback in the \n",[59,13388,4586],{},"\n Layout by default.\n",[41,13391,13393],{"id":13392},"outlook-bugs","Outlook bugs",[15,13395,13396],{},"Custom fonts aren't supported in Outlook 2007-2019 on Windows - most of these email clients will fallback to Times New Roman if you try to use one.",[15,13398,13399,13400,13402,13403,13405],{},"To avoid this, you can wrap the ",[59,13401,12445],{}," declaration in a ",[59,13404,11023],{}," query, so that Outlook will ignore it:",[52,13407,13409],{"className":4776,"code":13408,"language":4778,"meta":57,"style":57},"@media screen {\n  @font-face {\n    font-family: 'Barosan';\n    font-style: normal;\n    font-weight: 400;\n    src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n  }\n}\n",[59,13410,13411,13419,13426,13440,13451,13462,13519,13523],{"__ignoreMap":57},[62,13412,13413,13415,13417],{"class":64,"line":65},[62,13414,11023],{"class":3952},[62,13416,13287],{"class":6616},[62,13418,791],{"class":3650},[62,13420,13421,13424],{"class":64,"line":72},[62,13422,13423],{"class":3952},"  @font-face",[62,13425,791],{"class":3650},[62,13427,13428,13430,13432,13434,13436,13438],{"class":64,"line":78},[62,13429,13301],{"class":2141},[62,13431,4880],{"class":3952},[62,13433,3682],{"class":68},[62,13435,12509],{"class":2141},[62,13437,3682],{"class":68},[62,13439,3959],{"class":3952},[62,13441,13442,13445,13447,13449],{"class":64,"line":84},[62,13443,13444],{"class":2141},"    font-style",[62,13446,4880],{"class":3952},[62,13448,12523],{"class":6616},[62,13450,3959],{"class":3952},[62,13452,13453,13456,13458,13460],{"class":64,"line":90},[62,13454,13455],{"class":2141},"    font-weight",[62,13457,4880],{"class":3952},[62,13459,6877],{"class":68},[62,13461,3959],{"class":3952},[62,13463,13464,13467,13469,13471,13473,13475,13477,13479,13481,13483,13485,13487,13489,13491,13493,13495,13497,13499,13501,13503,13505,13507,13509,13511,13513,13515,13517],{"class":64,"line":236},[62,13465,13466],{"class":2141},"    src",[62,13468,4880],{"class":3952},[62,13470,12546],{"class":6616},[62,13472,1048],{"class":3650},[62,13474,3682],{"class":68},[62,13476,12553],{"class":2141},[62,13478,3682],{"class":68},[62,13480,1054],{"class":3650},[62,13482,1287],{"class":3952},[62,13484,12562],{"class":6616},[62,13486,1048],{"class":3650},[62,13488,3682],{"class":68},[62,13490,12569],{"class":2141},[62,13492,3682],{"class":68},[62,13494,1054],{"class":3650},[62,13496,1287],{"class":3952},[62,13498,8788],{"class":6616},[62,13500,1048],{"class":3650},[62,13502,12583],{"class":12582},[62,13504,1054],{"class":3650},[62,13506,12588],{"class":6616},[62,13508,1048],{"class":3650},[62,13510,3682],{"class":68},[62,13512,12595],{"class":2141},[62,13514,3682],{"class":68},[62,13516,1054],{"class":3650},[62,13518,3959],{"class":3952},[62,13520,13521],{"class":64,"line":242},[62,13522,1321],{"class":3650},[62,13524,13525],{"class":64,"line":248},[62,13526,2028],{"class":3650},[15,13528,13529,13530,13532],{},"Also, note that ",[59,13531,13023],{}," isn't inherited on child elements in Outlook.",[41,13534,13536],{"id":13535},"extra-weights","Extra weights",[15,13538,13539,13540,13543],{},"If your font comes with dedicated files for other weights, don't just slap ",[59,13541,13542],{},"font-bold"," on an element.",[15,13545,13546],{},"Instead, import both the regular and bold versions of your font:",[52,13548,13550],{"className":4776,"code":13549,"language":4778,"meta":57,"style":57},"@font-face {\n  font-family: 'Barosan';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n}\n\n@font-face {\n  font-family: 'Barosan';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Barosan Bold'), local('Barosan-Bold'), url(https://example.com/fonts/barosan-bold.woff2) format('woff2');\n}\n",[59,13551,13552,13558,13573,13584,13595,13652,13656,13660,13666,13680,13690,13701,13760],{"__ignoreMap":57},[62,13553,13554,13556],{"class":64,"line":65},[62,13555,12445],{"class":3952},[62,13557,791],{"class":3650},[62,13559,13560,13563,13565,13567,13569,13571],{"class":64,"line":72},[62,13561,13562],{"class":2141},"  font-family",[62,13564,4880],{"class":3952},[62,13566,3682],{"class":68},[62,13568,12509],{"class":2141},[62,13570,3682],{"class":68},[62,13572,3959],{"class":3952},[62,13574,13575,13578,13580,13582],{"class":64,"line":78},[62,13576,13577],{"class":2141},"  font-style",[62,13579,4880],{"class":3952},[62,13581,12523],{"class":6616},[62,13583,3959],{"class":3952},[62,13585,13586,13589,13591,13593],{"class":64,"line":84},[62,13587,13588],{"class":2141},"  font-weight",[62,13590,4880],{"class":3952},[62,13592,6877],{"class":68},[62,13594,3959],{"class":3952},[62,13596,13597,13600,13602,13604,13606,13608,13610,13612,13614,13616,13618,13620,13622,13624,13626,13628,13630,13632,13634,13636,13638,13640,13642,13644,13646,13648,13650],{"class":64,"line":90},[62,13598,13599],{"class":2141},"  src",[62,13601,4880],{"class":3952},[62,13603,12546],{"class":6616},[62,13605,1048],{"class":3650},[62,13607,3682],{"class":68},[62,13609,12553],{"class":2141},[62,13611,3682],{"class":68},[62,13613,1054],{"class":3650},[62,13615,1287],{"class":3952},[62,13617,12562],{"class":6616},[62,13619,1048],{"class":3650},[62,13621,3682],{"class":68},[62,13623,12569],{"class":2141},[62,13625,3682],{"class":68},[62,13627,1054],{"class":3650},[62,13629,1287],{"class":3952},[62,13631,8788],{"class":6616},[62,13633,1048],{"class":3650},[62,13635,12583],{"class":12582},[62,13637,1054],{"class":3650},[62,13639,12588],{"class":6616},[62,13641,1048],{"class":3650},[62,13643,3682],{"class":68},[62,13645,12595],{"class":2141},[62,13647,3682],{"class":68},[62,13649,1054],{"class":3650},[62,13651,3959],{"class":3952},[62,13653,13654],{"class":64,"line":236},[62,13655,2028],{"class":3650},[62,13657,13658],{"class":64,"line":242},[62,13659,297],{"emptyLinePlaceholder":296},[62,13661,13662,13664],{"class":64,"line":248},[62,13663,12445],{"class":3952},[62,13665,791],{"class":3650},[62,13667,13668,13670,13672,13674,13676,13678],{"class":64,"line":382},[62,13669,13562],{"class":2141},[62,13671,4880],{"class":3952},[62,13673,3682],{"class":68},[62,13675,12509],{"class":2141},[62,13677,3682],{"class":68},[62,13679,3959],{"class":3952},[62,13681,13682,13684,13686,13688],{"class":64,"line":392},[62,13683,13577],{"class":2141},[62,13685,4880],{"class":3952},[62,13687,12523],{"class":6616},[62,13689,3959],{"class":3952},[62,13691,13692,13694,13696,13699],{"class":64,"line":402},[62,13693,13588],{"class":2141},[62,13695,4880],{"class":3952},[62,13697,13698],{"class":68},"700",[62,13700,3959],{"class":3952},[62,13702,13703,13705,13707,13709,13711,13713,13716,13718,13720,13722,13724,13726,13728,13731,13733,13735,13737,13739,13741,13744,13746,13748,13750,13752,13754,13756,13758],{"class":64,"line":442},[62,13704,13599],{"class":2141},[62,13706,4880],{"class":3952},[62,13708,12546],{"class":6616},[62,13710,1048],{"class":3650},[62,13712,3682],{"class":68},[62,13714,13715],{"class":2141},"Barosan Bold",[62,13717,3682],{"class":68},[62,13719,1054],{"class":3650},[62,13721,1287],{"class":3952},[62,13723,12562],{"class":6616},[62,13725,1048],{"class":3650},[62,13727,3682],{"class":68},[62,13729,13730],{"class":2141},"Barosan-Bold",[62,13732,3682],{"class":68},[62,13734,1054],{"class":3650},[62,13736,1287],{"class":3952},[62,13738,8788],{"class":6616},[62,13740,1048],{"class":3650},[62,13742,13743],{"class":12582},"https://example.com/fonts/barosan-bold.woff2",[62,13745,1054],{"class":3650},[62,13747,12588],{"class":6616},[62,13749,1048],{"class":3650},[62,13751,3682],{"class":68},[62,13753,12595],{"class":2141},[62,13755,3682],{"class":68},[62,13757,1054],{"class":3650},[62,13759,3959],{"class":3952},[62,13761,13762],{"class":64,"line":451},[62,13763,2028],{"class":3650},[41,13765,3460],{"id":3459},[733,13767,13768,13776],{},[736,13769,13770,13775],{},[25,13771,13774],{"href":13772,"rel":13773},"https://litmus.com/blog/the-ultimate-guide-to-web-fonts",[37],"The Ultimate Guide to Web Fonts"," on Litmus",[736,13777,13778],{},[25,13779,13782],{"href":13780,"rel":13781},"https://www.caniemail.com/features/css-at-font-face/",[37],"@font-face support in email",[3477,13784,13785],{},"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 .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}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 .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .srhaB, html code.shiki .srhaB{--shiki-light:#075985;--shiki-dark:#075985}html pre.shiki code .sbQc2, html code.shiki .sbQc2{--shiki-light:#64748B;--shiki-dark:#64748B}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}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":57,"searchDepth":72,"depth":72,"links":13787},[13788,13789,13793,13794,13795,13796,13797,13798],{"id":6478,"depth":72,"text":6479},{"id":12435,"depth":72,"text":12436,"children":13790},[13791,13792],{"id":12449,"depth":78,"text":12450},{"id":12630,"depth":78,"text":12631},{"id":12808,"depth":72,"text":12809},{"id":12921,"depth":72,"text":12922},{"id":13006,"depth":72,"text":13007},{"id":13392,"depth":72,"text":13393},{"id":13535,"depth":72,"text":13536},{"id":3459,"depth":72,"text":3460},"2020-01-31T00:00:00.000Z","Learn how to include custom web fonts in your email templates and use them efficiently through Tailwind CSS utilities.",{},"/guides/custom-fonts",{"title":12380,"description":13800},{"loc":13802},"guides/custom-fonts","0273ukA0_vcOFyqCMFYlqpg9TKCeI1-mcjPLSnrWnLE",1780318599920]