{"_id":"codepen-link","_rev":"3-258622ae5b4ff5b348fd1ee054fab46c","name":"codepen-link","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.2":{"name":"codepen-link","version":"0.0.2","description":"Stencil Component Starter","main":"dist/index.cjs.js","module":"dist/custom-elements/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/custom-elements/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/codepen-link/codepen-link.js","scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","generate":"stencil generate"},"dependencies":{"@stencil/core":"^2.0.1"},"license":"MIT","devDependencies":{"@stencil/sass":"^1.3.2"},"gitHead":"e3c81d10df57e01d60359dad4ea895c757cf2b6a","_id":"codepen-link@0.0.2","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qasvlUE0jKDYEv8/FPjaEKBfwlouVz/ARdwI8aonCpnwiatYzytr7i5q8M87WdSxK9+h+qXss+bLjZxaDEyVUg==","shasum":"1e68119ab0486462ce91ffafeac21157a17dcba9","tarball":"https://registry.npmjs.org/codepen-link/-/codepen-link-0.0.2.tgz","fileCount":41,"unpackedSize":350195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXgOSCRA9TVsSAnZWagAAYbQP/0ITuJ0UM3290BVvaFpY\nZtwCf4Ui7Sibad88FiDXK9om4OqxYLN8q2dt8xmZzZP7KQoPf7TnI08siLFq\nnmLQpTo95ZDDHjOlhMgRCNkdzBgMYGL+i6UmDtofMolH1nC4fWllSKBZ/6Xo\n9MilSz82kLKwg1tHhC+/8TOWDY4VLaU44pNQI0p8U+ISdk/mQa7mcdQ+fYK2\nEhoTUW0vpLOMxtzZKVesjD3eNnQ/DXg2SM354OGy3X0YpS6pRbbb1p4Gea3Z\nah7aT5bD04srBbBNWBYJiuLQEVX+O2J8S5zWlTXFsVOFGq4lDDYdforwd8IA\ndxqmIBKwgpR5aWUOODSlPpHAquLiEX+uI8iXYQOUqAeLX/1687+zHuvTUEJS\nFtnDTXzOCOieQLpSKCtZCooOI2z2xvCMp+3j4Yn8S+JbOewIvNQZisYZT+G7\nf33CXbssL/6BS9H0AXJtE8ouHriZdlsPphSUI4iSpYtLY3DrlSLyGuBMlv2f\niAjq5XEGhKOE5LRDA3/BQb/mRWv3vrdTvaaGxEm371kfeMBWiBSFJsNiAsvn\naX/nm4LAd2MtvireBBd7gA7hdVZ5sN28epv83NU9o/y06v2pUv0sagpxT0qT\n4T/10l+mZyfZ9GQhurzhnJXKIeZGcMBl6kLmeuD6bT6pGye8iWKMkFkFTL3h\nik8O\r\n=ZHvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4xnscYZSwV5CYOJZuNVKrCOQIkqfnqWtkCUPUNfsoLAiAorxsAGIFWeX57vWYkf2dmg9FMMy8Q+LpeUBcChlnAdA=="}]},"maintainers":[{"name":"seanwuapps","email":"seanwuapps@gmail.com"}],"_npmUser":{"name":"seanwuapps","email":"seanwuapps@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codepen-link_0.0.2_1599996818405_0.8783201322494152"},"_hasShrinkwrap":false},"1.0.0":{"name":"codepen-link","version":"1.0.0","description":"Stencil Component Starter","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/custom-elements/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/codepen-link/codepen-link.js","scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","generate":"stencil generate"},"dependencies":{"@stencil/core":"^1.17.3"},"license":"MIT","devDependencies":{"@stencil/sass":"^1.3.2"},"gitHead":"e8a1acbf513367988334f8911248dc1f189f22c8","_id":"codepen-link@1.0.0","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ekoxhx9MMwi7gnI/liQcjqFJySEszc9XOidjzvIkC3SMsjkgbF9TAvqpd61AlTl82jkNJ+MN1NSKGFtPleGk4g==","shasum":"470f35a06cebdb717a616837ba48c3cbdec95c1c","tarball":"https://registry.npmjs.org/codepen-link/-/codepen-link-1.0.0.tgz","fileCount":68,"unpackedSize":759480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX1RoCRA9TVsSAnZWagAAVO8P/1qQ/QtgOGz9qaf6fKPa\niY6gi+iY68wu6XgPHef6xmr0/wGwqhy29xk7gsu3z59vdqErQz0LxjoDJXVc\n6lN65xKjkI9/wTFEuQ5wZ2ONx1j1olrf2ezRUb0CT9/03kCm1bW35XVVNv2J\nuSbbiXfhi/qu5/zb41RNZ4n4jdcYAgYevQkQZIIZNz/wmlYZH+KHO74GH6X4\nODtG+kgoOevdAT49DRDc7sEGwRo3EnVu2tfHd5opK56DxrEqQRt9QYJZ5fg8\neIuroI3/s8p61GFTdOm5rcs2DvKPRCQpt7QwbP9yyb48v3dytcA/aaH8mDBR\ni/m97RJzwm04eLp3sDE/XQ6m/yhc/lag3mLyLb6XtDgbf2M/WsD4/MHy6UKw\nIYYnDJBd08uYFlALbJgTRdWYBjijVFSty6DYaLU4KLN93ImKWkqyW8fwexGY\nhZfcowwFp5q8bZAR4pud9JYDcZIXlBL5RaYcMYOvO9jyHe8CfmCIUbx25j4O\nnZ3k+7Y/PJsBdKSSsAp9MC7bI8nMW3KMKa77HANXfObRR0jif0+7Hhgapmj/\nxXiHQUULg0w62nhsI2OZXIdtMHG3t7GHxjm3uzzi/amzYhxf0JSlm7As1eOD\nfDApY3ONqRuz2vSZz6Rm1StgF0dYr6agVHNiwpGGwVwp0hMUcAMyTlgM/H32\n+ywN\r\n=aQUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTUBmCcoIJ2xv3ARlaqbi78YVts3nNbzDtPYWWSvHsMwIhAMu4kcuVRtX8nGYv5arfvRwpkIE3Y83e8pUvemmNLwsr"}]},"maintainers":[{"name":"seanwuapps","email":"seanwuapps@gmail.com"}],"_npmUser":{"name":"seanwuapps","email":"seanwuapps@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codepen-link_1.0.0_1600083047726_0.4621663276970296"},"_hasShrinkwrap":false},"1.0.1":{"name":"codepen-link","version":"1.0.1","description":"Web component to generate pre-filled Codepen link","repository":{"type":"git","url":"git+https://github.com/seanwuapps/codepen-link.git"},"main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/custom-elements/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/codepen-link/codepen-link.js","scripts":{"build":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","generate":"stencil generate"},"dependencies":{"@stencil/core":"^1.17.3"},"license":"MIT","devDependencies":{"@stencil/sass":"^1.3.2"},"gitHead":"46439a793ffe37dd38ae34599db916eaa14e78fc","bugs":{"url":"https://github.com/seanwuapps/codepen-link/issues"},"homepage":"https://github.com/seanwuapps/codepen-link#readme","_id":"codepen-link@1.0.1","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-rrD1+1Tx/lV4tBeo6JMZD8BU82Zy5sLGGWY0/kxovflOdqsrev2cxCxxesYfcwW/YHtkOofoO7OjY5xZwQQB6A==","shasum":"c48910a23fae904c86eef433e9bcac13cf3dcace","tarball":"https://registry.npmjs.org/codepen-link/-/codepen-link-1.0.1.tgz","fileCount":68,"unpackedSize":759566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/HGCRA9TVsSAnZWagAAHegP/ihNEomTnqZjg2v60JK1\n/a/519Q/u9ru1LhyT8IhpykUoIfWJ+IpefOyD8q8bMFiC/m2JWH08WVnzyY9\n9G/ydeJdA+6e4GBlHlUQyT2Cgc5sSH40zkynSKVINm48IpCmjQYJu/zM1G/f\nNAf0hCIquy2uKK1awfO4GsKsjZm0WIyDvD5ucISMIaxoSNhBAw1vCnlvdNnr\nhFLDgoP06VwA5Qzon2PoaB9SpIDKRjvVs6tMr66WXS6wCju1tGYo/THBFU4o\nEbbAb/Zo5fm2Z1t8yV3zyjpBVPBzJP9/VGSIbP/r9RwTLUCfQ+j8h5idnOuf\njLu8MfDnCcjU8JIMyBZgUdiAvXlM8XMqSL3NEUy295nKNoldfjH27heUHLCu\n67TmaYqOMNHqgTEpL0aEYnGTZihap+XiCsGXYAQrAXWkxbK0lt7H468GiDkG\nwsHWM5f7FEIu7FxOy1ieeTlBn2KfHwK2K9z7QqJwcVsOb6brlFljZMjJ5ZJz\nVt4I7bIax2Fyt7UXVLpGq1B4u8uf1zO1P9TM6uBxXSQlZ3kc0p4xLD466acL\npdtR82bkqw8qvw5a33oayGOmI394EEPTZ5RiObDyebS5aP9+qugsiyLlGFZS\nv5zg2H654hGznmREJiH5JpX885k2iO73l/ol8uV+Y3xxA2CAKgaCGzklD7+K\n6SVj\r\n=hndN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1zztE4305HgzX3b9NXOaXGFo/IudmfQT3dKqELPqF8AIgGa1Ae+eDN1PuvgP4HBbPSSpjm3I+cS5rMk9q989YFOw="}]},"maintainers":[{"name":"seanwuapps","email":"seanwuapps@gmail.com"}],"_npmUser":{"name":"seanwuapps","email":"seanwuapps@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/codepen-link_1.0.1_1600123334242_0.31528172014757705"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-13T11:33:38.405Z","0.0.2":"2020-09-13T11:33:38.594Z","modified":"2022-04-27T13:05:10.011Z","1.0.0":"2020-09-14T11:30:47.947Z","1.0.1":"2020-09-14T22:42:14.453Z"},"maintainers":[{"name":"seanwuapps","email":"seanwuapps@gmail.com"}],"description":"Web component to generate pre-filled Codepen link","license":"MIT","readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)\n\n# `codepen-link`\n\n[Codepen](https://codepen.io/) is an awesome tool to showcase a piece of front-end code. Did you know there is a way to dynamically create a pen with pre-filled code?\n\nCodepen has an amazing API to allow developers do this, however the way to do it is via submitting a `form`. The `codepen-link` component simplifies this set up. \n\n\n## Usage\n\n```html\nHello world\"\n title=\"Open in CodePen\"\n pen-title=\"New demo pen\"\n editors=\"110\"\n css-preprocessor=\"scss\"\n css=\"body{ font-family: 'Open Sans', sans-serif; }\"\n css-external=\"//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700\"\n js-external=\"https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js\"\n>\n \n\n```\n\n\n## Installation\n\n### CDN\n\n```html\n\n\n```\n\nadd the script tags in your html and the component will get lazy loaded when it's used on the page.\n\n### Framework integration\nPlease see [framework integration](https://stenciljs.com/docs/overview) in the Stencil documentation.\n\n### Node Modules\n\n- Run `npm install codepen-link --save`\n- Put a script tag similar to this `` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n\n- Run `npm install codepen-link --save`\n- Add an import to the npm packages `import 'codepen-link';`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- |\n| `css` | `css` | CSS code | `string` | `''` |\n| `cssExternal` | `css-external` | semi-colon separate multiple files | `string` | `''` |\n| `cssPreProcessor` | `css-pre-processor` | CSS preprocessor | `\"less\" \\| \"none\" \\| \"sass\" \\| \"scss\" \\| \"stylus\"` | `'none'` |\n| `cssPrefix` | `css-prefix` | CSS prefix | `\"autoprefixer\" \\| \"neither\" \\| \"prefixfree\"` | `'neither'` |\n| `cssStarter` | `css-starter` | CSS reset or normalisation | `\"neither\" \\| \"normalize\" \\| \"reset\"` | `'neither'` |\n| `description` | `description` | Description of new pen | `string` | `''` |\n| `editors` | `editors` | Set which editors are open. In this example HTML open, CSS closed, JS open | `string` | `'111'` |\n| `head` | `head` | Code that should go inside | `string` | `''` |\n| `html` | `html` | HTML code | `string` | `'

Generated by <codepen-link>

'` |\n| `htmlClasses` | `html-classes` | HTML classes | `string` | `''` |\n| `htmlPreProcessor` | `html-pre-processor` | HTML preprocessor | `\"haml\" \\| \"markdown\" \\| \"none\" \\| \"slim\"` | `'none'` |\n| `isPrivate` | `is-private` | When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public | `boolean` | `false` |\n| `js` | `js` | JavaScript code | `string` | `''` |\n| `jsExternal` | `js-external` | semi-colon separate multiple files | `string` | `''` |\n| `jsPreProcessor` | `js-pre-processor` | JavaScript preprocessor | `\"babel\" \\| \"coffeescript\" \\| \"livescript\" \\| \"none\" \\| \"typescript\"` | `'none'` |\n| `layout` | `layout` | Layout of the new pen | `\"left\" \\| \"right\" \\| \"top\"` | `'top'` |\n| `parent` | `parent` | If supplied, the Pen will save as a fork of this id. Note it's not the slug, but ID. You can find the ID of a Pen with `window.CP.pen.id` in the browser console. | `string` | `''` |\n| `penTitle` | `pen-title` | Title of new pen | `string` | `'New Pen'` |\n| `tags` | -- | an array of strings | `string[]` | `[]` |\n\n\n----------------------------------------------","readmeFilename":"readme.md","homepage":"https://github.com/seanwuapps/codepen-link#readme","repository":{"type":"git","url":"git+https://github.com/seanwuapps/codepen-link.git"},"bugs":{"url":"https://github.com/seanwuapps/codepen-link/issues"}}