Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 9.7 KB

readme.md

File metadata and controls

80 lines (59 loc) · 9.7 KB
Raw

Built With Stencil

codepen-link

Codepen 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

<codepen-link
  html="<h1>Hello world</h1>"
  title="Open in CodePen"
  pen-title="New demo pen"
  editors="110"
  css-preprocessor="scss"
  css="body{ font-family: 'Open Sans', sans-serif; }"
  css-external="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
  js-external="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js"
>
  <button type="button">Click me view in Codepen</button>
</codepen-link>

Installation

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js"></script>

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 in the Stencil documentation.

Node Modules

  • Run npm install codepen-link --save
  • Put a script tag similar to this <script src='node_modules/codepen-link/dist/codepen-link.js'></script> 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 '<p>Generated by &lt;codepen-link&gt;</p>'
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[] []