generated from mandrasch/11ty-plain-bootstrap5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
.eleventy.js
113 lines (94 loc) · 4.12 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
const pluginRss = require("@11ty/eleventy-plugin-rss"); // needed for absoluteUrl feature
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
// Base setup for builds, needed for og tags and correct image paths
// (mostly for github pages deployment, see build-deploy.yaml)
const baseUrl = process.env.BASE_URL || 'http://localhost:8080';
// e.g. 'https://mandrasch.github.io/'
const pathPrefix = process.env.PATH_PREFIX || '/';
// e.g. '/11ty-plain-boostrap5/'
console.log('baseUrl is set to ...', baseUrl);
console.log('pathPrefix is set to ...', pathPrefix);
// will be accessible in all templates via
// see "eleventyConfig.addGlobalData("site", globalData);"" below
// related: https://github.com/11ty/eleventy/issues/1641
const globalSiteData = {
title: "Canonical Debate Lab",
description: "A proposal to improve the current state of online discourse through the promotion of fact-based reasoning",
locale: 'en',
baseUrl: baseUrl,
pathPrefix: pathPrefix,
}
// https://www.11ty.dev/docs/plugins/image/#use-this-in-your-templates
const Image = require("@11ty/eleventy-img");
async function imageShortcode(src, alt, sizes = "100vw") {
if (alt === undefined) {
// You bet we throw an error on missing alt (alt="" works okay)
throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
}
// TODO: pathPrefix must be '/path/', check existence of trailing slash?!
let metadata = await Image(src, {
widths: [600, 1200],
formats: ['webp', 'jpeg'],
urlPath: `${pathPrefix}img`,
// outputDir: "./img/" is default
outputDir: './_site/img/' // passthrough below didn't work, write to output dir by now
});
let lowsrc = metadata.jpeg[0];
let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
return `<picture>
${Object.values(metadata).map(imageFormat => {
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${sizes}">`;
}).join("\n")}
<img
src="${lowsrc.url}"
width="${highsrc.width}"
height="${highsrc.height}"
alt="${alt}"
loading="lazy"
decoding="async">
</picture>`;
}
module.exports = function (eleventyConfig) {
// Set site title
eleventyConfig.addGlobalData("site", globalSiteData);
// Add plugins
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(eleventyNavigationPlugin);
// Copy dist/ files from laravel mix
eleventyConfig.addPassthroughCopy("dist/"); // path is relative from root
// Copy (static) files to output (_site)
eleventyConfig.addPassthroughCopy({ "src/assets": "/" });
// Copy transformed images
// TODO: this is executed too soon? imgs not there?
eleventyConfig.addPassthroughCopy("img/");
// Important for watch: Eleventy will not add a watch for files or folders that
// are in .gitignore (--> dist/),unless setUseGitIgnore is turned off. See this chapter:
// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
eleventyConfig.setUseGitIgnore(false);
// Watch for changes (and reload browser)
eleventyConfig.addWatchTarget("./src/assets"); // normal (static) assets
eleventyConfig.addWatchTarget("./dist") // laravel-mix output changes
// RandomId function for IDs used by labelled-by
// Thanks https://github.com/mozilla/nunjucks/issues/724#issuecomment-207581540
// TODO: replace with addNunjucksGlobal? https://github.com/11ty/eleventy/issues/1498
eleventyConfig.addFilter("generateRandomIdString", function (prefix) {
return prefix + "-" + Math.floor(Math.random() * 1000000);
});
// eleventy-img config
eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
// Base Config
return {
dir: {
input: "src",
output: "_site",
includes: "includes", // this path is releative to input-path (src/)
layouts: "layouts", // this path is releative to input-path (src/)
data: "data", // this path is releative to input-path (src/)
},
templateFormats: ["njk", "md"],
htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk",
// important for github pages build (subdirectory):
pathPrefix: pathPrefix
};
};