Codepen Upload

Upload a local demo to codepen

This is an opinionated CLI application that uploads a local demo to codepen. A demo is expected to consist of a particular set of files:

• HTML and frontmatter metadata (title, description, external libraries used) contained in index.njk,
• CSS contained in styles.css (optional),
• JavaScript contained in script.js(optional).

The application is limited because Codepen only offers a prefill form method. The application actually creates a new, unsaved pen from your data. You will need to be logged into codepen to save the pen to your account.

You can read my blog post for more info.

Installation

You can run it locally as a command by doing the following:

git clone https://codeberg.org/robole/codepen-upload-cli.git
npm link 

The npm link command adds it to your system's bin directory to enable it to be run as an exectuable. Other package managers have an equivalent e.g pnpm link.

I will not be publishing this to npm.

Usage

You must provide the filepath to the demo folder as an argument.

  codepen-upload <filepath>

Maintenance

I consider this project complete. It is not open to contributions.

You are welcome to fork the project. You can look at codepen-prefill for a more generic approach.

Pseudocode

1. Create a temporary HTML page that has a form. Populate a hidden input field with the data from the local demo files. The data should be encoded/escaped to ensure it is valid HTML.
2. Embed some JavaScript in the page that will submit the form when the page loads.
3. Open the page in a browser (whatever your default app to handle .html file) is. The web form will be submitted.
4. The page should redirect to codepen with a pen that has your demo data.

Attribution

I took some inspiration from codepen-prefill by yuanchuan.