diff --git a/blog/fourthpost.md b/blog/fourthpost.md index c4a094d256..e44ece8f96 100644 --- a/blog/fourthpost.md +++ b/blog/fourthpost.md @@ -8,6 +8,8 @@ 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. +{% imageOptimized "./fourthpost/possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %} + ## Section Header Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. diff --git a/blog/fourthpost/possum.png b/blog/fourthpost/possum.png new file mode 100644 index 0000000000..f332150e73 Binary files /dev/null and b/blog/fourthpost/possum.png differ diff --git a/eleventy.config.js b/eleventy.config.js index 0da05ba0d0..f72e4a8259 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,3 +1,4 @@ +const path = require("path"); const { DateTime } = require("luxon"); const markdownItAnchor = require("markdown-it-anchor"); @@ -5,6 +6,13 @@ const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginNavigation = require("@11ty/eleventy-navigation"); const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); +const eleventyImage = require("@11ty/eleventy-img"); + +function relativeToInputPath(inputPath, relativeFilePath) { + let split = inputPath.split(path.sep); + split.pop(); + return path.resolve(split.join(path.sep), relativeFilePath); +} module.exports = function(eleventyConfig) { eleventyConfig.ignores.add("README.md"); @@ -20,12 +28,30 @@ module.exports = function(eleventyConfig) { // to emulate the file copy on the dev server. Learn more: https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve // eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); - // Add plugins + // Plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); + // Shortcodes + eleventyConfig.addAsyncShortcode("imageOptimized", async function imageShortcode(src, alt, sizes) { + let file = relativeToInputPath(this.page.inputPath, src); + let metadata = await eleventyImage(file, { + widths: ["auto"], + formats: ["webp", "png"], // Can add "avif" or "jpeg" here + outputDir: "_site/img/" + }); + let imageAttributes = { + alt, + sizes, + loading: "lazy", + decoding: "async", + }; + return eleventyImage.generateHTML(metadata, imageAttributes); + }); + + // Filters eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => { return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat(format); }); diff --git a/package.json b/package.json index 907b7abf7a..efe838a9e9 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "dependencies": { "@11ty/eleventy": "2.0.0-beta.1", + "@11ty/eleventy-img": "^2.0.1", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",