converts everything to ESM and fixes downstream issues

filters, shortcodes, and transform fixes come with this update
updates layouts for collections

eleventy.config.js

@@ -9,42 +9,43 @@
  * @returns {import("@11ty/eleventy").EleventyConfig} - Returns Eleventy's configuration options
  */
 
-const addWorkflow = require("./src/_flightdeck/workflow");
-const addFilters = require("./src/_flightdeck/filters");
-const addTransforms = require("./src/_flightdeck/transforms");
-const addShortcodes = require("./src/_flightdeck/shortcodes");
-const addPlugins = require("./src/_flightdeck/plugins");
-
-module.exports = (config) => {
-
-	/** @type {{useImageDirTransform: boolean}} */
-	const options = {
-							useImageDirTransform: false,
-	};
-
-	// Configure 11ty development server, layout aliases, watch, passthrough copy
-	addWorkflow(config, options);
-
-	// Custom plugins that integrate esbuild, scss, image optimization
-	addTransforms(config, options);
-
-	// Add eleventy plugins and configurations
-	addPlugins(config);
-
-	// Custom shortcodes for Nunjucks/Liquid template - ui components go here
-	addShortcodes(config);
-
-	// Custom universal filters for Nunjucks/Liquid templates
-	addFilters(config);
-
-	// 11ty configuration options
-	return {
-		dir: {
-			input: "src",
-			output: "dist",
-			data: "_includes/data",
-		},
-		htmlTemplateEngine: "njk",
-		markdownTemplateEngine: "njk",
-	};
-};
+import addWorkflow from "./src/_flightdeck/workflow.js";
+import addFilters from "./src/_flightdeck/filters.js";
+import addTransforms from "./src/_flightdeck/transforms.js";
+import addShortcodes from "./src/_flightdeck/shortcodes.js";
+import addPlugins from "./src/_flightdeck/plugins.js";
+
+export default function(config) {
+    /** @type {{useImageDirTransform: boolean}} */
+    const options = {
+        useImageDirTransform: false
+    };
+
+    // Configure development workflow (server, watch, passthrough)
+    addWorkflow(config, options);
+
+    // Add transforms (esbuild, lightningcss, image optimization)
+    addTransforms(config, options);
+
+    // Add eleventy plugins
+    addPlugins(config);
+
+    // Add shortcodes for templates
+    addShortcodes(config);
+
+    // Add universal filters
+    addFilters(config);
+
+    return {
+        dir: {
+            input: "src",
+            output: "dist",
+            data: "_includes/data",
+            includes: "_includes",
+            layouts: "_includes/layouts"
+        },
+        htmlTemplateEngine: "njk",
+        markdownTemplateEngine: "njk",
+        templateFormats: ["md", "njk", "html"],
+    };
+}

package.json

@@ -4,6 +4,7 @@
 	"author": "Ed Heltzel",
 	"description": "An opinionated Jamstack starter project for Eleventy.",
 	"license": "WTFPL",
+	"type": "module",
 	"devDependencies": {
 		"@11ty/eleventy": "^3.0.0",
 		"@11ty/eleventy-img": "^5.0.0",

src/_flightdeck/filters.js

@@ -8,16 +8,16 @@
  * @param {import("@11ty/eleventy").UserConfig} config - The Eleventy config object to which the filters will be added.
  */
 
-const baseUrl = require("./filters/baseUrl");
-const limit = require("./filters/postLimit");
-const strip = require("./filters/stripFileExtension");
-const date = require("./filters/dates");
-const excerpt = require("./filters/excerpt");
+import baseUrl from "./filters/baseUrl.js";
+import { postLimit } from "./filters/postLimit.js";
+import { stripFileExtension } from "./filters/stripFileExtension.js";
+import * as date from "./filters/dates.js";
+import excerpt from "./filters/excerpt.js";
 
-module.exports = (config) => {
+export default (config) => {
   config.addFilter("excerpt", excerpt);
-  config.addFilter("postLimit", limit.postLimit);
-  config.addFilter("removeExt", strip.stripFileExtension);
+  config.addFilter("postLimit", postLimit);
+  config.addFilter("removeExt", stripFileExtension);
   config.addFilter("baseUrl", baseUrl);
   config.addFilter("postDate", date.postDate);
   config.addFilter("postDateTime", date.postDateTime);

src/_flightdeck/filters/baseUrl.js

@@ -9,8 +9,8 @@
  * // outputs: https://example.com/about/
  */
 
-const baseUrl = require("../../_includes/data/site").baseUrl;
+import { baseUrl } from "../../_includes/data/site.js";
 
-module.exports = (url) => {
+export default (url) => {
   return `${baseUrl}${url}`;
 };

src/_flightdeck/filters/dates.js

@@ -1,23 +1,19 @@
-const { DateTime } = require("luxon"); //bundled with 11ty
+import { DateTime } from 'luxon'; //bundled with 11ty
 
 /**
- * Human readable date format for date
- * @param {string} postDate
- * @returns {string} May 20, 1982
- * @example {{ page.date | postDate }}
+ * Format a date using Luxon's DateTime
+ * @param {Date} date - The date to format
+ * @returns {string} Formatted date string
  */
-const postDate = (date) => {
-  return DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_MED);
+export const postDate = (date) => {
+  return DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_FULL);
 };
 
 /**
- * Human readable format for date with time
- * @param {string} postDateTime
- * @returns {string} May 20, 1982, 5:30 PM EDT
- * @example {{ page.date | postDateTime }}
+ * Format a date for use in HTML datetime attributes
+ * @param {Date} date - The date to format
+ * @returns {string} ISO date string
  */
-const postDateTime = (date) => {
-  return DateTime.fromJSDate(date).toLocaleString(DateTime.DATETIME_MED);
+export const postDateTime = (date) => {
+  return DateTime.fromJSDate(date).toFormat('yyyy-LL-dd');
 };
-
-module.exports = { postDate, postDateTime };

src/_flightdeck/filters/excerpt.js

@@ -1,9 +1,10 @@
 /**
  * Returns the first 200 characters as the excerpt
+ * @param {string} content - The content to create an excerpt from
+ * @returns {string} The excerpt with ellipsis
  * @usage {{ post.templateContent | excerpt | safe }}
  */
-
-module.exports = (content) => {
+export default (content) => {
   // Remove HTML tags
   const text = content.replace(/<[^>]+>/g, "");
 

src/_flightdeck/filters/postLimit.js

@@ -6,8 +6,6 @@
  * @returns {Array} The subset of the array up to the limit
  * @usage {{ for item in collections.all | postLimit(3) }}
  */
-const postLimit = (arr, limit) => {
+export const postLimit = (arr, limit) => {
   return arr.slice(0, limit);
 };
-
-module.exports = { postLimit };

src/_flightdeck/filters/stripFileExtension.js

@@ -6,8 +6,6 @@
  * @usage <body class="layout--{{ layout | removeExt }}">
  * useful for creating css classes based on layouts
  */
-const stripFileExtension = (file) => {
+export const stripFileExtension = (file) => {
   return file.replace(/\.[^/.]+$/, "");
 };
-
-module.exports = { stripFileExtension };

src/_flightdeck/plugins.js

@@ -8,11 +8,11 @@
  * @param {import("@11ty/eleventy").UserConfig} config - The Eleventy config object to which the plugins will be added.
  */
 
-const embedEverything = require("eleventy-plugin-embed-everything");
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const navigation = require("@11ty/eleventy-navigation");
+import embedEverything from "eleventy-plugin-embed-everything";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import navigation from "@11ty/eleventy-navigation";
 
-module.exports = (config) => {
+export default (config) => {
   config.addPlugin(embedEverything);
   config.addPlugin(syntaxHighlight);
   config.addPlugin(navigation);

src/_flightdeck/shortcodes.js

@@ -7,20 +7,20 @@
  *
  * @param {import("@11ty/eleventy").UserConfig} config - The Eleventy config object to which the shortcodes will be added.
  */
-const blockquote = require("./shortcodes/blockquote");
-const { button, buttonLink } = require("./shortcodes/buttons");
-const codepen = require("./shortcodes/codepen");
-const copyright = require("./shortcodes/copyright");
-const image = require("./shortcodes/image");
-const version = require("./shortcodes/flightdeck-version");
-const email = require("./shortcodes/email");
+import blockquote from "./shortcodes/blockquote.js";
+import { button, buttonLink } from "./shortcodes/buttons.js";
+import codepen from "./shortcodes/codepen.js";
+import copyright from "./shortcodes/copyright.js";
+import image from "./shortcodes/image.js";
+import version from "./shortcodes/flightdeck-version.js";
+import email from "./shortcodes/email.js";
 
-module.exports = (config) => {
+export default (config) => {
   config.addShortcode("blockquote", blockquote);
   config.addShortcode("button", button);
   config.addShortcode("link", buttonLink);
   config.addShortcode("codepen", codepen);
-  config.addShortcode("copyright", copyright);
+  config.addShortcode("year", copyright);
   config.addShortcode("image", image);
   config.addShortcode("version", version);
   config.addShortcode("email", email);

src/_flightdeck/shortcodes/blockquote.js

@@ -4,15 +4,15 @@
  * @param {string} [params.text] - The text to display in the blockquote
  * @param {string} [params.source] - The source of the blockquote or Author of the quote
  * @param {string} [params.classes] - Additional CSS classes to apply to the blockquote
+ * @returns {string} HTML string for the blockquote
  * @example {% blockquote text="First, solve the problem. Then, write the code.", source="John Johnson", classes="text-lg italic" %}
  */
-
-module.exports = (params = {}) => {
+export default (params = {}) => {
   const { text = '', source = '', classes = '' } = params;
   return `<!-- Blockquote-->
   <blockquote ${classes ? `class="${classes}"` : ''}>
     ${text}
     ${source ? `<footer><cite>- ${source}</cite></footer>` : ''}
   </blockquote>
 `;
-};
+}

src/_flightdeck/shortcodes/buttons.js

@@ -5,9 +5,10 @@
  * @param {string} [params.type='button'] - The type of button (submit/reset/button)
  * @param {string} [params.text='Button'] - The text to display in the button
  * @param {string} [params.classes='btn'] - The classes to apply to the button (e.g., Tailwind classes)
+ * @returns {string} HTML string for the button
  * @example {% button type="submit", text="Click Me", classes="btn btn-primary" %}
  */
-const button = (params = {}) => {
+export const button = (params = {}) => {
   const { type = 'button', text = 'Button', classes = 'btn' } = params;
   return `<button class="${classes}" type="${type}">${text}</button>`;
 };
@@ -18,14 +19,12 @@ const button = (params = {}) => {
  * @param {Object} [params] - The parameters for the link button (all optional)
  * @param {string} [params.url='/'] - The link to a page or external URL
  * @param {string} [params.text='Button'] - The text to display in the link
- * @param {string} [params.target='_self'] - The target for the link
- * @param {string} [params.classes='btn'] - The classes to apply to the button (e.g., Tailwind classes)
- * @param {string} [params.role='button'] - The role purpose, used mainly for accessibility
- * @example {% link role="button", url="https://google.com", text="Click Me", target="_blank", classes="btn btn-link" %}
+ * @param {string} [params.classes='btn'] - The classes to apply to the link (e.g., Tailwind classes)
+ * @param {string} [params.target='_self'] - The target attribute for the link (_blank/_self)
+ * @returns {string} HTML string for the link button
+ * @example {% link url="https://example.com", text="Visit Site", classes="btn btn-primary", target="_blank" %}
  */
-const buttonLink = (params = {}) => {
-  const { url = '/', text = 'Button', target = '_self', role = 'button', classes = 'btn btn-primary' } = params;
-  return `<a href="${url}" class="${classes}" target="${target}" role="${role}">${text}</a>`;
+export const buttonLink = (params = {}) => {
+  const { url = '/', text = 'Button', classes = 'btn', target = '_self' } = params;
+  return `<a href="${url}" class="${classes}" target="${target}">${text}</a>`;
 };
-
-module.exports = { button, buttonLink };

src/_flightdeck/shortcodes/codepen.js

@@ -5,10 +5,10 @@
  * @param {number} [params.height=300] - Height of the embed in pixels
  * @param {string} [params.tabs='result'] - Tabs to show (e.g., 'html', 'html,result', 'css', 'css,result', 'js', 'js,result')
  * @param {string} [params.theme=''] - Theme ID ('light', 'dark', or custom theme ID for pro users)
+ * @returns {string} HTML string for the Codepen embed
  * @example {% codepen penUrl="https://codepen.io/jacobberglund/pen/bwrGvx", height=900, tabs="css,result", theme="178" %}
  */
-
-module.exports = (params) => {
+export default (params) => {
   const {
     penUrl,
     height = 300,
@@ -20,25 +20,25 @@ module.exports = (params) => {
     throw new Error("penUrl is required for the Codepen embed");
   }
 
-  const splitUrl = penUrl.split("/");
-  const splitProfileUrl = splitUrl.slice(0, -2);
-  const userProfile = splitProfileUrl.join("/");
-  const slugHash = splitUrl[splitUrl.length - 1];
-  const userName = splitProfileUrl[splitProfileUrl.length - 1];
+  // Extract pen ID from URL
+  const penId = penUrl.split("/").pop();
+
+  // Extract username from URL
+  const username = penUrl.split("/").slice(-3)[0];
 
   return `
-    <p class="codepen"
-      data-height="${height}"
-      data-theme-id="${theme}"
-      data-default-tab="${tabs}"
-      data-slug-hash="${slugHash}"
-      data-user="${userName}"
-    >
-      <span>
-        <a href="${penUrl}">See the pen</a>
-        (<a href="${userProfile}">@${userName}</a>)
-        on <a href="https://codepen.io">CodePen</a>.
-      </span>
-    </p>
-    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>`;
+    <div class="codepen-wrapper">
+      <iframe
+        height="${height}"
+        style="width: 100%;"
+        scrolling="no"
+        title="Codepen Embed"
+        src="https://codepen.io/${username}/embed/${penId}?default-tab=${tabs}${theme ? `&theme-id=${theme}` : ''}"
+        frameborder="no"
+        loading="lazy"
+        allowtransparency="true"
+        allowfullscreen="true">
+      </iframe>
+    </div>
+  `;
 };

src/_flightdeck/shortcodes/copyright.js

@@ -1,7 +1,8 @@
 /**
  * Get the current year - copyright
+ * @returns {string} HTML copyright symbol with current year
  * @usage {% year %}
  */
-module.exports = (copyright) => {
+export default () => {
   return `© ${new Date().getFullYear()}`;
 };

src/_flightdeck/shortcodes/email.js

@@ -15,7 +15,7 @@
  * @type {(params?: EmailParams) => string}
  * @see src/assets/styles/_autopilot/_utilities/text.css
  */
-module.exports = (params = {}) => {
+export default (params = {}) => {
   const { address, honeypot = 'honeypot' } = params;
   return `<span class="email">${address}<b>${honeypot}.com</b></span>`;
 };

src/_flightdeck/shortcodes/flightdeck-version.js

@@ -1,9 +1,16 @@
 /**
  * Get the current package version - version
+ * @returns {string} Current package version prefixed with 'v'
  * @example {% version %}
  */
-const fdVersion = require("../../../package.json").version;
+import { readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-module.exports = (version) => {
-  return `v${fdVersion}`;
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packagePath = resolve(__dirname, '../../../package.json');
+const packageJson = JSON.parse(readFileSync(packagePath, 'utf8'));
+
+export default () => {
+  return `v${packageJson.version}`;
 };