.eleventy.js

@@ -1,31 +1,24 @@
-/**
+const Image = require('@11ty/eleventy-img');
- * Hint VS Code for eleventyConfig autocompletion.
+const util = require('util');
- * © Henry Desroches - https://gist.github.com/xdesro/69583b25d281d055cd12b144381123bf
- * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig -
- * @returns {Object} -
- */
-
-import Image from '@11ty/eleventy-img';
-import util from 'util';
 
 const emojiRegex = /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug
 
-export default async function (eleventyConfig) {
+module.exports = config => {
-    eleventyConfig.setUseGitIgnore(false);
+    config.setUseGitIgnore(false);
-    eleventyConfig.addWatchTarget("./src/_includes/css/main.css");
+    config.addWatchTarget("./src/_includes/css/main.css");
     
-    eleventyConfig.addPassthroughCopy({ public: './' });
+    config.addPassthroughCopy({ public: './' });
-    eleventyConfig.addPassthroughCopy('src/img');
+    config.addPassthroughCopy('src/img');
-    eleventyConfig.addPassthroughCopy('src/fonts');
+    config.addPassthroughCopy('src/fonts');
-    eleventyConfig.addPassthroughCopy('src/admin');
+    config.addPassthroughCopy('src/admin');
 
 
     /* Collections */
-    eleventyConfig.addCollection('recipes', collection => {
+    config.addCollection('recipes', collection => {
         return [...collection.getFilteredByGlob('./src/recipes/*.md')];
     });
 
-    eleventyConfig.addCollection('tagList', collection => {
+    config.addCollection('tagList', collection => {
         const tagsSet = new Set();
         collection.getAll().forEach(item => {
           if (!item.data.tags) return;
@@ -45,15 +38,15 @@ export default async function (eleventyConfig) {
 
 
     /* Filters */
-    eleventyConfig.addFilter('console', function(value) {
+    config.addFilter('console', function(value) {
         return util.inspect(value);
     });
 
-    eleventyConfig.addFilter('noEmoji', function(value) {
+    config.addFilter('noEmoji', function(value) {
         return value.replace(emojiRegex, '').trim();
     });
 
-    eleventyConfig.addFilter('onlyEmoji', function(value) {
+    config.addFilter('onlyEmoji', function(value) {
         let match = value.match(emojiRegex);
         // If the string doesn't contain any emoji, instead we output the first letter wrapped in some custom styles
         if (!match) {
@@ -62,14 +55,14 @@ export default async function (eleventyConfig) {
         return Array.isArray(match) ? match.join('') : match;
     });
 
-    eleventyConfig.addFilter('limit', (arr, limit) => arr.slice(0, limit));
+    config.addFilter('limit', (arr, limit) => arr.slice(0, limit));
 
-    eleventyConfig.addFilter('lowercase', function(value) {
+    config.addFilter('lowercase', function(value) {
         return value.toLowerCase();
     });
 
     // This workaround is needed so we can transform it back into an array with Alpine (we can't split on "," as it can be included within the items)
-    eleventyConfig.addFilter('arrayToString', function(value) {
+    config.addFilter('arrayToString', function(value) {
         return encodeURI(value.join('£'));
     });
 
@@ -93,8 +86,8 @@ export default async function (eleventyConfig) {
         return Image.generateHTML(metadata, imageAttributes);
     }
 
-    eleventyConfig.addNunjucksAsyncShortcode('recipeimage', imageShortcode);
+    config.addNunjucksAsyncShortcode('recipeimage', imageShortcode);
-    eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
+    config.addShortcode('year', () => `${new Date().getFullYear()}`);
 
     return {
         dir: {

package.json

@@ -3,22 +3,21 @@
   "version": "0.1.0",
   "description": "A starter kit to make your own online recipe cookbook",
   "main": "index.js",
-  "type": "module",
   "scripts": {
     "dev:css": "sass src/scss/main.scss:src/_includes/css/main.css --watch --style=compressed",
     "dev:11ty": "eleventy --serve",
-    "dev": "npm-run-all --parallel dev:*",
+    "dev": "npm-run-all --parallel dev:css dev:11ty",
     "prod:css": "sass src/scss/main.scss:src/_includes/css/main.css --style=compressed",
     "prod:11ty": "eleventy",
-    "build": "npm-run-all prod:*"
+    "build": "npm-run-all prod:css prod:11ty"
   },
   "author": "Maël Brunet",
   "license": "MIT",
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy": "^0.12.1",
-    "@11ty/eleventy-img": "^6.0.1",
+    "@11ty/eleventy-img": "^0.8.3",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.86.3"
+    "sass": "^1.32.12"
   },
   "dependencies": {
     "alpinejs": "^2.8.2"

src/scss/_global.scss

@@ -1,5 +1,3 @@
-@use "mixins";
-
 :root {
     --color-grey-100: #F9FAFB;
     --color-grey-200: #F3F4F6;
@@ -34,7 +32,7 @@ main {
 section {
     padding: 30px 0;
 
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         padding: 60px 0;
     }
 }

src/scss/_mixins.scss

@@ -1,6 +1,3 @@
-@use "sass:string";
-@use "sass:map";
-
 $breakpoints-map: (
   small: "all and (min-width: 576px)",
   medium: "all and (min-width: 768px)",
@@ -12,11 +9,11 @@ $breakpoints-map: (
 // -------------------------------------
 @mixin mq($breakpoint-name) {
   // sanitize variable
-  $breakpoint-name: string.unquote($breakpoint-name);
+  $breakpoint-name: unquote($breakpoint-name);
 
   // check if passed name is in $breakpoints-map
-  @if map.has-key($breakpoints-map, $breakpoint-name) {
+  @if map-has-key($breakpoints-map, $breakpoint-name) {
-    $breakpoint-query: map.get($breakpoints-map, $breakpoint-name);
+    $breakpoint-query: map-get($breakpoints-map, $breakpoint-name);
 
     // write media query
     @media #{$breakpoint-query} {

src/scss/components/_recipe.scss

@@ -1,5 +1,3 @@
-@use "../mixins";
-
 .c-recipe__header-image {
     width: 100%;
     object-fit: cover;
@@ -38,7 +36,7 @@
     flex-direction: column;
     gap: 30px;
     
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         display: grid;
         grid-template-columns: 400px 1fr;
         grid-template-rows: min-content 1fr;
@@ -54,7 +52,7 @@
     flex-wrap: wrap;
     gap: 12px;
 
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         grid-area: tags;
         margin-bottom: 0;
     }
@@ -62,7 +60,7 @@
 
 
 .c-recipe__ingredients-wrapper {
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         grid-area: ingredients;
     }
 }
@@ -85,7 +83,7 @@
 }
 
 .c-recipe__instructions-wrapper {
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         grid-area: instructions;
     }
 }

src/scss/components/_search.scss

@@ -1,5 +1,3 @@
-@use "../mixins";
-
 .c-search__search-toggle {
     margin-left: 20px;
     padding: 10px;
@@ -33,7 +31,7 @@
     box-shadow: var(--shadow-xl);
     font-size: 1rem;
 
-    @include mixins.mq(medium) {
+    @include mq(medium) {
         max-width: 500px;
     }
 }

src/scss/main.scss

@@ -1,15 +1,15 @@
-@use "reset";
+@import "reset.scss";
-@use "mixins";
+@import "mixins.scss";
-@use "utility";
+@import "utility.scss";
-@use "global";
+@import "global.scss";
 
-@use "typography";
+@import "typography.scss";
-@use "layout";
+@import "layout.scss";
 
-@use "components/about";
+@import "components/about.scss";
-@use "components/card";
+@import "components/card.scss";
-@use "components/home";
+@import "components/home.scss";
-@use "components/nav";
+@import "components/nav.scss";
-@use "components/recipe";
+@import "components/recipe.scss";
-@use "components/recipe-tags";
+@import "components/recipe-tags.scss";
-@use "components/search";
+@import "components/search.scss";