Webc example component

.eleventy.js

@@ -228,6 +228,5 @@ module.exports = function (eleventyConfig) {
       layouts: 'assets/views/layouts',
       data: 'data',
     },
-    templateFormats: ['njk', 'md', '11ty.js'],
   };
 };

package.json

@@ -24,8 +24,9 @@
     "last 2 versions"
   ],
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.0-canary.13",
+    "@11ty/eleventy": "^2.0.0-canary.16",
     "@11ty/eleventy-img": "^2.0.1",
+    "@11ty/eleventy-plugin-webc": "^0.4.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",

src/assets/styles/_branding.scss

@@ -6,6 +6,8 @@
   --color-background: white;
   --color-light: silver;
   --color-primary: #7950f2;
+  --gradientStart: #7950f2;
+  --gradientEnd: #f783ac;
 
   @media (prefers-color-scheme: dark) {
     --color-text: #fff;

src/assets/views/components/fancy-rule.webc

@@ -0,0 +1,19 @@
+<hr>
+
+<style>
+  fancy-rule > hr {
+    --gradientStart: #7950f2;
+    --gradientEnd: #f783ac;
+    --gradient: linear-gradient(45deg, var(--gradientStart) 10%, var(--gradientEnd) 90%);
+    --unit: 1rem;
+
+    border: 0;
+    height: 2px;
+    background-image: var(--gradient);
+    border-radius: var(--unit);
+    transform: rotate(-1.5deg);
+    text-align: center;
+    margin-top: calc(var(--unit) * 2);
+    margin-bottom: calc(var(--unit) * 2);
+  }
+</style>

src/assets/views/layouts/base.njk

@@ -7,6 +7,11 @@
     {# Page Title #}
     <title>{{ title | safe }}</title>
 
+    {% renderTemplate "webc" %}
+      <style @html="this.getCSS(this.page.url)"></style>
+		  <script @html="this.getJS(this.page.url)"></script>
+    {% endrenderTemplate %}
+
     {# Stylesheet #}
     <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | url }}"/>
 

src/config/plugins.js

@@ -16,6 +16,27 @@ module.exports = {
     eleventyConfig.addPlugin(plugin);
   },
 
+
+  /**
+   * Render plugin
+   */
+  render: function (eleventyConfig) {
+    let { EleventyRenderPlugin } = require("@11ty/eleventy");
+    eleventyConfig.addPlugin(EleventyRenderPlugin);
+  },
+
+
+  /**
+   * WebC plugin
+   */
+  webc: function (eleventyConfig) {
+    let plugin = require("@11ty/eleventy-plugin-webc");
+    eleventyConfig.addPlugin(plugin, {
+      components: "src/assets/views/components/**/*.webc",
+    });
+  },
+
+
   /**
    * Rollup plugin to bundle JavaScript
    * https://github.com/Snapstromegon/eleventy-plugin-rollup

src/content/pages/index.njk

@@ -10,7 +10,11 @@ title: Up to zero! 🪐
   <li>Change colors and styles: <code>src/assets/styles/</code></li>
 </ul>
 
-<hr>
+{% renderTemplate "webc" %}
+
+<fancy-rule></fancy-rule>
+
+{% endrenderTemplate %}
 
 <figure>
   {% image "/assets/images/favicon.svg", "ZeroPoint Favicon" %}