[{"data":1,"prerenderedAt":1463},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/environments":270,"docs-bottom-nav":1390},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":38,"body":272,"description":1383,"extension":1384,"meta":1385,"navigation":1104,"path":39,"seo":1386,"sitemap":1387,"stem":1388,"__hash__":1389},"docs/docs/environments.md",{"type":273,"value":274,"toc":1368},"minimark",[275,279,291,294,297,300,303,308,311,366,389,406,411,418,459,463,477,535,539,550,565,570,577,581,587,602,612,618,622,625,636,726,729,738,741,750,754,765,772,777,804,807,862,866,873,876,918,929,933,939,992,997,1021,1030,1034,1044,1176,1180,1183,1186,1270,1273,1341,1358,1364],[276,277,38],"h1",{"id":278},"environments",[280,281,282],"blockquote",{},[283,284,285,286,290],"p",{},"When I run ",[287,288,289],"code",{},"maizzle build [environment]",", should CSS be inlined? Should my HTML be minified? Do I need to make some data available to the templates?",[283,292,293],{},"You might want to use different settings when developing locally versus when building the production-ready emails.",[283,295,296],{},"For example, you don't need CSS inlining or code indentation when developing on your computer, but you'll want both enabled for the final, production-ready emails.",[283,298,299],{},"Maizzle makes it easy to define as many build scenarios as you need, by using distinct configuration files that enable their own build command.",[283,301,302],{},"We call these Environments.",[304,305,307],"h2",{"id":306},"default-environments","Default Environments",[283,309,310],{},"Maizzle comes with two config files, each enabling its own build command:",[312,313,314,327],"table",{},[315,316,317],"thead",{},[318,319,320,324],"tr",{},[321,322,323],"th",{},"File",[321,325,326],{},"Command",[328,329,330,349],"tbody",{},[318,331,332,338],{},[333,334,335],"td",{},[287,336,337],{},"config.js",[333,339,340,343,346],{},[287,341,342],{},"maizzle build",[344,345],"br",{},[287,347,348],{},"maizzle serve",[318,350,351,356],{},[333,352,353],{},[287,354,355],{},"config.production.js",[333,357,358,361,363],{},[287,359,360],{},"maizzle build production",[344,362],{},[287,364,365],{},"maizzle serve production",[283,367,368,369,381,382,388],{},"You probably noticed the link between ",[370,371,375,376,380],"span",{"className":372},[373,374],"font-mono","text-sm","config.",[377,378,379],"strong",{},"production",".js"," and ",[370,383,385,386],{"className":384},[373,374],"maizzle build ",[377,387,379],{}," - the keyword in the config file name enables its own build command.",[390,391,392,393,396,397,401,402,405],"alert",{},"\nRemember, the \n",[287,394,395],{},"maizzle","\n executable will only be available if you installed the \n",[398,399,400],"a",{"href":33},"CLI tool","\n globally. Otherwise, use the NPM scripts provided by the Starter in \n",[287,403,404],{},"package.json","\n.\n",[407,408,410],"h3",{"id":409},"config-file-naming","Config file naming",[283,412,413,414,417],{},"You may use the ",[287,415,416],{},"maizzle.config.js"," configuration file naming pattern if you prefer:",[312,419,420,428],{},[315,421,422],{},[318,423,424,426],{},[321,425,323],{},[321,427,326],{},[328,429,430,444],{},[318,431,432,436],{},[333,433,434],{},[287,435,416],{},[333,437,438,440,442],{},[287,439,342],{},[344,441],{},[287,443,348],{},[318,445,446,451],{},[333,447,448],{},[287,449,450],{},"maizzle.config.production.js",[333,452,453,455,457],{},[287,454,360],{},[344,456],{},[287,458,365],{},[407,460,462],{"id":461},"cjs-config","CJS config",[283,464,465,466,381,469,472,473,476],{},"If you need to use CommonJS with ",[287,467,468],{},"module.exports",[287,470,471],{},"require()"," in your Maizzle config file, you'll need to change the file extension to ",[287,474,475],{},".cjs",":",[312,478,479,489],{},[315,480,481],{},[318,482,483,486],{},[321,484,485],{},"ESM",[321,487,488],{},"CJS",[328,490,491,502,513,524],{},[318,492,493,497],{},[333,494,495],{},[287,496,337],{},[333,498,499],{},[287,500,501],{},"config.cjs",[318,503,504,508],{},[333,505,506],{},[287,507,355],{},[333,509,510],{},[287,511,512],{},"config.production.cjs",[318,514,515,519],{},[333,516,517],{},[287,518,416],{},[333,520,521],{},[287,522,523],{},"maizzle.config.cjs",[318,525,526,530],{},[333,527,528],{},[287,529,450],{},[333,531,532],{},[287,533,534],{},"maizzle.config.production.cjs",[407,536,538],{"id":537},"data-merging","Data merging",[283,540,541,542,546,547,549],{},"Any new Environment configuration file that you create will be merged ",[543,544,545],"em",{},"on top"," of the base ",[287,548,337],{}," when you run the build command for that particular Environment.",[283,551,552,553,555,556,558,559,561,562,564],{},"With the example above, when running the ",[287,554,360],{}," command, ",[287,557,355],{}," will be merged on top of the base ",[287,560,337],{},": if the same key is present in both files, the value from ",[287,563,355],{}," will be used.",[390,566,567,568,405],{},"\nWhen creating a new Environment config file you only need to specify the config values that will be different from those (or don't exist) in \n",[287,569,337],{},[390,571,573,576],{"type":572},"warning",[287,574,575],{},"build.content","\n keys are not merged, so that each Environment sources its own files to compile.\n",[304,578,580],{"id":579},"environment-builds","Environment builds",[283,582,583,584,586],{},"To build your emails for a specific Environment, pass its name as an argument to the ",[287,585,342],{}," command:",[588,589,594],"pre",{"className":590,"code":591,"language":592,"meta":593,"style":593},"language-sh shiki shiki-themes tailwind-css tailwind-css","maizzle build production\n","sh","",[287,595,596],{"__ignoreMap":593},[370,597,600],{"class":598,"line":599},"line",1,[370,601,591],{},[283,603,604,605,607,608,611],{},"The Starter's ",[287,606,355],{}," is configured to output production-ready emails in a ",[287,609,610],{},"build_production"," folder at the root of the project.",[390,613,614,615,617],{"type":572},"\nIn this example, if a \n",[287,616,355],{},"\n file is not found at the current location, the build will fail.\n",[304,619,621],{"id":620},"custom-environments","Custom Environments",[283,623,624],{},"You may create as many Environments as you need, and name them as you like.",[283,626,627,628,631,632,635],{},"For example, you might create a config file named ",[287,629,630],{},"config.shopify.js"," that you would use to build only the templates from the ",[287,633,634],{},"emails/shopify"," folder:",[588,637,641],{"className":638,"code":639,"filename":630,"language":640,"meta":593,"style":593},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  build: {\n    content: ['emails/shopify/**/*.html'],\n    output: {\n      path: 'build_shopify'\n    }\n  }\n}\n","js",[287,642,643,656,667,687,697,708,714,720],{"__ignoreMap":593},[370,644,645,649,652],{"class":598,"line":599},[370,646,648],{"class":647},"sizJ4","export",[370,650,651],{"class":647}," default",[370,653,655],{"class":654},"sprQ5"," {\n",[370,657,659,663,665],{"class":598,"line":658},2,[370,660,662],{"class":661},"sfCc6","  build",[370,664,476],{"class":654},[370,666,655],{"class":654},[370,668,670,673,675,678,681,684],{"class":598,"line":669},3,[370,671,672],{"class":661},"    content",[370,674,476],{"class":654},[370,676,677],{"class":661}," [",[370,679,680],{"class":661},"'emails/shopify/**/*.html'",[370,682,683],{"class":661},"]",[370,685,686],{"class":654},",\n",[370,688,690,693,695],{"class":598,"line":689},4,[370,691,692],{"class":661},"    output",[370,694,476],{"class":654},[370,696,655],{"class":654},[370,698,700,703,705],{"class":598,"line":699},5,[370,701,702],{"class":661},"      path",[370,704,476],{"class":654},[370,706,707],{"class":661}," 'build_shopify'\n",[370,709,711],{"class":598,"line":710},6,[370,712,713],{"class":654},"    }\n",[370,715,717],{"class":598,"line":716},7,[370,718,719],{"class":654},"  }\n",[370,721,723],{"class":598,"line":722},8,[370,724,725],{"class":654},"}\n",[283,727,728],{},"The build command for it would be:",[588,730,732],{"className":590,"code":731,"language":592,"meta":593,"style":593},"maizzle build shopify\n",[287,733,734],{"__ignoreMap":593},[370,735,736],{"class":598,"line":599},[370,737,731],{},[283,739,740],{},"Or, if you're using NPM scripts and didn't set up a script for this Environment:",[588,742,744],{"className":590,"code":743,"language":592,"meta":593,"style":593},"npm run build -- shopify\n",[287,745,746],{"__ignoreMap":593},[370,747,748],{"class":598,"line":599},[370,749,743],{},[304,751,753],{"id":752},"config-variables","Config variables",[283,755,756,757,760,761,764],{},"Maizzle exposes a ",[287,758,759],{},"page"," object that you can access through ",[398,762,763],{"href":82},"expressions"," in your HTML.",[283,766,767,768,771],{},"This object contains the computed Template config, which is based on ",[287,769,770],{},"config.[env].js"," merged with Front Matter variables from the Template currently being processed.",[283,773,774,775,476],{},"This makes it possible to define variables in ",[287,776,337],{},[588,778,780],{"className":638,"code":779,"filename":337,"language":640,"meta":593,"style":593},"export default {\n  doctype: 'html'\n}\n",[287,781,782,790,800],{"__ignoreMap":593},[370,783,784,786,788],{"class":598,"line":599},[370,785,648],{"class":647},[370,787,651],{"class":647},[370,789,655],{"class":654},[370,791,792,795,797],{"class":598,"line":658},[370,793,794],{"class":661},"  doctype",[370,796,476],{"class":654},[370,798,799],{"class":661}," 'html'\n",[370,801,802],{"class":598,"line":669},[370,803,725],{"class":654},[283,805,806],{},"... and use them in your markup:",[588,808,813],{"className":809,"code":810,"filename":811,"language":812,"meta":593,"style":593},"language-hbs shiki shiki-themes tailwind-css tailwind-css","\u003Cx-main>\n  \u003Cp>doctype is: {{ page.doctype }}\u003C/p>\n\u003C/x-main>\n","emails/example.html","hbs",[287,814,815,827,854],{"__ignoreMap":593},[370,816,817,821,824],{"class":598,"line":599},[370,818,820],{"class":819},"soJEP","\u003C",[370,822,823],{"class":647},"x-main",[370,825,826],{"class":819},">\n",[370,828,829,832,834,837,840,844,847,850,852],{"class":598,"line":658},[370,830,831],{"class":819},"  \u003C",[370,833,283],{"class":647},[370,835,836],{"class":819},">",[370,838,839],{"class":661},"doctype is: {{ ",[370,841,843],{"class":842},"s8qYB","page.doctype",[370,845,846],{"class":661}," }}",[370,848,849],{"class":819},"\u003C/",[370,851,283],{"class":647},[370,853,826],{"class":819},[370,855,856,858,860],{"class":598,"line":669},[370,857,849],{"class":819},[370,859,823],{"class":647},[370,861,826],{"class":819},[407,863,865],{"id":864},"current-environment","Current Environment",[283,867,868,869,872],{},"The current Environment name is globally available under the ",[287,870,871],{},"page.env"," variable.",[283,874,875],{},"You can output content in your emails based on the Environment that you're building for:",[588,877,879],{"className":809,"code":878,"filename":811,"language":812,"meta":593,"style":593},"\u003Cif condition=\"page.env === 'production'\">\n  This will show only when running `maizzle build production`\n\u003C/if>\n",[287,880,881,905,910],{"__ignoreMap":593},[370,882,883,885,888,892,895,898,901,903],{"class":598,"line":599},[370,884,820],{"class":819},[370,886,887],{"class":647},"if",[370,889,891],{"class":890},"sQMLp"," condition",[370,893,894],{"class":819},"=",[370,896,897],{"class":890},"\"",[370,899,900],{"class":661},"page.env === 'production'",[370,902,897],{"class":890},[370,904,826],{"class":819},[370,906,907],{"class":598,"line":658},[370,908,909],{"class":661},"  This will show only when running `maizzle build production`\n",[370,911,912,914,916],{"class":598,"line":669},[370,913,849],{"class":819},[370,915,887],{"class":647},[370,917,826],{"class":819},[390,919,920,921,924,925,405],{},"\nYou may also use the \n",[287,922,923],{},"\u003Cenv:production>","\n tag, \n",[398,926,928],{"href":927},"/docs/tags#env","see the docs",[407,930,932],{"id":931},"top-level-variables","Top-level variables",[283,934,935,936,938],{},"You may define 'local' variables that can be accessed outside of the ",[287,937,759],{}," object:",[588,940,942],{"className":638,"code":941,"filename":337,"language":640,"meta":593,"style":593},"export default {\n  locals: {\n    company: {\n      name: 'Spacely Space Sprockets, Inc.'\n    }\n  }\n}\n",[287,943,944,952,961,970,980,984,988],{"__ignoreMap":593},[370,945,946,948,950],{"class":598,"line":599},[370,947,648],{"class":647},[370,949,651],{"class":647},[370,951,655],{"class":654},[370,953,954,957,959],{"class":598,"line":658},[370,955,956],{"class":661},"  locals",[370,958,476],{"class":654},[370,960,655],{"class":654},[370,962,963,966,968],{"class":598,"line":669},[370,964,965],{"class":661},"    company",[370,967,476],{"class":654},[370,969,655],{"class":654},[370,971,972,975,977],{"class":598,"line":689},[370,973,974],{"class":661},"      name",[370,976,476],{"class":654},[370,978,979],{"class":661}," 'Spacely Space Sprockets, Inc.'\n",[370,981,982],{"class":598,"line":699},[370,983,713],{"class":654},[370,985,986],{"class":598,"line":710},[370,987,719],{"class":654},[370,989,990],{"class":598,"line":716},[370,991,725],{"class":654},[283,993,994,995,476],{},"These local variables can be accessed without ",[287,996,759],{},[588,998,1003],{"className":999,"code":1000,"filename":811,"highlights":1001,"language":1002,"meta":593,"style":593},"language-html shiki shiki-themes tailwind-css tailwind-css has-diff","  Company name is {{ page.company.name }} \u003C!-- [!code --] -->\n  Company name is {{ company.name }} \u003C!-- [!code ++] -->\n",[658],"html",[287,1004,1005,1013],{"__ignoreMap":593},[370,1006,1010],{"class":1007,"line":599},[598,1008,1009],"diff","remove",[370,1011,1012],{"class":661},"  Company name is {{ page.company.name }} ",[370,1014,1018],{"class":1015,"line":658},[598,1016,1008,1017],"highlight","add",[370,1019,1020],{"class":661},"  Company name is {{ company.name }} ",[390,1022,1023,1024,1026,1027,405],{"type":572},"\nMaizzle does not allow overwriting the \n",[287,1025,759],{},"\n object through \n",[287,1028,1029],{},"locals",[304,1031,1033],{"id":1032},"top-level-await","Top-level await",[283,1035,1036,1037,1040,1041,1043],{},"You may use top-level ",[287,1038,1039],{},"await"," in your ",[287,1042,337],{}," to fetch data from an API:",[588,1045,1047],{"className":638,"code":1046,"filename":337,"language":640,"meta":593,"style":593},"const data = await fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json())\n\n/** @type {import('@maizzle/framework').Config} */\nexport default {\n  todos: data,\n  build: {\n    /* ... */\n  },\n}\n",[287,1048,1049,1100,1106,1133,1141,1153,1161,1166,1171],{"__ignoreMap":593},[370,1050,1051,1054,1057,1060,1063,1067,1070,1073,1076,1079,1082,1084,1087,1090,1093,1095,1097],{"class":598,"line":599},[370,1052,1053],{"class":842},"const",[370,1055,1056],{"class":661}," data ",[370,1058,894],{"class":1059},"sVevU",[370,1061,1062],{"class":647}," await",[370,1064,1066],{"class":1065},"s2ImL"," fetch",[370,1068,1069],{"class":661},"(",[370,1071,1072],{"class":661},"'https://jsonplaceholder.typicode.com/todos'",[370,1074,1075],{"class":661},")",[370,1077,1078],{"class":654},".",[370,1080,1081],{"class":1065},"then",[370,1083,1069],{"class":661},[370,1085,1086],{"class":842},"res",[370,1088,1089],{"class":842}," =>",[370,1091,1092],{"class":842}," res",[370,1094,1078],{"class":654},[370,1096,5],{"class":1065},[370,1098,1099],{"class":661},"())\n",[370,1101,1102],{"class":598,"line":658},[370,1103,1105],{"emptyLinePlaceholder":1104},true,"\n",[370,1107,1108,1112,1116,1120,1123,1127,1130],{"class":598,"line":669},[370,1109,1111],{"class":1110},"smVoC","/** ",[370,1113,1115],{"class":1114},"sTnEA","@",[370,1117,1119],{"class":1118},"sGouh","type",[370,1121,1122],{"class":1114}," {",[370,1124,1126],{"class":1125},"sSci_","import('@maizzle/framework').Config",[370,1128,1129],{"class":1114},"}",[370,1131,1132],{"class":1110}," */\n",[370,1134,1135,1137,1139],{"class":598,"line":689},[370,1136,648],{"class":647},[370,1138,651],{"class":647},[370,1140,655],{"class":654},[370,1142,1143,1146,1148,1151],{"class":598,"line":699},[370,1144,1145],{"class":661},"  todos",[370,1147,476],{"class":654},[370,1149,1150],{"class":842}," data",[370,1152,686],{"class":654},[370,1154,1155,1157,1159],{"class":598,"line":710},[370,1156,662],{"class":661},[370,1158,476],{"class":654},[370,1160,655],{"class":654},[370,1162,1163],{"class":598,"line":716},[370,1164,1165],{"class":1110},"    /* ... */\n",[370,1167,1168],{"class":598,"line":722},[370,1169,1170],{"class":654},"  },\n",[370,1172,1174],{"class":598,"line":1173},9,[370,1175,725],{"class":654},[304,1177,1179],{"id":1178},"environment-attribute-values","Environment attribute values",[283,1181,1182],{},"Sometimes you may need to define different values for attributes based on the Environment you're building for.",[283,1184,1185],{},"While you could use long, verbose ternaries in expressions to do so:",[588,1187,1189],{"className":809,"code":1188,"filename":811,"language":812,"meta":593,"style":593},"\u003Cx-main>\n  \u003Ca href=\"{{ page.env === 'production' ? 'https://example.com' : 'https://dev.example.com' }}\">Link\u003C/a>\n\u003C/x-main>\n",[287,1190,1191,1199,1262],{"__ignoreMap":593},[370,1192,1193,1195,1197],{"class":598,"line":599},[370,1194,820],{"class":819},[370,1196,823],{"class":647},[370,1198,826],{"class":819},[370,1200,1201,1203,1205,1208,1210,1212,1215,1217,1220,1223,1225,1227,1230,1232,1235,1237,1240,1242,1245,1247,1249,1251,1253,1256,1258,1260],{"class":598,"line":658},[370,1202,831],{"class":819},[370,1204,398],{"class":647},[370,1206,1207],{"class":890}," href",[370,1209,894],{"class":819},[370,1211,897],{"class":890},[370,1213,1214],{"class":661},"{{ ",[370,1216,871],{"class":842},[370,1218,1219],{"class":661}," === ",[370,1221,1222],{"class":890},"'",[370,1224,379],{"class":661},[370,1226,1222],{"class":890},[370,1228,1229],{"class":661}," ? ",[370,1231,1222],{"class":890},[370,1233,1234],{"class":661},"https://example.com",[370,1236,1222],{"class":890},[370,1238,1239],{"class":661}," : ",[370,1241,1222],{"class":890},[370,1243,1244],{"class":661},"https://dev.example.com",[370,1246,1222],{"class":890},[370,1248,846],{"class":661},[370,1250,897],{"class":890},[370,1252,836],{"class":819},[370,1254,1255],{"class":661},"Link",[370,1257,849],{"class":819},[370,1259,398],{"class":647},[370,1261,826],{"class":819},[370,1263,1264,1266,1268],{"class":598,"line":669},[370,1265,849],{"class":819},[370,1267,823],{"class":647},[370,1269,826],{"class":819},[283,1271,1272],{},"... Maizzle also supports Environment-based attributes:",[588,1274,1276],{"className":809,"code":1275,"filename":811,"language":812,"meta":593,"style":593},"\u003Cx-main>\n  \u003Ca\n    href=\"https://dev.example.com\"\n    href-production=\"https://example.com\"\n  >Link\u003C/a>\n\u003C/x-main>\n",[287,1277,1278,1286,1293,1307,1320,1333],{"__ignoreMap":593},[370,1279,1280,1282,1284],{"class":598,"line":599},[370,1281,820],{"class":819},[370,1283,823],{"class":647},[370,1285,826],{"class":819},[370,1287,1288,1290],{"class":598,"line":658},[370,1289,831],{"class":819},[370,1291,1292],{"class":647},"a\n",[370,1294,1295,1298,1300,1302,1304],{"class":598,"line":669},[370,1296,1297],{"class":890},"    href",[370,1299,894],{"class":819},[370,1301,897],{"class":890},[370,1303,1244],{"class":661},[370,1305,1306],{"class":890},"\"\n",[370,1308,1309,1312,1314,1316,1318],{"class":598,"line":689},[370,1310,1311],{"class":890},"    href-production",[370,1313,894],{"class":819},[370,1315,897],{"class":890},[370,1317,1234],{"class":661},[370,1319,1306],{"class":890},[370,1321,1322,1325,1327,1329,1331],{"class":598,"line":699},[370,1323,1324],{"class":819},"  >",[370,1326,1255],{"class":661},[370,1328,849],{"class":819},[370,1330,398],{"class":647},[370,1332,826],{"class":819},[370,1334,1335,1337,1339],{"class":598,"line":710},[370,1336,849],{"class":819},[370,1338,823],{"class":647},[370,1340,826],{"class":819},[283,1342,1343,1344,1347,1348,1351,1352,1355,1356,1078],{},"The value of the ",[287,1345,1346],{},"href-production"," attribute will be used for the ",[287,1349,1350],{},"href"," attribute when doing ",[287,1353,1354],{},"npm run build"," or ",[287,1357,360],{},[283,1359,1360,1361,1363],{},"The ",[287,1362,1346],{}," attribute itself will then be removed from the output.",[1365,1366,1367],"style",{},"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 .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}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 .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sTnEA, html code.shiki .sTnEA{--shiki-light:#44403C;--shiki-light-font-style:italic;--shiki-dark:#44403C;--shiki-dark-font-style:italic}html pre.shiki code .sGouh, html code.shiki .sGouh{--shiki-light:#3730A3;--shiki-light-font-style:italic;--shiki-dark:#3730A3;--shiki-dark-font-style:italic}html pre.shiki code .sSci_, html code.shiki .sSci_{--shiki-light:#EC4899;--shiki-light-font-style:italic;--shiki-dark:#EC4899;--shiki-dark-font-style:italic}",{"title":593,"searchDepth":658,"depth":658,"links":1369},[1370,1375,1376,1377,1381,1382],{"id":306,"depth":658,"text":307,"children":1371},[1372,1373,1374],{"id":409,"depth":669,"text":410},{"id":461,"depth":669,"text":462},{"id":537,"depth":669,"text":538},{"id":579,"depth":658,"text":580},{"id":620,"depth":658,"text":621},{"id":752,"depth":658,"text":753,"children":1378},[1379,1380],{"id":864,"depth":669,"text":865},{"id":931,"depth":669,"text":932},{"id":1032,"depth":658,"text":1033},{"id":1178,"depth":658,"text":1179},"Define distinct build scenarios for your HTML email workflow, each with their own config and data.","md",{},{"title":38,"description":1383},{"loc":39},"docs/environments","_GPf7QsI0w7W_rZrQ1YIOKLVOg2F7otjRPb5kVymuEs",{"id":4,"extension":5,"items":1391,"meta":1462,"stem":195,"__hash__":196},[1392,1402,1407,1416,1429,1447,1453],{"name":8,"items":1393},[1394,1395,1396,1397,1398,1399,1400,1401],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":1403},[1404,1405,1406],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":1408},[1409,1410,1411,1412,1413,1414,1415],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":1417},[1418,1419,1420,1421,1422,1423,1424,1425,1426,1427,1428],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":1430},[1431,1432,1433,1434,1435,1436,1437,1438,1439,1440,1441,1442,1443,1444,1445,1446],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":1448},[1449,1450,1451,1452],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":1454},[1455,1456,1457,1458,1459,1460,1461],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318592916]