{"_id":"@11tyrocks/eleventy-plugin-open-in-codepen","_rev":"1-370a6fb919fb1d5482005cbc23778a01","name":"@11tyrocks/eleventy-plugin-open-in-codepen","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@11tyrocks/eleventy-plugin-open-in-codepen","version":"1.0.0","description":"An Eleventy shortcode to add \"Open in CodePen\" functionality for code demos.","homepage":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen#readme","main":".eleventy.js","scripts":{"start":"eleventy --serve","build":"eleventy","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/eleventy-plugin-open-in-codepen.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"author":{"name":"5t3ph","url":"https://11ty.rocks"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen/issues"},"devDependencies":{"@11ty/eleventy":"^0.12.1"},"gitHead":"716b02c8689054b85280f0c00baa0adb69f8fed4","_id":"@11tyrocks/eleventy-plugin-open-in-codepen@1.0.0","_nodeVersion":"12.19.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-MyG5+w5sHsB8Oq9BmXiZFDnewwaqcaaXSmr7TQcO4PL+9kbceferFwD30qsyQs1LXGU4AetnRDyc4Uzm4Ps1qg==","shasum":"c26e9c6c36c1004ee896818a63bacd9a9bd87a81","tarball":"https://registry.npmjs.org/@11tyrocks/eleventy-plugin-open-in-codepen/-/eleventy-plugin-open-in-codepen-1.0.0.tgz","fileCount":3,"unpackedSize":7109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ+GtCRA9TVsSAnZWagAAFU4P/A4EAI4R8pfJbMZyy7tl\nsXXzWPTFssNLqxZrc/85YnALd+HdW16XcKZnDmyuhhePzh0T6f/a9mlf3/Ai\nInFrr5W24xLjMgnc2Yh9o6mejaysz+CWl6PAZVVWmMT4SkJBQ4MWGQCtjlaf\njyxrPi9ZLrzW1RILNIAQ70d6kp6a7VfYp05GkcuGdLiCYhHwKyAZiGCoL4sT\nWqKj08aJaKa6CE8J7Lds4og4okaQvxmqP+KmTNpG1ZAsYCtf9LjJVasfy+ZN\nS+hfo8AOYh7Ai422h1sl3lPgcgsDbyFwX3yOeYzRaCMzurYLE9qAjLrNHlKh\nZhwGVaEvS5z/x1ipwQZYtSGjipINFYnfQrpqRoMylcotyMkLyXuDivNvSPCz\n8YdG9HdRZYySn5QBX5ddLSHgDl/KkWX18+Ouq1fW5ncx1QBqD3ZuFtqk6z9f\n7V5JPfzzi1I3NtHA2eIb+xgSacEMnF1230CSk6sZyh9mv0W1BVDcsr9UNHhs\nrY6DoqWTLnLHjWNZsweIwq9MG4xOhBBBat69uCUPVbgp5bR9RZkucOD5Apuo\noWK2igOMCzezXINbiICr+oOqEJ/TdIgJrFHDJKsuIY0QCX3bjHchPE+TGrTM\npLQqj743J61g7O4D6Sd+6ies9kOwSBax346CGXJuOUxivCH/vAK1LmFz0u8A\nGuXQ\r\n=fAfV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAriFu5EmdusL9bYEeUYA55I/wCVfYMxk0FX/8KpqCLAiEA7fKNcBep+/Va/gZdKyxucnVn+Ay2qbsg0kKu4e0BS9Q="}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-open-in-codepen_1.0.0_1617420716693_0.06777548228942609"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-03T03:31:56.441Z","1.0.0":"2021-04-03T03:31:56.852Z","modified":"2022-04-04T10:30:53.084Z"},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"description":"An Eleventy shortcode to add \"Open in CodePen\" functionality for code demos.","homepage":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen#readme","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"repository":{"type":"git","url":"git+https://github.com/5t3ph/eleventy-plugin-open-in-codepen.git"},"author":{"name":"5t3ph","url":"https://11ty.rocks"},"bugs":{"url":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen/issues"},"license":"ISC","readme":"## Eleventy Plugin: \"Open in Codepen\"\n\n> An Eleventy shortcode to add \"Open in CodePen\" functionality for code demos.\n\n## Usage\n\nFirst, install the package:\n\n```bash\nnpm install @11tyrocks/eleventy-plugin-open-in-codepen\n```\n\nThen, include it in your `.eleventy.js` config file:\n\n```js\nconst openInCodepen = require(\"@11tyrocks/eleventy-plugin-open-in-codepen\");\n\nmodule.exports = (eleventyConfig) => {\n  eleventyConfig.addPlugin(openInCodepen);\n};\n```\n\nTo use the shortcode, pass the expected properties inclusive of a `title`, `slug`, `css`, and `html`.\n\nWithin the context of a template, the `slug` is equivalent to the Eleventy provided `page.url` variable.\n\nYou can use the templating language abilities to set the variabls for `css` and `html`. For example `{% set css %}[CSS code]{% endset %}` for Nunjucks.\n\n```js\n{% postToCodepen \"Pen Title\", page.url, css, html %}\n```\n\n> **For an extended example** that includes how you might go about setting up the required demo data, review this [11ty Rocks tutorial](/posts/eleventy-templating-static-code-demos/).\n\n## Config Options\n\n| Option          | Type   | Default                      |\n| --------------- | ------ | ---------------------------- |\n| siteUrl         | string | https://codesampledomain.dev |\n| siteTitle       | string | Example Site                 |\n| siteTag         | string | codesampledomain             |\n| buttonText      | string | Open in CodePen              |\n| buttonClass     | string | open-in-codepen-button       |\n| buttonIconClass | string | open-in-codepen-icon         |\n| preDemoCSS      | string | _see below_                  |\n\nThe default `preDemoCSS` is a reduced sample from Andy Bell's [Modern CSS reset](https://piccalil.li/blog/a-modern-css-reset):\n\n```css\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np {\n  margin: 0;\n}\n\n/* Set core body defaults */\nbody {\n  min-height: 100vh;\n  text-rendering: optimizeSpeed;\n  line-height: 1.5;\n  font-family: system-ui, sans-serif;\n}\n\n/* Make images easier to work with */\nimg {\n  display: block;\n  max-width: 100%;\n}\n```\n\n## Config Example\n\nHere's an example of adding the plugin with config options set:\n\n```js\neleventyConfig.addPlugin(openInCodepen, {\n  siteUrl: \"YourSite.dev\",\n  siteTitle: \"Your Site\",\n  siteTag: \"yoursite\",\n  buttonClass: \"your-button-class\",\n  buttonIconClass: \"your-button-icon-class\",\n});\n```\n","readmeFilename":"README.md"}