-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path.eleventy.js
303 lines (292 loc) · 11.8 KB
/
.eleventy.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
const htmlmin = require('html-minifier-terser');
const sass = require('sass');
const fs = require('fs');
const path = require('path');
const prettier = require('prettier');
const outputDirName = 'portals';
const outputDirBase = `./${outputDirName}/`;
const srcDir = './src';
/** Eleventy configuration for the build process. */
module.exports = function (config) {
watchForChanges(config);
prettifyTemplates(config);
compileTemplatesStyling(config);
minifyTemplates(config);
generateTemplateHomepage(config);
return {
dir: {
input: 'src',
output: outputDirName,
},
};
};
/**
* Compile SCSS files into CSS and inline the CSS into the HTML templates.
*
* @param config The Eleventy configuration.
*/
function compileTemplatesStyling(config) {
config.addTransform('inline-css', (content, outputDir) => {
const baseDir = outputDir.replace(outputDirBase, '');
const baseName = (baseDir && baseDir.split('/')[0]) ?? null;
if (baseName) {
const scssDir = `${srcDir}/${baseName}.scss`;
const scssFileExists = fs.existsSync(scssDir);
if (scssFileExists) {
const result = sass.compile(scssDir, { style: 'compressed' });
const styles = `<style>${result.css}</style>`;
return content.replace('</head>', `${styles}</head>`);
}
}
return content;
});
}
/**
* Generate a homepage with links to all templates.
* Accessible at http://localhost:8080
*
* @param config The Eleventy configuration.
*/
function generateTemplateHomepage(config) {
// Generate a __development only__ home page with links to all templates
config.on('afterBuild', () => {
const templateFiles = fs
.readdirSync(srcDir)
.filter((file) => file.endsWith('.html'))
.map((file) => {
const name = path.basename(file, '.html');
return {
name,
url: `/${name}/index.html`,
};
});
const homePageContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Portals - Templates</title>
</head>
<body>
<svg
height="150"
version="1.1"
viewBox="0 0 1080 1080"
width="150"
xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>Red Portals Logo</title>
<g transform="matrix(1 0 0 1 540 540)">
<rect
height="1080"
rx="0"
ry="0"
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-dashoffset: 0;
stroke-linejoin: miter;
stroke-miterlimit: 4;
fill: rgb(255,255,255);
fill-rule: nonzero;
opacity: 1;
visibility: hidden;
"
vector-effect="non-scaling-stroke"
width="1080"
x="-540"
y="-540"
/>
</g>
<g transform="matrix(1 0 0 1 540 540)"></g>
<g transform="matrix(1 0 0 1 569.63 233.78)">
<circle
cx="0"
cy="0"
r="35"
style="
stroke: rgb(0,0,0);
stroke-width: 0;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-dashoffset: 0;
stroke-linejoin: miter;
stroke-miterlimit: 4;
fill: rgb(255,0,0);
fill-rule: nonzero;
opacity: 1;
"
vector-effect="non-scaling-stroke"
/>
</g>
<g transform="matrix(0.18 0 0 -0.18 540 540)">
<path
d="
M 5620 7879 C 5135 7825 4780 7715 4505 7533 C 4398 7461 4255
7327 4200 7245 C 4182 7218 4143 7168 4115 7135 C 3910 6899
3800 6652 3800 6429 L 3800 6362 L 3718 6294 C 3608 6205 3381
5976 3296 5870 C 3076 5594 2916 5281 2835 4967 C 2782 4758
2755 4513 2780 4455 C 2788 4437 2789 4437 2789 4460 C 2790
4481 2821 4509 2953 4611 C 3402 4958 3712 5132 4080 5243 C
4250 5295 4496 5340 4605 5340 L 4649 5340 L 4661 5283 C 4669
5251 4674 5169 4674 5100 C 4673 4945 4650 4829 4546 4457 C
4425 4026 4416 3973 4416 3730 C 4416 3536 4417 3520 4443 3437
C 4473 3342 4530 3209 4535 3225 C 4537 3231 4544 3298 4550
3375 C 4571 3649 4647 3922 4739 4060 C 4746 4070 4749 3987
4749 3800 C 4749 3649 4753 3476 4759 3415 C 4803 2979 4927
2617 5161 2242 C 5244 2107 5410 1886 5419 1897 C 5423 1901
5437 1961 5450 2030 C 5506 2335 5598 2584 5728 2785 C 5852
2977 6062 3252 6315 3550 C 6514 3786 6695 4012 6770 4121 C
6998 4449 7114 4704 7164 4985 L 7178 5065 L 7200 5017 C 7235
4939 7246 4814 7232 4638 C 7221 4486 7186 4271 7150 4132 C
7127 4039 7136 4046 7235 4195 C 7394 4433 7490 4705 7535 5045
C 7557 5205 7557 5524 7535 5695 C 7499 5986 7415 6266 7319
6409 L 7296 6444 L 7330 6424 C 7465 6349 7676 6043 7753 5812
C 7767 5772 7781 5736 7785 5732 C 7789 5728 7790 5793 7787
5875 C 7778 6104 7733 6275 7623 6495 C 7497 6748 7302 6995
7057 7212 L 6980 7280 L 7007 7291 C 7074 7318 7271 7248 7459
7131 L 7542 7079 L 7491 7139 C 7462 7172 7404 7232 7362 7271
C 7014 7596 6646 7784 6210 7860 C 6066 7885 5760 7895 5620
7879 z M 6025 7861 C 6056 7856 6038 7853 5940 7847 C 5628 7830
5328 7753 5051 7619 C 4810 7503 4641 7383 4454 7196 C 4300
7041 4203 6916 4097 6730 L 4048 6645 L 4054 6741 C 4064 6911
4106 7075 4166 7176 C 4416 7597 5058 7864 5830 7868 C 5915
7868 6003 7866 6025 7861 z M 6160 7144 C 6248 7122 6429 7045
6418 7035 C 6416 7032 6383 7039 6346 7050 C 6148 7106 5873
7116 5708 7072 C 5510 7019 5356 6936 5199 6798 C 5009 6632
4894 6558 4750 6512 C 4678 6488 4576 6470 4516 6470 L 4476
6470 L 4566 6523 C 4783 6653 4895 6734 5131 6936 C 5293 7076
5339 7112 5326 7092 C 5323 7086 5328 7077 5338 7071 C 5352
7064 5385 7070 5466 7095 C 5745 7183 5947 7197 6160 7144 z M
5924 6705 C 6032 6479 5932 6204 5702 6097 C 5480 5992 5272
6012 5124 6152 C 5074 6199 5020 6286 5020 6319 C 5020 6327
5048 6306 5083 6273 C 5258 6105 5450 6062 5637 6149 C 5862
6255 5969 6538 5870 6769 L 5850 6815 L 5875 6785 C 5889 6769
5911 6733 5924 6705 z M 5554 6730 C 5587 6691 5604 6631 5596
6588 C 5571 6454 5416 6398 5312 6485 C 5274 6517 5246 6584
5260 6609 C 5275 6638 5360 6709 5410 6736 C 5475 6770 5522
6768 5554 6730 z M 6267 6587 C 6292 6515 6292 6339 6266 6255
C 6250 6200 6208 6127 6163 6074 C 6130 6036 6076 6002 6013
5981 C 5897 5942 5895 5950 5999 6053 C 6174 6225 6234 6349
6235 6541 C 6235 6600 6238 6646 6242 6644 C 6245 6642 6257
6616 6267 6587 z M 4077 6383 L 4128 6364 L 4032 6319 C 3688
6162 3395 5909 3176 5582 C 3090 5452 2988 5249 2930 5090 C
2888 4974 2818 4715 2805 4627 C 2792 4540 2789 4586 2800 4691
C 2854 5196 3096 5674 3504 6083 C 3664 6244 3793 6345 3882
6381 C 3963 6413 3994 6414 4077 6383 z M 4099 6026 C 4097
6024 4055 6006 4006 5987 C 3958 5967 3888 5932 3853 5910 C
3817 5888 3786 5871 3784 5873 C 3775 5881 3820 5947 3852 5973
C 3902 6013 3954 6029 4034 6030 C 4072 6030 4101 6028 4099
6026 z M 5355 5775 C 5494 5750 5491 5741 5344 5740 C 4943 5739
4545 5671 4203 5544 C 3955 5453 3576 5243 3377 5087 C 3356
5071 3337 5060 3334 5062 C 3328 5068 3392 5154 3444 5208 C
3499 5267 3628 5367 3726 5428 C 4009 5604 4407 5740 4750 5779
C 4802 5785 4859 5792 4875 5794 C 4942 5804 5269 5790 5355
5775 z M 6309 5445 C 6227 5210 6087 4959 5703 4352 C 5423 3908
5339 3739 5261 3464 C 5225 3332 5197 3187 5176 3020 C 5168
2951 5157 2868 5153 2835 L 5145 2775 L 5139 2860 C 5122 3070
5118 3358 5129 3465 C 5174 3883 5389 4302 5778 4727 C 5921
4884 5986 4966 6082 5115 C 6149 5218 6298 5473 6321 5524 C
6347 5581 6340 5531 6309 5445 z
"
stroke-linecap="round"
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-dashoffset: 0;
stroke-linejoin: miter;
stroke-miterlimit: 4;
fill: rgb(0,0,0);
fill-rule: nonzero;
opacity: 1;
"
transform=" translate(-5279.67, -4891.67)"
vector-effect="non-scaling-stroke"
/>
</g>
<g transform="matrix(0.18 0 0 -0.18 767.7 780.43)">
<path
d="
M 6660 3648 C 6619 3591 6541 3492 6487 3428 C 6434 3363 6394
3310 6398 3310 C 6418 3310 6527 3352 6565 3374 C 6615 3404
6672 3465 6699 3517 C 6723 3565 6743 3663 6738 3713 L 6735
3752 L 6660 3648 z
"
stroke-linecap="round"
style="
stroke: none;
stroke-width: 1;
stroke-dasharray: none;
stroke-linecap: butt;
stroke-dashoffset: 0;
stroke-linejoin: miter;
stroke-miterlimit: 4;
fill: rgb(0,0,0);
fill-rule: nonzero;
opacity: 1;
"
transform=" translate(-6568.25, -3531)"
vector-effect="non-scaling-stroke"
/>
</g>
</svg>
<h3 style="margin: 0 0 8px 0">
<span style="color:red">Red</span> Portals - Templates
</h3>
<ul>
${templateFiles
.map((file) => `<li><a href="${file.url}">${file.name}</a></li>`)
.join('')}
</ul>
</body>
</html>
`;
const homePageDir = path.join(outputDirBase, 'index.html');
fs.writeFileSync(homePageDir, homePageContent);
});
}
/**
* Minify the HTML templates to reduce file size and improve performance.
*
* @param config The Eleventy configuration.
*/
function minifyTemplates(config) {
config.addTransform('htmlmin', (content, outputDir) => {
if (outputDir && outputDir.endsWith('.html')) {
return htmlmin.minify(content, {
collapseWhitespace: true,
removeComments: true,
removeOptionalTags: true,
minifyCSS: true,
minifyJS: true,
});
}
return content;
});
}
/**
* Prettify the HTML templates for better readability during development.
*
* @param config The Eleventy configuration.
*/
function prettifyTemplates(config) {
config.addFilter('prettify', (code) => {
return prettier.format(code, { parser: 'html' });
});
}
/**
* Watch for changes in HTML/SCSS files, recompile templates on change.
*
* @param config The Eleventy configuration.
*/
function watchForChanges(config) {
config.addWatchTarget(`${srcDir}/**/*.scss`);
config.addWatchTarget(`${srcDir}/**/*.html`);
}