-
Notifications
You must be signed in to change notification settings - Fork 0
/
eleventy.config.js
113 lines (98 loc) · 3.05 KB
/
eleventy.config.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
/*
Eleventy config
https://www.11ty.dev/docs/config/
*/
import { browserslistToTargets, transform } from 'lightningcss';
import * as sass from 'sass';
import path from 'path';
import browserslist from 'browserslist';
import esbuild from 'esbuild';
export default (eleventyConfig) => {
// make sure Eleventy knows to process file types with addTemplateFormats
eleventyConfig.addTemplateFormats("scss");
eleventyConfig.addTemplateFormats("js");
eleventyConfig.addTemplateFormats("json");
eleventyConfig.addTemplateFormats("svg");
/*
addPassthroughCopy tells Eleventy to copy files or directories to the output folder
addPassthroughCopy can take a directory, file, or glob pattern
*/
eleventyConfig.addPassthroughCopy("src/assets/js/fontfaceobserver.standalone.js");
/*
CSS processing
Transpile with Lightning CSS https://lightningcss.dev/
Read more about CSS and Lightning https://11ty.rocks/posts/process-css-with-lightningcss/
*/
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",
compile: async function (inputContent, inputPath) {
let parsed = path.parse(inputPath);
if (parsed.name.startsWith("_")) {
return;
}
let result = sass.compileString(inputContent, {
loadPaths: [parsed.dir || "."],
sourceMap: false,
});
// Allow included files from @use or @import to
this.addDependencies(inputPath, result.loadedUrls);
let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
return async () => {
let { code } = transform({
filename: 'style.css',
entryPoints: [path],
code: Buffer.from(result.css),
minify: true,
sourceMap: false,
targets,
});
return code;
};
},
});
// JavaScript compilation
eleventyConfig.addExtension('js', {
outputFileExtension: 'js',
compile: async (content, path) => {
if (path !== './src/assets/js/index.js') {
return;
}
return async () => {
let output = await esbuild.build({
target: 'es2020',
entryPoints: [path],
minify: true,
bundle: true,
write: false,
});
return output.outputFiles[0].text;
}
}
});
/*
Watch targets
By default Eleventy will watch for template changes, but depending on your configuration additional watch targets may be necessary
Run `npm run debug` to view current watch targets
*/
eleventyConfig.addWatchTarget("src/assets/**/*.{svg,webp,png,jpeg}");
eleventyConfig.addWatchTarget("/src/assets/css/*.scss");
eleventyConfig.addWatchTarget("/src/assets/js/*.js");
/*
Other config options
Make changes to default directory structure
See this post for a deeper look into directory architecture https://www.njfamirm.ir/en/blog/eleventy-folder-structure-guide/
Specify template engine options
https://www.11ty.dev/docs/languages/
*/
return {
dir: {
input: "src",
output: "_site",
includes: "_includes",
},
templateFormats: [ "md", "njk", "html", "liquid"],
markdownTemplateEngine: "njk",
htmlTemplateEngine: "njk", // Allows us to use Nunjucks in HTML files
dataTemplateEngine: "njk",
};
}