Convert CommonJS syntax to ESM syntax

eleventy.config.images.js

@@ -1,4 +1,4 @@
-const eleventyImage = require("@11ty/eleventy-img");
+import eleventyImage, { generateHTML } from "@11ty/eleventy-img";
 
 async function imageShortcode(src, alt, sizes) {
     let metadata = await eleventyImage(`./src${src}`, {
@@ -15,9 +15,9 @@ async function imageShortcode(src, alt, sizes) {
         decoding: "async"
     };
 
-    return eleventyImage.generateHTML(metadata, imageAttributes);
+    return generateHTML(metadata, imageAttributes);
 }
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
     eleventyConfig.addNunjucksAsyncShortcode("EleventyImage", imageShortcode);
 }

eleventy.config.js

@@ -1,19 +1,23 @@
 // Installed Plugins
-const pluginRss = require("@11ty/eleventy-plugin-rss");
-const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const metagen = require('eleventy-plugin-metagen');
-const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import metagen from 'eleventy-plugin-metagen';
+import emojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
 
-module.exports = function(eleventyConfig) {
+// Custom plugins
+import imagePlugin from "./eleventy.config.images.js";
+import markdownPlugin from "./eleventy.config.md.js";
+
+export default function(eleventyConfig) {
     // Copy files
     eleventyConfig.addPassthroughCopy("./src/assets/");
     eleventyConfig.addWatchTarget("./src/assets/");
     eleventyConfig.addPassthroughCopy("CNAME");
 
     // Custom plugins
-    eleventyConfig.addPlugin(require("./eleventy.config.images.js"));
-    eleventyConfig.addPlugin(require("./eleventy.config.md.js"));
+    eleventyConfig.addPlugin(imagePlugin);
+    eleventyConfig.addPlugin(markdownPlugin);
 
     // Installed Plugins
     eleventyConfig.addPlugin(pluginRss);

eleventy.config.md.js

@@ -1,12 +1,14 @@
 /* CONFIGURATION FOR MARKDOWN TEMPLATES */
 
 // Installed plugins
-const embedEverything = require("eleventy-plugin-embed-everything");
+import embedEverything from "eleventy-plugin-embed-everything";
 
-// Configure markdown-it plugins
-const markdownIt = require("markdown-it");
+// markdown-it plugins
+import markdownIt from "markdown-it";
+import markdownItAttrs from "markdown-it-attrs";
+import markdownItBracketedSpans from "markdown-it-bracketed-spans";
 
-module.exports = function (eleventyConfig) {
+export default function(eleventyConfig) {
     // Installed plugins
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
 
@@ -15,8 +17,8 @@ module.exports = function (eleventyConfig) {
         html: true,
         linkify: true,
     })
-        .use(require("markdown-it-attrs"))
-        .use(require("markdown-it-bracketed-spans"))
+        .use(markdownItAttrs)
+        .use(markdownItBracketedSpans)
 
     // Paired shortcode: custom container
     eleventyConfig.addPairedShortcode('container', (children, el, className) => {

package.json

@@ -5,6 +5,7 @@
     "build": "bunx eleventy",
     "build-ghpages": "bunx eleventy"
   },
+  "type": "module",
   "devDependencies": {
     "@types/bun": "^1.1.6"
   },

src/_data/sitemeta.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	siteName: "Helen Chong | Front-End Web Developer",
 	siteUrl: "https://helenchong.dev" || "http://localhost:8080",
 	siteDomain: "helenchong.dev",