Status commit

_includes/components/infobox.webc

@@ -0,0 +1,24 @@
+<div class="infobox">
+  <slot></slot>
+</div>
+
+<style>
+/* Infobox */
+:root {
+  --color-infobox: #ffc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-infobox: #082840;
+  }
+}
+
+.infobox {
+  background-color: var(--color-infobox);
+  color: var(--color-gray-90);
+  padding: 1em 0.625em; /* 16px 10px /16 */
+}
+.infobox ol:only-child {
+  margin: 0;
+}
+</style>

_includes/components/syntax-highlight/syntax-highlight.webc

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="../../../node_modules/prismjs/themes/prism-okaidia.css">
+<link rel="stylesheet" href="./prism-diff.css">
+```<template @html="this.syntax || ''" webc:nokeep></template>
+<slot></slot>
+```

_includes/layouts/base.njk

@@ -9,9 +9,11 @@
     {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
     {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
-    <link rel="stylesheet" href="/css/prism-theme.css">
-    <link rel="stylesheet" href="/css/prism-diff.css">
     <link rel="stylesheet" href="/css/index.css">
+    <style>
+    {{ page.url | webcGetCss | safe }}
+    </style>
+
     <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
 
@@ -36,18 +38,6 @@
     </header>
 
     <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
-
-      <!-- Delete this message -->
-      <div class="infobox">
-        <ol>
-          <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
-          <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
-          <li>Delete this message from <code>_includes/layouts/base.njk</code>.</li>
-        </ol>
-        <p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
-      </div>
-      <!-- Stop deleting -->
-
       {{ content | safe }}
     </main>
 

_includes/layouts/home.njk

@@ -1,5 +0,0 @@
----
-layout: layouts/base.njk
-templateClass: tmpl-home
----
-{{ content | safe }}

_includes/layouts/home.webc

@@ -0,0 +1,16 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-home
+---
+<!-- Delete this message -->
+<infobox>
+  <ol>
+    <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
+    <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>
+    <li>Delete this message from <code>_includes/layouts/home.webc</code>.</li>
+  </ol>
+  <p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
+</infobox>
+<!-- Stop deleting -->
+
+<template @raw="content" webc:nokeep></template>

eleventy.config.js

@@ -1,10 +1,17 @@
 const { DateTime } = require("luxon");
 const rosetta = require("rosetta");
 const markdownItAnchor = require("markdown-it-anchor");
+
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
-const { EleventyI18nPlugin, EleventyHtmlBasePlugin } = require("@11ty/eleventy");
+const pluginWebc = require("@11ty/eleventy-plugin-webc");
+
+const {
+  EleventyRenderPlugin,
+  EleventyI18nPlugin,
+  EleventyHtmlBasePlugin
+} = require("@11ty/eleventy");
 
 const languageStrings = require("./i18n.js");
 
@@ -15,7 +22,6 @@ module.exports = function(eleventyConfig) {
   // For example, `./public/css/` ends up in `_site/css/`
   eleventyConfig.addPassthroughCopy({
     "./public/": "/",
-    "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-theme.css",
   });
 
   // Add plugins
@@ -23,6 +29,11 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+  eleventyConfig.addPlugin(EleventyRenderPlugin);
+
+  eleventyConfig.addPlugin(pluginWebc, {
+    components: "./_includes/components/**/*.webc"
+  });
 
   eleventyConfig.addPlugin(EleventyI18nPlugin, {
     defaultLanguage: "en",

en/404.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/home.njk
+layout: layouts/home.webc
 permalink: 404.html
 eleventyExcludeFromCollections: true
 ---
@@ -7,11 +7,13 @@ eleventyExcludeFromCollections: true
 
 Go <a href="/">home</a>.
 
-{#
+<!--
+
 Read more: https://www.11ty.dev/docs/quicktips/not-found/
 
 This will work for both GitHub pages and Netlify:
 
 * https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
 * https://www.netlify.com/docs/redirects/#custom-404
-#}
+
+-->

en/about/index.md

@@ -6,6 +6,6 @@ eleventyNavigation:
   key: nav.about
   order: 3
 ---
-# {{ title }}
+# <span @html="this.title" webc:nokeep></span>
 
 I am a person that writes stuff.

en/blog.njk

@@ -1,5 +1,5 @@
 ---
-layout: layouts/home.njk
+layout: layouts/home.webc
 eleventyNavigation:
   key: nav.archive
   order: 2

en/blog/blog.json

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

en/blog/firstpost.md

@@ -4,17 +4,18 @@ description: This is a post on My Blog about agile frameworks.
 date: 2018-05-01
 tags:
   - another tag
-layout: layouts/post.njk
 ---
 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.
 
+{{ "/" | locale_url }}
+
 ## Section Header
 
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
 
-```diff-js
+<script webc:is="syntax-highlight" @syntax="diff-js">
  // this is a command
  function myCommand() {
 +  let counter = 0;
@@ -24,4 +25,4 @@ Capitalize on low hanging fruit to identify a ballpark value added activity to b
 
  // Test with a line break above this line.
  console.log('Test');
-```
+</script>

en/blog/fourthpost.md

@@ -3,7 +3,6 @@ title: This is my fourth post.
 description: This is a post on My Blog about touchpoints and circling wagons.
 date: 2018-09-30
 tags: second tag
-layout: layouts/post.njk
 ---
 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.
 

en/blog/secondpost.md

@@ -4,7 +4,6 @@ description: This is a post on My Blog about leveraging agile frameworks.
 date: 2018-07-04
 tags:
   - number 2
-layout: layouts/post.njk
 ---
 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.
 

en/blog/thirdpost.md

@@ -5,11 +5,10 @@ date: 2018-08-24
 tags:
   - second tag
   - posts with two tags
-layout: layouts/post.njk
 ---
 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.
 
-```js
+<script webc:is="syntax-highlight" @syntax="js">
 // this is a command
 function myCommand() {
 	let counter = 0;
@@ -18,7 +17,7 @@ function myCommand() {
 
 // Test with a line break above this line.
 console.log('Test');
-```
+</script>
 
 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.
 

en/index.njk

@@ -1,5 +1,5 @@
 ---
-layout: layouts/home.njk
+layout: layouts/home.webc
 eleventyNavigation:
   key: i18n.nav.home
   order: 1

en/tags-list.njk

@@ -1,6 +1,6 @@
 ---
 permalink: /tags/
-layout: layouts/home.njk
+layout: layouts/home.webc
 ---
 <h1>Tags</h1>
 

en/tags.njk

@@ -9,7 +9,7 @@ pagination:
     - posts
     - tagList
   addAllPagesToCollections: true
-layout: layouts/home.njk
+layout: layouts/home.webc
 eleventyComputed:
   title: Tagged “{{ tag }}”
 permalink: /tags/{{ tag | slugify }}/

package.json

@@ -27,12 +27,13 @@
   },
   "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0-canary.15",
+    "@11ty/eleventy": "^2.0.0-beta.1",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
-    "luxon": "^3.0.1",
+    "@11ty/eleventy-plugin-webc": "^0.8.1",
-    "markdown-it-anchor": "^8.6.4",
+    "luxon": "^3.2.1",
+    "markdown-it-anchor": "^8.6.6",
     "rosetta": "^1.1.0"
   }
 }

public/css/index.css

@@ -227,25 +227,6 @@ header {
   margin-right: 1em;
 }
 
-/* Infobox */
-:root {
-  --color-infobox: #ffc;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-infobox: #082840;
-  }
-}
-
-.infobox {
-  background-color: var(--color-infobox);
-  color: var(--color-gray-90);
-  padding: 1em 0.625em; /* 16px 10px /16 */
-}
-.infobox ol:only-child {
-  margin: 0;
-}
-
 /* Direct Links / Markdown Headers */
 .direct-link {
   font-family: sans-serif;