├── .gitignore
├── netlify.toml
├── eleventy.config.js
├── _includes
└── layout.webc
├── index.webc
├── README.md
├── package.json
└── _components
└── my-counter.webc
/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | node_modules
3 | package-lock.json
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | publish = "_site"
3 | command = "npm run build"
4 |
--------------------------------------------------------------------------------
/eleventy.config.js:
--------------------------------------------------------------------------------
1 | const pluginWebc = require("@11ty/eleventy-plugin-webc");
2 |
3 | module.exports = function(eleventyConfig) {
4 | eleventyConfig.ignores.add("*.md");
5 |
6 | eleventyConfig.addPlugin(pluginWebc);
7 |
8 | eleventyConfig.setServerOptions({
9 | domDiff: false
10 | });
11 | };
--------------------------------------------------------------------------------
/_includes/layout.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Eleventy WebC Number Counter Demo
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/index.webc:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layout.webc
3 | ---
4 | Eleventy WebC Number Counter Demo
5 |
6 |
14 |
15 |
16 | See this [code on GitHub](https://github.com/11ty/demo-webc-counter).
17 |
18 | _This was originally a demo for a talk given at the [Eleventy Meetup: Adding Components to WebC with Eleventy](https://www.zachleat.com/web/webc-in-eleventy/)._
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Eleventy WebC Number Counter Demo
2 |
3 | A progressively enhanced server-rendered form-aware web component counter using WebC.
4 |
5 | This enhances from an `` to a JS-enhanced `` Web Component Custom Element so that number input still works before JS or in a JS-broken environment.
6 |
7 | * [Live demo on Netlify](https://demo-webc-counter.netlify.app/)
8 | * [Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/demo-webc-counter)
9 | * Using [`@11ty/eleventy-plugin-webc`](https://www.11ty.dev/docs/languages/webc/)
10 | * Originally a demo for a talk given at the [Eleventy Meetup: Adding Components to WebC with Eleventy](https://www.zachleat.com/web/webc-in-eleventy/)
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@11ty/demo-webc-counter",
3 | "version": "1.0.0",
4 | "description": "",
5 | "scripts": {
6 | "build": "npx @11ty/eleventy",
7 | "start": "npx @11ty/eleventy --serve --incremental"
8 | },
9 | "engines": {
10 | "node": ">=18"
11 | },
12 | "funding": {
13 | "type": "opencollective",
14 | "url": "https://opencollective.com/11ty"
15 | },
16 | "author": {
17 | "name": "Zach Leatherman",
18 | "email": "zachleatherman@gmail.com",
19 | "url": "https://zachleat.com/"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git://github.com/11ty/demo-webc-counter.git"
24 | },
25 | "bugs": "https://github.com/11ty/demo-webc-counter/issues",
26 | "license": "MIT",
27 | "dependencies": {
28 | "@11ty/eleventy": "^3.1.2",
29 | "@11ty/eleventy-plugin-webc": "^0.12.0-beta.6"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/_components/my-counter.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
20 |
21 |
--------------------------------------------------------------------------------