feat: convert all files to esm

src/_data/blogroll.js

@@ -87,4 +87,4 @@ const blogroll = [
 
 const sortedBlogroll = blogroll.sort((a, b) => a.title.localeCompare(b.title));
 
-module.exports = sortedBlogroll;
+export default sortedBlogroll;

src/_data/lastfm.js

@@ -1,9 +1,9 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
-const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc");
-const relativeTime = require("dayjs/plugin/relativeTime");
+import EleventyFetch from "@11ty/eleventy-fetch";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import relativeTime from "dayjs/plugin/relativeTime.js";
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
@@ -87,7 +87,7 @@ const fetchRecentTracks = async () => {
   return recentTracks;
 };
 
-module.exports = async function () {
+export default async function () {
   const recentTracks = await fetchRecentTracks();
   const recentAlbums = await fetchRecentAlbums();
 
@@ -95,4 +95,4 @@ module.exports = async function () {
     recentTracks,
     recentAlbums,
   };
-};
+}

src/_data/letterboxd.js

@@ -1,10 +1,10 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
-const cheerio = require("cheerio");
-const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc");
-const relativeTime = require("dayjs/plugin/relativeTime");
+import EleventyFetch from "@11ty/eleventy-fetch";
+import cheerio from "cheerio";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import relativeTime from "dayjs/plugin/relativeTime.js";
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
@@ -65,4 +65,4 @@ const fetchRecentMovies = async () => {
   return recentMovies;
 };
 
-module.exports = fetchRecentMovies;
+export default fetchRecentMovies;

src/_data/meta.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   url: process.env.URL || "http://localhost:8080",
   siteName: "wonderfulfrog",
   siteDescription:

src/_data/navigation.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   top: [
     {
       text: "About",

src/_data/preloads.js

@@ -1,5 +1,5 @@
-const { getFontUrl } = require("../utils/fonts");
-const fonts = require("../../config/design-tokens/fonts.json");
+import { getFontUrl } from "../utils/fonts.js";
+import fonts from "../../config/design-tokens/fonts.js";
 
 const preloads = [
   {
@@ -19,4 +19,4 @@ const preloads = [
   },
 ];
 
-module.exports = preloads;
+export default preloads;

src/_data/robots.js

@@ -1,6 +1,6 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
+import EleventyFetch from "@11ty/eleventy-fetch";
 
 const accessToken = process.env.DARK_VISITORS_ACCESS_TOKEN;
 
@@ -101,7 +101,7 @@ const fetchRobotsTxt = async () => {
   }
 };
 
-module.exports = async function () {
+export default async function () {
   const robotsTxt = await fetchRobotsTxt();
 
   if (!robotsTxt) {
@@ -109,4 +109,4 @@ module.exports = async function () {
   }
 
   return robotsTxt;
-};
+}

src/catalogue/books/books.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "book",
   permalink: "catalogue/books/{{ page.fileSlug }}/index.html",

src/catalogue/catalogue.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   tags: "catalogue",
   eleventyComputed: {
     description: (data) => `My thoughts on ${data.title}.`,

src/catalogue/comics/comics.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "comic",
   permalink: "catalogue/comics/{{ page.fileSlug }}/index.html",

src/catalogue/games/games.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "game",
   permalink: "catalogue/games/{{ page.fileSlug }}/index.html",

src/catalogue/podcasts/podcasts.11tydata.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "podcast",
   permalink: "catalogue/podcasts/{{ page.fileSlug }}/index.html",

src/css-utils/colors.js

@@ -1,5 +1,5 @@
-const colorSchemes = require("../../config/design-tokens/colors.json");
-const { helperClassesToCss } = require("./helper-classes");
+import colorSchemes from "../../config/design-tokens/colors.js";
+import { helperClassesToCss } from "./helper-classes.js";
 
 const lightScheme = colorSchemes.light;
 const darkScheme = colorSchemes.dark;
@@ -32,4 +32,4 @@ const helperClassesCss = colorSchemeToHelperClassesCss(
   helperClasses,
 );
 
-module.exports = `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
+export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;

src/css-utils/font-family.js

@@ -1,5 +1,5 @@
-const { getFontUrl } = require("../utils/fonts");
-const fonts = require("../../config/design-tokens/fonts.json");
+import { getFontUrl } from "../utils/fonts.js";
+import fonts from "../../config/design-tokens/fonts.js";
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {
@@ -48,4 +48,4 @@ const fontFamilyToCss = (
     src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
 }\n`;
 
-module.exports = fontsToCss(fonts);
+export default fontsToCss(fonts);

src/css-utils/font-variables.js

@@ -1,4 +1,4 @@
-const fonts = require("../../config/design-tokens/fonts.json");
+import fonts from "../../config/design-tokens/fonts.js";
 
 const fallbacks = [
   "-apple-system",
@@ -42,4 +42,4 @@ const fontFamilyToCss = (type, value) =>
 
 const css = `:root{${fontsToCss(fonts)}}`;
 
-module.exports = css;
+export default css;

src/css-utils/helper-classes.js

@@ -2,7 +2,7 @@
  * Given an array of CSS properties, output css properties
  * with each property equal to `value`
  */
-const cssPropertiesToCss = (cssProperties, value) => {
+export const cssPropertiesToCss = (cssProperties, value) => {
   return cssProperties.reduce((css, cssProp) => {
     return css + `${cssProp}:${value};`;
   }, ``);
@@ -13,7 +13,7 @@ const cssPropertiesToCss = (cssProperties, value) => {
  * will generate a css class named helperClass that has
  * all cssProperties mapped to value.
  */
-const helperClassToCss = (helperClass, cssProperties, value) => {
+export const helperClassToCss = (helperClass, cssProperties, value) => {
   const cssProps = cssPropertiesToCss(cssProperties, value);
   return `.${helperClass}{${cssProps}}`;
 };
@@ -34,12 +34,10 @@ const helperClassToCss = (helperClass, cssProperties, value) => {
  *    color: #000;
  * }
  */
-const helperClassesToCss = (helperClasses, variant, value) => {
+export const helperClassesToCss = (helperClasses, variant, value) => {
   return helperClasses.reduce((css, [helperClass, cssProperties]) => {
     return (
       css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
     );
   }, ``);
 };
-
-module.exports = { cssPropertiesToCss, helperClassToCss, helperClassesToCss };

src/css-utils/spacing.js

@@ -1,5 +1,5 @@
-const spacing = require("../../config/design-tokens/spacing.json");
-const { helperClassesToCss } = require("./helper-classes");
+import spacing from "../../config/design-tokens/spacing.js";
+import { helperClassesToCss } from "./helper-classes.js";
 
 const spacingToCss = (variant, value) =>
   `--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
@@ -48,4 +48,4 @@ const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
 
 const css = `:root{${spacingVariablesCss}}${helperCss}`;
 
-module.exports = css;
+export default css;

src/css/styles.11ty.js

@@ -5,22 +5,24 @@
  * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
  */
 
-const fs = require("fs");
-const postcss = require("postcss");
-const postcssImport = require("postcss-import");
-const postcssImportExtGlob = require("postcss-import-ext-glob");
-const autoprefixer = require("autoprefixer");
-const cssnano = require("cssnano");
-const path = require("path").posix;
+import fs from "fs";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import { posix as path } from "path";
+import { fileURLToPath } from "url";
 
-const colors = require("../css-utils/colors");
-const fontFamily = require("../css-utils/font-family");
-const fontVariables = require("../css-utils/font-variables");
-const spacing = require("../css-utils/spacing");
+import colors from "../css-utils/colors.js";
+import fontFamily from "../css-utils/font-family.js";
+import fontVariables from "../css-utils/font-variables.js";
+import spacing from "../css-utils/spacing.js";
 
-module.exports = class {
+export default class {
   async data() {
-    const rawFilepath = path.join(__dirname, "./global.css");
+    const dirname = path.dirname(fileURLToPath(import.meta.url));
+    const rawFilepath = path.join(dirname, "./global.css");
     const rawCss = fs.readFileSync(rawFilepath);
 
     const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
@@ -43,4 +45,4 @@ module.exports = class {
       .process(rawCss, { from: rawFilepath })
       .then((result) => result.css);
   }
-};
+}

src/utils/fonts.js

@@ -1,7 +1,3 @@
-const path = require("path");
+import path from "path";
 
-const getFontUrl = (src) => path.join("/assets/fonts", src);
-
-module.exports = {
-  getFontUrl,
-};
+export const getFontUrl = (src) => path.join("/assets/fonts", src);