WebComponentsGuide
diff --git a/‎.eleventy.js‎
Lines changed: 59 additions & 15 deletions b/‎.eleventy.js‎
Lines changed: 59 additions & 15 deletions
diff --git a/‎_includes/main.html‎
Lines changed: 5 additions & 5 deletions b/‎_includes/main.html‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎css/code-interactive.css‎
Lines changed: 3 additions & 0 deletions b/‎css/code-interactive.css‎
Lines changed: 3 additions & 0 deletions
@@ -4,34 +4,78 @@ const headers = require("markdown-it-github-headings")
 const js = require("@jamshop/eleventy-plugin-esbuild")
 const glob = require("glob")
 const path = require("node:path")
-const highlight = require("@11ty/eleventy-plugin-syntaxhighlight")
+const fs = require("node:fs/promises")
 const rss = require("@11ty/eleventy-plugin-rss")
 const dedent = require("dedent")
+const { build } = require("esbuild");
+
+const buildJS = (config = {}) => {
+  return build({
+    minify: process.NODE_ENV === "development" ? false : true,
+    bundle: true,
+    write: true,
+    outdir: '_site/script',
+    ...config,
+  });
+}
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(rss)
   eleventyConfig.addPlugin(css)
-  eleventyConfig.addPlugin(js, {
-    entryPoints: Object.fromEntries(glob.sync("script/*.[tj]s").map((e) => [path.basename(e, path.extname(e)), e])),
-    output: "_site/script",
-  })
-  eleventyConfig.addPlugin(highlight)
+  
+  const entryPoints = glob.sync("script/*.[tj]s")
+  eleventyConfig.addWatchTarget("script/*.[tj]s")
+
+  buildJS({entryPoints})
+  
+  eleventyConfig.on("beforeWatch", (changedFiles) => {
+    // Run me before --watch or --serve re-runs
+    if(entryPoints.some(watchPath => changedFiles.includes(watchPath))) {
+      buildJS({entryPoints})
+    }
+  });
+  
+  // eleventyConfig.addPlugin(js, {
+  //   entryPoints: glob.sync("script/*.[tj]s"),
+  //   outDir: "_site/script",
+  //   esbuild: {
+  //     plugins: [
+  //       {
+  //         name: "css",
+  //         setup: (plugin) => {
+  //           console.log('==================>')
+  //           plugin.onResolve({filter: /^.*\.css$/}, (ctx) => Object.assign(ctx, {namespace: 'css'}))
+  //           plugin.onLoad({filter: /^.*\.css$/, namespace: 'css'}, async (ctx) => {
+  //             let contents = await fs.readFileSync(path.resolve(ctx.resolveDir, ctx.filePath), 'utf8')
+
+  //             contents = `const c = new CSSStyleSheet(); c.replaceSync("${contents}"); export default c;`
+
+  //             return {contents, resolveDir: ctx.resolveDir}
+  //           })
+  //         }
+  //       }
+  //     ],
+  //     minify: false
+  //   }
+  // })
 
   eleventyConfig.addFilter("iso8601", rss.dateToRfc3339)
   eleventyConfig.addFilter("date_to_rfc3339", rss.dateToRfc3339)
   eleventyConfig.addFilter("date_to_rfc822", rss.dateToRfc822)
   eleventyConfig.addFilter("html_to_absolute_urls", rss.convertHtmlToAbsoluteUrls)
   eleventyConfig.addFilter("domain", (str) => new URL(str).hostname)
 
-  eleventyConfig.setLibrary(
-    "md",
-    markdown({
-      html: true,
-      linkify: true,
-    })
-      .use(headers, { prefixHeadingIds: false })
-      .disable("code")
-  )
+  const md = markdown({
+    html: true,
+    linkify: true,
+    highlight: (str, lang) => {
+      return `<pre><code-interactive lang="${lang}">${md.utils.escapeHtml(str)}</code-interactive></pre>`
+    },
+  })
+    .use(headers, { prefixHeadingIds: false })
+    .disable("code")
+
+  eleventyConfig.setLibrary("md", md)
 
   eleventyConfig.addPassthroughCopy("images")
   eleventyConfig.addPassthroughCopy("browserconfig.xml")
 
@@ -35,6 +35,11 @@
     <link rel="stylesheet" href="/css/{{file}}" />
     {% endfor %}
     <link href="/feed.xml" rel="alternate" type="application/atom+xml" title="Web Components Guide Blog" />
+
+    <script type="module" defer src="/script/polyfills.js"></script>
+    {% for file in script %}
+    <script type="module" defer src="/script/{{ file }}"></script>
+    {% endfor %}
   </head>
   <body>
     {% include 'header.html' %} {% include 'navigation.html' %}
@@ -49,10 +54,5 @@
         </ol>
       </nav>
     </footer>
-
-    <script type="module" src="/script/polyfills.js"></script>
-    {% for file in script %}
-    <script type="module" src="/script/{{ file }}"></script>
-    {% endfor %}
   </body>
 </html>
@@ -0,0 +1,3 @@
+:host {
+  background-color: hotpink;
+}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:host {`
	`2`	`+ background-color: hotpink;`
	`3`	`+}`