https://github.com/seanwuapps/codepen-link
easily create a codepen link with pre-filled code
https://github.com/seanwuapps/codepen-link
Last synced: 3 months ago
JSON representation
easily create a codepen link with pre-filled code
- Host: GitHub
- URL: https://github.com/seanwuapps/codepen-link
- Owner: seanwuapps
- License: mit
- Created: 2020-09-13T11:16:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-14T22:42:30.000Z (almost 5 years ago)
- Last Synced: 2025-03-21T13:45:23.725Z (4 months ago)
- Language: TypeScript
- Size: 15.6 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# `codepen-link`
[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?
Codepen 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.
## Usage
```html
Click me view in Codepen
```
## Installation
### CDN
```html
```
add the script tags in your html and the component will get lazy loaded when it's used on the page.
### Framework integration
Please see [framework integration](https://stenciljs.com/docs/overview) in the Stencil documentation.
### Node Modules
- Run `npm install codepen-link --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install codepen-link --save`
- Add an import to the npm packages `import 'codepen-link';`
- Then you can use the element anywhere in your template, JSX, html etc
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------- |
| `css` | `css` | CSS code | `string` | `''` |
| `cssExternal` | `css-external` | semi-colon separate multiple files | `string` | `''` |
| `cssPreProcessor` | `css-pre-processor` | CSS preprocessor | `"less" \| "none" \| "sass" \| "scss" \| "stylus"` | `'none'` |
| `cssPrefix` | `css-prefix` | CSS prefix | `"autoprefixer" \| "neither" \| "prefixfree"` | `'neither'` |
| `cssStarter` | `css-starter` | CSS reset or normalisation | `"neither" \| "normalize" \| "reset"` | `'neither'` |
| `description` | `description` | Description of new pen | `string` | `''` |
| `editors` | `editors` | Set which editors are open. In this example HTML open, CSS closed, JS open | `string` | `'111'` |
| `head` | `head` | Code that should go inside | `string` | `''` |
| `html` | `html` | HTML code | `string` | `'
Generated by <codepen-link>
'` |
| `htmlClasses` | `html-classes` | HTML classes | `string` | `''` |
| `htmlPreProcessor` | `html-pre-processor` | HTML preprocessor | `"haml" \| "markdown" \| "none" \| "slim"` | `'none'` |
| `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` |
| `js` | `js` | JavaScript code | `string` | `''` |
| `jsExternal` | `js-external` | semi-colon separate multiple files | `string` | `''` |
| `jsPreProcessor` | `js-pre-processor` | JavaScript preprocessor | `"babel" \| "coffeescript" \| "livescript" \| "none" \| "typescript"` | `'none'` |
| `layout` | `layout` | Layout of the new pen | `"left" \| "right" \| "top"` | `'top'` |
| `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` | `''` |
| `penTitle` | `pen-title` | Title of new pen | `string` | `'New Pen'` |
| `tags` | -- | an array of strings | `string[]` | `[]` |
----------------------------------------------