diff --git a/blog/fourthpost.md b/blog/fourthpost.md index c4a094d..e44ece8 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 0000000..f332150 Binary files /dev/null and b/blog/fourthpost/possum.png differ diff --git a/eleventy.config.js b/eleventy.config.js index 0da05ba..f72e4a8 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 907b7ab..efe838a 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",