Merge pull request #51 from stebrech/v3.1.0

see release notes

Author: stebrech

.gitignore

@@ -2,71 +2,25 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
+# Dependency directory
 node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
 
-# Optional npm cache directory
+# Cache
 .npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
+.cache/
 
 # dotenv environment variable files
 .env*
 
-# gatsby files
-.cache/
-public
+# build output
+_site
 
 # Mac files
 .DS_Store
 
-# Yarn
-yarn-error.log
-.pnp/
-.pnp.js
-# Yarn Integrity file
-.yarn-integrity
+# Obsidian vault files
+.obsidian
 
-# Temp files
-temp
+# Local temp files
+tmp

.vscode/settings.json

@@ -2,5 +2,6 @@
 	"editor.tabSize": 2,
 	"editor.insertSpaces": false,
 	"prettier.useTabs": true,
-	"editor.formatOnSave": true
+	"editor.formatOnSave": true,
+	"markdown.extension.toc.updateOnSave": false
 }

eleventy.config.filters.js

@@ -4,7 +4,7 @@ module.exports = (eleventyConfig) => {
 	eleventyConfig.addFilter("localizedDate", (dateObj, lang, format) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
 		return DateTime.fromJSDate(dateObj, { locale: lang || "en" }).toFormat(
-			format || "LLLL dd yyyy"
+			format || "LLLL dd yyyy",
 		);
 	});
 
@@ -17,7 +17,12 @@ module.exports = (eleventyConfig) => {
 		return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title));
 	});
 
-	eleventyConfig.addFilter("sortByMenuOrder", (values) => {
-		return values.slice().sort((a, b) => a.data.order - b.data.order);
+	eleventyConfig.addFilter("sortByOrder", (values) => {
+		return values.slice().sort((a, b) => {
+			if (a.data.order && b.data.order) {
+				return a.data.order - b.data.order;
+			}
+			return 0;
+		});
 	});
 };

eleventy.config.images.js

@@ -1,27 +1,71 @@
 const path = require("path");
 const eleventyImage = require("@11ty/eleventy-img");
+const markdownIt = require("markdown-it");
+const markdownItEleventyImg = require("markdown-it-eleventy-img");
 
 module.exports = (eleventyConfig) => {
+	const defaultImageWidths = [1210, 1044, 800, 400];
+	const defaultImageFormats = ["webp", "auto"];
+	const defaultImageSizes = "100vw";
+
 	// Eleventy Image shortcode
 	// https://www.11ty.dev/docs/plugins/image/
 	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
 		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
 		// Warning: Avif can be resource-intensive so take care!
-		let formats = ["webp", "auto"];
 		let metadata = await eleventyImage(src, {
-			widths: widths || [1210, 1044, 800, 400],
-			formats,
+			widths: widths || defaultImageWidths,
+			formats: defaultImageFormats,
 			urlPath: "/assets/img/",
 			outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
+			filenameFormat: function (id, src, width, format, options) {
+				// id: hash of the original image
+				// src: original image path
+				// width: current width in px
+				// format: current file format
+				// options: set of options passed to the Image call
+				const filename = path.basename(src, path.extname(src));
+				return `${filename}_${width}.${format}`;
+			},
 		});
 
 		// TODO loading=eager and fetchpriority=high
 		let imageAttributes = {
 			alt,
-			sizes: sizes || "100vw",
+			sizes: sizes || defaultImageSizes,
 			loading: "lazy",
 			decoding: "async",
 		};
 		return eleventyImage.generateHTML(metadata, imageAttributes);
 	});
+
+	eleventyConfig.setLibrary(
+		"md",
+		markdownIt({ html: true, breaks: true }).use(markdownItEleventyImg, {
+			imgOptions: {
+				widths: defaultImageWidths,
+				formats: defaultImageFormats,
+				urlPath: "/assets/img/",
+				outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
+				sharpOptions: {
+					animated: true,
+					limitInputPixels: false,
+				},
+				filenameFormat: function (id, src, width, format, options) {
+					// id: hash of the original image
+					// src: original image path
+					// width: current width in px
+					// format: current file format
+					// options: set of options passed to the Image call
+					const filename = path.basename(src, path.extname(src));
+					return `${filename}_${width}.${format}`;
+				},
+			},
+			globalAttributes: {
+				class: "markdown-img",
+				decoding: "async",
+				sizes: defaultImageSizes,
+			},
+		}),
+	);
 };

eleventy.config.js

@@ -9,6 +9,7 @@ module.exports = function (eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({
 		"./src/assets/img/svg": "/assets/img",
 		"./src/assets/styles": "/assets/styles",
+		"./src/assets/js": "/assets/js",
 		"./src/assets/favicons": "/",
 		"./src/assets/manifest": "/",
 		"./src/assets/robots.txt": "/robots.txt",
@@ -50,9 +51,9 @@ module.exports = function (eleventyConfig) {
 
 		dir: {
 			input: "src/content", // default: "."
-			includes: "../assets/layouts", // default: "_includes"
+			includes: "../_templates", // default: "_includes"
 			data: "../_data", // default: "_data"
-			output: "public", // default: "_site
+			output: "_site", // default: "_site
 		},
 	};
 };

eleventy.config.markdown.js

@@ -1,31 +1,7 @@
-const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
-const markdownItEleventyImg = require("markdown-it-eleventy-img");
 const pluginTOC = require("eleventy-plugin-toc");
-const path = require("path");
 
 module.exports = function (eleventyConfig) {
-	eleventyConfig.setLibrary(
-		"md",
-		markdownIt({ html: true })
-			.use(markdownItAnchor)
-			.use(markdownItEleventyImg, {
-				imgOptions: {
-					widths: [1210, 1044, 800, 400],
-					urlPath: "/assets/img/",
-					outputDir: path.join(eleventyConfig.dir.output, "/assets/img/"),
-					formats: ["webp", "jpeg"],
-				},
-				globalAttributes: {
-					class: "markdown-img",
-					decoding: "async",
-					// If you use multiple widths,
-					// don't forget to add a `sizes` attribute.
-					sizes: "100vw",
-				},
-			})
-	);
-
 	eleventyConfig.addPlugin(pluginTOC, {
 		ul: true,
 		wrapperClass: "glossary-toc",

netlify.toml

@@ -1,8 +1,8 @@
 # tell netlify about your build script and output directory
 
 [build]
-	command = "yarn build"
-	publish = "public"
+	command = "npm run build"
+	publish = "_site"
 
 
 # redirect former English urls without lang prefix