Adds sample drafts implementation

content/blog/blog.11tydata.js

@@ -0,0 +1,36 @@
+module.exports = {
+	tags: [
+		"posts"
+	],
+	"layout": "layouts/post.njk",
+
+	// 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;
+		}
+	},
+};

content/blog/blog.json

@@ -1,6 +0,0 @@
-{
-	"tags": [
-		"posts"
-	],
-	"layout": "layouts/post.njk"
-}

content/blog/fifthpost.md

@@ -0,0 +1,6 @@
+---
+title: This is a fifth post (draft)
+date: 2023-01-23
+draft: true
+---
+This is a draft post

eleventy.config.js

@@ -8,13 +8,22 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
 const eleventyImage = require("@11ty/eleventy-img");
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 
-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.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;
+				if(!logged) {
+					console.log( "[11ty/eleventy-base-blog] including `draft: true` posts" );
+				}
+
+				logged = true;
+			}
+		});
+	})
+
 	// Copy the contents of the `public` folder to the output folder
 	// For example, `./public/css/` ends up in `_site/css/`
 	eleventyConfig.addPassthroughCopy({
@@ -38,6 +47,12 @@ module.exports = function(eleventyConfig) {
 	// Eleventy Image shortcode
 	// https://www.11ty.dev/docs/plugins/image/
 	eleventyConfig.addPlugin(eleventyConfig => {
+		function relativeToInputPath(inputPath, relativeFilePath) {
+			let split = inputPath.split(path.sep);
+			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, {