Glorious Demo

The easiest way to demonstrate your code in action.

Installation

npm install @glorious/demo --save

Basic Usage

<link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css">
<script src="node_modules/@glorious/demo/dist/gdemo.min.js"></script>

Note: If you're not into package management, load it from a third-party CDN provider.

// Constructor receives a selector that indicates
// where to inject the demonstration in your page.
const demo = new GDemo('#container');

const code = `
function greet(){
  console.log("Hello World!");
}

greet();
`

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
  .write(code, {onCompleteDelay: 1500})
  .openApp('terminal', {minHeight: '350px', promptString: '$'})
  .command('node ./demo', {onCompleteDelay: 500})
  .respond('Hello World!')
  .command('')
  .end();

NOTE: Check here to know how to use Prism to get your code highlighted.

API

`openApp`

Opens or maximizes an open application.

/*
** @applicationType: String [required]
** @options: Object [optional]
*/

// Possible values are 'editor' or 'terminal'
const applicationType = 'terminal';

const openAppOptions = {
  minHeight: '350px',
  windowTitle: 'bash',
  promptString: '~/my-project $', // for 'terminal' applications only
  onCompleteDelay: 1000 // Delay before executing the next method
}

demo.openApp(applicationType, openAppOptions).end();

`write`

Writes some code in the open Editor application.

/*
** @codeSample: String [required]
** @options: Object [optional]
*/

// Tabs and line breaks will be preserved
const codeSample = `
function sum(a, b) {
  return a + b;
}

sum();
`;

const writeOptions = {
  onCompleteDelay: 500 // Delay before executing the next method
}

demo.openApp('editor').write(codeSample, writeOptions).end();

`command`

Writes some command in the open Terminal application.

/*
** @command: String [required]
** @options: Object [optional]
*/

const command = 'npm install @glorious/demo --save';

// Redefines prompt string for this and following commands
const promptString = '$'

// Can optionally be an HTML string:
const promptString = '<span class="my-custom-class">$</span>'

const commandOptions = {
  promptString,
  onCompleteDelay: 500 // Delay before executing the next method
}

demo.openApp('terminal').command(command, commandOptions).end();

`respond`

Shows some response on the open Terminal application.

/*
** @response: String [required]
** @options: Object [optional]
*/

// Line breaks will be preserved
const response = `
+ @glorious/demo successfully installed!
+ v0.1.0
`;

// Can optionally be an HTML string:
const response = `
<div><span class="my-custom-class">+</span> @glorious/demo successfully installed!</div>
<div><span class="my-custom-class">+</span> v0.6.0</div>
`;

const respondOptions = {
  onCompleteDelay: 500 // Delay before executing the next method
}

demo.openApp('terminal').respond(response, respondOptions).end();

`end`

Indicates the end of the demonstration. Do not forget to invoke it at the end of your demo. Otherwise, the demo won't be played.

Contributing

Install Node. Download the "Recommend for Most Users" version.
Clone the repo:

git clone git@github.com:rafaelcamargo/glorious-demo.git

Go to the project directory:

cd glorious-demo

Install the project dependencies:

npm install

Build the project:

npm run build

Tests

Ensure that all code that you have added is covered with unit tests:

npm run test