Merge pull request #198 from himynameisjonas/npm-and-eleventy-img

11ty-image and npm

Author: himynameisjonas

.eleventy.js

@@ -1,16 +1,33 @@
 const extractExcerpt = require("./src/11ty/extract_excerpt");
 const imageUrl = require("./src/11ty/image_url");
 const minifyHtml = require("./src/11ty/minify_html");
-const pictureElement = require("./src/11ty/picture_element");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const similarPosts = require("./src/11ty/similar_posts");
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const trackingScript = require("./src/11ty/tracking_script");
 const typeCollection = require("./src/11ty/type_collection");
+const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(syntaxHighlight);
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		extensions: "html",
+
+    cacheOptions: {
+      duration: "10y",
+    },
+		formats: ["webp", "jpeg"],
+
+		widths: ["auto"],
+
+    urlPath: "/img/",
+		defaultAttributes: {
+			loading: "lazy",
+			decoding: "async"
+		}
+	});
+
 
   eleventyConfig.setDataDeepMerge(true);
   eleventyConfig.setUseGitIgnore(false);
@@ -30,7 +47,6 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addShortcode("excerpt", extractExcerpt);
   eleventyConfig.addShortcode("image_url", imageUrl.shortcode);
-  eleventyConfig.addShortcode("picture_element", pictureElement);
   eleventyConfig.addShortcode("tracking_script", trackingScript);
 
   return {

.github/workflows/bookmarks.yml

@@ -15,10 +15,10 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20.10.0
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile
+          cache: "npm"
+      - run: npm ci
       - name: Fetch bookmarks
-        run: yarn fetch_bookmarks
+        run: npm run fetch_bookmarks
         env:
           RAINDROP_COLLECTION_ID: ${{ secrets.RAINDROP_COLLECTION_ID }}
           RAINDROP_TOKEN: ${{ secrets.RAINDROP_TOKEN }}

.github/workflows/deploy.yml

@@ -36,8 +36,8 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20.10.0
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile
+          cache: "npm"
+      - run: npm ci
       - uses: actions/cache/restore@v4
         id: cache
         with:
@@ -49,7 +49,7 @@ jobs:
             11ty-${{ runner.os }}
             ${{ runner.os }}-11ty
       - name: Build 11ty site
-        run: yarn build
+        run: npm run build
         env:
           TINA_CLIENT_ID: ${{ secrets.TINA_CLIENT_ID }}
           TINA_SEARCH_TOKEN: ${{ secrets.TINA_SEARCH_TOKEN }}