[{"data":1,"prerenderedAt":3508},["ShallowReactive",2],{"/guides/mailchimp-package":3,"surround":3502},{"id":4,"title":5,"body":6,"date":3493,"description":3494,"extension":3495,"meta":3496,"navigation":295,"path":3497,"seo":3498,"sitemap":3499,"stem":3500,"__hash__":3501},"guides/guides/mailchimp-package.md","Automating Mailchimp template zip packaging with Maizzle",{"type":7,"value":8,"toc":3479},"minimark",[9,13,17,20,29,39,44,47,50,93,96,156,160,163,178,185,188,191,196,203,251,254,258,265,272,704,721,725,728,731,744,751,903,918,922,925,930,2028,2031,2073,2077,2086,2089,2107,2111,2122,2127,2392,2396,2399,2406,2410,3369,3373,3383,3386,3450,3456,3460,3475],[10,11,5],"h1",{"id":12},"automating-mailchimp-template-zip-packaging-with-maizzle",[14,15,16],"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.",[14,18,19],{},"And if you've done this for many templates, you also know that it can be a tedious process.",[14,21,22,23,28],{},"In this guide, you'll learn how to use Maizzle's ",[24,25,27],"a",{"href":26},"/docs/events","events"," to automatically package your templates and their images into a zip archive that can be uploaded to Mailchimp.",[14,30,31,32,38],{},"If you want to dive right in, check out the ",[24,33,37],{"href":34,"rel":35},"https://github.com/maizzle/starter-mailchimp",[36],"nofollow","Mailchimp Starter",".",[40,41,43],"h2",{"id":42},"requirements","Requirements",[14,45,46],{},"Mailchimp requires that the zip archive contains the HTML file and all its images in the same folder.",[14,48,49],{},"For example:",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"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","",[58,59,60,69,75,81,87],"code",{"__ignoreMap":56},[61,62,65],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sfCc6","template.zip\n",[61,70,72],{"class":63,"line":71},2,[61,73,74],{"class":67},"├── index.html\n",[61,76,78],{"class":63,"line":77},3,[61,79,80],{"class":67},"├── image1.jpg\n",[61,82,84],{"class":63,"line":83},4,[61,85,86],{"class":67},"├── image2.jpg\n",[61,88,90],{"class":63,"line":89},5,[61,91,92],{"class":67},"└── image3.jpg\n",[14,94,95],{},"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:",[51,97,101],{"className":98,"code":99,"highlights":100,"language":55,"meta":56,"style":56},"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",[71],[58,102,103,134],{"__ignoreMap":56},[61,104,108,112,116,120,123,126,129,131],{"class":105,"line":64},[63,106,107],"diff","remove",[61,109,111],{"class":110},"soJEP","  \u003C",[61,113,115],{"class":114},"sizJ4","img",[61,117,119],{"class":118},"sQMLp"," src",[61,121,122],{"class":110},"=",[61,124,125],{"class":118},"\"",[61,127,128],{"class":67},"https://some-cdn.com/image1.jpg",[61,130,125],{"class":118},[61,132,133],{"class":110},">",[61,135,139,141,143,145,147,149,152,154],{"class":136,"line":71},[63,137,106,138],"highlight","add",[61,140,111],{"class":110},[61,142,115],{"class":114},[61,144,119],{"class":118},[61,146,122],{"class":110},[61,148,125],{"class":118},[61,150,151],{"class":67},"image1.jpg",[61,153,125],{"class":118},[61,155,133],{"class":110},[40,157,159],{"id":158},"project-setup","Project setup",[14,161,162],{},"We're starting from scratch, so let's scaffold a new project using the Official Starter:",[51,164,168],{"className":165,"code":166,"language":167,"meta":56,"style":56},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh",[58,169,170],{"__ignoreMap":56},[61,171,172,175],{"class":63,"line":64},[61,173,174],{"class":114},"npx",[61,176,177],{"class":67}," create-maizzle\n",[14,179,180,181,184],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[58,182,183],{},"./mailchimp-project",", and select the Default Starter.",[14,186,187],{},"Choose Yes when prompted to Install dependencies.",[14,189,190],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[192,193,195],"h3",{"id":194},"structure","Structure",[14,197,198,199,202],{},"We'll be organizing our templates into folders inside ",[58,200,201],{},"templates",":",[51,204,206],{"className":53,"code":205,"language":55,"meta":56,"style":56},"src\n└── templates\n    └── template-1\n        ├── index.html\n        ├── image1.jpg\n        ├── image2.jpg\n        └── image3.jpg\n    └── ...\n",[58,207,208,213,218,223,228,233,239,245],{"__ignoreMap":56},[61,209,210],{"class":63,"line":64},[61,211,212],{"class":67},"src\n",[61,214,215],{"class":63,"line":71},[61,216,217],{"class":67},"└── templates\n",[61,219,220],{"class":63,"line":77},[61,221,222],{"class":67},"    └── template-1\n",[61,224,225],{"class":63,"line":83},[61,226,227],{"class":67},"        ├── index.html\n",[61,229,230],{"class":63,"line":89},[61,231,232],{"class":67},"        ├── image1.jpg\n",[61,234,236],{"class":63,"line":235},6,[61,237,238],{"class":67},"        ├── image2.jpg\n",[61,240,242],{"class":63,"line":241},7,[61,243,244],{"class":67},"        └── image3.jpg\n",[61,246,248],{"class":63,"line":247},8,[61,249,250],{"class":67},"    └── ...\n",[14,252,253],{},"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.",[40,255,257],{"id":256},"create-a-template","Create a template",[14,259,260,261,264],{},"For this written guide, we'll be using a simplified template with a few images. See the ",[24,262,37],{"href":34,"rel":263},[36]," for a more extensive example.",[14,266,267,268,271],{},"Create ",[58,269,270],{},"emails/template-1/index.html"," and paste in the following code:",[51,273,275],{"className":53,"code":274,"filename":270,"language":55,"meta":56,"style":56},"---\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",[58,276,277,282,287,291,297,308,314,335,379,389,399,439,448,453,462,468,477,482,491,497,506,511,521,563,572,577,586,592,601,606,615,656,665,670,679,685,694],{"__ignoreMap":56},[61,278,279],{"class":63,"line":64},[61,280,281],{"class":67},"---\n",[61,283,284],{"class":63,"line":71},[61,285,286],{"class":67},"title: \"Example template 1\"\n",[61,288,289],{"class":63,"line":77},[61,290,281],{"class":67},[61,292,293],{"class":63,"line":83},[61,294,296],{"emptyLinePlaceholder":295},true,"\n",[61,298,299,302,305],{"class":63,"line":89},[61,300,301],{"class":110},"\u003C",[61,303,304],{"class":114},"x-main",[61,306,307],{"class":110},">\n",[61,309,310],{"class":63,"line":235},[61,311,313],{"class":312},"smVoC","  \u003C!-- Condition needed in order to see global images when developing locally -->\n",[61,315,316,318,321,324,326,328,331,333],{"class":63,"line":241},[61,317,111],{"class":110},[61,319,320],{"class":114},"if",[61,322,323],{"class":118}," condition",[61,325,122],{"class":110},[61,327,125],{"class":118},[61,329,330],{"class":67},"page.env === 'local'",[61,332,125],{"class":118},[61,334,307],{"class":110},[61,336,337,340,342,344,346,348,351,353,356,358,360,363,365,368,370,372,375,377],{"class":63,"line":247},[61,338,339],{"class":110},"    \u003C",[61,341,115],{"class":114},[61,343,119],{"class":118},[61,345,122],{"class":110},[61,347,125],{"class":118},[61,349,350],{"class":67},"/images/insignia.png",[61,352,125],{"class":118},[61,354,355],{"class":118}," width",[61,357,122],{"class":110},[61,359,125],{"class":118},[61,361,362],{"class":67},"70",[61,364,125],{"class":118},[61,366,367],{"class":118}," alt",[61,369,122],{"class":110},[61,371,125],{"class":118},[61,373,374],{"class":67},"Maizzle",[61,376,125],{"class":118},[61,378,307],{"class":110},[61,380,382,385,387],{"class":63,"line":381},9,[61,383,384],{"class":110},"  \u003C/",[61,386,320],{"class":114},[61,388,307],{"class":110},[61,390,392,394,397],{"class":63,"line":391},10,[61,393,111],{"class":110},[61,395,396],{"class":114},"else",[61,398,307],{"class":110},[61,400,402,404,406,408,410,412,415,417,419,421,423,425,427,429,431,433,435,437],{"class":63,"line":401},11,[61,403,339],{"class":110},[61,405,115],{"class":114},[61,407,119],{"class":118},[61,409,122],{"class":110},[61,411,125],{"class":118},[61,413,414],{"class":67},"insignia.png",[61,416,125],{"class":118},[61,418,355],{"class":118},[61,420,122],{"class":110},[61,422,125],{"class":118},[61,424,362],{"class":67},[61,426,125],{"class":118},[61,428,367],{"class":118},[61,430,122],{"class":110},[61,432,125],{"class":118},[61,434,374],{"class":67},[61,436,125],{"class":118},[61,438,307],{"class":110},[61,440,442,444,446],{"class":63,"line":441},12,[61,443,384],{"class":110},[61,445,396],{"class":114},[61,447,307],{"class":110},[61,449,451],{"class":63,"line":450},13,[61,452,296],{"emptyLinePlaceholder":295},[61,454,456,458,460],{"class":63,"line":455},14,[61,457,111],{"class":110},[61,459,10],{"class":114},[61,461,307],{"class":110},[61,463,465],{"class":63,"line":464},15,[61,466,467],{"class":67},"    Hello,\n",[61,469,471,473,475],{"class":63,"line":470},16,[61,472,384],{"class":110},[61,474,10],{"class":114},[61,476,307],{"class":110},[61,478,480],{"class":63,"line":479},17,[61,481,296],{"emptyLinePlaceholder":295},[61,483,485,487,489],{"class":63,"line":484},18,[61,486,111],{"class":110},[61,488,14],{"class":114},[61,490,307],{"class":110},[61,492,494],{"class":63,"line":493},19,[61,495,496],{"class":67},"    As you might know, lorem ipsum dolor sit amet...\n",[61,498,500,502,504],{"class":63,"line":499},20,[61,501,384],{"class":110},[61,503,14],{"class":114},[61,505,307],{"class":110},[61,507,509],{"class":63,"line":508},21,[61,510,296],{"emptyLinePlaceholder":295},[61,512,514,516,519],{"class":63,"line":513},22,[61,515,111],{"class":110},[61,517,518],{"class":114},"div",[61,520,307],{"class":110},[61,522,524,526,528,530,532,534,537,539,541,543,545,548,550,552,554,556,559,561],{"class":63,"line":523},23,[61,525,339],{"class":110},[61,527,115],{"class":114},[61,529,119],{"class":118},[61,531,122],{"class":110},[61,533,125],{"class":118},[61,535,536],{"class":67},"maizzle.png",[61,538,125],{"class":118},[61,540,355],{"class":118},[61,542,122],{"class":110},[61,544,125],{"class":118},[61,546,547],{"class":67},"456",[61,549,125],{"class":118},[61,551,367],{"class":118},[61,553,122],{"class":110},[61,555,125],{"class":118},[61,557,558],{"class":67},"Maizzle cover image",[61,560,125],{"class":118},[61,562,307],{"class":110},[61,564,566,568,570],{"class":63,"line":565},24,[61,567,384],{"class":110},[61,569,518],{"class":114},[61,571,307],{"class":110},[61,573,575],{"class":63,"line":574},25,[61,576,296],{"emptyLinePlaceholder":295},[61,578,580,582,584],{"class":63,"line":579},26,[61,581,111],{"class":110},[61,583,14],{"class":114},[61,585,307],{"class":110},[61,587,589],{"class":63,"line":588},27,[61,590,591],{"class":67},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat.\n",[61,593,595,597,599],{"class":63,"line":594},28,[61,596,384],{"class":110},[61,598,14],{"class":114},[61,600,307],{"class":110},[61,602,604],{"class":63,"line":603},29,[61,605,296],{"emptyLinePlaceholder":295},[61,607,609,611,613],{"class":63,"line":608},30,[61,610,111],{"class":110},[61,612,518],{"class":114},[61,614,307],{"class":110},[61,616,618,620,622,624,626,628,631,633,635,637,639,641,643,645,647,649,652,654],{"class":63,"line":617},31,[61,619,339],{"class":110},[61,621,115],{"class":114},[61,623,119],{"class":118},[61,625,122],{"class":110},[61,627,125],{"class":118},[61,629,630],{"class":67},"tailwindcss.jpg",[61,632,125],{"class":118},[61,634,355],{"class":118},[61,636,122],{"class":110},[61,638,125],{"class":118},[61,640,547],{"class":67},[61,642,125],{"class":118},[61,644,367],{"class":118},[61,646,122],{"class":110},[61,648,125],{"class":118},[61,650,651],{"class":67},"Tailwind CSS cover image",[61,653,125],{"class":118},[61,655,307],{"class":110},[61,657,659,661,663],{"class":63,"line":658},32,[61,660,384],{"class":110},[61,662,518],{"class":114},[61,664,307],{"class":110},[61,666,668],{"class":63,"line":667},33,[61,669,296],{"emptyLinePlaceholder":295},[61,671,673,675,677],{"class":63,"line":672},34,[61,674,111],{"class":110},[61,676,14],{"class":114},[61,678,307],{"class":110},[61,680,682],{"class":63,"line":681},35,[61,683,684],{"class":67},"    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus ex deserunt, placeat, suscipit sapiente non minus necessitatibus vero hic.\n",[61,686,688,690,692],{"class":63,"line":687},36,[61,689,384],{"class":110},[61,691,14],{"class":114},[61,693,307],{"class":110},[61,695,697,700,702],{"class":63,"line":696},37,[61,698,699],{"class":110},"\u003C/",[61,701,304],{"class":114},[61,703,307],{"class":110},[14,705,706,707,713,714,720],{},"Make sure to save the ",[24,708,711],{"href":709,"rel":710},"https://maizzle.com/__og_image__/og.png",[36],[58,712,536],{}," and ",[24,715,718],{"href":716,"rel":717},"https://tailwindcss.com/_next/static/media/social-card-large.a6e71726.jpg",[36],[58,719,630],{}," images to the same folder.",[40,722,724],{"id":723},"production-config","Production config",[14,726,727],{},"This is where the magic happens.",[14,729,730],{},"Our strategy is as follows:",[732,733,734,738,741],"ul",{},[735,736,737],"li",{},"for each template, create a list of the images it uses",[735,739,740],{},"push that list along with some data about the template file to a queue",[735,742,743],{},"after all templates have been compiled, process the queue and create the .zip archives",[14,745,746,747,750],{},"For now, update your ",[58,748,749],{},"config.production.js"," to look like this:",[51,752,757],{"className":753,"code":754,"filename":749,"highlights":755,"language":756,"meta":56,"style":56},"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",[64,89],"js",[58,758,759,775,779,791,800,814,823,835,840,845,854,866,877,888,892],{"__ignoreMap":56},[61,760,762,766,769,772],{"class":761,"line":64},[63,137],[61,763,765],{"class":764},"s8qYB","const",[61,767,768],{"class":67}," queue ",[61,770,122],{"class":771},"sVevU",[61,773,774],{"class":67}," []\n",[61,776,777],{"class":63,"line":71},[61,778,296],{"emptyLinePlaceholder":295},[61,780,781,784,787],{"class":63,"line":77},[61,782,783],{"class":114},"export",[61,785,786],{"class":114}," default",[61,788,790],{"class":789},"sprQ5"," {\n",[61,792,793,796,798],{"class":63,"line":83},[61,794,795],{"class":67},"  build",[61,797,202],{"class":789},[61,799,790],{"class":789},[61,801,803,806,808,811],{"class":802,"line":89},[63,137],[61,804,805],{"class":67},"    static",[61,807,202],{"class":789},[61,809,810],{"class":114}," false",[61,812,813],{"class":789},",\n",[61,815,816,819,821],{"class":63,"line":235},[61,817,818],{"class":67},"    output",[61,820,202],{"class":789},[61,822,790],{"class":789},[61,824,825,828,830,833],{"class":63,"line":241},[61,826,827],{"class":67},"      path",[61,829,202],{"class":789},[61,831,832],{"class":67}," 'dist'",[61,834,813],{"class":789},[61,836,837],{"class":63,"line":247},[61,838,839],{"class":789},"    },\n",[61,841,842],{"class":63,"line":381},[61,843,844],{"class":789},"  },\n",[61,846,847,850,852],{"class":63,"line":391},[61,848,849],{"class":67},"  css",[61,851,202],{"class":789},[61,853,790],{"class":789},[61,855,856,859,861,864],{"class":63,"line":401},[61,857,858],{"class":67},"    inline",[61,860,202],{"class":789},[61,862,863],{"class":114}," true",[61,865,813],{"class":789},[61,867,868,871,873,875],{"class":63,"line":441},[61,869,870],{"class":67},"    purge",[61,872,202],{"class":789},[61,874,863],{"class":114},[61,876,813],{"class":789},[61,878,879,882,884,886],{"class":63,"line":450},[61,880,881],{"class":67},"    shorthand",[61,883,202],{"class":789},[61,885,863],{"class":114},[61,887,813],{"class":789},[61,889,890],{"class":63,"line":455},[61,891,844],{"class":789},[61,893,894,897,899,901],{"class":63,"line":464},[61,895,896],{"class":67},"  prettify",[61,898,202],{"class":789},[61,900,863],{"class":114},[61,902,813],{"class":789},[14,904,905,906,909,910,913,914,917],{},"We're setting ",[58,907,908],{},"static: false"," because we don't want Maizzle to copy the global ",[58,911,912],{},"images"," folder to the ",[58,915,916],{},"dist"," folder. We'll handle any global images ourselves.",[40,919,921],{"id":920},"get-image-paths-from-html","Get image paths from HTML",[14,923,924],{},"We'll need a way of creating a list of images that are used in a template.",[14,926,267,927,271],{},[58,928,929],{},"utils/getImagePaths.js",[51,931,933],{"className":753,"code":932,"filename":929,"language":756,"meta":56,"style":56},"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",[58,934,935,953,965,1003,1033,1090,1120,1150,1193,1197,1202,1226,1243,1262,1292,1309,1316,1321,1325,1330,1352,1365,1382,1406,1420,1426,1430,1434,1439,1461,1474,1491,1516,1530,1536,1540,1544,1549,1572,1586,1604,1629,1635,1668,1687,1694,1699,1704,1710,1733,1747,1765,1790,1805,1812,1817,1822,1828,1851,1865,1884,1907,1922,1940,1966,1982,1990,1996,2003,2008,2013,2022],{"__ignoreMap":56},[61,936,937,939,941,944,948,951],{"class":63,"line":64},[61,938,783],{"class":114},[61,940,786],{"class":114},[61,942,943],{"class":764}," function",[61,945,947],{"class":946},"s2ImL"," htmlString",[61,949,950],{"class":789},"()",[61,952,790],{"class":789},[61,954,955,958,961,963],{"class":63,"line":71},[61,956,957],{"class":764},"  const",[61,959,960],{"class":67}," imagePaths ",[61,962,122],{"class":771},[61,964,774],{"class":67},[61,966,967,969,972,974,977,980,983,986,989,992,994,997,1000],{"class":63,"line":77},[61,968,957],{"class":764},[61,970,971],{"class":67}," regexSrcAttribute ",[61,973,122],{"class":771},[61,975,976],{"class":67}," /src=",[61,978,979],{"class":789},"[",[61,981,982],{"class":114},"\"'",[61,984,985],{"class":789},"](",[61,987,988],{"class":114},".*?",[61,990,991],{"class":789},")[",[61,993,982],{"class":114},[61,995,996],{"class":789},"]",[61,998,999],{"class":67},"/",[61,1001,1002],{"class":114},"gi\n",[61,1004,1005,1007,1010,1012,1015,1017,1019,1021,1023,1025,1027,1029,1031],{"class":63,"line":83},[61,1006,957],{"class":764},[61,1008,1009],{"class":67}," regexBackgroundAttribute ",[61,1011,122],{"class":771},[61,1013,1014],{"class":67}," /background=",[61,1016,979],{"class":789},[61,1018,982],{"class":114},[61,1020,985],{"class":789},[61,1022,988],{"class":114},[61,1024,991],{"class":789},[61,1026,982],{"class":114},[61,1028,996],{"class":789},[61,1030,999],{"class":67},[61,1032,1002],{"class":114},[61,1034,1035,1037,1040,1042,1045,1048,1051,1054,1057,1059,1062,1065,1068,1070,1073,1075,1077,1079,1081,1083,1086,1088],{"class":63,"line":89},[61,1036,957],{"class":764},[61,1038,1039],{"class":67}," regexInlineBackgroundCSS ",[61,1041,122],{"class":771},[61,1043,1044],{"class":67}," /background",[61,1046,1047],{"class":789},"(",[61,1049,1050],{"class":67},"-image",[61,1052,1053],{"class":789},")",[61,1055,1056],{"class":114},"?",[61,1058,202],{"class":67},[61,1060,1061],{"class":114},"\\s?",[61,1063,1064],{"class":67},"url",[61,1066,1067],{"class":110},"\\(",[61,1069,979],{"class":789},[61,1071,1072],{"class":114},"'\"",[61,1074,985],{"class":789},[61,1076,988],{"class":114},[61,1078,991],{"class":789},[61,1080,1072],{"class":114},[61,1082,996],{"class":789},[61,1084,1085],{"class":110},"\\)",[61,1087,999],{"class":67},[61,1089,1002],{"class":114},[61,1091,1092,1094,1097,1099,1102,1104,1106,1108,1110,1112,1114,1116,1118],{"class":63,"line":235},[61,1093,957],{"class":764},[61,1095,1096],{"class":67}," regexSrcsetAttribute ",[61,1098,122],{"class":771},[61,1100,1101],{"class":67}," /srcset=",[61,1103,979],{"class":789},[61,1105,982],{"class":114},[61,1107,985],{"class":789},[61,1109,988],{"class":114},[61,1111,991],{"class":789},[61,1113,982],{"class":114},[61,1115,996],{"class":789},[61,1117,999],{"class":67},[61,1119,1002],{"class":114},[61,1121,1122,1124,1127,1129,1132,1134,1136,1138,1140,1142,1144,1146,1148],{"class":63,"line":241},[61,1123,957],{"class":764},[61,1125,1126],{"class":67}," regexPosterAttribute ",[61,1128,122],{"class":771},[61,1130,1131],{"class":67}," /poster=",[61,1133,979],{"class":789},[61,1135,982],{"class":114},[61,1137,985],{"class":789},[61,1139,988],{"class":114},[61,1141,991],{"class":789},[61,1143,982],{"class":114},[61,1145,996],{"class":789},[61,1147,999],{"class":67},[61,1149,1002],{"class":114},[61,1151,1152,1154,1157,1159,1162,1165,1167,1170,1172,1175,1177,1179,1181,1183,1185,1188,1191],{"class":63,"line":247},[61,1153,957],{"class":764},[61,1155,1156],{"class":67}," regexStyleTag ",[61,1158,122],{"class":771},[61,1160,1161],{"class":67}," /\u003Cstyle",[61,1163,1164],{"class":114},"\\b",[61,1166,979],{"class":789},[61,1168,1169],{"class":114},"^>",[61,1171,996],{"class":789},[61,1173,1174],{"class":114},"*",[61,1176,133],{"class":67},[61,1178,1047],{"class":789},[61,1180,988],{"class":114},[61,1182,1053],{"class":789},[61,1184,301],{"class":67},[61,1186,1187],{"class":110},"\\/",[61,1189,1190],{"class":67},"style>/",[61,1192,1002],{"class":114},[61,1194,1195],{"class":63,"line":381},[61,1196,296],{"emptyLinePlaceholder":295},[61,1198,1199],{"class":63,"line":391},[61,1200,1201],{"class":312},"  // Extract image paths from src attributes\n",[61,1203,1204,1206,1209,1211,1213,1215,1218,1220,1223],{"class":63,"line":401},[61,1205,957],{"class":764},[61,1207,1208],{"class":67}," srcMatches ",[61,1210,122],{"class":771},[61,1212,947],{"class":764},[61,1214,38],{"class":789},[61,1216,1217],{"class":946},"match",[61,1219,1047],{"class":67},[61,1221,1222],{"class":764},"regexSrcAttribute",[61,1224,1225],{"class":67},")\n",[61,1227,1228,1231,1234,1237,1240],{"class":63,"line":441},[61,1229,1230],{"class":114},"  if",[61,1232,1233],{"class":67}," (",[61,1235,1236],{"class":764},"srcMatches",[61,1238,1239],{"class":67},") ",[61,1241,1242],{"class":789},"{\n",[61,1244,1245,1248,1250,1253,1255,1257,1260],{"class":63,"line":450},[61,1246,1247],{"class":764},"    srcMatches",[61,1249,38],{"class":789},[61,1251,1252],{"class":946},"forEach",[61,1254,1047],{"class":67},[61,1256,1217],{"class":764},[61,1258,1259],{"class":764}," =>",[61,1261,790],{"class":789},[61,1263,1264,1267,1270,1272,1275,1277,1280,1282,1284,1287,1290],{"class":63,"line":455},[61,1265,1266],{"class":764},"      const",[61,1268,1269],{"class":67}," imagePath ",[61,1271,122],{"class":771},[61,1273,1274],{"class":764}," match",[61,1276,38],{"class":789},[61,1278,1279],{"class":946},"replace",[61,1281,1047],{"class":67},[61,1283,1222],{"class":764},[61,1285,1286],{"class":789},",",[61,1288,1289],{"class":67}," '$1'",[61,1291,1225],{"class":67},[61,1293,1294,1297,1299,1302,1304,1307],{"class":63,"line":464},[61,1295,1296],{"class":764},"      imagePaths",[61,1298,38],{"class":789},[61,1300,1301],{"class":946},"push",[61,1303,1047],{"class":67},[61,1305,1306],{"class":764},"imagePath",[61,1308,1225],{"class":67},[61,1310,1311,1314],{"class":63,"line":470},[61,1312,1313],{"class":789},"    }",[61,1315,1225],{"class":67},[61,1317,1318],{"class":63,"line":479},[61,1319,1320],{"class":789},"  }\n",[61,1322,1323],{"class":63,"line":484},[61,1324,296],{"emptyLinePlaceholder":295},[61,1326,1327],{"class":63,"line":493},[61,1328,1329],{"class":312},"  // Extract image paths from background attributes\n",[61,1331,1332,1334,1337,1339,1341,1343,1345,1347,1350],{"class":63,"line":499},[61,1333,957],{"class":764},[61,1335,1336],{"class":67}," backgroundMatches ",[61,1338,122],{"class":771},[61,1340,947],{"class":764},[61,1342,38],{"class":789},[61,1344,1217],{"class":946},[61,1346,1047],{"class":67},[61,1348,1349],{"class":764},"regexBackgroundAttribute",[61,1351,1225],{"class":67},[61,1353,1354,1356,1358,1361,1363],{"class":63,"line":508},[61,1355,1230],{"class":114},[61,1357,1233],{"class":67},[61,1359,1360],{"class":764},"backgroundMatches",[61,1362,1239],{"class":67},[61,1364,1242],{"class":789},[61,1366,1367,1370,1372,1374,1376,1378,1380],{"class":63,"line":513},[61,1368,1369],{"class":764},"    backgroundMatches",[61,1371,38],{"class":789},[61,1373,1252],{"class":946},[61,1375,1047],{"class":67},[61,1377,1217],{"class":764},[61,1379,1259],{"class":764},[61,1381,790],{"class":789},[61,1383,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404],{"class":63,"line":523},[61,1385,1266],{"class":764},[61,1387,1269],{"class":67},[61,1389,122],{"class":771},[61,1391,1274],{"class":764},[61,1393,38],{"class":789},[61,1395,1279],{"class":946},[61,1397,1047],{"class":67},[61,1399,1349],{"class":764},[61,1401,1286],{"class":789},[61,1403,1289],{"class":67},[61,1405,1225],{"class":67},[61,1407,1408,1410,1412,1414,1416,1418],{"class":63,"line":565},[61,1409,1296],{"class":764},[61,1411,38],{"class":789},[61,1413,1301],{"class":946},[61,1415,1047],{"class":67},[61,1417,1306],{"class":764},[61,1419,1225],{"class":67},[61,1421,1422,1424],{"class":63,"line":574},[61,1423,1313],{"class":789},[61,1425,1225],{"class":67},[61,1427,1428],{"class":63,"line":579},[61,1429,1320],{"class":789},[61,1431,1432],{"class":63,"line":588},[61,1433,296],{"emptyLinePlaceholder":295},[61,1435,1436],{"class":63,"line":594},[61,1437,1438],{"class":312},"  // Extract image paths from inline background CSS\n",[61,1440,1441,1443,1446,1448,1450,1452,1454,1456,1459],{"class":63,"line":603},[61,1442,957],{"class":764},[61,1444,1445],{"class":67}," inlineBackgroundMatches ",[61,1447,122],{"class":771},[61,1449,947],{"class":764},[61,1451,38],{"class":789},[61,1453,1217],{"class":946},[61,1455,1047],{"class":67},[61,1457,1458],{"class":764},"regexInlineBackgroundCSS",[61,1460,1225],{"class":67},[61,1462,1463,1465,1467,1470,1472],{"class":63,"line":608},[61,1464,1230],{"class":114},[61,1466,1233],{"class":67},[61,1468,1469],{"class":764},"inlineBackgroundMatches",[61,1471,1239],{"class":67},[61,1473,1242],{"class":789},[61,1475,1476,1479,1481,1483,1485,1487,1489],{"class":63,"line":617},[61,1477,1478],{"class":764},"    inlineBackgroundMatches",[61,1480,38],{"class":789},[61,1482,1252],{"class":946},[61,1484,1047],{"class":67},[61,1486,1217],{"class":764},[61,1488,1259],{"class":764},[61,1490,790],{"class":789},[61,1492,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1514],{"class":63,"line":658},[61,1494,1266],{"class":764},[61,1496,1269],{"class":67},[61,1498,122],{"class":771},[61,1500,1274],{"class":764},[61,1502,38],{"class":789},[61,1504,1279],{"class":946},[61,1506,1047],{"class":67},[61,1508,1458],{"class":764},[61,1510,1286],{"class":789},[61,1512,1513],{"class":67}," '$2'",[61,1515,1225],{"class":67},[61,1517,1518,1520,1522,1524,1526,1528],{"class":63,"line":667},[61,1519,1296],{"class":764},[61,1521,38],{"class":789},[61,1523,1301],{"class":946},[61,1525,1047],{"class":67},[61,1527,1306],{"class":764},[61,1529,1225],{"class":67},[61,1531,1532,1534],{"class":63,"line":672},[61,1533,1313],{"class":789},[61,1535,1225],{"class":67},[61,1537,1538],{"class":63,"line":681},[61,1539,1320],{"class":789},[61,1541,1542],{"class":63,"line":687},[61,1543,296],{"emptyLinePlaceholder":295},[61,1545,1546],{"class":63,"line":696},[61,1547,1548],{"class":312},"  // Extract image paths from srcset attributes\n",[61,1550,1552,1554,1557,1559,1561,1563,1565,1567,1570],{"class":63,"line":1551},38,[61,1553,957],{"class":764},[61,1555,1556],{"class":67}," srcsetMatches ",[61,1558,122],{"class":771},[61,1560,947],{"class":764},[61,1562,38],{"class":789},[61,1564,1217],{"class":946},[61,1566,1047],{"class":67},[61,1568,1569],{"class":764},"regexSrcsetAttribute",[61,1571,1225],{"class":67},[61,1573,1575,1577,1579,1582,1584],{"class":63,"line":1574},39,[61,1576,1230],{"class":114},[61,1578,1233],{"class":67},[61,1580,1581],{"class":764},"srcsetMatches",[61,1583,1239],{"class":67},[61,1585,1242],{"class":789},[61,1587,1589,1592,1594,1596,1598,1600,1602],{"class":63,"line":1588},40,[61,1590,1591],{"class":764},"    srcsetMatches",[61,1593,38],{"class":789},[61,1595,1252],{"class":946},[61,1597,1047],{"class":67},[61,1599,1217],{"class":764},[61,1601,1259],{"class":764},[61,1603,790],{"class":789},[61,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627],{"class":63,"line":1606},41,[61,1608,1266],{"class":764},[61,1610,1269],{"class":67},[61,1612,122],{"class":771},[61,1614,1274],{"class":764},[61,1616,38],{"class":789},[61,1618,1279],{"class":946},[61,1620,1047],{"class":67},[61,1622,1569],{"class":764},[61,1624,1286],{"class":789},[61,1626,1289],{"class":67},[61,1628,1225],{"class":67},[61,1630,1632],{"class":63,"line":1631},42,[61,1633,1634],{"class":312},"      // Split the srcset and add each image path individually\n",[61,1636,1638,1640,1643,1645,1648,1650,1653,1655,1657,1660,1662,1664,1666],{"class":63,"line":1637},43,[61,1639,1266],{"class":764},[61,1641,1642],{"class":67}," imagePathsArray ",[61,1644,122],{"class":771},[61,1646,1647],{"class":764}," imagePath",[61,1649,38],{"class":789},[61,1651,1652],{"class":946},"split",[61,1654,1047],{"class":67},[61,1656,999],{"class":67},[61,1658,1659],{"class":114},"\\s*",[61,1661,1286],{"class":67},[61,1663,1659],{"class":114},[61,1665,999],{"class":67},[61,1667,1225],{"class":67},[61,1669,1671,1673,1675,1677,1679,1682,1685],{"class":63,"line":1670},44,[61,1672,1296],{"class":764},[61,1674,38],{"class":789},[61,1676,1301],{"class":946},[61,1678,1047],{"class":67},[61,1680,1681],{"class":114},"...",[61,1683,1684],{"class":764},"imagePathsArray",[61,1686,1225],{"class":67},[61,1688,1690,1692],{"class":63,"line":1689},45,[61,1691,1313],{"class":789},[61,1693,1225],{"class":67},[61,1695,1697],{"class":63,"line":1696},46,[61,1698,1320],{"class":789},[61,1700,1702],{"class":63,"line":1701},47,[61,1703,296],{"emptyLinePlaceholder":295},[61,1705,1707],{"class":63,"line":1706},48,[61,1708,1709],{"class":312},"  // Extract image paths from poster attributes\n",[61,1711,1713,1715,1718,1720,1722,1724,1726,1728,1731],{"class":63,"line":1712},49,[61,1714,957],{"class":764},[61,1716,1717],{"class":67}," posterMatches ",[61,1719,122],{"class":771},[61,1721,947],{"class":764},[61,1723,38],{"class":789},[61,1725,1217],{"class":946},[61,1727,1047],{"class":67},[61,1729,1730],{"class":764},"regexPosterAttribute",[61,1732,1225],{"class":67},[61,1734,1736,1738,1740,1743,1745],{"class":63,"line":1735},50,[61,1737,1230],{"class":114},[61,1739,1233],{"class":67},[61,1741,1742],{"class":764},"posterMatches",[61,1744,1239],{"class":67},[61,1746,1242],{"class":789},[61,1748,1750,1753,1755,1757,1759,1761,1763],{"class":63,"line":1749},51,[61,1751,1752],{"class":764},"    posterMatches",[61,1754,38],{"class":789},[61,1756,1252],{"class":946},[61,1758,1047],{"class":67},[61,1760,1217],{"class":764},[61,1762,1259],{"class":764},[61,1764,790],{"class":789},[61,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788],{"class":63,"line":1767},52,[61,1769,1266],{"class":764},[61,1771,1269],{"class":67},[61,1773,122],{"class":771},[61,1775,1274],{"class":764},[61,1777,38],{"class":789},[61,1779,1279],{"class":946},[61,1781,1047],{"class":67},[61,1783,1730],{"class":764},[61,1785,1286],{"class":789},[61,1787,1289],{"class":67},[61,1789,1225],{"class":67},[61,1791,1793,1795,1797,1799,1801,1803],{"class":63,"line":1792},53,[61,1794,1296],{"class":764},[61,1796,38],{"class":789},[61,1798,1301],{"class":946},[61,1800,1047],{"class":67},[61,1802,1306],{"class":764},[61,1804,1225],{"class":67},[61,1806,1808,1810],{"class":63,"line":1807},54,[61,1809,1313],{"class":789},[61,1811,1225],{"class":67},[61,1813,1815],{"class":63,"line":1814},55,[61,1816,1320],{"class":789},[61,1818,1820],{"class":63,"line":1819},56,[61,1821,296],{"emptyLinePlaceholder":295},[61,1823,1825],{"class":63,"line":1824},57,[61,1826,1827],{"class":312},"  // Extract image paths from CSS inside \u003Cstyle> tags in the \u003Chead>\n",[61,1829,1831,1833,1836,1838,1840,1842,1844,1846,1849],{"class":63,"line":1830},58,[61,1832,957],{"class":764},[61,1834,1835],{"class":67}," styleTagMatches ",[61,1837,122],{"class":771},[61,1839,947],{"class":764},[61,1841,38],{"class":789},[61,1843,1217],{"class":946},[61,1845,1047],{"class":67},[61,1847,1848],{"class":764},"regexStyleTag",[61,1850,1225],{"class":67},[61,1852,1854,1856,1858,1861,1863],{"class":63,"line":1853},59,[61,1855,1230],{"class":114},[61,1857,1233],{"class":67},[61,1859,1860],{"class":764},"styleTagMatches",[61,1862,1239],{"class":67},[61,1864,1242],{"class":789},[61,1866,1868,1871,1873,1875,1877,1880,1882],{"class":63,"line":1867},60,[61,1869,1870],{"class":764},"    styleTagMatches",[61,1872,38],{"class":789},[61,1874,1252],{"class":946},[61,1876,1047],{"class":67},[61,1878,1879],{"class":764},"styleTag",[61,1881,1259],{"class":764},[61,1883,790],{"class":789},[61,1885,1887,1889,1892,1894,1897,1899,1901,1903,1905],{"class":63,"line":1886},61,[61,1888,1266],{"class":764},[61,1890,1891],{"class":67}," cssMatches ",[61,1893,122],{"class":771},[61,1895,1896],{"class":764}," styleTag",[61,1898,38],{"class":789},[61,1900,1217],{"class":946},[61,1902,1047],{"class":67},[61,1904,1458],{"class":764},[61,1906,1225],{"class":67},[61,1908,1910,1913,1915,1918,1920],{"class":63,"line":1909},62,[61,1911,1912],{"class":114},"      if",[61,1914,1233],{"class":67},[61,1916,1917],{"class":764},"cssMatches",[61,1919,1239],{"class":67},[61,1921,1242],{"class":789},[61,1923,1925,1928,1930,1932,1934,1936,1938],{"class":63,"line":1924},63,[61,1926,1927],{"class":764},"        cssMatches",[61,1929,38],{"class":789},[61,1931,1252],{"class":946},[61,1933,1047],{"class":67},[61,1935,1217],{"class":764},[61,1937,1259],{"class":764},[61,1939,790],{"class":789},[61,1941,1943,1946,1948,1950,1952,1954,1956,1958,1960,1962,1964],{"class":63,"line":1942},64,[61,1944,1945],{"class":764},"          const",[61,1947,1269],{"class":67},[61,1949,122],{"class":771},[61,1951,1274],{"class":764},[61,1953,38],{"class":789},[61,1955,1279],{"class":946},[61,1957,1047],{"class":67},[61,1959,1458],{"class":764},[61,1961,1286],{"class":789},[61,1963,1513],{"class":67},[61,1965,1225],{"class":67},[61,1967,1969,1972,1974,1976,1978,1980],{"class":63,"line":1968},65,[61,1970,1971],{"class":764},"          imagePaths",[61,1973,38],{"class":789},[61,1975,1301],{"class":946},[61,1977,1047],{"class":67},[61,1979,1306],{"class":764},[61,1981,1225],{"class":67},[61,1983,1985,1988],{"class":63,"line":1984},66,[61,1986,1987],{"class":789},"        }",[61,1989,1225],{"class":67},[61,1991,1993],{"class":63,"line":1992},67,[61,1994,1995],{"class":789},"      }\n",[61,1997,1999,2001],{"class":63,"line":1998},68,[61,2000,1313],{"class":789},[61,2002,1225],{"class":67},[61,2004,2006],{"class":63,"line":2005},69,[61,2007,1320],{"class":789},[61,2009,2011],{"class":63,"line":2010},70,[61,2012,296],{"emptyLinePlaceholder":295},[61,2014,2016,2019],{"class":63,"line":2015},71,[61,2017,2018],{"class":114},"  return",[61,2020,2021],{"class":764}," imagePaths\n",[61,2023,2025],{"class":63,"line":2024},72,[61,2026,2027],{"class":789},"}\n",[14,2029,2030],{},"This will return an array of image paths extracted from the following:",[732,2032,2033,2039,2044,2049,2054,2064],{},[735,2034,2035,2038],{},[58,2036,2037],{},"src"," attributes",[735,2040,2041,2038],{},[58,2042,2043],{},"srcset",[735,2045,2046,2038],{},[58,2047,2048],{},"poster",[735,2050,2051,2038],{},[58,2052,2053],{},"background",[735,2055,2056,2057,2060,2061],{},"CSS inside ",[58,2058,2059],{},"\u003Cstyle>"," tags in the ",[58,2062,2063],{},"\u003Chead>",[735,2065,2066,2067,713,2069,2072],{},"inline ",[58,2068,2053],{},[58,2070,2071],{},"background-image"," CSS",[40,2074,2076],{"id":2075},"archiving-library","Archiving library",[14,2078,2079,2080,2085],{},"There are a few libraries that can create .zip archives, but we'll be using ",[24,2081,2084],{"href":2082,"rel":2083},"https://www.npmjs.com/package/archiver",[36],"archiver"," for this guide.",[14,2087,2088],{},"Install it now:",[51,2090,2094],{"className":2091,"code":2092,"language":2093,"meta":56,"style":56},"language-bash shiki shiki-themes tailwind-css tailwind-css","npm install archiver\n","bash",[58,2095,2096],{"__ignoreMap":56},[61,2097,2098,2101,2104],{"class":63,"line":64},[61,2099,2100],{"class":114},"npm",[61,2102,2103],{"class":67}," install",[61,2105,2106],{"class":67}," archiver\n",[40,2108,2110],{"id":2109},"add-to-the-queue","Add to the queue",[14,2112,2113,2114,2117,2118,2121],{},"Let's use the ",[58,2115,2116],{},"afterTransformers"," event to push information about each template and the images it uses to the ",[58,2119,2120],{},"queue"," variable that we defined earlier.",[14,2123,2124,2125,750],{},"Modify your ",[58,2126,749],{},[51,2128,2131],{"className":753,"code":2129,"filename":749,"highlights":2130,"language":756,"meta":56,"style":56},"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",[484,493,499,508,513,523,565,574,579,588,594,603],[58,2132,2133,2148,2152,2162,2166,2174,2182,2192,2200,2210,2214,2218,2226,2236,2246,2256,2260,2270,2289,2295,2313,2318,2332,2345,2366,2373,2378,2387],{"__ignoreMap":56},[61,2134,2135,2138,2142,2145],{"class":63,"line":64},[61,2136,2137],{"class":764},"import",[61,2139,2141],{"class":2140},"sO1gY"," getImagePathsFromHTML",[61,2143,2144],{"class":789}," from",[61,2146,2147],{"class":764}," './utils/getImagePaths.js'\n",[61,2149,2150],{"class":63,"line":71},[61,2151,296],{"emptyLinePlaceholder":295},[61,2153,2154,2156,2158,2160],{"class":63,"line":77},[61,2155,765],{"class":764},[61,2157,768],{"class":67},[61,2159,122],{"class":771},[61,2161,774],{"class":67},[61,2163,2164],{"class":63,"line":83},[61,2165,296],{"emptyLinePlaceholder":295},[61,2167,2168,2170,2172],{"class":63,"line":89},[61,2169,783],{"class":114},[61,2171,786],{"class":114},[61,2173,790],{"class":789},[61,2175,2176,2178,2180],{"class":63,"line":235},[61,2177,795],{"class":67},[61,2179,202],{"class":789},[61,2181,790],{"class":789},[61,2183,2184,2186,2188,2190],{"class":63,"line":241},[61,2185,805],{"class":67},[61,2187,202],{"class":789},[61,2189,810],{"class":114},[61,2191,813],{"class":789},[61,2193,2194,2196,2198],{"class":63,"line":247},[61,2195,818],{"class":67},[61,2197,202],{"class":789},[61,2199,790],{"class":789},[61,2201,2202,2204,2206,2208],{"class":63,"line":381},[61,2203,827],{"class":67},[61,2205,202],{"class":789},[61,2207,832],{"class":67},[61,2209,813],{"class":789},[61,2211,2212],{"class":63,"line":391},[61,2213,839],{"class":789},[61,2215,2216],{"class":63,"line":401},[61,2217,844],{"class":789},[61,2219,2220,2222,2224],{"class":63,"line":441},[61,2221,849],{"class":67},[61,2223,202],{"class":789},[61,2225,790],{"class":789},[61,2227,2228,2230,2232,2234],{"class":63,"line":450},[61,2229,858],{"class":67},[61,2231,202],{"class":789},[61,2233,863],{"class":114},[61,2235,813],{"class":789},[61,2237,2238,2240,2242,2244],{"class":63,"line":455},[61,2239,870],{"class":67},[61,2241,202],{"class":789},[61,2243,863],{"class":114},[61,2245,813],{"class":789},[61,2247,2248,2250,2252,2254],{"class":63,"line":464},[61,2249,881],{"class":67},[61,2251,202],{"class":789},[61,2253,863],{"class":114},[61,2255,813],{"class":789},[61,2257,2258],{"class":63,"line":470},[61,2259,844],{"class":789},[61,2261,2262,2264,2266,2268],{"class":63,"line":479},[61,2263,896],{"class":67},[61,2265,202],{"class":789},[61,2267,863],{"class":114},[61,2269,813],{"class":789},[61,2271,2273,2276,2278,2280,2282,2285,2287],{"class":2272,"line":484},[63,137],[61,2274,2275],{"class":946},"  afterTransformers",[61,2277,1047],{"class":789},[61,2279,55],{"class":764},[61,2281,1286],{"class":789},[61,2283,2284],{"class":764}," config",[61,2286,1053],{"class":789},[61,2288,790],{"class":789},[61,2290,2292],{"class":2291,"line":493},[63,137],[61,2293,2294],{"class":312},"    // Get image paths from HTML\n",[61,2296,2298,2301,2303,2305,2307,2309,2311],{"class":2297,"line":499},[63,137],[61,2299,2300],{"class":764},"    const",[61,2302,960],{"class":67},[61,2304,122],{"class":771},[61,2306,2141],{"class":946},[61,2308,1047],{"class":67},[61,2310,55],{"class":764},[61,2312,1225],{"class":67},[61,2314,2316],{"class":2315,"line":508},[63,137],[61,2317,296],{"emptyLinePlaceholder":295},[61,2319,2321,2324,2326,2328,2330],{"class":2320,"line":513},[63,137],[61,2322,2323],{"class":764},"    queue",[61,2325,38],{"class":789},[61,2327,1301],{"class":946},[61,2329,1047],{"class":67},[61,2331,1242],{"class":789},[61,2333,2335,2338,2340,2343],{"class":2334,"line":523},[63,137],[61,2336,2337],{"class":67},"      images",[61,2339,202],{"class":789},[61,2341,2342],{"class":764}," imagePaths",[61,2344,813],{"class":789},[61,2346,2348,2351,2354,2356,2359,2361,2364],{"class":2347,"line":565},[63,137],[61,2349,2350],{"class":114},"      ...",[61,2352,2353],{"class":764},"config",[61,2355,38],{"class":789},[61,2357,2358],{"class":764},"build",[61,2360,38],{"class":789},[61,2362,2363],{"class":764},"current",[61,2365,813],{"class":789},[61,2367,2369,2371],{"class":2368,"line":574},[63,137],[61,2370,1313],{"class":789},[61,2372,1225],{"class":67},[61,2374,2376],{"class":2375,"line":579},[63,137],[61,2377,296],{"emptyLinePlaceholder":295},[61,2379,2381,2384],{"class":2380,"line":588},[63,137],[61,2382,2383],{"class":114},"    return",[61,2385,2386],{"class":764}," html\n",[61,2388,2390],{"class":2389,"line":594},[63,137],[61,2391,844],{"class":789},[40,2393,2395],{"id":2394},"create-the-zip-archives","Create the .zip archives",[14,2397,2398],{},"We can now process the queue and create the .zip archive for each template.",[14,2400,2401,2402,2405],{},"We'll use the ",[58,2403,2404],{},"afterBuild"," event for this, which is triggered after all templates have been compiled.",[14,2407,2124,2408,750],{},[58,2409,749],{},[51,2411,2419],{"className":753,"code":2412,"filename":749,"highlights":2413,"language":756,"meta":56,"style":56},"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",[64,71,77,83,667,672,681,687,696,1551,1574,1588,1606,1631,1637,1670,1689,1696,1701,1706,1712,1735,1749,1767,1792,1807,1814,1819,1824,1830,1853,1867,1886,1909,1924,1942,1968,1984,1992,1998,2005,2010,2015,2024,2414,2415,2416,2417,2418],73,74,75,76,77,[58,2420,2421,2434,2447,2460,2473,2483,2487,2497,2501,2509,2517,2527,2535,2545,2549,2553,2561,2571,2581,2591,2595,2605,2621,2625,2641,2645,2657,2667,2683,2689,2693,2699,2703,2713,2719,2758,2764,2803,2809,2827,2832,2838,2890,2911,2921,2935,2941,2948,2953,2981,2989,2996,3001,3007,3024,3029,3035,3054,3105,3112,3117,3123,3153,3177,3215,3247,3252,3258,3277,3314,3321,3326,3332,3345,3353,3359,3364],{"__ignoreMap":56},[61,2422,2424,2426,2429,2431],{"class":2423,"line":64},[63,137],[61,2425,2137],{"class":764},[61,2427,2428],{"class":2140}," fs",[61,2430,2144],{"class":789},[61,2432,2433],{"class":764}," 'node:fs'\n",[61,2435,2437,2439,2442,2444],{"class":2436,"line":71},[63,137],[61,2438,2137],{"class":764},[61,2440,2441],{"class":2140}," path",[61,2443,2144],{"class":789},[61,2445,2446],{"class":764}," 'node:path'\n",[61,2448,2450,2452,2455,2457],{"class":2449,"line":77},[63,137],[61,2451,2137],{"class":764},[61,2453,2454],{"class":2140}," archiver",[61,2456,2144],{"class":789},[61,2458,2459],{"class":764}," 'archiver'\n",[61,2461,2463,2465,2468,2470],{"class":2462,"line":83},[63,137],[61,2464,2137],{"class":764},[61,2466,2467],{"class":2140}," baseConfig",[61,2469,2144],{"class":789},[61,2471,2472],{"class":764}," './config.js'\n",[61,2474,2475,2477,2479,2481],{"class":63,"line":89},[61,2476,2137],{"class":764},[61,2478,2141],{"class":2140},[61,2480,2144],{"class":789},[61,2482,2147],{"class":764},[61,2484,2485],{"class":63,"line":235},[61,2486,296],{"emptyLinePlaceholder":295},[61,2488,2489,2491,2493,2495],{"class":63,"line":241},[61,2490,765],{"class":764},[61,2492,768],{"class":67},[61,2494,122],{"class":771},[61,2496,774],{"class":67},[61,2498,2499],{"class":63,"line":247},[61,2500,296],{"emptyLinePlaceholder":295},[61,2502,2503,2505,2507],{"class":63,"line":381},[61,2504,783],{"class":114},[61,2506,786],{"class":114},[61,2508,790],{"class":789},[61,2510,2511,2513,2515],{"class":63,"line":391},[61,2512,795],{"class":67},[61,2514,202],{"class":789},[61,2516,790],{"class":789},[61,2518,2519,2521,2523,2525],{"class":63,"line":401},[61,2520,805],{"class":67},[61,2522,202],{"class":789},[61,2524,810],{"class":114},[61,2526,813],{"class":789},[61,2528,2529,2531,2533],{"class":63,"line":441},[61,2530,818],{"class":67},[61,2532,202],{"class":789},[61,2534,790],{"class":789},[61,2536,2537,2539,2541,2543],{"class":63,"line":450},[61,2538,827],{"class":67},[61,2540,202],{"class":789},[61,2542,832],{"class":67},[61,2544,813],{"class":789},[61,2546,2547],{"class":63,"line":455},[61,2548,839],{"class":789},[61,2550,2551],{"class":63,"line":464},[61,2552,844],{"class":789},[61,2554,2555,2557,2559],{"class":63,"line":470},[61,2556,849],{"class":67},[61,2558,202],{"class":789},[61,2560,790],{"class":789},[61,2562,2563,2565,2567,2569],{"class":63,"line":479},[61,2564,858],{"class":67},[61,2566,202],{"class":789},[61,2568,863],{"class":114},[61,2570,813],{"class":789},[61,2572,2573,2575,2577,2579],{"class":63,"line":484},[61,2574,870],{"class":67},[61,2576,202],{"class":789},[61,2578,863],{"class":114},[61,2580,813],{"class":789},[61,2582,2583,2585,2587,2589],{"class":63,"line":493},[61,2584,881],{"class":67},[61,2586,202],{"class":789},[61,2588,863],{"class":114},[61,2590,813],{"class":789},[61,2592,2593],{"class":63,"line":499},[61,2594,844],{"class":789},[61,2596,2597,2599,2601,2603],{"class":63,"line":508},[61,2598,896],{"class":67},[61,2600,202],{"class":789},[61,2602,863],{"class":114},[61,2604,813],{"class":789},[61,2606,2607,2609,2611,2613,2615,2617,2619],{"class":63,"line":513},[61,2608,2275],{"class":946},[61,2610,1047],{"class":789},[61,2612,55],{"class":764},[61,2614,1286],{"class":789},[61,2616,2284],{"class":764},[61,2618,1053],{"class":789},[61,2620,790],{"class":789},[61,2622,2623],{"class":63,"line":523},[61,2624,2294],{"class":312},[61,2626,2627,2629,2631,2633,2635,2637,2639],{"class":63,"line":565},[61,2628,2300],{"class":764},[61,2630,960],{"class":67},[61,2632,122],{"class":771},[61,2634,2141],{"class":946},[61,2636,1047],{"class":67},[61,2638,55],{"class":764},[61,2640,1225],{"class":67},[61,2642,2643],{"class":63,"line":574},[61,2644,296],{"emptyLinePlaceholder":295},[61,2646,2647,2649,2651,2653,2655],{"class":63,"line":579},[61,2648,2323],{"class":764},[61,2650,38],{"class":789},[61,2652,1301],{"class":946},[61,2654,1047],{"class":67},[61,2656,1242],{"class":789},[61,2658,2659,2661,2663,2665],{"class":63,"line":588},[61,2660,2337],{"class":67},[61,2662,202],{"class":789},[61,2664,2342],{"class":764},[61,2666,813],{"class":789},[61,2668,2669,2671,2673,2675,2677,2679,2681],{"class":63,"line":594},[61,2670,2350],{"class":114},[61,2672,2353],{"class":764},[61,2674,38],{"class":789},[61,2676,2358],{"class":764},[61,2678,38],{"class":789},[61,2680,2363],{"class":764},[61,2682,813],{"class":789},[61,2684,2685,2687],{"class":63,"line":603},[61,2686,1313],{"class":789},[61,2688,1225],{"class":67},[61,2690,2691],{"class":63,"line":608},[61,2692,296],{"emptyLinePlaceholder":295},[61,2694,2695,2697],{"class":63,"line":617},[61,2696,2383],{"class":114},[61,2698,2386],{"class":764},[61,2700,2701],{"class":63,"line":658},[61,2702,844],{"class":789},[61,2704,2706,2709,2711],{"class":2705,"line":667},[63,137],[61,2707,2708],{"class":946},"  afterBuild",[61,2710,950],{"class":789},[61,2712,790],{"class":789},[61,2714,2716],{"class":2715,"line":672},[63,137],[61,2717,2718],{"class":312},"    // Process each item in the queue\n",[61,2720,2722,2725,2727,2729,2732,2735,2737,2740,2742,2745,2748,2751,2754,2756],{"class":2721,"line":681},[63,137],[61,2723,2724],{"class":114},"    for",[61,2726,1233],{"class":67},[61,2728,765],{"class":764},[61,2730,2731],{"class":789}," {",[61,2733,2734],{"class":764},"path",[61,2736,202],{"class":789},[61,2738,2739],{"class":67}," template",[61,2741,1286],{"class":789},[61,2743,2744],{"class":67}," images",[61,2746,2747],{"class":789},"}",[61,2749,2750],{"class":114}," of",[61,2752,2753],{"class":764}," queue",[61,2755,1239],{"class":67},[61,2757,1242],{"class":789},[61,2759,2761],{"class":2760,"line":687},[63,137],[61,2762,2763],{"class":312},"      // Read template's directory\n",[61,2765,2767,2770,2772,2775,2777,2780,2782,2785,2787,2789,2792,2794,2797,2799,2801],{"class":2766,"line":696},[63,137],[61,2768,2769],{"class":764},"      fs",[61,2771,38],{"class":789},[61,2773,2774],{"class":946},"readdir",[61,2776,1047],{"class":67},[61,2778,2779],{"class":764},"template",[61,2781,38],{"class":789},[61,2783,2784],{"class":764},"dir",[61,2786,1286],{"class":789},[61,2788,1233],{"class":789},[61,2790,2791],{"class":764},"err",[61,2793,1286],{"class":789},[61,2795,2796],{"class":764}," files",[61,2798,1053],{"class":789},[61,2800,1259],{"class":764},[61,2802,790],{"class":789},[61,2804,2806],{"class":2805,"line":1551},[63,137],[61,2807,2808],{"class":312},"        // Exit early if there's an error\n",[61,2810,2812,2815,2817,2819,2821,2824],{"class":2811,"line":1574},[63,137],[61,2813,2814],{"class":114},"        if",[61,2816,1233],{"class":67},[61,2818,2791],{"class":764},[61,2820,1239],{"class":67},[61,2822,2823],{"class":114},"throw",[61,2825,2826],{"class":764}," err\n",[61,2828,2830],{"class":2829,"line":1588},[63,137],[61,2831,296],{"emptyLinePlaceholder":295},[61,2833,2835],{"class":2834,"line":1606},[63,137],[61,2836,2837],{"class":312},"        // Create archive\n",[61,2839,2841,2844,2847,2849,2851,2853,2856,2858,2861,2864,2866,2868,2870,2872,2874,2876,2878,2880,2883,2885,2888],{"class":2840,"line":1631},[63,137],[61,2842,2843],{"class":764},"        const",[61,2845,2846],{"class":67}," output ",[61,2848,122],{"class":771},[61,2850,2428],{"class":764},[61,2852,38],{"class":789},[61,2854,2855],{"class":946},"createWriteStream",[61,2857,1047],{"class":67},[61,2859,2860],{"class":67},"`",[61,2862,2863],{"class":789},"${",[61,2865,2779],{"class":764},[61,2867,38],{"class":789},[61,2869,2784],{"class":764},[61,2871,2747],{"class":789},[61,2873,999],{"class":67},[61,2875,2863],{"class":789},[61,2877,2779],{"class":764},[61,2879,38],{"class":789},[61,2881,2882],{"class":764},"name",[61,2884,2747],{"class":789},[61,2886,2887],{"class":67},".zip`",[61,2889,1225],{"class":67},[61,2891,2893,2895,2898,2900,2902,2904,2907,2909],{"class":2892,"line":1637},[63,137],[61,2894,2843],{"class":764},[61,2896,2897],{"class":67}," archive ",[61,2899,122],{"class":771},[61,2901,2454],{"class":946},[61,2903,1047],{"class":67},[61,2905,2906],{"class":67},"'zip'",[61,2908,1286],{"class":789},[61,2910,790],{"class":789},[61,2912,2914,2917,2919],{"class":2913,"line":1670},[63,137],[61,2915,2916],{"class":67},"          zlib",[61,2918,202],{"class":789},[61,2920,790],{"class":789},[61,2922,2924,2927,2929,2932],{"class":2923,"line":1689},[63,137],[61,2925,2926],{"class":67},"            level",[61,2928,202],{"class":789},[61,2930,2931],{"class":67}," 9 ",[61,2933,2934],{"class":312},"// Sets the compression level\n",[61,2936,2938],{"class":2937,"line":1696},[63,137],[61,2939,2940],{"class":789},"          }\n",[61,2942,2944,2946],{"class":2943,"line":1701},[63,137],[61,2945,1987],{"class":789},[61,2947,1225],{"class":67},[61,2949,2951],{"class":2950,"line":1706},[63,137],[61,2952,296],{"emptyLinePlaceholder":295},[61,2954,2956,2959,2961,2964,2966,2969,2971,2973,2975,2977,2979],{"class":2955,"line":1712},[63,137],[61,2957,2958],{"class":764},"        archive",[61,2960,38],{"class":789},[61,2962,2963],{"class":946},"on",[61,2965,1047],{"class":67},[61,2967,2968],{"class":67},"'error'",[61,2970,1286],{"class":789},[61,2972,943],{"class":764},[61,2974,1047],{"class":789},[61,2976,2791],{"class":764},[61,2978,1053],{"class":789},[61,2980,790],{"class":789},[61,2982,2984,2987],{"class":2983,"line":1735},[63,137],[61,2985,2986],{"class":114},"          throw",[61,2988,2826],{"class":764},[61,2990,2992,2994],{"class":2991,"line":1749},[63,137],[61,2993,1987],{"class":789},[61,2995,1225],{"class":67},[61,2997,2999],{"class":2998,"line":1767},[63,137],[61,3000,296],{"emptyLinePlaceholder":295},[61,3002,3004],{"class":3003,"line":1792},[63,137],[61,3005,3006],{"class":312},"        // Pipe archive data to the file\n",[61,3008,3010,3012,3014,3017,3019,3022],{"class":3009,"line":1807},[63,137],[61,3011,2958],{"class":764},[61,3013,38],{"class":789},[61,3015,3016],{"class":946},"pipe",[61,3018,1047],{"class":67},[61,3020,3021],{"class":764},"output",[61,3023,1225],{"class":67},[61,3025,3027],{"class":3026,"line":1814},[63,137],[61,3028,296],{"emptyLinePlaceholder":295},[61,3030,3032],{"class":3031,"line":1819},[63,137],[61,3033,3034],{"class":312},"        // Add files from template's directory to archive\n",[61,3036,3038,3041,3043,3045,3047,3050,3052],{"class":3037,"line":1824},[63,137],[61,3039,3040],{"class":764},"        files",[61,3042,38],{"class":789},[61,3044,1252],{"class":946},[61,3046,1047],{"class":67},[61,3048,3049],{"class":764},"file",[61,3051,1259],{"class":764},[61,3053,790],{"class":789},[61,3055,3057,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3095,3097,3100,3103],{"class":3056,"line":1830},[63,137],[61,3058,3059],{"class":764},"          archive",[61,3061,38],{"class":789},[61,3063,3049],{"class":946},[61,3065,1047],{"class":67},[61,3067,2860],{"class":67},[61,3069,2863],{"class":789},[61,3071,2779],{"class":764},[61,3073,38],{"class":789},[61,3075,2784],{"class":764},[61,3077,2747],{"class":789},[61,3079,999],{"class":67},[61,3081,2863],{"class":789},[61,3083,3049],{"class":764},[61,3085,2747],{"class":789},[61,3087,2860],{"class":67},[61,3089,1286],{"class":789},[61,3091,2731],{"class":789},[61,3093,3094],{"class":67}," name",[61,3096,202],{"class":789},[61,3098,3099],{"class":764}," file",[61,3101,3102],{"class":789}," }",[61,3104,1225],{"class":67},[61,3106,3108,3110],{"class":3107,"line":1853},[63,137],[61,3109,1987],{"class":789},[61,3111,1225],{"class":67},[61,3113,3115],{"class":3114,"line":1867},[63,137],[61,3116,296],{"emptyLinePlaceholder":295},[61,3118,3120],{"class":3119,"line":1886},[63,137],[61,3121,3122],{"class":312},"        // Get a list of files found in `images` that have been used in the template\n",[61,3124,3126,3128,3131,3133,3135,3137,3139,3141,3143,3145,3148,3150],{"class":3125,"line":1909},[63,137],[61,3127,2843],{"class":764},[61,3129,3130],{"class":67}," assetsSource ",[61,3132,122],{"class":771},[61,3134,2467],{"class":764},[61,3136,38],{"class":789},[61,3138,2358],{"class":764},[61,3140,38],{"class":789},[61,3142,201],{"class":764},[61,3144,38],{"class":789},[61,3146,3147],{"class":764},"assets",[61,3149,38],{"class":789},[61,3151,3152],{"class":764},"source\n",[61,3154,3156,3158,3161,3163,3165,3167,3170,3172,3175],{"class":3155,"line":1924},[63,137],[61,3157,2843],{"class":764},[61,3159,3160],{"class":67}," globalImages ",[61,3162,122],{"class":771},[61,3164,2428],{"class":764},[61,3166,38],{"class":789},[61,3168,3169],{"class":946},"readdirSync",[61,3171,1047],{"class":67},[61,3173,3174],{"class":764},"assetsSource",[61,3176,1225],{"class":67},[61,3178,3180,3183,3186,3188,3190,3192,3194,3196,3199,3201,3203,3205,3208,3210,3212],{"class":3179,"line":1942},[63,137],[61,3181,3182],{"class":789},"          .",[61,3184,3185],{"class":946},"filter",[61,3187,1047],{"class":67},[61,3189,3049],{"class":764},[61,3191,1259],{"class":764},[61,3193,2744],{"class":764},[61,3195,38],{"class":789},[61,3197,3198],{"class":946},"includes",[61,3200,1047],{"class":67},[61,3202,2734],{"class":764},[61,3204,38],{"class":789},[61,3206,3207],{"class":946},"basename",[61,3209,1047],{"class":67},[61,3211,3049],{"class":764},[61,3213,3214],{"class":67},")))\n",[61,3216,3218,3220,3223,3225,3227,3229,3231,3233,3236,3238,3240,3242,3244],{"class":3217,"line":1968},[63,137],[61,3219,3182],{"class":789},[61,3221,3222],{"class":946},"map",[61,3224,1047],{"class":67},[61,3226,3049],{"class":764},[61,3228,1259],{"class":764},[61,3230,2441],{"class":764},[61,3232,38],{"class":789},[61,3234,3235],{"class":946},"join",[61,3237,1047],{"class":67},[61,3239,3174],{"class":764},[61,3241,1286],{"class":789},[61,3243,3099],{"class":764},[61,3245,3246],{"class":67},"))\n",[61,3248,3250],{"class":3249,"line":1984},[63,137],[61,3251,296],{"emptyLinePlaceholder":295},[61,3253,3255],{"class":3254,"line":1992},[63,137],[61,3256,3257],{"class":312},"        // Add global images to archive\n",[61,3259,3261,3264,3266,3268,3270,3273,3275],{"class":3260,"line":1998},[63,137],[61,3262,3263],{"class":764},"        globalImages",[61,3265,38],{"class":789},[61,3267,1252],{"class":946},[61,3269,1047],{"class":67},[61,3271,3272],{"class":764},"image",[61,3274,1259],{"class":764},[61,3276,790],{"class":789},[61,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312],{"class":3279,"line":2005},[63,137],[61,3281,3059],{"class":764},[61,3283,38],{"class":789},[61,3285,3049],{"class":946},[61,3287,1047],{"class":67},[61,3289,3272],{"class":764},[61,3291,1286],{"class":789},[61,3293,2731],{"class":789},[61,3295,3094],{"class":67},[61,3297,202],{"class":789},[61,3299,2441],{"class":764},[61,3301,38],{"class":789},[61,3303,3207],{"class":946},[61,3305,1047],{"class":67},[61,3307,3272],{"class":764},[61,3309,1239],{"class":67},[61,3311,2747],{"class":789},[61,3313,1225],{"class":67},[61,3315,3317,3319],{"class":3316,"line":2010},[63,137],[61,3318,1987],{"class":789},[61,3320,1225],{"class":67},[61,3322,3324],{"class":3323,"line":2015},[63,137],[61,3325,296],{"emptyLinePlaceholder":295},[61,3327,3329],{"class":3328,"line":2024},[63,137],[61,3330,3331],{"class":312},"        // Finalize the archive\n",[61,3333,3335,3337,3339,3342],{"class":3334,"line":2414},[63,137],[61,3336,2958],{"class":764},[61,3338,38],{"class":789},[61,3340,3341],{"class":946},"finalize",[61,3343,3344],{"class":67},"()\n",[61,3346,3348,3351],{"class":3347,"line":2415},[63,137],[61,3349,3350],{"class":789},"      }",[61,3352,1225],{"class":67},[61,3354,3356],{"class":3355,"line":2416},[63,137],[61,3357,3358],{"class":789},"    }\n",[61,3360,3362],{"class":3361,"line":2417},[63,137],[61,3363,844],{"class":789},[61,3365,3367],{"class":3366,"line":2418},[63,137],[61,3368,2027],{"class":789},[40,3370,3372],{"id":3371},"build-the-templates","Build the templates",[14,3374,3375,3376,3379,3380,3382],{},"Running the ",[58,3377,3378],{},"npm run build"," command will now create a .zip archive for each template in the ",[58,3381,916],{}," directory.",[14,3384,3385],{},"The archive file will have the same name as the template, so you'll see something like this:",[51,3387,3389],{"className":53,"code":3388,"language":55,"meta":56,"style":56},"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",[58,3390,3391,3396,3401,3406,3411,3415,3420,3425,3430,3435,3440,3445],{"__ignoreMap":56},[61,3392,3393],{"class":63,"line":64},[61,3394,3395],{"class":67},"build_production\n",[61,3397,3398],{"class":63,"line":71},[61,3399,3400],{"class":67},"  └── template-1\n",[61,3402,3403],{"class":63,"line":77},[61,3404,3405],{"class":67},"      ├── index.html\n",[61,3407,3408],{"class":63,"line":83},[61,3409,3410],{"class":67},"      └── index.zip\n",[61,3412,3413],{"class":63,"line":89},[61,3414,227],{"class":67},[61,3416,3417],{"class":63,"line":235},[61,3418,3419],{"class":67},"        ├── insignia.png\n",[61,3421,3422],{"class":63,"line":241},[61,3423,3424],{"class":67},"        ├── maizzle.png\n",[61,3426,3427],{"class":63,"line":247},[61,3428,3429],{"class":67},"        ├── tailwindcss.jpg\n",[61,3431,3432],{"class":63,"line":381},[61,3433,3434],{"class":67},"      ├── maizzle.png\n",[61,3436,3437],{"class":63,"line":391},[61,3438,3439],{"class":67},"      ├── tailwindcss.jpg\n",[61,3441,3442],{"class":63,"line":401},[61,3443,3444],{"class":67},"  └── template-2\n",[61,3446,3447],{"class":63,"line":441},[61,3448,3449],{"class":67},"      └── ...\n",[14,3451,3452,3453,3455],{},"You'll notice that ",[58,3454,414],{}," has been added to both archives, even though none of the template folders include it.",[40,3457,3459],{"id":3458},"resources","Resources",[732,3461,3462,3469],{},[735,3463,3464,3468],{},[24,3465,3467],{"href":34,"rel":3466},[36],"GitHub repository"," for this guide",[735,3470,3471,3474],{},[24,3472,2084],{"href":2082,"rel":3473},[36]," library documentation",[3476,3477,3478],"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":56,"searchDepth":71,"depth":71,"links":3480},[3481,3482,3485,3486,3487,3488,3489,3490,3491,3492],{"id":42,"depth":71,"text":43},{"id":158,"depth":71,"text":159,"children":3483},[3484],{"id":194,"depth":77,"text":195},{"id":256,"depth":71,"text":257},{"id":723,"depth":71,"text":724},{"id":920,"depth":71,"text":921},{"id":2075,"depth":71,"text":2076},{"id":2109,"depth":71,"text":2110},{"id":2394,"depth":71,"text":2395},{"id":3371,"depth":71,"text":3372},{"id":3458,"depth":71,"text":3459},"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":5,"description":3494},{"loc":3497},"guides/mailchimp-package","lzY8UUAxQhe7vs-UhaO5duXkSXapA1lgZrmC0rSkF0k",[3503,3504],null,{"title":3505,"path":3506,"stem":3507,"children":-1},"How to create an HTML email newsletter from Markdown files","/guides/markdown-emails","guides/markdown-emails",1780318597302]