diff --git a/content/blog/fourthpost/fourthpost.md b/content/blog/fourthpost/fourthpost.md index 8149f7c..c80eb98 100644 --- a/content/blog/fourthpost/fourthpost.md +++ b/content/blog/fourthpost/fourthpost.md @@ -8,7 +8,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. -{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %} +A possum parent and two possum kids hanging from the iconic red balloon ## Section Header diff --git a/eleventy.config.images.js b/eleventy.config.images.js index 67103fe..c9825fa 100644 --- a/eleventy.config.images.js +++ b/eleventy.config.images.js @@ -1,51 +1,28 @@ -import path from "path"; -import eleventyImage from "@11ty/eleventy-img"; - -function relativeToInputPath(inputPath, relativeFilePath) { - let split = inputPath.split("/"); - split.pop(); - - return path.resolve(split.join(path.sep), relativeFilePath); - -} - -function isFullUrl(url) { - try { - new URL(url); - return true; - } catch(e) { - return false; - } -} +import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; export default function(eleventyConfig) { - // Eleventy Image shortcode - // https://www.11ty.dev/docs/plugins/image/ - eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) { - // Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats - // Warning: Avif can be resource-intensive so take care! - let formats = ["avif", "webp", "auto"]; - let input; - if(isFullUrl(src)) { - input = src; - } else { - input = relativeToInputPath(this.page.inputPath, src); - } + eleventyConfig.addPlugin(eleventyImageTransformPlugin, { + // which file extensions to process + extensions: "html", - let metadata = await eleventyImage(input, { - widths: widths || ["auto"], - formats, - outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. - }); + formats: ["avif", "webp", "auto"], - // TODO loading=eager and fetchpriority=high - let imageAttributes = { - alt, - sizes, + // widths: ["auto"], + + // urlPath: "/img/", + + // If a urlPath is not specified: + + // 1. Relative image sources () will be co-located in your output directory + // with the template they are used in. Warning: if the same source image is used in multiple templates, + // it will be written to two different locations! + // 2. Absolute image sources () will be normalized to your input/content directory + // and written to ${OUTPUT_DIR}/img/ + + // assigned on the HTML tag will override these values. + defaultAttributes: { loading: "lazy", - decoding: "async", - }; - - return eleventyImage.generateHTML(metadata, imageAttributes); + decoding: "async" + } }); }; diff --git a/eleventy.config.js b/eleventy.config.js index 7a30433..7be6c48 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,7 +1,7 @@ import { DateTime } from "luxon"; import markdownItAnchor from "markdown-it-anchor"; -import { PathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy"; +import { InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy"; import pluginRss from "@11ty/eleventy-plugin-rss"; import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; import pluginBundle from "@11ty/eleventy-plugin-bundle"; @@ -35,10 +35,9 @@ export default async function(eleventyConfig) { preAttributes: { tabindex: 0 } }); eleventyConfig.addPlugin(pluginNavigation); - eleventyConfig.addPlugin(pluginBundle); eleventyConfig.addPlugin(HtmlBasePlugin); - eleventyConfig.addPlugin(PathToUrlTransformPlugin); + eleventyConfig.addPlugin(InputPathToUrlTransformPlugin); // Filters eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { diff --git a/package.json b/package.json index 2475c67..7f3883a 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ }, "license": "MIT", "engines": { - "node": ">=14" + "node": ">=18" }, "funding": { "type": "opencollective", @@ -33,8 +33,8 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "file:../eleventy", - "@11ty/eleventy-img": "^3.1.8", + "@11ty/eleventy": "3.0.0-alpha.5", + "@11ty/eleventy-img": "^4.0.2", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-bundle": "^1.0.5", "@11ty/eleventy-plugin-rss": "^1.2.0",