{"_id":"11ty-css-houdini-worklet-generator","_rev":"4-a9994b8c9f2867eed749d1964faaa484","name":"11ty-css-houdini-worklet-generator","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"11ty-css-houdini-worklet-generator","version":"0.1.0","description":"An Eleventy environment for creating CSS Houdini worklets.","main":"worklet.js","scripts":{"start":"eleventy --serve","build":"eleventy","publish:npm":"npm publish","publish":"npm-run-all eleventy publish:npm"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/11ty-css-houdini.git"},"keywords":["css","houdini","eleventy","11ty"],"author":{"name":"5t3ph"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/11ty-css-houdini/issues"},"homepage":"https://github.com/5t3ph/11ty-css-houdini#readme","devDependencies":{"@11ty/eleventy":"^0.11.1","npm-run-all":"^4.1.5"},"_id":"11ty-css-houdini-worklet-generator@0.1.0","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-nE8HN0bY5lYz5Co1jjgYMGa1FQK8esxTxP+Z3NMpLozzwZWQPMWrb2Fxy9zs+OCvjrTgJvJCul2sAe/SSg07rg==","shasum":"44769d2e328b2c8e5934050627ca9ab0d66071b9","tarball":"https://registry.npmjs.org/11ty-css-houdini-worklet-generator/-/11ty-css-houdini-worklet-generator-0.1.0.tgz","fileCount":3,"unpackedSize":1925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2MjwCRA9TVsSAnZWagAAFQwP/216vDGVtz/td0ySaxjl\nt7l7WilODWzS2JRND0DehKy5Vf14ZKvTYSYW67vNTytjVydJGzKV5noWQMze\nngm9gVFfpoOWgdxOBAs1Q4dLqH0awmBrlkqFNlJmpw9954YtYWIzTSkm6tSD\nh4JZG/ksIBss/FYsdeSOKdXocU6vPAM5tVEKSHcH8DcOCMwkN4HqnkKHNXFh\nefC3Q5PlxYPjDMVMMq6R4ry6AP29v9TJ5GNkgWNJBcpWoif/X1ArXd4qUWfb\nYcybLSvdXYkcDvqnPtDT2+P4nZ6SpdcXAPOgc1EcbcrLLtkv3+rQqerqw/jV\n3WQHMK3TFKiSe+57JgWQViPw053dfZOxalOFTrG102TqwUiBaJpRTWdlMVkF\nHfi3DtkLq2P6qN+aNYGIN1zxxqiStqGZ+6eu00VQ8jvtTwuTreo7VoiY2cDL\n9vo3rB7L/EHVcjcmecbVjEO9nG1HiGkYS/I1ynyI4x1cHnAC+tILDMH9nXTc\n3GEKLfjcucBVxMSiGSkW2rObGTtYWEt01l+hGtfK2hQvtl72NImriLFejH9J\nRUUARQDfqzHizdQ3okiTutf+12hIZs/8HwiQ2njpvcMLOg1fQ9Lbk2vGnvrV\n6JNjkAhsjfi1qcQ7SZdLbkPyKK7a4fBnduWsrj1nvymOzMrNeShE5Gbf8UNp\nDND3\r\n=CB1z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoGUZk5wULbYilEbas3wqqn9sZsMeT03+V7dTY5cAWqQIgVhnlnKxwkd97i9guRy86QxomwadASP1xrBGU9MVNNG4="}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/11ty-css-houdini-worklet-generator_0.1.0_1608042735463_0.5608189988534125"},"_hasShrinkwrap":false},"0.1.1":{"name":"11ty-css-houdini-worklet-generator","version":"0.1.1","description":"An Eleventy environment for creating CSS Houdini worklets.","main":"dist/worklet.js","scripts":{"start":"eleventy --serve","prepublish":"eleventy","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/11ty-css-houdini.git"},"keywords":["css","houdini","eleventy","11ty"],"author":{"name":"5t3ph"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/11ty-css-houdini/issues"},"homepage":"https://github.com/5t3ph/11ty-css-houdini#readme","devDependencies":{"@11ty/eleventy":"^0.11.1","npm-run-all":"^4.1.5"},"_id":"11ty-css-houdini-worklet-generator@0.1.1","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-eNuoO+TB9QjuCcTRyZCg8vf47CtFFWCbop2HiCia6nhfkfAD1MbagcaAZWk0TjsxZqSNtK8WWlL/C0i7L4evUw==","shasum":"0d17f1118029adff5f79335ade7447a45fecdcbf","tarball":"https://registry.npmjs.org/11ty-css-houdini-worklet-generator/-/11ty-css-houdini-worklet-generator-0.1.1.tgz","fileCount":3,"unpackedSize":1875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2MubCRA9TVsSAnZWagAA++AQAISRo+rxvP6/l5T4NNUM\nVLg8PjHbok5vOYHDhj3Q5U0lS5iJWhvLc7N1UH3iqgMHu44eV8IWz4uSVtpC\newxBIxdjB02VU0UJtNjuZVj8on01ed02+8rS3VrOGknqLgCVowFNf8Q2n4s5\nrn0id13w/ivomvgEDXxG+JhWjzisRQIt0kh9FIs0w5pfsvCIW5hE+1vCLDvx\nn9YDbvOTDZk1vKazlJ+lbka3ifCKhDHiQyS9DeJHPHwtALJYrRN0SlfBoCFq\nVhGGJDFLcMPMH1R2N/Ebpqi0wHjrYQOp+MOKuSu0O9koc4mEf1Ad+nrCTcgy\n5ASxkiKjdQwoGQ+gpcZpSNCWgPK8JcSkYmKqSgy0S8ktF2PORcERbnxIWcwR\n+5aW+Y82iQjvTyshkPFBQbtoNITQOYzSHTzyk8R+3yREu0yReAFnFtFtSFW4\nqOd3kfwVp9vJ4urxH04cUWEAVC3B4WEef1GxlZG0zOyTgHtmYHMQ/8w0ZOws\npyJezp2mThwGS16ZF2kGFTrmu3wCckG4Oy69ApaUHIPoiD+GhpRowgCEiRFV\nnwINnx+xgyh50A2aZZn46u7YS8s+uAbfQ3LDrLs60KNAWYChOXalh5HPteVP\neHK1Na3zW9QUfQ1uQj7/261C54hWOfOHQ6gUQANAwmANZvczI5F84RlGXPmf\niDPK\r\n=IgwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKZbislQPfO2hQVd1JEcnI+RN05XAxkFt7i1kRFDW7fQIgGIrGf8ynObvKYF8g9FcYhnMbJUjI0lyzpffbza7BGKU="}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/11ty-css-houdini-worklet-generator_0.1.1_1608043419377_0.3348895049933789"},"_hasShrinkwrap":false},"0.1.2":{"name":"11ty-css-houdini-worklet-generator","version":"0.1.2","description":"An Eleventy environment for creating CSS Houdini worklets.","main":"dist/worklet.js","scripts":{"start":"eleventy --serve","prepublish":"eleventy","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/11ty-css-houdini.git"},"keywords":["css","houdini","eleventy","11ty"],"author":{"name":"5t3ph"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/11ty-css-houdini/issues"},"homepage":"https://github.com/5t3ph/11ty-css-houdini#readme","devDependencies":{"@11ty/eleventy":"^0.11.1","npm-run-all":"^4.1.5"},"_id":"11ty-css-houdini-worklet-generator@0.1.2","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-YEpN4oEPbIoCRto2pZPTDqreAGz9wgnaaA7gq37xzx9l0mF3wEL8Q5sWspic1oMd4Cy9ZZ4KKzPFqIqJwFBv2Q==","shasum":"b37b4256f981af7465a4347bec49fc15e665b589","tarball":"https://registry.npmjs.org/11ty-css-houdini-worklet-generator/-/11ty-css-houdini-worklet-generator-0.1.2.tgz","fileCount":3,"unpackedSize":4557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2NFnCRA9TVsSAnZWagAAbpEP/0uNLjDeUPhijYkik4uE\nt0aN/uIyCetmw5WHQTLdW57NwH0mCSO/5bUxWlKiEtYrbiXZYMFB+ns86d+L\nB0aBluA31vpt0Hl9g415vzH31oHYjwjpj3pwRdskywRRHvmHiVOxxjL0mlXe\nQQSPxPvFAncYtTSrsfEh3/k2WfXWiW+Wm2jAZqnbX3JN+usx3qwnkG0kVHcd\nTd0pB9Bfzl3mhBl/97tVNKbWlEz0k0uDbp5I2nd0OIyKV8BSGT7MqY1oInUf\n/V7Ue5saR4XwF7V8ADTKJensUAY5TVOIeQg2oSGhgIvXb+ybwA3fvOi2XSPT\nbDt5l3iSR9n5mLmj3Ra2oKwG3t7jtDiU4LpaM42rOZAdc0A4cbOCgUFSLFwJ\nOrXGjmrFz8qD4Q6JM69u7RAfu/4mP6IhDnjXs/mHfwL6yOU4F4I/eskQuZsn\nZs4c9ovlZK8a1j6dQA/QaIkPSz5DccADn61Wi40nSbDRrQ8sUNB0Qf3V3yeB\nZDGbfgD2b01ZLZKb0+2qtahtLCiNLodetcR6LUix8MSP4r4TcucmLytsY20U\nNU4qrCHk5Tgecww7OaBJm2VzjZF9UiEuTORsj4diXClw82zdbda+8bvXavwM\ns/kvubYll+k+4ZNSetRA5Jfihg8BIv6KvA7y058xrd3xsQy6qAH6hpfSLoL0\nlqKA\r\n=c/2y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC91KJx9XUc7L7wF0AW7ETNZ7CB2VqKqziOKvbmdh4mxAIhAKxkkXB5A7BRFoAYSAm1RExMBMiNFbINU3GgYBvjbiin"}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/11ty-css-houdini-worklet-generator_0.1.2_1608044902630_0.546874548778975"},"_hasShrinkwrap":false},"0.2.0":{"name":"11ty-css-houdini-worklet-generator","version":"0.2.0","description":"An Eleventy environment for creating CSS Houdini worklets.","main":"dist/worklet.js","scripts":{"start":"eleventy --serve","prepublish":"eleventy","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/11ty-css-houdini.git"},"keywords":["css","houdini","eleventy","11ty"],"author":{"name":"5t3ph"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/11ty-css-houdini/issues"},"homepage":"https://github.com/5t3ph/11ty-css-houdini#readme","devDependencies":{"@11ty/eleventy":"^0.12.1","npm-run-all":"^4.1.5"},"gitHead":"09a8bedbb7d338cb61e97db3c9758066466f2473","_id":"11ty-css-houdini-worklet-generator@0.2.0","_nodeVersion":"16.7.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-otlZ5q5Sy67KD9qOi3Dtk9GaHRjS+4vtgG8SGd3/KvgKZF4bgImaN9mwSjV7rtxRnYMI42tahmnHEGVqcpHzqw==","shasum":"811762e3e84499c2b278d328673adc1a0eadd437","tarball":"https://registry.npmjs.org/11ty-css-houdini-worklet-generator/-/11ty-css-houdini-worklet-generator-0.2.0.tgz","fileCount":3,"unpackedSize":4548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtiU9CRA9TVsSAnZWagAAJncQAJGANktXQb7ueXH4qOkn\nVNncTvdtVdWIuu69seipeCezBuEmk4am5tZdOBLSLQYiOHTFyy9H2Yz/XDIm\nF3bvF3fb27FxQUUuBRP+x2qv2IMceSOfwEydhx5I8D8ojyG4tuTsu5bnFIRQ\nUjGPbPBz0ryTT3IFySpbHw77meTBL3jpqjKklP2w3SdBGGiH4HIL3fm5BQHP\nR/DIIjIU43JG39ew/jZF6oVojqKZx+9BSrxGDO6KU4+/4o+2vvJkNrZZuPy1\n/HFdy/pD8X4iVeq6Il2JGt4siE/StHZ+4FyrTIehdCQMcoElbTxpES2AiCrN\n44IUZcvFX4UjiqHm9CnZVtvJ1+Lp2glJuSHQbi0He9yVjk9S0bLpvGpebeoL\nzC647n2vzt9IegY8Uu7vqhSgVquLB6qD51rWYqKFqxMmAXRw8IYe1TkMUNaq\nCW5jWUrBNyS1ksgBzDB4QR1UVzcqo8hxvsy9SQzyMIpJl8dVLmZq3ty7ty7c\nsTSNiPWZa3tQbwoC1I0Y+ZyeIIlbAQLtUAvRfkcDjFuEAauvTP1Pt2+OtwpM\n/JkrMzQfqb4dnCyRW4fvYq/Df4vvd+oFzDMjzkb8sBK4UbkQ1iiMNsCeETa1\nVTOCTX+RNtwGFJvWq+buiOsCQ9J4hHs5MM/C9Xs7xadNjKgs0nZZeoQeS9S9\nCirw\r\n=cCTb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKL1hpL+N0CXs98ffUFmTvbA3vJjO2Y8NSTKOOtt9jpAiEAv/sLN4Puwbn4iJj1ca3h2pmK/gQdO+JK6+BkBCte8oI="}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/11ty-css-houdini-worklet-generator_0.2.0_1639327037375_0.12848283599184263"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-15T14:32:15.463Z","0.1.0":"2020-12-15T14:32:15.598Z","modified":"2022-04-04T10:10:34.279Z","0.1.1":"2020-12-15T14:43:39.529Z","0.1.2":"2020-12-15T15:08:22.776Z","0.2.0":"2021-12-12T16:37:17.605Z"},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"description":"An Eleventy environment for creating CSS Houdini worklets.","homepage":"https://github.com/5t3ph/11ty-css-houdini#readme","keywords":["css","houdini","eleventy","11ty"],"repository":{"type":"git","url":"git+https://github.com/5t3ph/11ty-css-houdini.git"},"author":{"name":"5t3ph"},"bugs":{"url":"https://github.com/5t3ph/11ty-css-houdini/issues"},"license":"ISC","readme":"# 11ty CSS Houdini Worklet Generator\n\n> From Stephanie Eckles [@5t3ph](https://twitter.com/5t3ph) - author of [ModernCSS.dev](https://moderncss.dev) and [11ty.Rocks](https://11ty.rocks).\n\nThis worklet was produced using [Eleventy](https://11ty.dev) as the server environment.\n\n## Worklet Demo\n\nThe very simple worklet that is included in this generator can be viewed in [this CodePen demo](https://codepen.io/5t3ph/pen/NWRpMbv).\n\nThe demo shows how to include the required polyfill and then require the worklet within a script tag, and how to modify it's display attributes via CSS custom properties.\n\n## To Use the Generator\n\nCSS Houdini worklets require a server to run. While there are many ways to create an envirnoment for developing and testing your worklet. As a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet!\n\n**Before you begin** - be sure to update the `package.json` details to your own!\n\n### Project Structure\n\n_The following are all within `src` which is your working directory_\n\n`_includes/base.njk` - a simple HTML5 template that includes the (currently required) polyfill for the CSS Houdini Paint API, as well as the `CSS.paintWorklet.addModule` pointing to the worklet's location on the local server\n\n`css/style.css` - the local server styles, this is where you add your worklet to your test elements\n\n`index.md` - produces the index content, and can be swapped to another one of [11ty's supported templating languages]()\n\n`worklet.js` - the critical file that creates and registers your worklet class\n\n### Development\n\n`npm start` - will run the project locally by launching Eleventy in watch mode and include a localhost server with hot reload provided by Browsersync.\n\n## Publishing / Using Your Worklet\n\nThe recommendation from [Houdini.How](https://houdini.how) is to publish your worklet as an npm package so that it can be imported _and_ used by accessing it on a CDN such as [unpkg](https://unpkg.com).\n\nThis is because of the requirement of running via HTTPS, so unpkg makes it easy to share and include elsewhere such as CodePen.\n\n**To publish via npm**, you will first need to [set up an account](https://www.npmjs.com/signup).\n\nThen within your local project, run `npm publish`.\n\n> The included `prepublish` command will ensure Eleventy has been freshly run to ensure the latest version of your worklet is available.\n\nWithin a few minutes you will see your package added to your npm account, and then it will also be available at `https://unpkg.com/your-package-name`\n\nReview the [CodePen Demo](https://codepen.io/5t3ph/pen/NWRpMbv) to see how to then include it outside of your local project.\n\n### Updating Your Worklet\n\nIf you make changes to your worklet, use the included `bump` command to easily increment your package number, ex: `npm run bump patch`, then proceed to run `npm publish`.\n\nYour changes will be available within a few minutes.\n","readmeFilename":"README.md"}