codesandbox-example-links

Codesandbox Example Links 
-----------

A CLI/API to replace magic placeholders in a markdown files with:

- iframe with a codesandbox project
- "Run this example" link to a codesandbox project
- code snippet extracted from a file on a file system

Example

Given the following project structure:

``
.
├── demo-project
│   ├── index.html
│   ├── package.json
│   └── src
│   ├── app.jsx
│   └── index.js
├── docs
│   └── README.md
`

Where docs/README.md looks like this:

`markdown


An Example

view code

codesanbox

`

Then running:

`sh
npx codesandbox-example-links --output-dir=. ./docs/README.md
`

Will produce a ./README.md with the following contents:

## An Example

`js
import * as hyperdom from "hyperdom";
import App from "./app";

hyperdom.append(document.body, new App());

`

Run this example



$3

https://hyperdom.org

Usage

- manually create sandbox for your example
- download it into your project
- insert magic links in markdown files
- repeat for all examples
- npx codesandbox-example-links --output-dir=./dist docs/*.md

The above command renders links. Add --iframe option to generate iframes instead.

$3

codesanbox - turns into either link or an iframe, depending on --iframe option

view code - turns into a code snippet containing file.js

view code - turns into a code snippet containing a fragment of file.js starting at line 3 onwards

view code - turns into a code snippet containing a fragment of file.js, lines 3 to 10

$3

`js
const generateLinks = require('codesandbox-example-links')

const input = fs.readFileSync('readme.md', {encoding: 'utf-8'})
const output = generateLinks(input, {iframe: true})
`

$3

As of this writing, codesandbox api is sort of short on validation errors. So if generated links don't work, you might find some additional debug info useful. Set DEBUG=codesandbox-example-links` to get some.