Migratre shortcodes and filters to ESM

eleventy.config.js

@@ -0,0 +1,48 @@
+import 'dotenv/config';
+import lightningCSSPlugin from '@11tyrocks/eleventy-plugin-lightningcss';
+import RSSPlugin from '@11ty/eleventy-plugin-rss';
+import markdownIt from 'markdown-it';
+import mdAnchor from 'markdown-it-anchor';
+import dateFilter from './src/_filters/date.js';
+import starFilter from './src/_filters/stars.js';
+import responsiveImage from './src/_shortcodes/image.js';
+
+const config = (eleventy) => {
+  // Eleventy plugins
+  eleventy.addPlugin(lightningCSSPlugin, { nesting: true });
+  eleventy.addPlugin(RSSPlugin);
+
+  // Custom filters
+  eleventy.addFilter('formatDate', dateFilter);
+  eleventy.addFilter('starRating', starFilter);
+
+  // Custom shortcodes
+  eleventy.addAsyncShortcode('image', responsiveImage);
+
+  eleventy.addCollection('postsWithoutNotes', (collectionAPI) => collectionAPI.getFilteredByTag('post').filter((item) => item.data.type !== 'Note'));
+  eleventy.addCollection('notes', (collectionAPI) => collectionAPI.getFilteredByTag('post').filter((item) => item.data.type === 'Note'));
+
+  const mdOptions = { html: true, typographer: true };
+  const md = markdownIt(mdOptions).use(mdAnchor);
+
+  eleventy.setLibrary('md', md);
+
+  eleventy.addPairedShortcode('sidenote', (content, number) => {
+    const result = md.render(content);
+    return `<aside id="sn-${number}" class="sidenote">
+              <small>
+                ${result}
+              </small>
+            </aside>`;
+  });
+
+  // Options
+  return {
+    dir: {
+      input: 'src',
+    },
+    markdownTemplateEngine: 'njk',
+  };
+};
+
+export default config;

src/_filters/date.cjs → src/_filters/date.js

@@ -1,8 +1,10 @@
-module.exports = function formattedDate(date) {
+const formattedDate = (date) => {
   const input = new Date(date);
   const niceDate = new Intl.DateTimeFormat(
     'en-US',
     { day: '2-digit', month: 'short', year: 'numeric' },
   ).format(input);
   return niceDate;
 };
+
+export default formattedDate;

src/_filters/stars.cjs → src/_filters/stars.js

@@ -1,4 +1,4 @@
-module.exports = function starRating(rating) {
+const starRating = (rating) => {
   // https://github.com/zactopus/letterboxd
   const scoreToStars = {
     '-1.0': { description: 'None', text: 'None' },
@@ -22,3 +22,5 @@ module.exports = function starRating(rating) {
 
   return tag;
 };
+
+export default starRating;

src/_shortcodes/image.cjs → src/_shortcodes/image.js

@@ -1,10 +1,6 @@
-const fetch = require('@11ty/eleventy-fetch');
+import fetch from '@11ty/eleventy-fetch';
 
-module.exports = async function responsiveImage(
-  imgUUID,
-  imgAlt,
-  size = 'large',
-) {
+const responsiveImage = async (imgUUID, imgAlt, size = 'large') => {
   const imgUrl = `https://ucarecdn.com/${imgUUID}`;
   const imgMeta = await fetch(`${imgUrl}/-/json/`, { duration: '1h', type: 'json' }).then(
     (response) => response,
@@ -38,3 +34,5 @@ module.exports = async function responsiveImage(
                  alt="${imgAlt}" />
           </div>`;
 };
+
+export default responsiveImage;