Skip to content

Commit 30f06be

Browse files
maxakurumaxakuru
committed
fix: indentation
1 parent a0b74e2 commit 30f06be

File tree

2 files changed

+97
-88
lines changed

2 files changed

+97
-88
lines changed

‎src/templates/html/HTMLTemplate.js

+96-87
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ export class HTMLTemplate {
4040
*/
4141
static priceRange = (min, max) => (min !== max ? ` (${min} - ${max})` : '');
4242

43+
/**
44+
* @param {string} str
45+
* @param {number} spaces
46+
* @returns {string}
47+
*/
48+
static indent = (str, spaces) => str.split('\n').map((line) => `${' '.repeat(spaces)}${line}`).join('\n');
49+
4350
/** @type {Context} */
4451
ctx = undefined;
4552

@@ -156,12 +163,12 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
156163
renderHead() {
157164
return /* html */ `\
158165
<head>
159-
${this.renderDocumentMetaTags()}
160-
${this.renderOpenGraphMetaTags()}
161-
${this.renderTwitterMetaTags()}
162-
${this.renderCommerceMetaTags()}
163-
${this.renderHelixDependencies()}
164-
${this.renderJSONLD()}
166+
${HTMLTemplate.indent(this.renderDocumentMetaTags(), 2)}
167+
${HTMLTemplate.indent(this.renderOpenGraphMetaTags(), 2)}
168+
${HTMLTemplate.indent(this.renderTwitterMetaTags(), 2)}
169+
${HTMLTemplate.indent(this.renderCommerceMetaTags(), 2)}
170+
${HTMLTemplate.indent(this.renderHelixDependencies(), 2)}
171+
${HTMLTemplate.indent(this.renderJSONLD(), 2)}
165172
</head>`;
166173
}
167174

@@ -172,19 +179,19 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
172179
*/
173180
renderProductImages(images) {
174181
return /* html */ `\
175-
<div class="product-images">
176-
<div>
177-
${images.map((img) => /* html */ `\
178-
<div>
179-
<picture>
180-
<source type="image/webp" srcset="${img.url}" alt="" media="(min-width: 600px)">
181-
<source type="image/webp" srcset="${img.url}">
182-
<source type="image/png" srcset="${img.url}" media="(min-width: 600px)">
183-
<img loading="lazy" alt="${img.label}" src="${img.url}">
184-
</picture>
185-
</div>`).join('\n')}
186-
</div>
187-
</div>`;
182+
<div class="product-images">
183+
<div>
184+
${images.map((img) => /* html */ `\
185+
<div>
186+
<picture>
187+
<source type="image/webp" srcset="${img.url}" alt="" media="(min-width: 600px)">
188+
<source type="image/webp" srcset="${img.url}">
189+
<source type="image/png" srcset="${img.url}" media="(min-width: 600px)">
190+
<img loading="lazy" alt="${img.label}" src="${img.url}">
191+
</picture>
192+
</div>`).join('\n')}
193+
</div>
194+
</div>`;
188195
}
189196

190197
/**
@@ -195,12 +202,12 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
195202
renderProductAttributes(attributes) {
196203
return /* html */ `\
197204
<div class="product-attributes">
198-
${attributes.map((attr) => /* html */`\
199-
<div>
200-
<div>${attr.name}</div>
201-
<div>${attr.label}</div>
202-
<div>${attr.value}</div>
203-
</div>`).join('\n')}
205+
${attributes.map((attr) => /* html */`\
206+
<div>
207+
<div>${attr.name}</div>
208+
<div>${attr.label}</div>
209+
<div>${attr.value}</div>
210+
</div>`).join('\n')}
204211
</div>`;
205212
}
206213

@@ -211,14 +218,14 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
211218
*/
212219
renderProductItems(items) {
213220
return items.map((item) => /* html */`\
214-
<div>
215-
<div>option</div>
216-
<div>${item.id}</div>
217-
<div>${item.label}</div>
218-
<div>${item.value ?? ''}</div>
219-
<div>${item.selected ? 'selected' : ''}</div>
220-
<div>${item.inStock ? 'inStock' : ''}</div>
221-
</div>`).join('\n');
221+
<div>
222+
<div>option</div>
223+
<div>${item.id}</div>
224+
<div>${item.label}</div>
225+
<div>${item.value ?? ''}</div>
226+
<div>${item.selected ? 'selected' : ''}</div>
227+
<div>${item.inStock ? 'inStock' : ''}</div>
228+
</div>`).join('\n');
222229
}
223230

224231
/**
@@ -228,18 +235,18 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
228235
*/
229236
renderProductOptions(options) {
230237
return /* html */ `\
231-
<div class="product-options">
232-
${options.map((opt) => /* html */ `\
233-
<div>
234-
<div>${opt.id}</div>
235-
<div>${opt.label}</div>
236-
<div>${opt.typename}</div>
237-
<div>${opt.type ?? ''}</div>
238-
<div>${opt.multiple ? 'multiple' : ''}</div>
239-
<div>${opt.required === true ? 'required' : ''}</div>
240-
</div>
241-
${this.renderProductItems(opt.items)}`).join('\n')}
242-
</div>`;
238+
<div class="product-options">
239+
${options.map((opt) => /* html */ `\
240+
<div>
241+
<div>${opt.id}</div>
242+
<div>${opt.label}</div>
243+
<div>${opt.typename}</div>
244+
<div>${opt.type ?? ''}</div>
245+
<div>${opt.multiple ? 'multiple' : ''}</div>
246+
<div>${opt.required === true ? 'required' : ''}</div>
247+
</div>
248+
${HTMLTemplate.indent(this.renderProductItems(opt.items), 2)}`).join('\n')}
249+
</div>`;
243250
}
244251

245252
/**
@@ -249,12 +256,12 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
249256
*/
250257
renderVariantImages(images) {
251258
return images.map((img) => /* html */ `\
252-
<picture>
253-
<source type="image/webp" srcset="${img.url}" alt="" media="(min-width: 600px)">
254-
<source type="image/webp" srcset="${img.url}">
255-
<source type="image/png" srcset="${img.url}" media="(min-width: 600px)">
256-
<img loading="lazy" alt="${img.label}" src="${img.url}">
257-
</picture>`).join('\n');
259+
<picture>
260+
<source type="image/webp" srcset="${img.url}" alt="" media="(min-width: 600px)">
261+
<source type="image/webp" srcset="${img.url}">
262+
<source type="image/png" srcset="${img.url}" media="(min-width: 600px)">
263+
<img loading="lazy" alt="${img.label}" src="${img.url}">
264+
</picture>`).join('\n');
258265
}
259266

260267
/**
@@ -264,8 +271,8 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
264271
*/
265272
renderVariantPrices(prices) {
266273
return /* html */ `\
267-
<div>Regular: ${prices.regular.amount} ${prices.regular.currency}${HTMLTemplate.priceRange(prices.regular.minimumAmount, prices.regular.maximumAmount)}</div>
268-
<div>Final: ${prices.final.amount} ${prices.final.currency}${HTMLTemplate.priceRange(prices.final.minimumAmount, prices.final.maximumAmount)}</div>`;
274+
<div>Regular: ${prices.regular.amount} ${prices.regular.currency}${HTMLTemplate.priceRange(prices.regular.minimumAmount, prices.regular.maximumAmount)}</div>
275+
<div>Final: ${prices.final.amount} ${prices.final.currency}${HTMLTemplate.priceRange(prices.final.minimumAmount, prices.final.maximumAmount)}</div>`;
269276
}
270277

271278
/**
@@ -278,18 +285,20 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
278285
}
279286

280287
return /* html */ `\
281-
<div class="product-variants">
282-
${this.variants.map((v) => /* html */`\
283-
<div>
284-
<div>${v.sku}</div>
285-
<div>${v.name}</div>
286-
<div>${v.description}</div>
287-
<div>${v.inStock ? 'inStock' : ''}</div>
288-
${this.renderVariantPrices(v.prices)}
289-
<div>${this.renderVariantImages(v.images)}</div>
290-
<div>${(v.selections ?? []).join(', ')}</div>
291-
</div>`).join('\n')}
292-
</div>`;
288+
<div class="product-variants">
289+
${this.variants.map((v) => /* html */`\
290+
<div>
291+
<div>${v.sku}</div>
292+
<div>${v.name}</div>
293+
<div>${v.description}</div>
294+
<div>${v.inStock ? 'inStock' : ''}</div>
295+
${HTMLTemplate.indent(this.renderVariantPrices(v.prices), 4)}
296+
<div>
297+
${HTMLTemplate.indent(this.renderVariantImages(v.images), 6)}
298+
</div>
299+
<div>${(v.selections ?? []).join(', ')}</div>
300+
</div>`).join('\n')}
301+
</div>`;
293302
}
294303

295304
/**
@@ -302,23 +311,23 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
302311
}
303312

304313
return /* html */ `\
305-
<div class="variant-attributes">
306-
${this.variants?.map((v) => /* html */`\
314+
<div class="variant-attributes">
315+
${this.variants?.map((v) => /* html */`\
316+
<div>
317+
<div>sku</div>
318+
<div>${v.sku}</div>
319+
<div></div>
320+
<div></div>
321+
</div>
322+
${v.attributes?.map((attribute) => /* html */`\
307323
<div>
308-
<div>sku</div>
309-
<div>${v.sku}</div>
310-
<div></div>
311-
<div></div>
312-
</div>
313-
${v.attributes?.map((attribute) => /* html */`\
314-
<div>
315-
<div>attribute</div>
316-
<div>${attribute.name}</div>
317-
<div>${attribute.label}</div>
318-
<div>${attribute.value}</div>
319-
</div>`).join('\n')}\
320-
`).join('\n')}
321-
</div>`;
324+
<div>attribute</div>
325+
<div>${attribute.name}</div>
326+
<div>${attribute.label}</div>
327+
<div>${attribute.value}</div>
328+
</div>`).join('\n')}\
329+
`).join('\n')}
330+
</div>`;
322331
}
323332

324333
/**
@@ -336,18 +345,18 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices.final.curre
336345
return /* html */`\
337346
<!DOCTYPE html>
338347
<html>
339-
${this.renderHead()}
348+
${HTMLTemplate.indent(this.renderHead(), 2)}
340349
<body>
341350
<header></header>
342351
<main>
343352
<div>
344353
<h1>${name}</h1>
345354
${description ? `<p>${description}</p>` : ''}
346-
${this.renderProductImages(images)}
347-
${this.renderProductAttributes(attributes)}
348-
${this.renderProductOptions(options)}
349-
${this.renderProductVariants()}
350-
${this.renderProductVariantsAttributes()}
355+
${HTMLTemplate.indent(this.renderProductImages(images), 8)}
356+
${HTMLTemplate.indent(this.renderProductAttributes(attributes), 8)}
357+
${HTMLTemplate.indent(this.renderProductOptions(options), 8)}
358+
${HTMLTemplate.indent(this.renderProductVariants(), 8)}
359+
${HTMLTemplate.indent(this.renderProductVariantsAttributes(), 8)}
351360
</div>
352361
</main>
353362
<footer></footer>

‎src/templates/json/JSONTemplate.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,6 @@ export class JSONTemplate {
182182
},
183183
}
184184
: {}),
185-
}));
185+
}), undefined, 2);
186186
}
187187
}

0 commit comments

Comments
 (0)