diff --git a/content/content.11tydata.js b/content/content.11tydata.js deleted file mode 100644 index 8c2455d..0000000 --- a/content/content.11tydata.js +++ /dev/null @@ -1,31 +0,0 @@ -module.exports = { - // Draft posts: - eleventyComputed: { - permalink: data => { - if(data.draft) { - // BUILD_DRAFTS is set in eleventy.config.js - if(process.env.BUILD_DRAFTS) { - return data.permalink; - } - - // Always skip during non-watch/serve builds - return false; - } - - return data.permalink; - }, - eleventyExcludeFromCollections: data => { - if(data.draft) { - // BUILD_DRAFTS is set in eleventy.config.js - if(process.env.BUILD_DRAFTS) { - return data.eleventyExcludeFromCollections; - } - - // Always exclude from non-watch/serve builds - return true; - } - - return data.eleventyExcludeFromCollections; - } - }, -}; diff --git a/eleventy.config.drafts.js b/eleventy.config.drafts.js new file mode 100644 index 0000000..3bc6912 --- /dev/null +++ b/eleventy.config.drafts.js @@ -0,0 +1,60 @@ +function eleventyComputedPermalink() { + // When using `addGlobalData` and you *want* to return a function, you must nest functions like this. + // `addGlobalData` acts like a global data file and runs the top level function it receives. + return (data) => { + if(data.draft) { + // BUILD_DRAFTS is set in eleventy.config.js + if(process.env.BUILD_DRAFTS) { + return data.permalink; + } + + // Always skip during non-watch/serve builds + return false; + } + + return data.permalink; + } +}; + +function eleventyComputedExcludeFromCollections() { + // When using `addGlobalData` and you *want* to return a function, you must nest functions like this. + // `addGlobalData` acts like a global data file and runs the top level function it receives. + return (data) => { + if(data.draft) { + // BUILD_DRAFTS is set in eleventy.config.js + if(process.env.BUILD_DRAFTS) { + return data.eleventyExcludeFromCollections; + } + + // Always exclude from non-watch/serve builds + return true; + } + + return data.eleventyExcludeFromCollections; + } +}; + +module.exports.eleventyComputedPermalink = eleventyComputedPermalink; +module.exports.eleventyComputedExcludeFromCollections = eleventyComputedExcludeFromCollections; + +module.exports = eleventyConfig => { + eleventyConfig.addGlobalData("eleventyComputed.permalink", eleventyComputedPermalink); + eleventyConfig.addGlobalData("eleventyComputed.eleventyExcludeFromCollections", eleventyComputedExcludeFromCollections); + + let logged = false; + eleventyConfig.on("eleventy.before", ({runMode}) => { + let text = "Excluding"; + // Only show drafts in serve/watch modes + if(runMode === "serve" || runMode === "watch") { + process.env.BUILD_DRAFTS = true; + text = "Including"; + } + + // Only log once. + if(!logged) { + console.log( `[11ty/eleventy-base-blog] ${text} drafts.` ); + } + + logged = true; + }); +} diff --git a/eleventy.config.images.js b/eleventy.config.images.js new file mode 100644 index 0000000..98a9139 --- /dev/null +++ b/eleventy.config.images.js @@ -0,0 +1,30 @@ +const path = require("path"); +const eleventyImage = require("@11ty/eleventy-img"); + +module.exports = eleventyConfig => { + function relativeToInputPath(inputPath, relativeFilePath) { + let split = inputPath.split("/"); + split.pop(); + + return path.resolve(split.join(path.sep), relativeFilePath); + } + + // Eleventy Image shortcode + // https://www.11ty.dev/docs/plugins/image/ + eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) { + let file = relativeToInputPath(this.page.inputPath, src); + let metadata = await eleventyImage(file, { + widths: ["auto"], + // You can add "avif" or "jpeg" here if you’d like! + formats: ["webp", "png"], + outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. + }); + let imageAttributes = { + alt, + sizes, + loading: "lazy", + decoding: "async", + }; + return eleventyImage.generateHTML(metadata, imageAttributes); + }); +}; diff --git a/eleventy.config.js b/eleventy.config.js index 0defe0b..22d1585 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,11 +1,9 @@ -const path = require("path"); const { DateTime } = require("luxon"); const markdownItAnchor = require("markdown-it-anchor"); const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginNavigation = require("@11ty/eleventy-navigation"); -const eleventyImage = require("@11ty/eleventy-img"); const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); module.exports = function(eleventyConfig) { @@ -22,61 +20,16 @@ module.exports = function(eleventyConfig) { // Process content images to the image pipeline. eleventyConfig.addWatchTarget("content/**/*.{png,jpeg}"); + // App plugins + eleventyConfig.addPlugin(require("./eleventy.config.drafts.js")); + eleventyConfig.addPlugin(require("./eleventy.config.images.js")); - // Plugins + // Official plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); - // Eleventy Image shortcode - // https://www.11ty.dev/docs/plugins/image/ - eleventyConfig.addPlugin(eleventyConfig => { - function relativeToInputPath(inputPath, relativeFilePath) { - let split = inputPath.split("/"); - split.pop(); - - return path.resolve(split.join(path.sep), relativeFilePath); - } - - eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) { - let file = relativeToInputPath(this.page.inputPath, src); - let metadata = await eleventyImage(file, { - widths: ["auto"], - // You can add "avif" or "jpeg" here if you’d like! - formats: ["webp", "png"], - outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. - }); - let imageAttributes = { - alt, - sizes, - loading: "lazy", - decoding: "async", - }; - return eleventyImage.generateHTML(metadata, imageAttributes); - }); - }); - - // Drafts implementation, see `content/content.11tydata.js` for additional code. - // This section *could* be simplified to an environment variable in an npm script, - // but this way an ENV is not required and this code works cross-platform. - eleventyConfig.addPlugin(function enableDrafts(eleventyConfig) { - let logged = false; - eleventyConfig.on("eleventy.before", ({runMode}) => { - // Only show drafts in serve/watch modes - if(runMode === "serve" || runMode === "watch") { - process.env.BUILD_DRAFTS = true; - - // Only log once. - if(!logged) { - console.log( "[11ty/eleventy-base-blog] including `draft: true` posts" ); - } - - logged = true; - } - }); - }) - // Filters eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens