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. The method returns a promise in case you want to perform some action at the end of the demonstration.
demo.openApp('terminal')
.command('node demo')
.respond('Hello World!')
.end()
.then(() => {
// Custom code to be performed at the end of the demostration goes here.
});
IMPORTANT: 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:glorious-codes/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 -- --coverage