@apleasantview/eleventy-plugin-baseline 0.1.0-next.8

package/modules/assets-esbuild/plugins/assets-esbuild.js

@@ -0,0 +1,61 @@
+import path from "node:path";
+import * as esbuild from "esbuild";
+import { resolveAssetsDir } from "../../../core/helpers.js";
+import inlineESbuild from "../filters/inline-esbuild.js";
+
+/**
+ * assets-esbuild
+ *
+ * - Registers `js` as a template format and bundles/minifies `index.js` entries under the resolved assets `js` dir.
+ * - Registers `inlineESbuild` filter to inline arbitrary JS by bundling it with esbuild.
+ * - Filters the `all` collection to drop `11tydata.js` files (added by the `js` template format).
+ *
+ * Options: none (inherits global Baseline verbose only).
+ */
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default function assetsESBuild(eleventyConfig) {
+	const { assetsDir } = resolveAssetsDir(
+		eleventyConfig.dir?.input || "./",
+		eleventyConfig.dir?.output || "./",
+		eleventyConfig.dir?.assets || "assets"
+	);
+	const jsDir = `${assetsDir}js/`;
+	
+	eleventyConfig.addTemplateFormats("js");
+
+	eleventyConfig.addExtension("js", {
+		outputFileExtension: "js",
+		useLayouts: false,
+		compile: async function (_inputContent, inputPath) {
+			if (inputPath.includes('11tydata.js') || !inputPath.startsWith(jsDir) || path.basename(inputPath) !== "index.js") {
+				return;
+			}
+
+			return async () => {
+				let result = await esbuild.build({
+					entryPoints: [inputPath],
+					bundle: true,
+					minify: true,
+					target: "es2020",
+					write: false
+				});
+
+				return result.outputFiles[0].text;
+			}
+		}
+	});
+
+	// Filter to inline a bundled entry.
+	eleventyConfig.addFilter("inlineESbuild", inlineESbuild);
+
+	// Override the default collection behavior. Adding js as template format and extension collects 11tydata.js files.
+	eleventyConfig.addCollection("all", function (collectionApi) {
+		return collectionApi.getAll().filter(item => {
+			// Skip 11tydata.js files
+			if (item.inputPath.endsWith('11tydata.js')) {
+				return false;
+			}
+			return true;
+		});
+	});
+};

package/modules/assets-postcss/fallback/postcss.config.js

@@ -0,0 +1,23 @@
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import postcssImport from "postcss-import";
+import postcssPresetEnv from "postcss-preset-env";
+import cssnano from "cssnano"; // Import cssnano for minification
+
+const isProd = process.env.ELEVENTY_ENV === "production" || false;
+const productionPlugins = [];
+
+if (isProd) {
+	productionPlugins.push(cssnano);
+}
+
+const config = {
+	plugins: [postcssImportExtGlob, postcssImport, postcssPresetEnv({
+		"browsers": [
+			"> 0.2% and not dead"
+		],
+		"preserve": true,
+	}), ...productionPlugins],
+	map: !isProd
+};
+
+export default config

package/modules/assets-postcss/filters/inline-postcss.js

@@ -0,0 +1,31 @@
+import fs from "fs/promises";
+import postcss from "postcss";
+import loadPostCSSConfig from "postcss-load-config";
+import fallbackPostCSSConfig from "../fallback/postcss.config.js";
+
+export default async function inlinePostCSS(cssFilePath) {
+	try {
+		let cssContent = await fs.readFile(cssFilePath, 'utf8');
+
+		let plugins;
+		let options;
+
+		try {
+			// Prefer the consuming project's PostCSS config (postcss.config.* or package.json#postcss).
+			({ plugins, options } = await loadPostCSSConfig({}, configRoot));
+		} catch (error) {
+			// If none is found, fall back to the bundled Baseline config to keep builds working.
+			({plugins, ...options } = fallbackPostCSSConfig);
+		}
+
+		let result = await postcss(plugins).process(cssContent, {
+			from: cssFilePath,
+			map: options?.map
+		});
+
+		return `<style>${result.css}</style>`;
+	} catch (error) {
+		console.error(error);
+		return `<style>/* Error processing CSS */</style>`;
+	}
+} 

package/modules/assets-postcss/plugins/assets-postcss.js

@@ -0,0 +1,62 @@
+import path from "node:path";
+import postcss from "postcss";
+import loadPostCSSConfig from "postcss-load-config";
+import fallbackPostCSSConfig from "../fallback/postcss.config.js";
+import inlinePostCSS from "../filters/inline-postcss.js";
+import { resolveAssetsDir } from "../../../core/helpers.js";
+
+/**
+ * assets-postcss
+ *
+ * - Registers `css` as a template format and processes `index.css` entries under the resolved assets `css` dir with PostCSS.
+ * - Registers `inlinePostCSS` filter to inline arbitrary CSS by processing it with PostCSS.
+ * - No module-specific options (inherits global Baseline verbose only).
+ */
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default function assetsPostCSS(eleventyConfig) {
+	const { assetsDir } = resolveAssetsDir(
+		eleventyConfig.dir?.input || "./",
+		eleventyConfig.dir?.output || "./",
+		eleventyConfig.dir?.assets || "assets"
+	);
+	const cssDir = `${assetsDir}css/`;
+
+	// Resolve user PostCSS config from the project root (cwd), not the Eleventy input dir.
+	const configRoot = process.cwd();
+
+	eleventyConfig.addTemplateFormats("css");
+
+	eleventyConfig.addExtension("css", {
+		outputFileExtension: "css",
+		useLayouts: false,
+		compile: async function (_inputContent, inputPath) {
+			if (!inputPath.startsWith(cssDir) || path.basename(inputPath) !== "index.css") {
+				return;
+			}
+
+			return async () => {
+				let plugins;
+				let options;
+
+				try {
+					// Prefer the consuming project's PostCSS config (postcss.config.* or package.json#postcss).
+					({ plugins, options } = await loadPostCSSConfig({}, configRoot));
+				} catch (error) {
+					// If none is found, fall back to the bundled Baseline config to keep builds working.
+					({plugins, ...options } = fallbackPostCSSConfig);
+				}
+
+				const result = await postcss(plugins).process(_inputContent, {
+					from: inputPath,
+					map: options?.map,
+					...options
+				});
+
+				return result.css;
+			};
+		}
+	});
+
+	// Filter to inline a bundled entry.
+	eleventyConfig.addFilter("inlinePostCSS", inlinePostCSS);
+};

package/modules/head-core/drivers/posthtml-head-elements.js

@@ -0,0 +1,148 @@
+// Based on posthtml-head-elements (MIT License).
+// Original: https://github.com/posthtml/posthtml-head-elements
+// Adapted for Baseline head-core.
+
+// Based on posthtml-head-elements (MIT License).
+// Original: https://github.com/posthtml/posthtml-head-elements
+// Adapted for Baseline head-core.
+
+import util from "node:util";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+function nonString(type, attrsArr) {
+  return attrsArr.map(function(attrs) {
+    return {tag: type, attrs: attrs};
+  });
+}
+
+function nonArray(type, content) {
+  return {tag: type, content: [content]};
+}
+
+function findElmType(type, objectData) {
+
+  var elementType = {
+    'meta': function() {
+
+      if (Array.isArray(objectData)) {
+        return nonString(type, objectData);
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a meta element');
+      }
+
+    },
+    'title': function() {
+
+      if (typeof objectData === 'string') {
+        return nonArray('title', objectData);
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a title element');
+      }
+
+    },
+    'link': function() {
+
+      if (Array.isArray(objectData)) {
+        return nonString(type, objectData);
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a link element');
+      }
+
+    },
+    'linkCanonical': function() {
+      if (Array.isArray(objectData)) {
+        return nonString('link', objectData);
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a linkCanonical element');
+      }
+    },
+    'script': function() {
+      if (Array.isArray(objectData)) {
+        return objectData.map(function(entry) {
+          const { content, ...attrs } = entry || {};
+          return content !== undefined
+            ? { tag: "script", attrs, content: [content] }
+            : { tag: "script", attrs };
+        });
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a script element');
+      }
+    },
+    'style': function() {
+      if (Array.isArray(objectData)) {
+        return objectData.map(function(entry) {
+          const { content, ...attrs } = entry || {};
+          return content !== undefined
+            ? { tag: "style", attrs, content: [content] }
+            : { tag: "style", attrs };
+        });
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a style element');
+      }
+    },
+    'base': function() {
+
+      if (Array.isArray(objectData)) {
+        return nonString(type, objectData);
+      } else {
+        util.log('posthtml-head-elements: Please use the correct syntax for a base element');
+      }
+
+    },
+    'default': function() {
+      util.log('posthtml-head-elements: Please make sure the HTML head type is correct');
+    }
+  };
+
+  if (type.indexOf('_') !== -1) {
+    type = type.substr(0, type.indexOf('_'));
+  }
+
+  return (elementType[type]() || elementType['default']());
+}
+
+function buildNewTree(headElements, EOL) {
+
+  var newHeadElements = [];
+
+  Object.keys(headElements).forEach(function(value) {
+
+    newHeadElements.push(findElmType(value, headElements[value]));
+
+  });
+
+  function cnct(arr) {
+    return Array.prototype.concat.apply([], arr);
+  }
+
+  return cnct(cnct(newHeadElements).map(function(elem) {
+    return [elem, EOL];
+  }));
+}
+
+export default function(options) {
+  options = options || {};
+  options.headElementsTag = options.headElementsTag || 'posthtml-head-elements';
+
+  if (!options.headElements) {
+    util.log('posthtml-head-elements: Don\'t forget to add a link to the JSON file containing the head elements to insert');
+  }
+  var jsonOne = typeof options.headElements !== 'string' ? options.headElements : require(options.headElements);
+
+  return function posthtmlHeadElements(tree) {
+
+    tree.match({tag: options.headElementsTag}, function() {
+      return {
+        tag: false, // delete this node, safe content
+        content: buildNewTree(jsonOne, options.EOL || '\n')
+      };
+    });
+
+    return tree;
+
+  };
+
+};
+

package/modules/head-core/plugins/head-core.js

@@ -0,0 +1,60 @@
+import headElements from "../drivers/posthtml-head-elements.js";
+import { getVerbose, logIfVerbose } from "../../../core/logging.js";
+import { buildHead } from "../utils/head-utils.js";
+
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default function headCore(eleventyConfig, options = {}) {
+	const verbose = getVerbose(eleventyConfig) || options.verbose || false;
+
+	// Following options are not public.
+	const userKey = options.dirKey || "head";
+	const headElementsTag = options.headElementsTag || "baseline-head";
+	const eol = options.EOL || "\n";
+	const pathPrefix = options.pathPrefix ?? eleventyConfig?.pathPrefix ?? "";
+	const siteUrl = options.siteUrl;
+	const inputDir = eleventyConfig.dir?.input || ".";
+
+	let cachedContentMap = {};
+	eleventyConfig.on("eleventy.contentMap", ({ inputPathToUrl, urlToInputPath }) => {
+		cachedContentMap = { inputPathToUrl, urlToInputPath };
+	});
+
+	eleventyConfig.addGlobalData("eleventyComputed.page.head", () => {
+		return (data) =>
+			buildHead(data, {
+				userKey,
+				siteUrl,
+				pathPrefix,
+				contentMap: cachedContentMap,
+				pageUrlOverride: data?.page?.url,
+			});
+	});
+
+	eleventyConfig.htmlTransformer.addPosthtmlPlugin("html", function (context) {
+		logIfVerbose(
+			verbose,
+			"head-core: injecting head elements for",
+			context?.page?.inputPath || context?.outputPath
+		);
+
+		const headElementsSpec =
+			context?.page?.head ||
+			buildHead(context, {
+				userKey,
+				siteUrl,
+				pathPrefix,
+				contentMap: cachedContentMap,
+				pageUrlOverride: context?.page?.url,
+			});
+
+		const plugin = headElements({
+			headElements: headElementsSpec,
+			headElementsTag,
+			EOL: eol,
+		});
+
+		return async function asyncHead(tree) {
+			return plugin(tree);
+		};
+	});
+}

package/modules/head-core/utils/head-utils.js

@@ -0,0 +1,193 @@
+import Merge from "@11ty/eleventy-utils/src/Merge.js";
+import { TemplatePath } from "@11ty/eleventy-utils";
+
+const pick = (...values) => values.find((v) => v !== undefined && v !== null);
+
+const normalizePathPrefix = (pathPrefix = "") => {
+	// Align with Eleventy’s normalizeUrlPath behavior
+	const normalized = TemplatePath.normalizeUrlPath("/", pathPrefix);
+	return normalized === "/" ? "" : normalized; // empty means root
+};
+
+const isAbsoluteUrl = (url = "") =>
+	/^[a-z][a-z\d+\-.]*:\/\//i.test(url) || url.startsWith("//");
+
+const absoluteUrl = (siteUrl, pathPrefix, url) => {
+	if (!url) return url;
+	if (isAbsoluteUrl(url)) return url;
+	const prefix = normalizePathPrefix(pathPrefix);
+	const joined = TemplatePath.normalizeUrlPath(prefix || "/", url);
+	return siteUrl ? `${siteUrl.replace(/\/+$/, "")}${joined}` : joined;
+};
+
+const mergeBaseHead = (site, user, page, title, description, noindex, url) => {
+	return Merge(
+		{},
+		{
+			title,
+			meta: [
+				{ charset: "UTF-8" },
+				{ name: "viewport", content: "width=device-width, initial-scale=1.0" },
+				{ name: "description", content: description },
+				{ name: "robots", content: noindex ? "noindex, nofollow" : "index, follow" },
+			],
+			link: [],
+			script: [],
+			style: [],
+			hreflang: [],
+			openGraph: {
+				"og:title": title,
+				"og:description": description,
+				"og:type": "website",
+				"og:url": url || "",
+				"og:image": "",
+			},
+			twitter: {
+				"twitter:card": "summary_large_image",
+				"twitter:title": title,
+				"twitter:description": description,
+				"twitter:image": "",
+			},
+			miscMeta: [],
+			structuredData: null,
+		},
+		user
+	);
+};
+
+const resolveCanonical = (head, page, contentMap, env = {}) => {
+	const { siteUrl, pathPrefix = "", pageUrlOverride } = env;
+	const explicit = pick(head.canonical);
+	if (explicit) return absoluteUrl(siteUrl, pathPrefix, explicit);
+
+	const url = pick(
+		pageUrlOverride,
+		page?.url,
+		page?.inputPath && contentMap?.inputPathToUrl?.[page.inputPath]?.[0]
+	);
+	if (!url) return undefined;
+
+	return absoluteUrl(siteUrl, pathPrefix, url);
+};
+
+const dedupeMeta = (arr = []) => {
+	const seen = new Set();
+	const out = [];
+	for (let i = arr.length - 1; i >= 0; i--) {
+		const m = arr[i];
+		const key =
+			m.charset
+				? "charset"
+				: m.name
+				? `name:${m.name}`
+				: m.property
+				? `prop:${m.property}`
+				: m["http-equiv"]
+				? `http:${m["http-equiv"]}`
+				: null;
+		if (!key || seen.has(key)) continue;
+		seen.add(key);
+		out.push(m);
+	}
+	return out.reverse();
+};
+
+const dedupeLink = (links = []) => {
+	const seen = new Set();
+	const out = [];
+	for (let i = links.length - 1; i >= 0; i--) {
+		const l = links[i];
+		const key = l.rel && l.href ? `rel:${l.rel}|${l.href}` : null;
+		if (!key || seen.has(key)) continue;
+		seen.add(key);
+		out.push(l);
+	}
+	return out.reverse();
+};
+
+const flattenHead = (head = {}, canonical) => {
+	// base/meta first, keep OG/Twitter last by placing them in a separate meta bucket
+	const baseMeta = dedupeMeta([...(head.meta || []), ...(head.miscMeta || [])]);
+
+	const socialMeta = dedupeMeta([
+		...(head.openGraph
+			? Object.entries(head.openGraph)
+					.filter(([, v]) => v)
+					.map(([k, v]) => ({ property: k, content: v }))
+			: []),
+		...(head.twitter
+			? Object.entries(head.twitter)
+					.filter(([, v]) => v)
+					.map(([k, v]) => ({ name: k, content: v }))
+			: []),
+	]);
+
+	const style = [...(head.style || [])];
+
+	const linkCanonical = canonical ? [{ rel: "canonical", href: canonical }] : [];
+	const link = dedupeLink([...(head.link || []), ...(head.hreflang || [])].filter(Boolean));
+
+	const script = [...(head.script || [])];
+	if (head.structuredData) {
+		script.unshift({
+			type: "application/ld+json",
+			content: JSON.stringify(head.structuredData),
+		});
+	}
+
+	// Key order matters for posthtml-head-elements.
+	return {
+		meta: baseMeta,
+		title: head.title || "",
+		linkCanonical,
+		style,
+		link,
+		script,
+		meta_social: socialMeta,
+	};
+};
+
+const buildHead = (data = {}, env = {}) => {
+	const { userKey = "head", contentMap = {}, siteUrl, pathPrefix } = env;
+	const site = data.site || {};
+	const user = userKey ? data[userKey] || {} : {};
+	const page = data.page || {};
+	const resolvedSiteUrl =
+		siteUrl ||
+		site.url ||
+		process.env.URL ||
+		process.env.DEPLOY_URL ||
+		process.env.DEPLOY_PRIME_URL;
+
+	const siteTitle = site.title || "";
+	const pageTitle = pick(data.title, user.title, site.title, "");
+	const title =
+		siteTitle && pageTitle && siteTitle !== pageTitle
+			? `${pageTitle} | ${siteTitle}`
+			: pageTitle || siteTitle || "";
+
+	const description = pick(data.description, user.description, site.tagline, "");
+	const noindex = pick(page.noindex, user.noindex, site.noindex, false);
+
+	const canonical = resolveCanonical(
+		{ canonical: absoluteUrl(resolvedSiteUrl, pathPrefix, user.canonical) },
+		page,
+		contentMap,
+		{ ...env, siteUrl: resolvedSiteUrl }
+	);
+	const merged = mergeBaseHead(site, user, page, title, description, noindex, canonical);
+	return flattenHead(merged, canonical);
+};
+
+const buildHeadSpec = (context, contentMap, env = {}) => {
+	return buildHead(context, { ...env, contentMap });
+};
+
+export {
+	pick,
+	resolveCanonical,
+	flattenHead,
+	buildHead,
+	buildHeadSpec,
+	absoluteUrl,
+};

package/modules/multilang-core/plugins/multilang-core.js

@@ -0,0 +1,35 @@
+import { I18nPlugin } from "@11ty/eleventy";
+
+/** @param { import("@11ty/eleventy/src/UserConfig.js").default } eleventyConfig */
+export default function multilangCore(eleventyConfig, options = {}) {
+	const userOptions = {
+		defaultLanguage: "en",
+		languages: [],
+		...options
+	}
+
+	eleventyConfig.addPlugin(I18nPlugin, {
+		defaultLanguage: userOptions.defaultLanguage,
+		errorMode: "allow-fallback"
+	});
+
+	// Add translations collection
+	eleventyConfig.addCollection("translations", function (collection) {
+		const translations = {};
+		for (const page of collection.getAll()) {
+			const translationKey = page.data.translationKey;
+			if (!translationKey) continue;
+			const lang = page.data.lang || page.data.language || userOptions.defaultLanguage;
+			if (!lang) continue;
+			if (!translations[translationKey]) translations[translationKey] = {};
+			translations[translationKey][lang] = {
+				title: page.data.title,
+				url: page.url,
+				lang,
+				isDefault: lang === userOptions.defaultLanguage,
+				data: page.data
+			};
+		}
+		return translations;
+	});
+}

package/modules/navigator-core/plugins/navigator-core.js

@@ -0,0 +1,37 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default function navigatorCore(eleventyConfig, options = {}) {
+	const raw = options.enableNavigatorTemplate;
+	const [enableNavigatorTemplate, inspectorDepth] = Array.isArray(raw)
+		? [raw[0], raw[1]]
+		: [raw, undefined];
+
+	const userOptions = {
+		...options,
+		enableNavigatorTemplate: enableNavigatorTemplate ?? false,
+		inspectorDepth: inspectorDepth ?? 2
+	};
+
+	eleventyConfig.addNunjucksGlobal("_navigator", function () { return this; });
+	eleventyConfig.addNunjucksGlobal("_context", function () { return this.ctx; });
+
+	if (userOptions.enableNavigatorTemplate) {
+		// Read virtual template synchronously; Nunjucks pipeline here is sync-only.
+		const templatePath = path.join(__dirname, "../templates/navigator-core.html");
+		const virtualTemplateContent = fs.readFileSync(templatePath, "utf-8");
+		eleventyConfig.addTemplate("navigator-core.html", virtualTemplateContent, {
+			permalink: "/navigator-core.html",
+			title: "Navigator Core",
+			description: "",
+			layout: null,
+			eleventyExcludeFromCollections: true,
+			inspectorDepth: userOptions.inspectorDepth
+		});
+	}
+}