From 02c3b3180eb91ee25c5f9fecb26a5a58aa81da9c Mon Sep 17 00:00:00 2001 From: Ricky de Laveaga Date: Mon, 22 Jul 2024 23:41:03 -0700 Subject: [PATCH] WIP post.njk to webc conversion, log collison template bugs _components/html/h2.webc: `console.log(slots.text.default);` See https://github.com/11ty/webc/issues/151 for more on collisions --- _components/html/h2.webc | 22 ++++--- _components/html/h3.webc | 11 ++-- _components/html/h4.webc | 11 ++-- _components/html/heading.css | 1 - _components/visually-hidden.webc | 12 ++++ _includes/layouts/post.webc | 58 ++++++++++++++++++ _includes/layouts/test.webc | 18 ++++++ _includes/postslist.njk | 4 +- content/archive/archive.11tydata.js | 2 +- content/archive/fourthpost/fourthpost.md | 7 +-- content/archive/secondpost/secondpost.md | 2 +- eleventy.config.images.js | 3 +- eleventy.config.js | 9 +-- .../img}/elle-balloon-r1-t1-c2.png | Bin .../img}/elle-balloon-r1-t1-c4.png | Bin 15 files changed, 125 insertions(+), 35 deletions(-) create mode 100644 _components/visually-hidden.webc create mode 100644 _includes/layouts/post.webc create mode 100644 _includes/layouts/test.webc rename {content/archive/secondpost => public/img}/elle-balloon-r1-t1-c2.png (100%) rename {content/archive/fourthpost => public/img}/elle-balloon-r1-t1-c4.png (100%) diff --git a/_components/html/h2.webc b/_components/html/h2.webc index b38428b..20ccdea 100644 --- a/_components/html/h2.webc +++ b/_components/html/h2.webc @@ -1,8 +1,16 @@ - \ No newline at end of file + +

+ + +

\ No newline at end of file diff --git a/_components/html/h3.webc b/_components/html/h3.webc index 93466b4..bb389eb 100644 --- a/_components/html/h3.webc +++ b/_components/html/h3.webc @@ -1,8 +1,5 @@ - \ No newline at end of file +

+ + +

\ No newline at end of file diff --git a/_components/html/h4.webc b/_components/html/h4.webc index 86f72b1..6f4c2fa 100644 --- a/_components/html/h4.webc +++ b/_components/html/h4.webc @@ -1,8 +1,5 @@ - \ No newline at end of file +

+ + +

\ No newline at end of file diff --git a/_components/html/heading.css b/_components/html/heading.css index 3ad324a..dde2eef 100644 --- a/_components/html/heading.css +++ b/_components/html/heading.css @@ -1,5 +1,4 @@ .heading-link { - font-size: 1.125rem; /* 18px /16 */ text-decoration: none; padding: .1em .2em .1em 0; } diff --git a/_components/visually-hidden.webc b/_components/visually-hidden.webc new file mode 100644 index 0000000..6c98049 --- /dev/null +++ b/_components/visually-hidden.webc @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/_includes/layouts/post.webc b/_includes/layouts/post.webc new file mode 100644 index 0000000..1ffae12 --- /dev/null +++ b/_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); +--- + +
+ + + + + +
+ + + +
+ +
+

+ + + +
+ + + + + + diff --git a/_includes/layouts/test.webc b/_includes/layouts/test.webc new file mode 100644 index 0000000..008b8e5 --- /dev/null +++ b/_includes/layouts/test.webc @@ -0,0 +1,18 @@ +---node +const layout = "layouts/base.njk"; +--- +
+
+ + + +
+
+
+

+ + + +
\ No newline at end of file diff --git a/_includes/postslist.njk b/_includes/postslist.njk index fe2c498..afed6c2 100644 --- a/_includes/postslist.njk +++ b/_includes/postslist.njk @@ -3,11 +3,11 @@
  • {%- if post.data.hero and post.data.heroalt %}
    - {%- 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 %} #}
    {%- endif %}
    diff --git a/content/archive/archive.11tydata.js b/content/archive/archive.11tydata.js index abf8730..86d3145 100644 --- a/content/archive/archive.11tydata.js +++ b/content/archive/archive.11tydata.js @@ -1,6 +1,6 @@ let data = { tags: ["posts"], - layout: "layouts/post.njk", + layout: "layouts/test.webc", }; export default data; \ No newline at end of file diff --git a/content/archive/fourthpost/fourthpost.md b/content/archive/fourthpost/fourthpost.md index 755f46c..a95525d 100644 --- a/content/archive/fourthpost/fourthpost.md +++ b/content/archive/fourthpost/fourthpost.md @@ -1,9 +1,8 @@ --- -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/ @@ -11,9 +10,9 @@ 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. +A possum parent and two possum kids hanging from the iconic red balloon -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 diff --git a/content/archive/secondpost/secondpost.md b/content/archive/secondpost/secondpost.md index bc92a5d..2d75377 100644 --- a/content/archive/secondpost/secondpost.md +++ b/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/ diff --git a/eleventy.config.images.js b/eleventy.config.images.js index 932c7a7..b3c1ccc 100644 --- a/eleventy.config.images.js +++ b/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, { diff --git a/eleventy.config.js b/eleventy.config.js index fa2cda2..db15af4 100644 --- a/eleventy.config.js +++ b/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: { diff --git a/content/archive/secondpost/elle-balloon-r1-t1-c2.png b/public/img/elle-balloon-r1-t1-c2.png similarity index 100% rename from content/archive/secondpost/elle-balloon-r1-t1-c2.png rename to public/img/elle-balloon-r1-t1-c2.png diff --git a/content/archive/fourthpost/elle-balloon-r1-t1-c4.png b/public/img/elle-balloon-r1-t1-c4.png similarity index 100% rename from content/archive/fourthpost/elle-balloon-r1-t1-c4.png rename to public/img/elle-balloon-r1-t1-c4.png