Atom to CodePen

Atom to CodePen is an Atom.io package that takes the HTML file your working on and turns it into a CodePen! I made this because I'm trying to create 100 CodePen demos for my computer vision JS library, SeeClarke.js, so that I could in turn use that to help people with disabilities use the web.

How it Works

Atom to CodePen scans the active editor for three main components:

YAML Front Matter
<script> tags without a src attribute
<style> tags

The YAML Front Matter is used to set your CodePen's properties and sits at the very beginning of the file, here are all the properties you can pass:

---
title: "New Pen!",
description: "It's about stuff.",
private: false, # true || false - When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public 
parent: id # 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. 
tags: ["tag1", "tag2"], # an array of strings 
editors: "101", # Set which editors are open. In this example HTML open, CSS closed, JS open 
layout: "left", # top | left | right 
html: "<div>HTML here.</div>",
html_pre_processor: "none" || "slim" || "haml" || "markdown",
css: "html { color: red; }",
css_pre_processor: "none" || "less" || "scss" || "sass" || "stylus",
css_starter: "normalize" || "reset" || "neither",
css_prefix: "autoprefixer" || "prefixfree" || "neither",
js: "alert('test');",
js_pre_processor: "none" || "coffeescript" || "babel" || "livescript" || "typescript",
html_classes: "loading",
head: "<meta name='viewport' content='width=device-width'>",
css_external: "http://yoursite.com/style.css", # semi-colon separate multiple files 
js_external: "http://yoursite.com/script.js" # semi-colon separate multiple files 
---

The package will then scan the rest of the file for <script> without a src attribute and <style> tags, and populates the css and js properties above. All the rest of the content will go into the html property.

Here's a simple example file:

---
title: Hello World
description: This will be shown in the CodePen's description field
---
<ul>
  <li>List Item A
  <li>List Item B
  <li>List Item C
</ul>
 
<script>
  console.log(`There are ${document.getElementsByTagName('li').length} list items!`)
</script> 
 
<style>
  body {
    background: #0f0;
    color: #fff;
  }
</style>

Which generates this CodePen:

Installing

CTRL + SHIFT + P
Type "install package" and hit ENTER
Type "atom to codepen" in the search

Open Atom
Open the Install Packages/Themes by click Packages --> Settings View and select Install Packages/Themes
Select Install on the Settings menu
Type composer-atom-plugin or composer-* in the Packages search field and you should see the composer-atom-plugin on the list

Usage

Via Menu: Packages > Atom to CodePen > Export to CodePen

Via Command Paletted: CTRL + P + "to codepen"

Via Keyboard Shortcut: CTRL + SHIFT + F12

Notes

Uses lazy loading, so this doesn't slow down startup when you're not using it
Documented unit tests so it should...just...✨...work!

Roadmap

https://github.com/labofoz/Atom-to-CodePen/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement

Donating

Please consider making a small donation to https://cash.me/$heyozramos to support this and future projects, see my end game here: https://twitter.com/LabOfOz/status/1021501116486438919

atom-to-codepen