Demobox is a quick & stylish way of getting a demo page up and running for your new react component.

There are three ways to use demobox, for varying simplicity and flexibility.

demo page generator -- markdown to demo page converter
drop-in script -- turn text boxes into live editors
react component -- integrate a live editor into your project

Take a look at the FAQ at the bottom, or head over to github to file an issue or ask a question.

Demo Page Generator

The demobox cli tool will turn a regular markdown file with annotated code snippets into a stylish demo page with editable examples. You can look at the markdown source for this page here as an example. Also the source for the demo page (demo.md) showcases a number of features.

$ npm install -g demobox
$ demobox -i demo.md -o demo.html

`demo.md` (||)

---
title: Demobox Demos
subtitle: Getting rather meta
fontPair: Open Sans
colors: light-green
links:
  Home: index.html
  Demos: demos.html
  Themes: themes.html
  Github: https://github.com/jaredly/demobox
---

# First example

``ˋjavascript
// @demobox height=150px
var first = 'javascript code'
  , second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
  <span>{second} </span><br/>
  <strong>JSX is just fine</strong>
</p>
``ˋ

... etc.

`demo.html` rendered page (||)

Configuration

These go in the yaml frontmatter (similar to jekyll) at the top of the markdown file.

title: the title of the page (default: Demo Page)
subtitle: the subtitle (default: none)
links: a map of title:href for links displayed in the header
styles: a list of css files to include on the page
scripts: a list of js files to include
extraHead: a list of html files to inject at the end of the head
bodyTop: a list of html files to inject at the top of the body
ga: google analytics tracking code. If present, GA code is added to the bottom of the page.

Themes

There are two configuration options associated with theming, colors and fontPair. Look at the themes page for examples and more information.

Special Headings

There are a few suffixes you can put onto headings that will give them extra properties (See the markdown source of this page for an example).

(<<) marks the section as collapsed
(>>) marks the section as collapsible but expanded
(||) makes the section part of a column group. Adjascent sections (of the same heading level) that have this marking will be rendered side-by-side. An example of this is the demo.md and "demo.html rendered page" sections above.

The `demobox.js` drop-in script

Included in the `<head>`

<!-- if you want codemirror, that needs to be included separately -->
<script src="https://jaredly.github.io/demobox/demobox.js"></script>
<link rel="stylesheet" href="https://jaredly.github.io/demobox/demobox.css">

Markup in the page

<textarea data-demobox>
// some great code here
var x = <em>element</em>;

<strong>End with a react {x}</strong>
</textarea>

Rendered as a demobox

The demobox.js script finds all textareas with the data-demobox attribute and converts them into demoboxes that look like this:

// @demobox
// some great code here
var x = <em>element</em>;

<strong>End with a react {x}</strong>

Configuration options can be given as data-* attributes on the textarea. Look at the html source of this page (and the demo page) for example usage.

As a react component

If you install the demobox library from npm (npm install -S demobox) then you can use the DemoBox react component in your project.

In this demobox, you can play with the DemoBox component :).

// @demobox
var value = `\
<strong>
  It's demoboxes all the way down...
</strong>
`;

// Try changing position to left, right
// or top, and codeMirror to false
<DemoBox
    position='bottom'
    header={true}
    style={{width: 360}}
    codeMirror={true}
    initialValue={value}/>

FAQ

Why not use jekyll / some other static site generator?

Demobox is for quick and simple jobs, and requires very little configuration to get something usable and beautiful. You don't have time to set up a full-blown website for each little component you create, but you want a way to show the world what you've done in a classy way.

Why not use jsfiddle / plunkr / codepen for embedding editable code snippets?

Demobox works with vesion control; jsfiddle etc. does not. Demobox also has first-class support for JSX and React components (and support for HTML/CSS coming soon!).

robhrt7 / demobox Goto Github PK

demobox's Introduction

Demobox is a quick & stylish way of getting a demo page up and running for your new react component.

Demo Page Generator

demo.md (||)

demo.html rendered page (||)

Configuration

Themes

Special Headings

The demobox.js drop-in script

Included in the <head>

Markup in the page

Rendered as a demobox

As a react component

FAQ

Why not use jekyll / some other static site generator?

Why not use jsfiddle / plunkr / codepen for embedding editable code snippets?

demobox's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org

`demo.md` (||)

`demo.html` rendered page (||)

The `demobox.js` drop-in script

Included in the `<head>`