WIP WebC introduction

modified: eleventy.config.js

uncommenting L35 of eleventy.config.js `eleventy-img/*.webc` breaks build

```diff
+	eleventyConfig.addPlugin(pluginWebc, {
+		components: [
+			"./_components/**/*.webc",
+			// "npm:@11ty/eleventy-img/*.webc",
+		],
+	});
```

> [11ty] Original error stack trace: Error: Check the webc:type="js" element in
./content/archive/fourthpost/fourthpost.md.

> [11ty] Original error message: Cannot read properties of undefined
(reading 'directories')

Seems like it is getting hung up here:
https://github.com/11ty/eleventy-img/blob/main/eleventy-image.webc#L72-L81

modified: content/archive/fourthpost/fourthpost.md

```diff
-{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+<img webc:is="eleventy-image" width="288,350" sizes="100vw" src="/img/possum.png" formats="avif,webp,png" alt="A possum parent and two possum kids hanging from the iconic red balloon">
```

modified: package.json

added webc plugin

new file: _components/html/h2.webc
new file: _components/html/h3.webc
new file: _components/html/h4.webc
new file: _components/html/heading.css
renamed:  content/archive/fourthpost/possum.png -> public/img/possum.png

_components/html/h2.webc

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h2 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h2>`
+</script>

_components/html/h3.webc

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h3 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h3>`
+</script>

_components/html/h4.webc

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h4 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h4>`
+</script>

_components/html/heading.css

@@ -0,0 +1,14 @@
+.heading-link {
+	font-size: 1.125rem; /* 18px /16 */
+	text-decoration: none;
+	padding: .1em .2em .1em 0;
+}
+@media (min-width: 43.75em) { /* 700px */
+	page-layout-sidebar .heading-link {
+		margin-left: -1.222222222222rem; /* -22px /18 */
+	}
+}
+a.heading-link[href],
+a.heading-link[href]:visited {
+	color: var(--color-accent);
+}

content/archive/fourthpost/fourthpost.md

@@ -1,4 +1,5 @@
 ---
+templateEngineOverride: webc,md
 title: This is my fourth post.
 description: This is a post on My Blog about touchpoints and circling wagons.
 date: 2018-09-30
@@ -12,7 +13,7 @@ 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.
 
-{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+<img webc:is="eleventy-image" width="288,350" sizes="100vw" src="/img/possum.png" formats="avif,webp,png" alt="A possum parent and two possum kids hanging from the iconic red balloon">
 
 ## Section Header
 

eleventy.config.js

@@ -4,7 +4,8 @@ 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 { EleventyHtmlBasePlugin } from "@11ty/eleventy";
+import { EleventyHtmlBasePlugin, EleventyRenderPlugin } from "@11ty/eleventy";
+import pluginWebc from "@11ty/eleventy-plugin-webc";
 
 import pluginDrafts from "./eleventy.config.drafts.js";
 import pluginImages from "./eleventy.config.images.js";
@@ -28,6 +29,14 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPlugin(pluginImages);
 
 	// Official plugins
+	eleventyConfig.addPlugin(pluginWebc, {
+		components: [
+			"./_components/**/*.webc",
+			// "npm:@11ty/eleventy-img/*.webc",
+		],
+	});
+	eleventyConfig.addPlugin(EleventyRenderPlugin);
+
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(IdAttributePlugin);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {

package.json

@@ -45,6 +45,7 @@
 		"@11ty/eleventy-plugin-bundle": "^2.0.2",
 		"@11ty/eleventy-plugin-rss": "^2.0.2",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"@famebot/chromagen": "^1.0.1",
 		"luxon": "^3.4.4"
 	}