2024-10-17 12:28:18 +08:00
|
|
|
// Import the necessary libraries and plugins using ESM syntax
|
|
|
|
|
import fs from "node:fs/promises";
|
|
|
|
|
import { DateTime } from "luxon";
|
|
|
|
|
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
|
|
|
|
|
import { minify } from "html-minifier-terser";
|
|
|
|
|
import PurgeCss from "eleventy-plugin-purgecss";
|
|
|
|
|
import CleanCSS from "clean-css";
|
|
|
|
|
import markdownIt from "markdown-it";
|
|
|
|
|
import markdownItAttrs from "markdown-it-attrs";
|
|
|
|
|
import markdownItAnchor from "markdown-it-anchor";
|
|
|
|
|
import markdownItBracketedSpans from "markdown-it-bracketed-spans";
|
|
|
|
|
|
|
|
|
|
export default function (eleventyConfig) {
|
|
|
|
|
//
|
|
|
|
|
// Configure Eleventy to not use .gitignore files
|
2024-10-16 12:39:17 +08:00
|
|
|
eleventyConfig.setUseGitIgnore(false);
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Set the directories for input, includes, data, and output
|
|
|
|
|
eleventyConfig.dir = {
|
|
|
|
|
input: "src",
|
|
|
|
|
includes: "_includes",
|
|
|
|
|
data: "_data",
|
|
|
|
|
output: "site",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Set Markdown options
|
2024-10-16 12:39:17 +08:00
|
|
|
const mdOptions = {
|
2024-10-17 12:28:18 +08:00
|
|
|
html: true, // Allow HTML tags in Markdown files
|
|
|
|
|
breaks: true, // Convert line breaks to HTML <br> tags
|
|
|
|
|
linkify: true, // Automatically convert URLs into links
|
2024-10-16 12:39:17 +08:00
|
|
|
};
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-16 12:39:17 +08:00
|
|
|
const markdownItAnchorOptions = {
|
|
|
|
|
level: 2, // minimum level header -- anchors will only be applied to h2 level headers and below but not h1
|
|
|
|
|
permalink: true,
|
|
|
|
|
};
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Create a Markdown library with custom plugins
|
2024-10-16 12:39:17 +08:00
|
|
|
const markdownLib = markdownIt(mdOptions)
|
|
|
|
|
.use(markdownItAnchor, markdownItAnchorOptions)
|
|
|
|
|
.use(markdownItAttrs)
|
2024-10-17 12:28:18 +08:00
|
|
|
.use(markdownItBracketedSpans) // Enable bracketed spans
|
2024-10-16 12:39:17 +08:00
|
|
|
.disable("code");
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Set the Markdown library to use with Eleventy
|
2024-10-16 12:39:17 +08:00
|
|
|
eleventyConfig.setLibrary("md", markdownLib);
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Define the template formats that Eleventy will process
|
|
|
|
|
|
2024-10-16 12:39:17 +08:00
|
|
|
eleventyConfig.setTemplateFormats([
|
|
|
|
|
"md",
|
|
|
|
|
"webmanifest",
|
|
|
|
|
"xml",
|
|
|
|
|
"ico",
|
|
|
|
|
"avif",
|
|
|
|
|
"webp",
|
|
|
|
|
"webm",
|
|
|
|
|
"svg",
|
|
|
|
|
"png",
|
|
|
|
|
"jpg",
|
|
|
|
|
"jpeg",
|
|
|
|
|
"txt",
|
|
|
|
|
"woff",
|
|
|
|
|
"woff2",
|
|
|
|
|
"css",
|
|
|
|
|
"pdf",
|
|
|
|
|
]);
|
2023-12-16 12:20:33 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Register a filter to output a human-readable post date
|
2024-10-16 12:39:17 +08:00
|
|
|
eleventyConfig.addFilter("readablePostDate", (dateObj) => {
|
|
|
|
|
return DateTime.fromJSDate(dateObj, {
|
|
|
|
|
zone: "Asia/Singapore",
|
|
|
|
|
})
|
|
|
|
|
.setLocale("en-GB")
|
|
|
|
|
.toLocaleString({ day: "numeric", month: "short", year: "numeric" });
|
|
|
|
|
});
|
2023-11-05 23:05:38 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Register a filter to output post date in ISO format
|
2024-10-16 12:39:17 +08:00
|
|
|
eleventyConfig.addFilter("postDate", (dateObj) => {
|
|
|
|
|
return DateTime.fromJSDate(dateObj, {
|
|
|
|
|
zone: "Asia/Singapore",
|
|
|
|
|
})
|
|
|
|
|
.setLocale("en-GB")
|
|
|
|
|
.toISODate();
|
|
|
|
|
});
|
2023-12-16 12:20:33 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Register a filter to output post date in ISO format
|
|
|
|
|
eleventyConfig.addFilter("postDate", (dateObj) => {
|
|
|
|
|
return DateTime.fromJSDate(dateObj, { zone: "Asia/Hong_Kong" })
|
|
|
|
|
.setLocale("en-GB")
|
|
|
|
|
.toISODate();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add an image transform plugin with custom configuration
|
|
|
|
|
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
|
|
|
|
|
extensions: "html", // Process only HTML files
|
|
|
|
|
formats: ["jpg", "webp"],
|
|
|
|
|
widths: ["auto", 400, 800, 1600],
|
|
|
|
|
defaultAttributes: {
|
|
|
|
|
loading: "lazy",
|
|
|
|
|
sizes: "auto",
|
|
|
|
|
decoding: "async",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add a transform to minify HTML content
|
|
|
|
|
eleventyConfig.addTransform("minifyHTML", (content, outputPath) => {
|
2024-10-16 12:39:17 +08:00
|
|
|
// Only minify HTML files
|
2024-10-17 12:28:18 +08:00
|
|
|
if (outputPath?.endsWith(".html")) {
|
2024-10-16 12:39:17 +08:00
|
|
|
return minify(content, {
|
|
|
|
|
collapseWhitespace: true, // Collapses whitespace between tags
|
|
|
|
|
removeComments: true, // Removes HTML comments
|
|
|
|
|
minifyCSS: true, // Minifies inline CSS
|
|
|
|
|
minifyJS: true, // Minifies inline JavaScript
|
|
|
|
|
removeAttributeQuotes: true, // Removes quotes around attributes when possible
|
|
|
|
|
removeOptionalTags: true, // Removes optional HTML tags (<html>, <head>, <body>)
|
|
|
|
|
collapseBooleanAttributes: true, // Converts boolean attributes to HTML5 style
|
|
|
|
|
removeEmptyAttributes: true, // Removes empty attributes
|
|
|
|
|
minifyURLs: true, // Minifies URLs in attributes
|
|
|
|
|
html5: true, // Enables HTML5 parsing
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-10-17 12:28:18 +08:00
|
|
|
return content; // Return the original content if not HTML
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// CleanCSS
|
|
|
|
|
eleventyConfig.on("afterBuild", async () => {
|
|
|
|
|
const inputFiles = ["src/css/reset.css", "src/css/index.css"];
|
|
|
|
|
for (const inputFile of inputFiles) {
|
|
|
|
|
try {
|
|
|
|
|
const input = await fs.readFile(inputFile, "utf8");
|
|
|
|
|
const output = new CleanCSS().minify(input);
|
|
|
|
|
const outputFilePath = `site/css/${inputFile.split("/").pop()}`; // Adjust output path as necessary
|
|
|
|
|
await fs.writeFile(outputFilePath, output.styles);
|
|
|
|
|
console.log(
|
|
|
|
|
`eleventy-plugin-cleancss: Successfully minified ${inputFile} to ${outputFilePath}`,
|
|
|
|
|
);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(
|
|
|
|
|
`eleventy-plugin-cleancss: Error minifying ${inputFile}: ${err}`,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-16 12:39:17 +08:00
|
|
|
});
|
2023-12-16 12:20:33 +08:00
|
|
|
|
2024-10-17 12:28:18 +08:00
|
|
|
// Purge unused CSS
|
|
|
|
|
eleventyConfig.addPlugin(PurgeCss, {
|
|
|
|
|
config: "./purgecss.config.cjs",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Return effective configuration for Eleventy
|
2024-10-16 12:39:17 +08:00
|
|
|
return {
|
|
|
|
|
dir: {
|
|
|
|
|
input: "src",
|
|
|
|
|
includes: "_includes",
|
|
|
|
|
output: "site",
|
|
|
|
|
},
|
|
|
|
|
};
|
2024-10-17 12:28:18 +08:00
|
|
|
}
|
