Glorious Demo

The easiest way to demonstrate your code in action.

Installation

npm install @glorious/demo --save

Basic Usage

1<link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css">
2<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.

1// Constructor receives a selector that indicates
2// where to inject the demonstration in your page.
3const demo = new GDemo('#container');
4
5const code = `
6function greet(){
7  console.log("Hello World!");
8}
9
10greet();
11`
12
13demo
14  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
15  .write(code, {onCompleteDelay: 1500})
16  .openApp('terminal', {minHeight: '350px', promptString: '$'})
17  .command('node ./demo', {onCompleteDelay: 500})
18  .respond('Hello World!')
19  .command('')
20  .end();

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

API

openApp

Opens or maximizes an open application.

1/*
2** @applicationType: String [required]
3** @options: Object [optional]
4*/
5
6// Possible values are 'editor' or 'terminal'
7const applicationType = 'terminal';
8
9const openAppOptions = {
10  minHeight: '350px',
11  windowTitle: 'bash',
12  id: 'someId', // Identifies an application, in case of multiple instances
13  inanimate: true, // Turns off application's window animation
14  promptString: '~/my-project $', // For 'terminal' applications only
15  initialContent: 'Some text', // For 'editor' applications only
16  onCompleteDelay: 1000 // Delay before executing the next method
17}
18
19demo.openApp(applicationType, openAppOptions).end();

write

Writes some code in the open Editor application.

1/*
2** @codeSample: String [required]
3** @options: Object [optional]
4*/
5
6// Tabs and line breaks will be preserved
7const codeSample = `
8function sum(a, b) {
9  return a + b;
10}
11
12sum();
13`;
14
15const writeOptions = {
16  id: 'someId', // Identifies an application, in case of multiple instances
17  onCompleteDelay: 500 // Delay before executing the next method
18}
19
20demo.openApp('editor').write(codeSample, writeOptions).end();

command

Writes some command in the open Terminal application.

1/*
2** @command: String [required]
3** @options: Object [optional]
4*/
5
6const command = 'npm install @glorious/demo --save';
7
8// Redefines prompt string for this and following commands
9const promptString = '$'
10
11// Can optionally be an HTML string:
12const promptString = '<span class="my-custom-class">$</span>'
13
14const commandOptions = {
15  id: 'someId', // Identifies an application, in case of multiple instances
16  promptString, // Sets a custom string. Default: ~/demo $
17  onCompleteDelay: 500 // Delay before executing the next method
18}
19
20demo.openApp('terminal').command(command, commandOptions).end();

respond

Shows some response on the open Terminal application.

1/*
2** @response: String [required]
3** @options: Object [optional]
4*/
5
6// Line breaks will be preserved
7const response = `
8+ @glorious/demo successfully installed!
9+ v0.1.0
10`;
11
12// Can optionally be an HTML string:
13const response = `
14<div><span class="my-custom-class">+</span> @glorious/demo successfully installed!</div>
15<div><span class="my-custom-class">+</span> v0.6.0</div>
16`;
17
18const respondOptions = {
19  id: 'someId', // Identifies an application, in case of multiple instances
20  onCompleteDelay: 500 // Delay before executing the next method
21}
22
23demo.openApp('terminal').respond(response, respondOptions).end();

end

Indicates the end of the demonstration. The method returns a promise in case you want to perform some action at the end of the demonstration.

1demo.openApp('terminal')
2    .command('node demo')
3    .respond('Hello World!')
4    .end()
5    .then(() => {
6      // Custom code to be performed at the end of the demostration goes here.
7    });

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

Contributing

1. Install Node. Download the "Recommend for Most Users" version.

2. Clone the repo:

1git clone git@github.com:glorious-codes/glorious-demo.git

3. Go to the project directory:

1cd glorious-demo

4. Install the project dependencies:

1npm install

5. Build the project:

1npm run build

Tests

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

1npm run test -- --coverage