WIP post.njk to webc conversion, log collison template bugs

_components/html/h2.webc: `console.log(slots.text.default);`

See 11ty/webc#151 for more on collisions

_components/html/h2.webc

@@ -1,8 +1,16 @@
 <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>
+<script webc:type="js">
+	console.log('$data.page.url:');
+	console.log($data.page.url);
+	console.log('webc:');
+	console.log(webc.attributes);
+	console.log('slots.text.default:');
+	console.log(slots.text.default);
+	console.log('\n');
+
+	`${slots.text.default}`
+</script>
+<h2 @attributes webc:root="override">
+	<a href="#" class="heading-link"><span aria-hidden="true">#</span></a>
+	<slot></slot>
+</h2>

_components/html/h3.webc

@@ -1,8 +1,5 @@
 <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>
+<h3 @attributes webc:root="override">
+	<a href="#" class="heading-link"><span aria-hidden="true">#</span></a>
+	<slot></slot>
+</h3>

_components/html/h4.webc

@@ -1,8 +1,5 @@
 <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>
+<h4 @attributes webc:root="override">
+	<a href="#" class="heading-link"><span aria-hidden="true">#</span></a>
+	<slot></slot>
+</h4>

_components/html/heading.css

@@ -1,5 +1,4 @@
 .heading-link {
-	font-size: 1.125rem; /* 18px /16 */
 	text-decoration: none;
 	padding: .1em .2em .1em 0;
 }

_components/visually-hidden.webc

@@ -0,0 +1,12 @@
+<style webc:scoped>
+/* https://www.a11yproject.com/posts/how-to-hide-content/ */
+:host {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+</style>

_includes/layouts/post.webc

@@ -0,0 +1,58 @@
+---node
+templateEngineOverride: md,webc
+const layout = "layouts/base.njk";
+const previousPost = getPreviousCollectionItem(collections.posts);
+const nextPost = getNextCollectionItem(collections.posts);
+---
+<!-- {%- css %}
+/* Only include the syntax highlighter CSS on blog posts */
+{% include "node_modules/prismjs/themes/prism-okaidia.css" %}
+{% include "public/css/prism-diff.css" %}
+{%- endcss %} -->
+<figure>
+<!-- {%- if hero and heroalt %}
+
+	{%- if herolink %} -->
+		<a :href="herolink">
+	<!-- {%- endif %}
+
+	{% image hero, heroalt %}
+
+	{%- if herolink %} -->
+		</a>
+	<!-- {%- endif %}
+
+	{%- if herocaption %} -->
+		<figcaption>
+			<!-- {%- if herolink %} -->
+			<a :href="herolink" @text="herocaption"></a>
+			<!-- {%- endif %} -->
+		</figcaption>
+	<!-- {%- endif %}
+{%- endif %} -->
+</figure>
+<h1 @text="title"></h1>
+
+<ul class="post-metadata">
+	<li><time :datetime="htmlDateString(page.date)" @text="readableDate(page.date)"></time></li>
+	<div webc:for="filterTagList(tag of tags)">
+		<li>
+			<a :href="`/tags/${slugify(tag)}`" class="post-tag" @text="tag"></a>
+		</li>
+	</div>
+</ul>
+
+<div @html="content" webc:nokeep></div>
+
+<!-- {%- if collections.posts %} -->
+<!-- {%- if nextPost or previousPost %} -->
+<ul class="links-nextprev">
+	<!-- {%- if previousPost %} -->
+	<li>Previous: <a :href="previousPost.url" @text="previousPost.data.title"></a></li>
+	<!-- {% endif %} -->
+	<!-- {%- if nextPost %} -->
+	<li>Next: <a :href="nextPost.url" @text="nextPost.data.title"></a></li>
+	<!-- {% endif %} -->
+</ul>
+<!-- {%- endif %} -->
+<!-- {%- endif %} -->

_includes/layouts/test.webc

@@ -0,0 +1,18 @@
+---node
+const layout = "layouts/base.njk";
+---
+<div webc:if="hero && heroalt" webc:nokeep>
+<figure>
+	<a :href="herolink">
+		<img webc:is="eleventy-image" :src="hero" :alt="heroalt">
+	</a>
+	<figcaption @text="herocaption"></figcaption>
+</figure>
+</div>
+<h1 @text="title"></h1>
+
+<ul class="post-metadata">
+	<li><time :datetime="htmlDateString(page.date)" @text="readableDate(page.date)"></time></li>
+</ul>
+
+<div @html="content" webc:nokeep></div>

_includes/postslist.njk

@@ -3,11 +3,11 @@
 	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
 		{%- if post.data.hero and post.data.heroalt %}
 		<figure class="postlist-img"><a href="{{ post.url }}" class="postlist-thumb">
-			{%- if post.data.hero | fullPostImgUrl %}
+			{# {%- if post.data.hero | fullPostImgUrl %}
 				{% image post.data.hero, post.data.heroalt, [488] %}
 			{%- else %}
 				{% image ['./', post.url, post.data.hero] | join, post.data.heroalt, [488] %}
-			{%- endif %}
+			{%- endif %} #}
 		</a></figure>
 		{%- endif %}
 		<div class="postlist-text">

content/archive/archive.11tydata.js

@@ -1,6 +1,6 @@
 let data = {
 	tags: ["posts"],
-	layout: "layouts/post.njk",
+	layout: "layouts/test.webc",
 };
 
 export default data;

content/archive/fourthpost/fourthpost.md

@@ -1,19 +1,18 @@
 ---
-templateEngineOverride: md,webc
 title: This is my fourth post.
 description: This is a post on My Blog about touchpoints and circling wagons.
 date: 2018-09-30
-hero: elle-balloon-r1-t1-c4.png
+hero: public/img/elle-balloon-r1-t1-c4.png
 heroalt: Elle the possum floats, suspended from a red balloon, seen from afar.
 herocaption: Illustration of Eleventy mascot Elle the possum by Ricky de Laveaga
 herolink: https://www.11ty.dev/blog/logo-homage/
 tags: second tag
 ---
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
-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.
+<img webc:is="eleventy-image" width="288,350" sizes="100vw" src="public/img/possum.png" formats="avif,webp,png" alt="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">
+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.
 
 ## Section Header
 

content/archive/secondpost/secondpost.md

@@ -2,7 +2,7 @@
 title: This is my second post with a much longer title. I love ellipsis la la la la la la la la la la la.
 description: Republishing my guest post on Ellipsize about leveraging agile frameworks to maximize ellipsization.
 date: 2018-07-04
-hero: elle-balloon-r1-t1-c2.png
+hero: public/img/elle-balloon-r1-t1-c2.png
 heroalt: Close-up of Elle the possum, suspended from a red balloon.
 herocaption: Illustration of Eleventy mascot Elle the possum by Ricky de Laveaga
 herolink: https://www.11ty.dev/blog/logo-homage/

eleventy.config.images.js

@@ -58,7 +58,8 @@ export default function (eleventyConfig) {
 			if (isFullUrl(src)) {
 				input = src;
 			} else {
-				input = relativeToInputPath(this.page.inputPath, src);
+				// input = relativeToInputPath(this.page.inputPath, src);
+				return;
 			}
 
 			let metadata = await eleventyImage(input, {

eleventy.config.js

@@ -28,17 +28,18 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPlugin(pluginDrafts);
 	eleventyConfig.addPlugin(pluginImages);
 
+
 	// Official plugins
+	eleventyConfig.addPlugin(IdAttributePlugin);
 	eleventyConfig.addPlugin(pluginWebc, {
 		components: [
 			"./_components/**/*.webc",
-			// "npm:@11ty/eleventy-img/*.webc",
+			"npm:@11ty/eleventy-img/*.webc",
 		],
 	});
 	eleventyConfig.addPlugin(EleventyRenderPlugin);
 
 	eleventyConfig.addPlugin(pluginRss);
-	eleventyConfig.addPlugin(IdAttributePlugin);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
 		preAttributes: { tabindex: 0 },
 	});
@@ -142,13 +143,13 @@ export default async function(eleventyConfig) {
 	return {
 		// Control which files Eleventy will process
 		// e.g.: *.md, *.njk, *.html, *.liquid
-		templateFormats: ["md", "njk", "html", "liquid"],
+		templateFormats: ["md", "njk", "webc", "html", "liquid"],
 
 		// Pre-process *.md files with: (default: `liquid`)
 		markdownTemplateEngine: "njk",
 
 		// Pre-process *.html files with: (default: `liquid`)
-		htmlTemplateEngine: "njk",
+		htmlTemplateEngine: "webc",
 
 		// These are all optional:
 		dir: {