forgot to add it to the list of completed projects doh

# Conflicts:
#	projects/FrontendMentor/newbie/social-links-profile/assets/css/typography.css

.eleventy.js

@@ -1,6 +1,9 @@
-const { EleventyRenderPlugin } = require("@11ty/eleventy");
+const Image = require("@11ty/eleventy-img");
+const CleanCSS = require("clean-css");
+
+module.exports = async function (eleventyConfig) {
+    const { EleventyRenderPlugin } = await import("@11ty/eleventy");
 
-module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("./src/css");
     eleventyConfig.addPassthroughCopy("./src/fonts");
     eleventyConfig.addPassthroughCopy("./src/images");
@@ -27,9 +30,20 @@ module.exports = 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/");
@@ -51,3 +65,148 @@ module.exports = 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: [17.x]
+                node-version: [20.x]
 
         steps:
             - uses: actions/checkout@v2

.gitignore

@@ -30,6 +30,8 @@ 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

@@ -0,0 +1,16 @@
+{
+    // 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,6 +2,9 @@
 	"folders": [
 		{
 			"path": "."
+		},
+		{
+			"path": "projects/FrontendMentor/junior/github-user-search-app"
 		}
 	],
 	"settings": {}