.eleventy.js

@@ -1,9 +1,6 @@
-const Image = require("@11ty/eleventy-img");
-const CleanCSS = require("clean-css");
-
-module.exports = async function (eleventyConfig) {
-    const { EleventyRenderPlugin } = await import("@11ty/eleventy");
+const { EleventyRenderPlugin } = require("@11ty/eleventy");
 
+module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("./src/css");
     eleventyConfig.addPassthroughCopy("./src/fonts");
     eleventyConfig.addPassthroughCopy("./src/images");
@@ -30,20 +27,9 @@ module.exports = async function (eleventyConfig) {
     //    "./src/assets/images": "img",
     //});
 
-    // FILTERS
-    eleventyConfig.addFilter("cssmin", function (code) {
-        return new CleanCSS({}).minify(code).styles;
-    });
-
     // PLUGINS
     eleventyConfig.addPlugin(EleventyRenderPlugin);
 
-    // SHORTCODES
-    // eleventyConfig.addShortcode("image", imageShortcode);
-    eleventyConfig.addAsyncShortcode("imageGen", officialImageShortcode);
-    eleventyConfig.addNunjucksShortcode("imageGenSync", imageShortcodeSync);
-    // eleventyConfig.addShortcode("imageGenSync", imageShortcodeSync);
-
     // WATCH Targets
     eleventyConfig.addWatchTarget("./src/css/");
     eleventyConfig.addWatchTarget("./src/js/");
@@ -65,148 +51,3 @@ module.exports = async function (eleventyConfig) {
         },
     };
 };
-
-const imageShortcode = async (
-    src,
-    alt,
-    className = undefined,
-    widths = [400, 800, 1280],
-    formats = ["webp", "jpeg"],
-    sizes = "100vw"
-) => {
-    const imageMetadata = await Image(src, {
-        widths: [...widths, null],
-        formats: [...formats, null],
-        outputDir: "_site/assets/images",
-        urlPath: "/assets/images",
-    });
-
-    const sourceHtmlString = Object.values(imageMetadata)
-        // Map each format to the source HTML markup
-        .map((images) => {
-            // The first entry is representative of all the others
-            // since they each have the same shape
-            const { sourceType } = images[0];
-
-            // Use our util from earlier to make our lives easier
-            const sourceAttributes = stringifyAttributes({
-                type: sourceType,
-                // srcset needs to be a comma-separated attribute
-                srcset: images.map((image) => image.srcset).join(", "),
-                sizes,
-            });
-
-            // Return one <source> per format
-            return `<source ${sourceAttributes}>`;
-        })
-        .join("\n");
-
-    const getLargestImage = (format) => {
-        const images = imageMetadata[format];
-        return images[images.length - 1];
-    };
-
-    const largestUnoptimizedImg = getLargestImage(formats[0]);
-    const imgAttributes = stringifyAttributes({
-        src: largestUnoptimizedImg.url,
-        width: largestUnoptimizedImg.width,
-        height: largestUnoptimizedImg.height,
-        alt,
-        loading: "lazy",
-        decoding: "async",
-    });
-    const imgHtmlString = `<img ${imgAttributes}>`;
-
-    const pictureAttributes = stringifyAttributes({
-        class: className,
-    });
-    const picture = `<picture ${pictureAttributes}>
-    ${sourceHtmlString}
-    ${imgHtmlString}
-  </picture>`;
-
-    return outdent`${picture}`;
-};
-
-async function officialImageShortcode(src, alt, sizes = "100vw") {
-    if (alt === undefined) {
-        // You bet we throw an error on missing alt (alt="" works okay)
-        throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
-    }
-
-    if (src.startsWith("/screenshots")) {
-        src = "./src/" + src;
-    } else {
-        src = "./projects/" + src;
-    }
-
-    console.log("officalImage: " + src + " " + alt);
-
-    let metadata = await Image(src, {
-        widths: [300, 600],
-        formats: ["webp", "jpeg"],
-        outputDir: "www/assets/images",
-        urlPath: "/assets/images",
-    });
-
-    console.log(metadata);
-
-    let lowsrc = metadata.jpeg[0];
-    let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
-
-    return `<picture>
-      ${Object.values(metadata)
-          .map((imageFormat) => {
-              return `  <source type="${
-                  imageFormat[0].sourceType
-              }" srcset="${imageFormat
-                  .map((entry) => entry.srcset)
-                  .join(", ")}" sizes="${sizes}">`;
-          })
-          .join("\n")}
-        <img
-          src="${lowsrc.url}"
-          width="${highsrc.width}"
-          height="${highsrc.height}"
-          alt="${alt}"
-          class="card__img"
-          loading="lazy"
-          decoding="async">
-      </picture>`;
-}
-
-function imageShortcodeSync(
-    src,
-    alt,
-    sizes = "100vw",
-    widths = [300, 600],
-    cls = "card__img"
-) {
-    let options = {
-        widths: widths,
-        formats: ["webp", "jpeg"],
-        outputDir: "www/assets/images",
-        urlPath: "/assets/images",
-    };
-
-    if (src.startsWith("/screenshots")) {
-        src = "./src/" + src;
-    } else {
-        src = "./projects/" + src;
-    }
-
-    // console.log("Sync: " + src + " " + alt);
-    // generate images, while this is async we don’t wait
-    Image(src, options);
-
-    let imageAttributes = {
-        class: cls,
-        alt,
-        sizes,
-        loading: "lazy",
-        decoding: "async",
-    };
-    // get metadata even if the images are not fully generated yet
-    let metadata = Image.statsSync(src, options);
-    return Image.generateHTML(metadata, imageAttributes);
-}

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [20.x]
+                node-version: [17.x]
 
         steps:
             - uses: actions/checkout@v2

.gitignore

@@ -30,8 +30,6 @@ src/_includes/css
 # my chosen output directory.
 www
 
-**/*/premdesigns
-
 #### From FrontEnd Mentor gitignore. Just to avoid accidentally uploading design files
 #
 # Avoid accidental upload of the Sketch and Figma design files

.vscode/launch.json

@@ -1,16 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "edge",
-            "version": "stable",
-            "request": "launch",
-            "name": "Launch Edge against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}

base.code-workspace

@@ -2,9 +2,6 @@
 	"folders": [
 		{
 			"path": "."
-		},
-		{
-			"path": "projects/FrontendMentor/junior/github-user-search-app"
 		}
 	],
 	"settings": {}