@@ -14,6 +14,13 @@ import StorageClient from '../catalog/StorageClient.js';
14
14
import { errorResponse } from '../../utils/http.js' ;
15
15
import { pruneUndefined } from '../../utils/product.js' ;
16
16
17
+ /**
18
+ * @param {string } str
19
+ * @param {number } spaces
20
+ * @returns {string }
21
+ */
22
+ const indent = ( str , spaces ) => str . split ( '\n' ) . map ( ( line ) => `${ ' ' . repeat ( spaces ) } ${ line } ` ) . join ( '\n' ) ;
23
+
17
24
/**
18
25
* @param {ProductBusVariant } variant
19
26
*/
@@ -68,7 +75,7 @@ const jsonldTemplate = (product) => JSON.stringify({
68
75
* @returns {string }
69
76
*/
70
77
const metaName = ( name , value ) => ( value !== undefined ? `\
71
- <meta name="${ name } " content="${ Array . isArray ( value ) ? value . join ( ',' ) : value } ">
78
+ <meta name="${ name } " content="${ Array . isArray ( value ) ? value . join ( ',' ) : value } ">
72
79
` : '' ) ;
73
80
74
81
/**
@@ -78,21 +85,20 @@ const metaName = (name, value) => (value !== undefined ? `\
78
85
* @returns {string }
79
86
*/
80
87
const metaProperty = ( property , value ) => ( value !== undefined ? `\
81
- <meta property="${ property } " content="${ Array . isArray ( value ) ? value . join ( ',' ) : value } ">
88
+ <meta property="${ property } " content="${ Array . isArray ( value ) ? value . join ( ',' ) : value } ">
82
89
` : '' ) ;
83
90
84
91
/**
85
92
* @param {ProductBusImage } image
86
93
* @returns {string }
87
94
*/
88
95
const pictureTemplate = ( image ) => /* html */ `\
89
- <picture>
90
- <source type="image/webp" srcset="${ image . url } " alt="" media="(min-width: 600px)">
91
- <source type="image/webp" srcset="${ image . url } ">
92
- <source type="image/png" srcset="${ image . url } " media="(min-width: 600px)">
93
- <img loading="lazy" alt="${ image . label } " src="${ image . url } ">
94
- </picture>
95
- ` ;
96
+ <picture>
97
+ <source type="image/webp" srcset="${ image . url } " alt="" media="(min-width: 600px)">
98
+ <source type="image/webp" srcset="${ image . url } ">
99
+ <source type="image/png" srcset="${ image . url } " media="(min-width: 600px)">
100
+ <img loading="lazy" alt="${ image . label } " src="${ image . url } ">
101
+ </picture>` ;
96
102
97
103
/**
98
104
* @param {ProductBusEntry } product
@@ -105,26 +111,33 @@ const htmlTemplate = (product) => /* html */`\
105
111
<meta charset="UTF-8">
106
112
<title>${ product . metaTitle } </title>
107
113
<meta name="viewport" content="width=device-width, initial-scale=1">
108
- ${ metaName ( 'description' , product . metaDescription ) }
109
- ${ metaName ( 'sku' , product . sku ) }
110
- ${ metaProperty ( 'og:title' , product . metaTitle ) }
111
- ${ metaProperty ( 'og:description' , product . metaDescription ) }
112
- ${ metaProperty ( 'og:image' , product . images ?. [ 0 ] ?. url ) }
113
- ${ metaProperty ( 'og:type' , 'product' ) }
114
- ${ metaProperty ( 'product:availability' , product . availability ) }
115
- ${ metaProperty ( 'product:price.amount' , product . price ?. final ) }
116
- ${ metaProperty ( 'product:price.regular' , product . price ?. regular ) }
117
- ${ metaProperty ( 'product:price.currency' , product . price ?. currency ) }
114
+ ${ metaName ( 'description' , product . metaDescription ) } \
115
+ ${ metaName ( 'sku' , product . sku ) } \
116
+ ${ metaName ( 'image' , product . images ?. [ 0 ] ?. url ) } \
117
+ ${ metaProperty ( 'og:image' , product . images ?. [ 0 ] ?. url ) } \
118
+ ${ metaProperty ( 'og:title' , product . metaTitle ) } \
119
+ ${ metaProperty ( 'og:description' , product . metaDescription ) } \
120
+ ${ metaProperty ( 'og:type' , 'product' ) } \
121
+ ${ metaProperty ( 'product:availability' , product . availability ) } \
122
+ ${ metaProperty ( 'product:price' , product . price ?. final ) } \
123
+ ${ metaProperty ( 'product:price.regular' , product . price ?. regular ) } \
124
+ ${ metaProperty ( 'product:price.currency' , product . price ?. currency ) } \
118
125
<script type="application/ld+json">
119
- ${ product . jsonld ? product . jsonld : jsonldTemplate ( product ) }
126
+ ${ product . jsonld ? product . jsonld : jsonldTemplate ( product ) }
120
127
</script>
121
128
</head>
122
129
<body>
130
+ <header></header>
123
131
<main>
124
- <h1>${ product . title } </h1>
125
- <p>${ product . description } </p>
126
- ${ product . images ?. map ( pictureTemplate ) . join ( '\n' ) }
132
+ <div>
133
+ <h1>${ product . title } </h1>
134
+ <p>${ product . description } </p>
135
+ <p>
136
+ ${ indent ( product . images ?. map ( pictureTemplate ) . join ( '\n' ) , 10 ) }
137
+ </p>
138
+ </div>
127
139
</main>
140
+ <footer></footer>
128
141
</body>
129
142
</html>` ;
130
143
0 commit comments