Updates to use newest alpha release with on-request image optimization during --serve. Cleans up config and data

README.md

@@ -56,20 +56,20 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the
 	- _0ms Total Blocking Time_
 - Local development live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/).
 - Content-driven [navigation menu](https://www.11ty.dev/docs/plugins/navigation/)
-- [Image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode.
+- Fully automated [Image optimization](https://www.11ty.dev/docs/plugins/image/)
 	- Zero-JavaScript output.
 	- Support for modern image formats automatically (e.g. AVIF and WebP)
+	- Processes images on-request during `--serve` for speedy local builds.
 	- Prefers `<img>` markup if possible (single image format) but switches automatically to `<picture>` for multiple image formats.
 	- Automated `<picture>` syntax markup with `srcset` and optional `sizes`
 	- Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/).
 	- Includes `loading="lazy"` for native lazy loading without JavaScript.
 	- Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding)
 	- Images can be co-located with blog post files.
-	- View the [Image plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.images.js)
 - Per page CSS bundles [via `eleventy-plugin-bundle`](https://github.com/11ty/eleventy-plugin-bundle).
 - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (zero-JavaScript output).
 - Blog Posts
-	- Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. View the [Drafts plugin source code](https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.drafts.js).
+	- Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds. This is driven by the `eleventyExcludeFromCollections` and `permalink` computed data in the `content/blog/blog.11tydata.js` directory data file. Schema validator will show an error if non-boolean value is set in data cascade.
 	- Automated next/previous links
 	- Accessible deep links to headings
 - Generated Pages
@@ -82,9 +82,10 @@ Or you can run [debug mode](https://www.11ty.dev/docs/debugging/) to see all the
 ## Demos
 
 - [Netlify](https://eleventy-base-blog.netlify.com/)
-- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
 - [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
 - [Cloudflare Pages](https://eleventy-base-blog-d2a.pages.dev/)
+- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
+- [Vercel](https://eleventy-base-blog-snowy.vercel.app/)
 
 ## Deploy this to your own site
 

content/404.md

@@ -1,5 +1,4 @@
 ---
-layout: layouts/home.njk
 permalink: 404.html
 eleventyExcludeFromCollections: true
 ---

content/about/index.md

@@ -1,5 +1,4 @@
 ---
-layout: layouts/base.njk
 eleventyNavigation:
   key: About Me
   order: 3

content/blog.njk

@@ -1,5 +1,4 @@
 ---
-layout: layouts/home.njk
 eleventyNavigation:
   key: Archive
   order: 2

content/blog/blog.11tydata.js

@@ -1,6 +1,36 @@
+import { z } from "zod";
+import { fromZodError } from 'zod-validation-error';
+
 export default {
 	tags: [
 		"posts"
 	],
 	"layout": "layouts/post.njk",
+	eleventyDataSchema: function(data) {
+		let result = z.object({
+			draft: z.boolean().or(z.undefined()),
+		}).safeParse(data);
+
+		if(result.error) {
+			throw fromZodError(result.error);
+		}
+	},
+	eleventyComputed: {
+		permalink: (data) => {
+			// Always skip during non-watch/serve builds
+			if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
+				return false;
+			}
+
+			return data.permalink;
+		},
+		eleventyExcludeFromCollections: (data) => {
+			// Always exclude from non-watch/serve builds
+			if(data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
+				return true;
+			}
+
+			return data.eleventyExcludeFromCollections;
+		}
+	}
 };

content/content.11tydata.js

@@ -0,0 +1,3 @@
+export default {
+	layout: "layouts/home.njk",
+};

content/feed/feed.11tydata.js

@@ -1,3 +1,3 @@
 export default {
-	eleventyExcludeFromCollections: true
-}
+	layout: false,
+};

content/feed/feed.njk

@@ -1,6 +1,9 @@
 ---
 # Metadata comes from _data/metadata.js
 permalink: /feed/feed.xml
+eleventyNavigation:
+  key: Feed
+  order: 3
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">

content/index.njk

@@ -1,5 +1,4 @@
 ---
-layout: layouts/home.njk
 eleventyNavigation:
   key: Home
   order: 1

content/sitemap.xml.njk

@@ -1,5 +1,6 @@
 ---
 permalink: /sitemap.xml
+layout: false
 eleventyExcludeFromCollections: true
 ---
 <?xml version="1.0" encoding="utf-8"?>

content/tag-pages.njk

@@ -1,18 +1,19 @@
----
-pagination:
-  data: collections
-  size: 1
-  alias: tag
-  filter:
-    - all
-    - post
-    - posts
-    - tagList
-  addAllPagesToCollections: true
-layout: layouts/home.njk
-eleventyComputed:
-  title: Tagged “{{ tag }}”
-permalink: /tags/{{ tag | slugify }}/
+---node
+// <script>
+const pagination = {
+	data: "collections",
+	size: 1,
+	alias: "tag",
+	filter: ["all", "posts"],
+	addAllPagesToCollections: true,
+};
+
+const eleventyComputed = {
+	title: "Tagged '{{ tag }}'",
+	permalink: function(data) {
+		return `/tags/${this.slugify(data.tag)}/`;
+	}
+};
 ---
 <h1>Tagged “{{ tag }}”</h1>
 

content/tags.njk

@@ -1,10 +1,7 @@
----
-layout: layouts/home.njk
----
 <h1>Tags</h1>
 
 <ul>
-{% for tag in collections.all | getAllTags | filterTagList %}
+{% for tag in collections | getKeys | filterTagList %}
 	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
 	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
 {% endfor %}

eleventy.config.drafts.js

@@ -1,49 +0,0 @@
-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) => {
-		// Always skip during non-watch/serve builds
-		if(data.draft && !process.env.BUILD_DRAFTS) {
-			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) => {
-		// Always exclude from non-watch/serve builds
-		if(data.draft && !process.env.BUILD_DRAFTS) {
-			return true;
-		}
-
-		return data.eleventyExcludeFromCollections;
-	}
-};
-
-export { eleventyComputedPermalink, eleventyComputedExcludeFromCollections };
-
-export default function(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;
-	});
-}

eleventy.config.images.js

@@ -1,20 +0,0 @@
-import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
-
-export default function(eleventyConfig) {
-	// Read more about this plugin: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
-
-	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-		// file extensions to process
-		extensions: "html",
-
-		formats: ["avif", "webp", "auto"],
-
-		// widths: ["auto"],
-
-		// e.g. <img loading decoding> assigned on the HTML tag will override these values.
-		defaultAttributes: {
-			loading: "lazy",
-			decoding: "async",
-		},
-	});
-};

eleventy.config.js

@@ -6,9 +6,7 @@ import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import pluginBundle from "@11ty/eleventy-plugin-bundle";
 import pluginNavigation from "@11ty/eleventy-navigation";
-
-import pluginDrafts from "./eleventy.config.drafts.js";
-import pluginImages from "./eleventy.config.images.js";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 export default async function(eleventyConfig) {
@@ -25,10 +23,6 @@ export default async function(eleventyConfig) {
 	// Watch content images for the image pipeline.
 	eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
-	// App plugins
-	eleventyConfig.addPlugin(pluginDrafts);
-	eleventyConfig.addPlugin(pluginImages);
-
 	// Official plugins
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
@@ -39,6 +33,20 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPlugin(HtmlBasePlugin);
 	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
 
+	// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		// File extensions to process in _site folder
+		extensions: "html",
+		// Output formats for each image.
+		formats: ["avif", "webp", "auto"],
+		// widths: ["auto"],
+		defaultAttributes: {
+			// e.g. <img loading decoding> assigned on the HTML tag will override these values.
+			loading: "lazy",
+			decoding: "async",
+		}
+	});
+
 	// Filters
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
@@ -67,17 +75,13 @@ export default async function(eleventyConfig) {
 		return Math.min.apply(null, numbers);
 	});
 
-	// Return all the tags used in any collection
-	eleventyConfig.addFilter("getAllTags", collection => {
-		let tagSet = new Set();
-		for(let item of collection) {
-			(item.data.tags || []).forEach(tag => tagSet.add(tag));
-		}
-		return Array.from(tagSet);
+	// Return the keys used in an object
+	eleventyConfig.addFilter("getKeys", target => {
+		return Object.keys(target);
 	});
 
 	eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
-		return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+		return (tags || []).filter(tag => ["all", "posts"].indexOf(tag) === -1);
 	});
 
 	// Customize Markdown library settings:
@@ -96,7 +100,7 @@ export default async function(eleventyConfig) {
 
 	eleventyConfig.addShortcode("currentBuildDate", () => {
 		return (new Date()).toISOString();
-	})
+	});
 
 	// Features to make your build faster (when you need them)
 

package.json

@@ -7,6 +7,7 @@
 		"build": "npx @11ty/eleventy",
 		"build-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/",
 		"start": "npx @11ty/eleventy --serve --quiet",
+		"start-ghpages": "npx @11ty/eleventy --pathprefix=/eleventy-base-blog/ --serve --quiet",
 		"debug": "DEBUG=Eleventy* npx @11ty/eleventy",
 		"debugstart": "DEBUG=Eleventy* npx @11ty/eleventy --serve --quiet",
 		"benchmark": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy"
@@ -33,13 +34,15 @@
 	},
 	"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
 	"devDependencies": {
-		"@11ty/eleventy": "3.0.0-alpha.5",
-		"@11ty/eleventy-img": "^4.0.2",
+		"@11ty/eleventy": "3.0.0-alpha.9",
+		"@11ty/eleventy-img": "5.0.0-beta.1",
 		"@11ty/eleventy-navigation": "^0.3.5",
 		"@11ty/eleventy-plugin-bundle": "^1.0.5",
 		"@11ty/eleventy-plugin-rss": "^1.2.0",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 		"luxon": "^3.4.4",
-		"markdown-it-anchor": "^8.6.7"
+		"markdown-it-anchor": "^8.6.7",
+		"zod": "^3.23.4",
+		"zod-validation-error": "^3.2.0"
 	}
 }